vue2.0+cordova 开发移动app

为什么80%的码农都做不了架构师？>>>   

首先开发环境需要node.js支持。到官网下载安装即可。

接着直接开始搭建项目。

1、使用npm安装cordova。

 npm i -g corvate

2、安装vue-cli,vue创建项目脚手架

 npm i -g vue-cli

3、使用Cordova创建一个cordova项目

cordova create 目录名称 com.xxx 项目名

使用create命令创建

生成目录结构如下：

hooks
platforms   #平台目录；放android、ios等项目
plugins     #插件目录
res         #资源文件
www         #web文件目录
.gitignore
.npmignore
config.xml  #配置文件
package.json

4、下载项目依赖；下载的依赖会放在根目录下node_modules文件夹下

npm install

5、在cordova根目录下使用vue-cli创建一个vue项目。

vue init webpack vue

这里我创建了一个目录叫vue的vue项目；

目录结构如下：

├── build              // 构建服务和webpack配置
├── config             // 项目不同环境的配置
├── dist               // 项目build目录
├── index.html         // 项目入口文件
├── package.json       // 项目配置文件
├── src                // 生产目录
│   ├── assets         // 图片资源
│   ├── common          // 公共的css js 资源
│   ├── components     // 各种组件
│   ├── views          // 各种视图
│   ├── App.vue         // 主页面 
│   ├── vuex           // vuex状态管理器
│   ├── router.js     // 路由配置器
│   └── main.js        // Webpack 预编译入口

6、进入vue目录中下载依赖

cd vue
npm install

7、修改vue项目打包输出目录。需要把结果输出到cordova根目录下www文件夹下。

修改vue根目录下config/index.js文件；index、assetsRoot、assetsPublicPath修改如下。

module.exports = {
  build: {
    env: require('./prod.env'),

    // index: path.resolve(__dirname, '../dist/index.html'),
    // assetsRoot: path.resolve(__dirname, '../dist'),
    // assetsPublicPath: '/',

    index: path.resolve(__dirname, '../../www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsPublicPath: '',

    assetsSubDirectory: 'static',
    productionSourceMap: true,

8、使用vue-cordova插件完成vue项目与cordova整合。

# 下载vue-cordova
npm i vue-cordova

9、在src/main.js中引入vue-cordova。

import VueCordova from 'vue-cordova';
Vue.use(VueCordova, {
  optionTestKey: 'optionTestValue'
});

10、打包vue项目

npm run build

11、回到cordova根目录，之前还没创建android项目相关；创建android平台代码；

cd ../

cordova platform add android

12、打包cordova项目;打完包会在 platforms\android\build\outputs\apk目录下生成包

cordova build android

# cordova还可以直接调试；
cordova run android

现在就可以使用手机安装app，看看效果了。

转载于:https://my.oschina.net/Lady/blog/1204183