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

目录

• 路由的拆分
• VUEX模块拆分
• Element UI库按需加载的优雅写法

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

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

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

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

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)

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