cordova + vue-cli (1)
安装
首先保证装了node,然后提前下好android开发的那堆东西,jdk,java等等
接着安装 vue-cli,cordova
npm install -g vue-cli
npm install -g cordova
创建
创建cordova项目
cordova create MyApp
创建vue项目,注意选项,把不需要的尽量选no.
vue init webpack Myvue
将vue项目的文件目录都复制到MyApp文件里,注意有几个隐藏文件,别落下.
或者可以把cordova项目复制到vue项目里.
对vue项目的一些配置更改.
原来生成路径的dist改成www: 在config/index.js下
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../www/index.html'),
assetsRoot: path.resolve(__dirname, '../www'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// ...
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
原本cordova项目的www文件,直接删掉也无妨.
文件路径,都改成相对路径. 比如原来的/static/img/xxx.png 需要改成./static/img/xxx.png,如果是样式里写的背景图,需要将样式在template里用:style处理.如下
<div :stype="backimg">...</div>
...
data(){
return {
backimg:{
background: 'url(' + require('./static/img/xxx.png') + ') no-repeat center/cover'
}
}
}
package.json的配置,把命令简写一下
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"ios": "cordova prepare ios && cordova run ios",
"android": "cordova prepare android && cordova run android"
},
vue下的main.js,要引入cordova.js
if (window.location.protocol === 'file:' || window.location.port === '3000') {
var cordovaScript = document.createElement('script')
cordovaScript.setAttribute('type', 'text/javascript')
cordovaScript.setAttribute('src', 'cordova.js')
document.body.appendChild(cordovaScript)
}
添加平台
cd MyApp
cordova platform add browser,android,ios
试运行
在MyApp下运行
npm run dev // 浏览器运行,一般会一直开启.
npm run build //在www目录下生成压缩文件,属于第二步,打包
npm run ios // 用ios虚拟机跑
npm run android //用android虚拟机跑
android,有时需要安装android studio,用他打开项目对应的android平台后,然后配置一通虚拟机什么的.配置完成,再执行npm run android,或者直接用adroid studio跑也行.
添加与使用cordova插件
先推荐一个插件 vue-cordova,在gayhub上搜一下,能找到使用方法.
npm i vue-cordova --save
添加/卸载cordova插件命令,卸载执行完记得在config.xml里,把这个插件的配置删掉,要不下次cordova build的时候就又加上去了
cordova plugin add/remove cordova-plugin-device --save