转载请注明出处：http://www.cnblogs.com/shamoyuu/p/vue_vux.html
项目github地址：https://github.com/shamoyuu/vue-vux-iconan
首先新建一个cordova项目，然后添加安卓环境
cordova create iconan meleong.duapp.com iconan
cd iconan
cordova platform add android
在这个目录下有一个www文件夹，cordova打包的时候会把它打包进去，打开app后，会自动以file://协议载入index.html文件
所以我们在这里写我们自己的html页面，然后cordova负责打包成app。
然后跟cordova项目同级，新建一个vue项目
vue init webpack iconan-web
然后一路回车，把几个代码检查和单元测试选N
然后执行npm run build，就可以把文件都打包到dist文件夹下。
我们打开dist文件夹，发现有个index.html文件，双击打开就可以预览我们的vue-app了。
然后我们把dist文件夹下的所有文件都复制到上面cordova项目的www文件夹下，
然后连上手机，执行cordova run android，就可以把我们的vue项目打包的app安装到手机上调试了。
当然我们不能每次都这么麻烦，这简直要了命了，我们把build的路径调整到cordova的www文件夹。
打开config/index.js
修改build下的配置
index: path.resolve(__dirname, '../../iconan/www/index.html'),
assetsRoot: path.resolve(__dirname, '../../iconan/www'),
assetsSubDirectory: '',
assetsPublicPath: '',
这样我们先在iconan-web项目里build，然后在iconan项目里run android就可以了。
不过还是有点麻烦，我们继续用gulp继续整合这一步。
首先添加gulp
npm install gulp --save-dev
然后新建一个gulpfile.js文件，我们先写一个打包任务（这个文件里的大部分代码都是直接照搬build.js文件里的）。
'use strict'
require('./build/check-versions')();
const gulp = require('gulp');
process.env.NODE_ENV = 'production';
const ora = require('ora');
const rm = require('rimraf');
const path = require('path');
const chalk = require('chalk');
const webpack = require('webpack');
const config = require(process.cwd() + '/config');
const webpackConfig = require(process.cwd() + '/build/webpack.prod.conf');
const minimist = require('minimist');
const gutil = require('gulp-util');
const src = process.cwd() + '/src';
const assets = process.cwd() + '/dist';
gulp.task('pack', function () {
console.info(config.build);
let spinner = ora('正在打包，请稍后...');
spinner.start();
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err;
webpack(webpackConfig, (err, stats) => {
spinner.stop();
if (err) throw err;
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false,
chunkModules: false
}) + '\n\n');
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'));
process.exit(1);
}
console.log(chalk.cyan(' Build complete.\n'));
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
//↑↑↑上面的基本上都是build.js文件里的内容
})
})
});
我们希望在gulp执行完webpack的任务后，继续执行cordova的打包任务，所以我们先在iconan-web项目里新建一个cordova文件夹，然后把iconan文件夹里所有内容复制进来（记得清空www文件夹）。
之所以这么做，是因为我们的项目会打包成混合应用或者webapp，所以我们在需要打包成混合应用的时候，就把cordova文件夹里的内容复制过来，然后build后再打包成apk。
我们当然也可以把cordova的插件单独取出来，在需要打包成app的时候，重新添加平台，然后把插件添加进去，这样项目体积会更小，但是在很多时候非常不方便，所以我放弃了。
我们先添加2个gulp的任务
//清空dist文件夹
gulp.task('clean', function () {
return gulp
.src('dist')
.pipe(clean());
});
//复制cordova文件夹到dist文件夹
gulp.task('copy', ['clean'], function () {
return gulp
.src('cordova/**/*')
.pipe(gulp.dest('dist'));
});
然后我们执行gulp copy，会发现cordova文件夹里的内容都复制到dist文件夹了
然后我们修改上面提到的cofig/index.js文件，把它build的路径指向我们新的www文件夹
index: path.resolve(__dirname, '../dist/www/index.html'),
assetsRoot: path.resolve(__dirname, '../dist//www'),
然后给pack任务添加前置任务copy，执行gulp pack后，就会先清空dist文件夹，然后复制cordova文件夹里的内容到dist，然后由webpack来build项目，build到dist文件夹下的www文件夹下。
然后我们安装shelljs，用它来执行cd dist和cordova run android等命令
npm install shelljs --save-dev
然后在gulp的pack任务最底下，添加下面的代码，来自动打包调试app
//↑↑↑上面的都是build.js文件里的内容
console.info('开始打包APP，请稍后...');
shelljs.cd('./dist');
shelljs.exec('cordova run android');
shelljs.cd(__dirname);
done();
然后执行gulp pack任务，就会自动build项目，打包成app。
至此，我们的整合已经完成，项目目录如下
当然，这里面还有很多问题，后面的几章会一个一个解决。