近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下:
多余的话不说,本人按照效果图介绍下自己的拙建,强烈希望各位给予建议和指正。
说明:
这块没什么好说的,由于本人只对sass比较熟悉,就引入了sass和compass。以及引入了gulp构建工具作为整体构建流程的控制。
前端打包工具的选择上,最终我选择了rollup,而没有选择webpack的原因有如下几点:
按需加载库我选择requirejs的理由如下:
<div>{{title}}</div>
Js
define([],function(){
return {
name: 'ctitle',
data: function(){
return {
title: '这是一个标题'
}
},
beforeMount:function(){
this.$store.dispatch('childs',[]);
}
};
});
注意:
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完成后才会执行路由的跳转。
require(['./app'],function(app){
var _app = app.createApp();
_app.registerGlobalComponents(['title', 'route', 'layout/default']).done(function(){
var vue = _app.createVue();
vue.$mount('#app');
});
});
skin(皮肤样式)的sass源码,皮肤的编译是通过gulp任务完成的。
提供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')
});
});
注意:
node ./build/runtime-server.js
。业务模块的源码目录,此目录下的代码需要通过rollup编译后,才可使用。master模块是一个示例模块。