vue、rollup、sass、requirejs组成的vueManager
时间:2022-04-22
本文章向大家介绍vue、rollup、sass、requirejs组成的vueManager,主要内容包括一、css预处理方案、二、前端工程化与按需加载、2. 按需加载、三、根据代码说事、2. assets文件夹、3. build文件夹、4. src文件夹、5. .babelrc和gulpfile.js、6. 其他、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下:
- 如何使各个子业务模块的按需加载
- css预处理方案的选择
- 如何引入现代的前端工程思想,也就是工程化解决方案。
多余的话不说,本人按照效果图介绍下自己的拙建,强烈希望各位给予建议和指正。
说明:
- 标题:一个普通的vue组件,利用requirejs加载完成。
- 二级菜单:测试vue-route动态注入路由的能力
- 业务组件:测试和模块rollup编译后vue实现的子系统的接入(按需加载)。
- 源码:github地址,需要切换为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:
<div>{{title}}</div>
Js
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结合的核心文件,主要提供了如下方法:
- createVue: vue实例的创建(注入vuex、vue-router等和三方组件)。
- createComponent: modules类型的组件加载。
- 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')
});
});
注意:
- external节点用于排除不需要打包的模块,可以第三方的,也可以是本地的。
- rollup的调用,是通过对nodejs提供的api实现的,所以我们打包是应该是输入:
node ./build/runtime-server.js
。
4. src文件夹
业务模块的源码目录,此目录下的代码需要通过rollup编译后,才可使用。master模块是一个示例模块。
5. .babelrc和gulpfile.js
- .babelrc是babel的配置文件,因为rollup不支持把babel作为配置参数节点传入。
- gulpfile.js作为gulp构建任务的入口,实现了sass的编译、dev模式任务。
6. 其他
- lib文件夹存储的为requirejs需要引入的第三方库,这里就包含vue、vue-route、vuex、requirejs、text.js、css.js等。
- dest:暂时存储rollup打包编译生成的结果文件。
- skin:css样式文件存储的位置
- 注意:字符串substring方法在jkd6,7,8中的差异。
- JavaWeb项目架构之NFS文件服务器
- 轻松几步搞定SSH连接Git配置
- 免费使用谷歌GPU资源训练自己的深度模型
- Git安装及配置5分钟快速教程
- 风格迁移原理及tensorflow实现-附代码
- 手把手教你搭建目标检测器-附代码
- JavaWeb项目架构之FastDFS分布式文件系统
- JavaWeb项目架构之Redis分布式日志队列
- 超快速!10分钟入门Keras指南
- Git操作常用的命令都在这里了。
- 网站性能测试指标(QPS,TPS,吞吐量,响应时间)详解
- day03.集群部署zookeeper【大数据教程】
- Mybatis框架复习大纲【面试+提高】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在Ubuntu中如何查看网络路由表详解
- linux中各种锁机制的使用与区别详解
- Linux环境下使用glog日志库的方法
- crontab执行时间与系统时间不一致问题解决
- Linux内核设备驱动之proc文件系统笔记整理
- CentOS7.6系统下使用yum配置lnmp环境的方法
- Linux内核设备驱动之高级字符设备驱动笔记整理
- Linux使用scp命令进行文件远程拷贝详解
- Linux内核设备驱动之Linux内核模块加载机制笔记整理
- linux无损扩容的方法
- Linux内核设备驱动之内核的时间管理笔记整理
- 使用squid搭建http和https的代理服务器设置指南
- linux中gdb的入门使用教程
- Linux命令中Ctrl+z、Ctrl+c和Ctrl+d的区别和使用详解
- Linux lseek函数的使用详解