vue、rollup、sass、requirejs组成的vueManager-白红宇

vue、rollup、sass、requirejs组成的vueManager

阅读量：5099 次

发布时间：2019-06-13

本文共 3612 字，大约阅读时间需要 12 分钟。

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

如何使各个子业务模块的按需加载

css预处理方案的选择

如何引入现代的前端工程思想，也就是工程化解决方案。

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

说明：

标题：一个普通的vue组件，利用requirejs加载完成。

二级菜单：测试vue-route动态注入路由的能力

业务组件：测试和模块rollup编译后vue实现的子系统的接入（按需加载）。

源码：，需要切换为framework分支。

一、css预处理方案

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

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

1. 前端打包工具

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

rollup实现了tree-shaking，他可以根据函数的引用自动最少引入第三方依赖，这点看上去有点牵强，因为webpack2也引入了tree-shanking概念。

rollup打包的模式更丰富，打包后的文件结构也更为清晰

rollup可以按需排除一些第三方引入库，这让我做requirejs按需加载时控制第三方库的版本更为有效。如：多个子业务模块都引用了vue，但我们必须得保证所有引入的vue版本是一致的。

rollup配置简单

2. 按需加载

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

按需加载的库很多，如seajs、mod.js等，选择requirejs由于我比较熟悉他。

webpack也有按需拆包和加载的能力，但考虑到后期组件的增加，会让webpack的编译压力更大，暂缓之。

三、根据代码说事

1. app文件夹

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


     
      {
   {title}}

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

注意：

name的值必须为小写。

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')    });});

注意：