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的开发环境）
...
