热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

hybridcordova+vue开发APP(一)环境搭建

没有选择react-navite,而选择cordova+vue2.x,是因为react-navite有学习成本,并且cordova+vue2.x程序员可以直接上手,性能上可以满足需求,成本
 没有选择react-navite,而选择cordova+vue2.x,是因为react-navite有学习成本,并且cordova+vue2.x程序员
 可以直接上手,性能上可以满足需求,成本低,开发速度快。

安装所需软件

    安装node.js,官网下载,傻瓜式安装,安装成功截图
    
    安装vue,自行百度,成功截图
    
安装cordova

 

    安装成功截图:
    

 

    安装JDK
    

 

5 安装SDK studio等 稍微详细记录
    

 


新建项目与打包

    新建项目

创建一个名字为hello 包名为com.lex.hello的项目

cordova create hello com.lex.hello


    在cordoa里新建vue项目

vue init webpack


 


 



    启动vue web项目

npm run dev


    修改配置
    cordova 默认访问路径为根目录下www文件夹
    

 


    所以我们需要修改打包默认路径:
    

 



在根目录:index.html增加引入cordova.js




将www目录下index.html中meta标签复制至根目录下index.html文件,即增加:

 
 
 
 


    git配置
    修改根目录下.gitinore文件,切记一定要忽略,否则多人会遇到很多问题,遇到过很多坑:

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
 
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
 
*~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/
 
.idea/
.sass-cache/
.tmp/
.versions/
coverage/
tmp/
temp/
hooks/
platforms/
plugins/
plugins/android.json
plugins/ios.json
www/
$RECYCLE.BIN/
 
Thumbs.db
UserInterfaceState.xcuserstate


    编译和运行
    执行cordova命令,添加andorid和ios插件,切记在根目录执行

cordova platform add ios


cordova platform add android

编译:

npm run build


为了节省时间,不用每次编译,安装,package.json:

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build android": "npm run build && cordova build android",
    "build ios": "npm run build && cordova build ios",
    "android": "npm run build && cordova run android --device",
    "ios": "npm run build && cordova run ios --device"
},


    命令详细讲解

build命令,讲项目编译至根目录www下,cordova默认访问

npm run build


npm run android命令 最最常用,查看上面配置文件,是执行了npm run build && cordova run android --device两个命令
编译并安装至手机

npm run android


不编译 直接安装至手机执行

cordova run android


安装之时 要连接手机 手机开启USB调试模式

    总结
    写此文章主要深受此https://blog.csdn.net/liujiawei00/article/details/79446231小仙女影响,再此深表感谢。
    以后我也会坚持写博客,目前项目cordova项目已经上线,我将会持续写教程和躺过的一些坑。

 


推荐阅读
  • Jboss的EJB部署描述符standardjaws.xml配置步骤详解
    本文详细介绍了Jboss的EJB部署描述符standardjaws.xml的配置步骤,包括映射CMP实体EJB、数据源连接池的获取以及数据库配置等内容。 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • OAuth2.0指南
    引言OAuth2.0是一种应用之间彼此访问数据的开源授权协议。比如,一个游戏应用可以访问Facebook的用户数据,或者一个基于地理的应用可以访问Foursquare的用户数据等。 ... [详细]
  • 本文介绍了在Python3中如何使用选择文件对话框的格式打开和保存图片的方法。通过使用tkinter库中的filedialog模块的asksaveasfilename和askopenfilename函数,可以方便地选择要打开或保存的图片文件,并进行相关操作。具体的代码示例和操作步骤也被提供。 ... [详细]
  • 使用Ubuntu中的Python获取浏览器历史记录原文: ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 本文介绍了在Mac上搭建php环境后无法使用localhost连接mysql的问题,并通过将localhost替换为127.0.0.1或本机IP解决了该问题。文章解释了localhost和127.0.0.1的区别,指出了使用socket方式连接导致连接失败的原因。此外,还提供了相关链接供读者深入了解。 ... [详细]
  • Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中,如Kubernetes、Hugo和Github CLI等。通过使用Cobra,我们可以快速创建命令行工具,适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • 本文介绍了如何使用C#制作Java+Mysql+Tomcat环境安装程序,实现一键式安装。通过将JDK、Mysql、Tomcat三者制作成一个安装包,解决了客户在安装软件时的复杂配置和繁琐问题,便于管理软件版本和系统集成。具体步骤包括配置JDK环境变量和安装Mysql服务,其中使用了MySQL Server 5.5社区版和my.ini文件。安装方法为通过命令行将目录转到mysql的bin目录下,执行mysqld --install MySQL5命令。 ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • vuecli安装错误的记录
    错误是由于想升级vue-cli引起的npmERR!Invalidtagname@vue-cli:TagsmaynothaveanycharactersthatencodeURICo ... [详细]
  • vuecli创建项目(详情步骤)
    1、安装node环境2、下载vue和vue-cli脚手架命令行输入npm ... [详细]
  • 前言:原本纠结于Web模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中ev ... [详细]
author-avatar
CL_LC的小屋花_344
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有