转载请注明出处: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。

至此,我们的整合已经完成,项目目录如下

当然,这里面还有很多问题,后面的几章会一个一个解决。

【前端】Vue和Vux开发WebApp日志一、整合vue+cordova和webpack+gulp的更多相关文章

  1. 【前端】Vue和Vux开发WebApp日志四、增加命令行参数

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_4.html 项目github地址:https://github.com/shamoyuu/vue- ...

  2. 【前端】Vue和Vux开发WebApp日志三、完善gulp任务

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_3.html 项目github地址:https://github.com/shamoyuu/vue- ...

  3. 【前端】Vue和Vux开发WebApp日志二、优化gulp任务

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_2.html 项目github地址:https://github.com/shamoyuu/vue- ...

  4. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

  5. vue 开发系列(一) vue 开发环境搭建

    概要 目前前端开发技术越来越像后台开发了,有一站式的解决方案. 1.JS包的依赖管理像MAVEN. 2.JS代码编译打包. 3.组件式的开发. vue 是一个前端的一站式的前端解决方案,从项目的初始化 ...

  6. 如何优雅的使用vue+vux开发app -03

    如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...

  7. 如何优雅的使用vue+vux开发app -02

    如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...

  8. 如何优雅的使用vue+vux开发app -01

    如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...

  9. vue前端+java后端 vue + vuex + koa2开发环境搭建及示例开发

    vue + vuex + koa2开发环境搭建及示例开发 https://segmentfault.com/a/1190000012918518 vue前端+java后端 https://blog.c ...

随机推荐

  1. Unity AssetBundle 游戏资源分类及关系

    --刚刚做完一个xlua的的热更项目,对AssetBundle资源分类总结一下.纯理论,闲谈知识,要是有建议,尽管提 ,不掺杂代码. --这里说说,AB是如何打包,如果下载,如何加载. 1.关键词理解 ...

  2. Jetson TX2刷机教程(原创)

    Jetson TX2刷机教程 一,硬件准备 1台host主机(linux系统,最好是ubuntu64位) 1台Jetson TX2的平台 二,软件包 JetPack(Jetson SDK) 下载地址: ...

  3. Redis进阶实践之九 独立封装的RedisClient客户端工具类

    一.引言 今天开始有关Redis学习的第九篇文章了,以后肯定会大量系统使用Redis作为缓存介质,为了更好的更好的Redis,自己写了两个工具类,但是这两个工具类,没有提供一致的接口,是为了使用的独立 ...

  4. dnion的remap.conf文件

    # # URL Remapping Config File # # Using remap.config allows you to accomplish two things: # # 1) Rew ...

  5. [C#] 《Concurrency in C# Cookbook》读书笔记(一)- 并发编程概述

    并发编程概述 前言 我们经常在耳边听说一些关于高性能.并发和并行等名词,并且很多人都对并发编程有一些误解. 误解 1:并发就是多线程? 答:多线程只不过是并发编程的其中一种形式而已.并发编程的种类很多 ...

  6. 如何学习java

    1.打牢基础 千里之行始于足下,只有牢固的基础才能走的更远,现在大公司越来越看中一个人的基础如何,他们看中的是你未来的发展潜力,有足够好的基础素养才能实现更多的可能. 2.多敲多练 说实话,光去看代码 ...

  7. C#:导入Excel通用类(CSV格式)

    一.引用插件LumenWorks.Framework.IO.dll(CsvReader) 插件下载地址:https://pan.baidu.com/s/1c3kTKli  提取密码 dz7j 二.定义 ...

  8. scope_lock与lock_guard区别

    lock_guard:更加灵活的锁管理类模板,构造时是否加锁是可选的,在对象析构时如果持有锁会自动释放锁,所有权可以转移.对象生命期内允许手动加锁和释放锁. scope_lock:严格基于作用域(sc ...

  9. HTTP入门

    请求报文图解: 请求报文 图片 响应报文图解: 响应报文  

  10. 随机手机号和身份证号码(python)

    在使用selenium2 python自动化过程中,用户添加的时候程序设置的手机号和身份证号码是唯一的,这方面python代码可以实现,以下是调试成功,可以实现的. 具体代码如下 身份证需要下载dis ...