优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载 _生活百科

路由的拆分
vuex模块拆分" rel="external nofollow noreferrer">VUEX模块拆分
Element UI库按需加载的优雅写法

路由的拆分项目较大路由较多时，路由拆分是一个不错的代码优化方案，按不同业务分为多个模块，结构清晰便于统一管理。
require.context()是webpack提供的语法，相当于前端的读写文件，返回的 files是一个函数，files.keys()执行，返回获取到的文件名(是一个数组) ，再通过files(keys)获取到模块，取到default 属性，拿到真正的导出对象。
/router/home.router.js首页路由配置
【优雅的写好Vue项目代码 — 路由拆分、Vuex模块拆分、element按需加载】

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)})