假如你想在VUE的main.js里根据条件按需引入注册组件以及样式,那就这样子写
举例来说我想要引入大屏的一些组件,但是原来框架已经集成了多个项目,路由也是按需加载的,想要实现组件按需加载
先在main.js旁边新建一个文件web3d.js
import Vue from 'vue';
import dataV from '@jiaminghi/data-view';
Vue.use(dataV);
// 按需引入vue-awesome图标
import Icon from 'vue-awesome/components/Icon';
import 'vue-awesome/icons/chart-bar.js';
import 'vue-awesome/icons/chart-area.js';
import 'vue-awesome/icons/chart-pie.js';
import 'vue-awesome/icons/chart-line.js';
import 'vue-awesome/icons/align-left.js';
// 全局注册图标
Vue.component('icon', Icon);
// 适配flex
import '@/common/flexible.js';
// 引入全局css
import './assets/scss/style.scss';
然后我们打开main.js
import Vue from 'vue';
import { request, post } from './views/co-assets/axios';
import './plugins/utils';
import './plugins/table';
import 'normalize.css/normalize.css'; // A modern alternative to CSS resets
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale/lang/en'; // lang i18n
import '@/styles/index.scss'; // global css
import App from './App';
import store from './store';
import router from './router';
import 'echarts/lib/component/tooltip';
import '@/icons'; // icon
import '@/permission'; // permission control
// 设置如果是大屏系统则引入这些东西,如果不是大屏就不引入
const defaultSettings = require('./settings');
if (defaultSettings.flag === 'cccc') {
require('./web3d.js')
}
// 设置如果是大屏系统则引入这些东西,如果不是大屏就不引入
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
* you can execute: mockXHR()
*
* Currently MockJs will be used in the production environment,
* please remove it before going online ! ! !
*/
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock');
mockXHR();
}
// set ElementUI lang to EN
Vue.use(ElementUI, { locale });
// 如果想要中文版 element-ui,按如下方式声明
// Vue.use(ElementUI)
Vue.config.productionTip = false;
Vue.prototype.$http = request;
Vue.prototype.$post = post;
new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
下面讲的是多系统配置办法,可以不用往下看了哦~~~~
其中的./settings文件是用来配置当前加载哪个系统的,这个是我自己想的多系统使用同一个框架的办法,配合路由使用,大家如果有好的建议可以告诉我哦~~
// const aaaaa = {
// title: 'aaaaa Monitor System',
// titleZH: 'aaaa系統',
// flag: 'aaaaa', // 這個不要改
// logo: 'aaaaa Monitor'
// }
// const system = aaaaa // 當需要使用哪個系統就打開哪個
// const bbbb = {
// title: 'Cable Consumable System',
// titleZH: 'bbbb系統',
// flag: 'bbbb', // 這個不要改
// logo: 'bbbb Monitor'
// }
// const system = bbbb
const cccc = {
title: 'cccc System',
titleZH: 'cccc 系統',
flag: 'cccc', // 這個不要改
logo: 'cccc Monitor'
}
const system = webgl
// const dddd = {
// title: 'HH Matrix System',
// titleZH: 'dddd系統',
// flag: 'dddd', // 這個不要改
// logo: 'dddd'
// }
// const system = dddd
module.exports = {
title: system.title,
titleZH: system.titleZH,
flag: system.flag,
logo: system.logo,
/**
* @type {boolean} true | false
* @description Whether fix the header
*/
fixedHeader: false,
/**
* @type {boolean} true | false
* @description Whether show the logo in sidebar
*/
sidebarLogo: true
}
同时我们可以配置路由文件router/index.js
我把一些无关紧要的删掉了,更清晰看到代码实现过程
import Vue from 'vue';
import Router from 'vue-router';
const defaultSettings = require('../settings');
Vue.use(Router);
/* Layout */
import Layout from '@/layout';
/**
* Note: sub-menu only appear when route children.length >= 1
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
*
* hidden: true if set true, item will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu
* if not set alwaysShow, when item has more than one children route,
* it will becomes nested mode, otherwise not show the root menu
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
roles: ['admin','editor'] control the page roles (you can set multiple roles)
title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
*/
/**
* constantRoutes
* a base page that does not have permission requirements
* all roles can be accessed
*/
const systemRoutes = {
aaaa: [],
bbbb: [],
cccc: [],
dddd: []
};
export const constantRoutes = systemRoutes[defaultSettings.flag];
const createRouter = () =>
new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
});
const router = createRouter();
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter();
router.matcher = newRouter.matcher; // reset router
}
export default router;