1村生、安裝node.js
2、安裝vue-cli腳手架構(gòu)建工具
npm install -g vue-cli
3妻熊、用vue-cli構(gòu)建項(xiàng)目
vue init webpack <目錄名稱>
配置內(nèi)容如下:
? Project name <項(xiàng)目名稱>
? Project description <項(xiàng)目描述>
? 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夸浅、運(yùn)行vue項(xiàng)目
cd <目錄名稱>
npm run dev
5、安裝Cordova CLI
npm install -g cordova
6扔役、用Cordova CLI構(gòu)建項(xiàng)目
命令行:cordova create hello com.example.hello HelloWorld
參數(shù)說明:
第一個(gè)參數(shù) hello 為工程的文件夾名帆喇;
第二個(gè)參數(shù)(可選)com.example.hello 為應(yīng)用程序的id名,可以在 config.xml 中修改亿胸,如果不指定的話默認(rèn)為 io.cordova.hellocordova坯钦;
第三個(gè)參數(shù)(可選)HelloWorld 為App顯示的名稱,也可在 config.xml 中修改侈玄。
7婉刀、修改Vue項(xiàng)目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項(xiàng)目中運(yùn)行build命令
npm run build
9序仙、Cordova項(xiàng)目的index.html添加cordova.js
<script type=text/javascript src=cordova.js></script>
10突颊、Cordova項(xiàng)目中add platforms
cordova platforms add browser
cordova platforms add android
cordova platforms add ios
<根據(jù)情況自行添加>
11、運(yùn)行Cordova項(xiàng)目
cordova run browser
cordova run android(如果運(yùn)行到android上,需要安裝Android Studio的開發(fā)環(huán)境)
...