快速开发基于vue的app应用——vue-app-cli

目前公司使用dcloud开发原生app，已经完成了第一款基于vue.js和require.js的纯es5应用的开发。

由于使用了require.js，所有的逻辑都要放在require.js的回调函数中，再加上dcloud要求对于plus的操作都要在plusReady事件内才能访问，导致代码中出现大量的函数嵌套，如下：

require(["../js/common.js", "../server/homeServer.js"], function(common, homeServer) {    var vm = new Vue({
        el: "#app",
        data: {
            isLoading: true
        },
        mounted: function() {            var self = this;            //在plusReady后才能访问plus对象
            mui.plusReady(function() {                //打开原生的loading框
                var w = plus.showWaiting();
                homeServer.initData(function() {                    self.isLoading = false;                    //请求成功后，关闭loading框
                    w.close();
                });
            })
        }
    })
})

过多的函数嵌套不仅影响美观，也降低了开发效率，并且在es5中需要时刻注意this的绑定目标。

为了解决以上问题，我对不久前开发的angular-m-cli进行了修改，使其变为可以快速开发基于vue的app多页应用脚手架——vue-app-cli。

vue-cli

之所以不使用官方的vue-cli构建应用是因为：

• vue-cli需要自己实现多页面构建。

• 在开发环境（npm start）下会创建服务器，一切构建结果都存放在内存中，本地无法访问，导致app变为空白页。

• 只有在生产环境（npm run build）下才会构建到本地，却失去了对模块的实时监控。

• webpack拆分太细，功能太全，很多功能在app端都不会用到。

以上不足均可以自行修改vue-cli实现构建最优化，出于时间成本的考虑，最终决定在已有的angular-m-cli的基础上完成适合app开发的脚手架构建。

vue-app-cli

可以快速构建基于vue的app多页应用，对h5页面app和dcloud原生app都十分友好。

它实现了以下功能：

• 快速生成app模板

• 快速创建新页面

• 支持es6

• 支持.vue文件

• 基于sass编写样式文件

• 模块导入样式文件

• 错误映射

如何使用

一、起步

*由于工程使用到了sass，请确保您的电脑已经安装了python

方法一：你需要将该项目克隆到本地，安装相关依赖

git clone https://github.com/1335382915/vue-app-cli.git//进入到vue-app-cli目录下npm i

除此之外，你还需要将该工程链接到全局执行环境中，方便全局使用

npm link

方法二：npm i vue-app-cli -g

现在，我们随便进入一个文件夹，输入vue-app命令，看看是否可以全局使用了

• -v | --version：查看vue-app-cli版本

• -h | --help：查看帮助

• init | i  <projectName>：创建一个新的项目

• add | a  <pageName>：添加新的页面

• list | l ：列举出所有页面

• delete | d <pageName>：删除指定页面

二、使用

注：所有的命令均必须在项目的根目录中输入，在本例子中是vueApp

1. 创建工程

在命令行中输入vue-app init vueApp，等待片刻

进入到vueApp文件夹下，安装依赖cd vueApp && npm i，之后使用npm start启动项目，双击pages/home.html

vue-app-cli

下面我们来看一下目录结构

• build存放构建好的js和css

• components存放每个页面的根组件，你可以在每个文件夹内部扩展其他组件

• css存放页面样式，建议将通用样式和框架样式放入其中，页面自己的样式写入到.vue中

• entry存放每个页面的入口js文件，例如：home页的入口文件为entry/home.js

• images存放图片

• js存放页面逻辑，建议将通用逻辑和框架js放入其中，页面自己的逻辑写入到.vue中

• pages存放页面

2. 添加新页面

在命令行中输入vue-app add user，之后再一次运行npm start，启动项目，将url中的home改为user

看似简单的操作，但实质上user的相关文件和配置已经自动生成

├── components│   ├── home│   │   └── index.vue│   └── user│       └── index.vue├── entry│   ├── home.js│   └── user.js├── pages│   ├── home.html│   └── user.html

3. 本地开发

不同于angular-m-cli，vue-app-cli不区分开发环境和生产环境，它所做的功能仅仅监听模块的变更并通过一系列转换，将构建结果输出到build文件夹里。

你所做的工作仅仅是打开页面 --> 更改代码 --> 刷新页面查看更改。

4. 发布

即便vue-app-cli不区分环境，但当你准备部署到服务器或者打包成app时，仍然需要额外做一些操作：

• 可能你注意到build文件夹下有很多.map结尾的文件，这些文件的存在使得我们在调试错误时仍然可以将错误定位到原始文件中。这些文件占据了一定的存储空间，一般在线上不会用到。你需要做的就是将build文件夹删除，然后将config.js中的isDevelopment设置为false，然后重新启动项目即可。

• 较大的图片会生成到build/images下，在发布时请将该图片文件夹删除。

5. 其他指令

• 列举页面：vue-app list

• 删除页面及其配置项：vue-app delete <pageName>

6. 自定义配置（webpack.config.js）

配置项位于config.js中，目前仅支持配置环境和通用代码块：

module.exports = {
    isDevelopment: true,
    commonModule: ["./js/common.js"]
}

7.开发原生app

vue-app-cli可以很容易地集成到dcloud中，只需要以下几步：

1. 在hbuilder中创建移动app项目，建议选择mui项目模板，我们为该项目命名为vueApp2
   

   

   
   

2. 将vueApp的所有文件复制到vueApp2中

3. 将node_modules文件夹移动到vueApp2的外层目录中，否则node_modules也会作为项目的一部分，极大降低app打包速度

最终的目录结构：

作者：Mescal川
链接：https://www.jianshu.com/p/c550fb6d9739