vue、rollup、sass、requirejs組成的vueManager

近段時間本人一直在思考如何基於vue搭建一箇中後端管理系統的通用基礎前端解決方案。思考的主要問題點以下：

• 如何使各個子業務模塊的按需加載
• css預處理方案的選擇
• 如何引入現代的前端工程思想，也就是工程化解決方案。

多餘的話不說，本人按照效果圖介紹下本身的拙建，強烈但願各位給予建議和指正。

說明：

1. 標題：一個普通的vue組件，利用requirejs加載完成。
2. 二級菜單：測試vue-route動態注入路由的能力
3. 業務組件：測試和模塊rollup編譯後vue實現的子系統的接入（按需加載）。
4. 源碼：github地址，須要切換爲framework分支。

1、css預處理方案

這塊沒什麼好說的，因爲本人只對sass比較熟悉，就引入了sass和compass。以及引入了gulp構建工具做爲總體構建流程的控制。

2、前端工程化與按需加載

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的編譯壓力更大，暫緩之。

3、根據代碼說事

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樣式文件存儲的位置