Vue+Cordova环境搭建

1、安装node.js

2、安装vue-cli脚手架构建工具

npm install -g vue-cli

3、用vue-cli构建项目

vue init webpack <目录名称>
配置内容如下：
? Project name <项目名称>
? Project description <项目描述> 
? Author <作者>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

4、运行vue项目

cd <目录名称>
npm run dev

5、安装Cordova CLI

npm install -g cordova

6、用Cordova CLI构建项目

命令行：cordova create hello com.example.hello HelloWorld
参数说明：
第一个参数 hello 为工程的文件夹名；
第二个参数（可选）com.example.hello 为应用程序的id名，可以在 config.xml 中修改，如果不指定的话默认为 io.cordova.hellocordova；
第三个参数（可选）HelloWorld 为App显示的名称，也可在 config.xml 中修改。

7、修改Vue项目config/index.js的build命令

修改前

build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  bundleAnalyzerReport: process.env.npm_config_report
},

修改后

build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../../corodva_project/www/index.html'),
  assetsRoot: path.resolve(__dirname, '../../corodva_project/www'),
  assetsSubDirectory: '',
  assetsPublicPath: '',
  productionSourceMap: true,
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  bundleAnalyzerReport: process.env.npm_config_report
},

8、Vue项目中运行build命令

npm run build

9、Cordova项目的index.html添加cordova.js

<script type=text/javascript src=cordova.js></script>

10、Cordova项目中add platforms

cordova platforms add browser
cordova platforms add android
cordova platforms add ios
<根据情况自行添加>

11、运行Cordova项目

cordova run browser
cordova run android（如果运行到android上，需要安装Android Studio的开发环境）
...