hybrid cordova+vue开发APP 环境搭建 _VUE开发

人生处万类,知识最为贤。这篇文章主要讲述hybrid cordova+vue开发APP 环境搭建相关的知识，希望能为你提供帮助。

没有选择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< script type="text/javascript" src="https://www.songbingjia.com/android/cordova.js"> < /script> 将www目录下index.html中meta标签复制至根目录下index.html文件，即增加： < meta http-equiv="Content-Security-Policy" content="default-src \'self\' data: gap: https://ssl.gstatic.com \'unsafe-eval\'; style-src \'self\' \'unsafe-inline\'; media-src *; img-src \'self\' data: content:; "> < meta name="format-detection" content="telephone=no"> < meta name="msapplication-tap-highlight" content="no"> < meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 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 ioscordova 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 buildnpm 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项目已经上线，我将会持续写教程和躺过的一些坑。

【hybrid cordova+vue开发APP 环境搭建】