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样式文件存储的位置

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的博客

Ubuntu中使用alias设置命令别名

上次说到gcc编译不会链接数学库,那么需要使用gcc -lm test.c,其实默认gcc -lc test.c 我如果想省去每次带上-lm参数。那么可以使用...

39050
来自专栏前端知识分享

第106天:Ajax中同步请求和异步请求

用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的。信息错误又要重新填写!

15020
来自专栏小狼的世界

Linux下创建可执行bin安装文件

1、简化操作。一般的软件安装过程,如果想要精简步骤,我们一般会将需要在命令行中输入的命令写成一个脚本,同时将安装介质准备好。我们将脚本和安装介质上传到生产环境,...

19820
来自专栏魏艾斯博客www.vpsss.net

PhpStudy 安装 Ftp Server 的方法

23520
来自专栏ShaoYL

源代码管理SVN的使用

45670
来自专栏开源优测

AutoLine源码分析之调度管理器

AutoLine采用了Apscheduler库来实现AutoLine的测试用例的执行任务的调度管理

11710
来自专栏Python爬虫与数据挖掘

安装完Python之后,如何设置Python环境变量

人生苦短,我用Python。最近有许多加群的萌新在咨询Python安装的事宜,Python安装问题不大,可以戳这篇文章:。本以为安装Python之后就可...

18820
来自专栏微信小开发

WXAPKG 解包后如何提取页面逻辑?

前天小程序分发下载执行包,我也下载了一些,用来学习。 按照我的规划,这部分的内容整体会分为4~5次推送完成,首先是配置的提取和页面逻辑的提取,这部分会比较快,很...

2.2K100
来自专栏木头编程 - moTzxx

PHP学习(wampServer+PhpStorm+XDebug)——环境相关配置参考(上)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

16240
来自专栏编程

在linux下安装w3af和使用

技术交流,请勿用于违法途径,后果自负 一、环境: sudoapt-get install git Python 2.7,大部分的linux都默认安装 sudoa...

39290

扫码关注云+社区

领取腾讯云代金券