亲宝软件园·资讯

展开

Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

Echoyya 人气:0

路由的拆分

项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理。

require.context() 是webpack提供的语法, 相当于前端的读写文件,返回的 files是一个函数,files.keys()执行,返回获取到的文件名(是一个数组),再通过files(keys)获取到模块,取到default 属性,拿到真正的导出对象。

/router/home.router.js首页路由配置

export default [
   {
    path: '/',
    component: () => import(/*webpackChunkName:'home'*/'@/views/Home/index.vue') // 会默认代码分割
  }, {
    path: '*',
    component:() => import(/*webpackChunkName:'404'*/'@/views/404.vue')
}]

/router/manager.router.js管理类路由配置

export default [
    {
    path: '/manager',
    component: () => import(/*webpackChunkName:'home'*/'@/views/Manager/index.vue') // 会默认代码分割
}]

/router/index.js路由入口文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
// 每个模块有自己的路由配置

// 获取当前对应文件夹下的 所有以router.js 结尾的文件
// files是一个函数 , false 不去遍历子目录 | /\.router.js$/ 结尾的文件
const files = require.context('./routers',false,/\.router.js$/);
const routes = [];
files.keys().forEach(key=>{
  // 获取到文件的内容 拿到默认的导出结果 放到routes里 , 如果遇到* 号 路由会将* 放到最后面
  routes.push(...files(key).default)
});

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router

VUEX模块拆分

同样将状态管理也按照模块进行划分管理,创建一个根模块rootModule文件,统一管理,实际上跟模块中可以存放一些公共的数据,并通过require.context读取其他状态管理模块,遍历添加至根模块的module属性上,module[moduleName] = store,moduleName文件名处理路径和后缀后的字符串,默认以该字符串作为命名空间。

./modules/user.js:此处暂以空内容,作为案例分享,实际项目中会存在一些用户模块特有逻辑吗,例如存储用户数据,判断用户菜单权限等。

store/rootModule.js:根实例也暂以空内容为例,实际项目中可以编写一些公共的业务逻辑进行管理,例如用户的登录状态维护,及token检验等。

export default {
    state: {},
    mutations: {},
    actions: {},
}

store/index.js:状态管理入口文件

import Vue from 'vue'
import Vuex from 'vuex'
import rootModule from './rootModule'
Vue.use(Vuex)

// 模块划分 require.context 读取文件目录
const files = require.context('./modules', false, /\.js$/);
// 自动根据当前store中的模块名解析vuex中的状态
files.keys().forEach(key => {  // [./article.js,  ./user.js]
    let moduleName = key.replace(/\.\//, '').replace(/\.js/, ''); // 文件名处理路径和后缀后的字符串,默认以文件名作为命名空间
    let store = files(key).default; // .default  真正的导出对象
    let module = rootModule.modules = (rootModule.modules || {});
    module[moduleName] = store;
    module[moduleName].namespaced = true; // 设置命名空间, 不加空间没有作用域
});

export default new Vuex.Store(rootModule)

Element UI库按需加载的优雅写法

Element UI算是目前比较常见的UI组件库了,有非常多的组件,但是如果全部引入的话,对项目打包也并不是很友好,因此大多推荐组件的按需加载,在使用use语法,但是写的多的确实不怎么好看。所以可以参考第二种写法,封装一个对象循环调用。代码看起来会更加优雅。

import Vue from 'vue';
import { Button, Header, Footer, Main, Container, Row, Col, Form, FormItem, Input, Carousel, CarouselItem } from 'element-ui';

Vue.use(Button);
Vue.use(Header);
Vue.use(Footer);
Vue.use(Main);
Vue.use(Container);
...
...
import Vue from 'vue';
import { Button, Header, Footer, Main, Container, Row, Col, Form, FormItem, Input, Carousel, CarouselItem } from 'element-ui';

const components = {Button, Header, Footer, Main, Container, Row, Col, Form, FormItem, Input, Carousel, CarouselItem};

Object.values(components).forEach(component => {
    Vue.use(component)
})

加载全部内容

相关教程
猜你喜欢
用户评论