vue、rollup、sass、requirejs组成的vueManager

近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下：

• 如何使各个子业务模块的按需加载
• css预处理方案的选择
• 如何引入现代的前端工程思想，也就是工程化解决方案。

多余的话不说，本人按照效果图介绍下自己的拙建，强烈希望各位给予建议和指正。

说明：

1. 标题：一个普通的vue组件，利用requirejs加载完成。
2. 二级菜单：测试vue-route动态注入路由的能力
3. 业务组件：测试和模块rollup编译后vue实现的子系统的接入（按需加载）。
4. 源码：github地址，需要切换为framework分支。

一、css预处理方案

这块没什么好说的，由于本人只对sass比较熟悉，就引入了sass和compass。以及引入了gulp构建工具作为整体构建流程的控制。

二、前端工程化与按需加载

1. 前端打包工具

前端打包工具的选择上，最终我选择了rollup，而没有选择webpack的原因有如下几点：

1. rollup实现了tree-shaking，他可以根据函数的引用自动最少引入第三方依赖，这点看上去有点牵强，因为webpack2也引入了tree-shanking概念。
2. rollup打包的模式更丰富，打包后的文件结构也更为清晰
3. rollup可以按需排除一些第三方引入库，这让我做requirejs按需加载时控制第三方库的版本更为有效。如：多个子业务模块都引用了vue，但我们必须得保证所有引入的vue版本是一致的。
4. rollup配置简单

2. 按需加载

按需加载库我选择requirejs的理由如下：

1. 按需加载的库很多，如seajs、mod.js等，选择requirejs由于我比较熟悉他。
2. webpack也有按需拆包和加载的能力，但考虑到后期组件的增加，会让webpack的编译压力更大，暂缓之。

三、根据代码说事

1. app文件夹

• modules文件：自定义模块化的vue组件
  此文件存储为多个独立的vue组件，此类组件由一个js文件和一个html文件组成。此类组件的加载是由requirejs获取文件和组合实现（此方法在app.js中实现）。title组件代码如下：
  html:

<div>{{title}}</div>

      Js

define([],function(){
    return {
        name: 'ctitle',
        data: function(){
            return {
                title: '这是一个标题'
            }
        },
        beforeMount:function(){
            this.$store.dispatch('childs',[]);
        }
    };
});

注意：

1. name的值必须为小写。
2. layout/default组件实现了整体界面的布局，以及路由的跳转（后期会优化）

var _event = event, self = this;
var chooseItem = function(item){
    router.push(item.href);
    self.$store.dispatch('selectRootItem', item);
}

self.$store.dispatch('childs',[]);

if(item.thridpart && !_cahce[item.id]){
    _app.acquire(item.path).done(function(arg){
        arg[0].install(_app.createContext());
        _cahce[item.id] = true;
        chooseItem(item);
    });
}else{
    chooseItem(item);
}

此部分为路由跳转方法的源码，特别点在于第三方业务模块的加载，我需要require完成后才会执行路由的跳转。

• app.js 此类为requirejs和vue结合的核心文件，主要提供了如下方法：
  1. createVue: vue实例的创建（注入vuex、vue-router等和三方组件）。
  2. createComponent: modules类型的组件加载。
  3. createContext: 创建提供给第三方业务组件的下文。
     在实现的过程中，大量的使用了promise，所以引入了jquery（后期会替换为直接的promise类库）。
• main.js和index.html 系统的入口文件为index.html，其中导入了requirejs和main.js的引用，main.js作为整个前端系统的入口，会加载全局的vue组件，和创建一个vue实例。代码如下：

require(['./app'],function(app){
    var _app = app.createApp();
    _app.registerGlobalComponents(['title', 'route', 'layout/default']).done(function(){
        var vue = _app.createVue();
        vue.$mount('#app');
    });
});

• chart.js和test.js
  这两个文件都是用于测试对vue组件的动态注册，以及vue-router（路由）的动态组件，以及对store的操作。这两个惟一不同的地方在于，chart.js是手动写的，而test.js是通过rollup打包生成的(也就是src/master模拟的业务模块）。

2. assets文件夹

skin(皮肤样式)的sass源码，皮肤的编译是通过gulp任务完成的。

3. build文件夹

提供rollup打包的配置。配置文件如下：

var VueLoader = require('rollup-plugin-vue');
var Resolve = require('rollup-plugin-node-resolve');
var Commonjs = require("rollup-plugin-commonjs");
var path = require('path');
var babel = require('rollup-plugin-babel');

module.exports = {
    entry: path.resolve(__dirname, '../src/master/index.js'),
    external: ['vue'],
    plugins: [VueLoader(), babel(), Resolve(), Commonjs()]
}

rollup打包调用：

var masterConfig = require('./rollup.dev.conf');
var rollup = require('rollup');
var path = require('path');
rollup.rollup(masterConfig).then(function(bundle){
    bundle.write({
        format: 'amd',
        dest: path.resolve(__dirname, '../dest/test.js')
    });
});

注意：

1. external节点用于排除不需要打包的模块，可以第三方的，也可以是本地的。
2. rollup的调用，是通过对nodejs提供的api实现的，所以我们打包是应该是输入：node ./build/runtime-server.js。

4. src文件夹

业务模块的源码目录，此目录下的代码需要通过rollup编译后，才可使用。master模块是一个示例模块。

5. .babelrc和gulpfile.js

1. .babelrc是babel的配置文件，因为rollup不支持把babel作为配置参数节点传入。
2. gulpfile.js作为gulp构建任务的入口，实现了sass的编译、dev模式任务。

6. 其他

1. lib文件夹存储的为requirejs需要引入的第三方库，这里就包含vue、vue-route、vuex、requirejs、text.js、css.js等。
2. dest：暂时存储rollup打包编译生成的结果文件。
3. skin：css样式文件存储的位置