zoukankan      html  css  js  c++  java
  • 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样式文件存储的位置
  • 相关阅读:
    将Nginx添加到windows服务中
    springboot使用redis管理session
    GIT常用命令
    阻止360、谷歌浏览器表单自动填充
    谈谈对Spring IOC的理解
    同一个Nginx服务器同一端口配置多个代理服务
    LeetCode 653. Two Sum IV
    109. Convert Sorted List to Binary Search Tree(根据有序链表构造平衡的二叉查找树)
    108. Convert Sorted Array to Binary Search Tree(从有序数组中构造平衡的BST)
    LeetCode 236. Lowest Common Ancestor of a Binary Tree(二叉树求两点LCA)
  • 原文地址:https://www.cnblogs.com/cqhaibin/p/6858278.html
Copyright © 2011-2022 走看看