Detailed explanation of Vue project code routing splitting, Vuex module splitting, element loading on demand

Splitting of routes

When the project has a large number of routes, routing splitting is a good code optimization solution. It is divided into multiple modules according to different services, with a clear structure and convenient unified management.

()It is the syntax provided by webpack, which is equivalent to the front-end read and write files, and is returned.filesis a function,()Execute, return the obtained file name (it is an array), and then passfiles(keys)Get the module, getdefaultAttributes, get the real export object.

/router/Homepage routing configuration

export default [
   {
    path: '/',
    component: () => import(/*webpackChunkName:'home'*/'@/views/Home/') // The default code will be split  }, {
    path: '*',
    component:() => import(/*webpackChunkName:'404'*/'@/views/')
}]

/router/Management Routing Configuration

export default [
    {
    path: '/manager',
    component: () => import(/*webpackChunkName:'home'*/'@/views/Manager/') // The default code will be split}]

/router/router entry file

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

(VueRouter)
// Each module has its own routing configuration
// Get all files ending in the current corresponding folder// files is a function, false does not traverse subdirectories | /\.$/ ending filesconst files = ('./routers',false,/\.$/);
const routes = [];
().forEach(key=>{
  // Get the content of the file and get the default export result. Put it in routes. If you encounter *, the route will put * at the end.  (...files(key).default)
});

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

VUEX module split

Also, state management is divided and managed according to modules, creating a root modulerootModuleFiles are managed in a unified manner, and in fact, some public data can be stored in the module and throughRead other state management modules and traverse to add them to the module attribute of the root module.module[moduleName] = store, the moduleName file name processes the path and suffix string, and the string is used as the namespace by default.

./modules/: Here is a case sharing. Will there be some user module-specific logic in the actual project, such as storing user data, judging user menu permissions, etc.

store/: The root instance also takes empty content as an example. In actual projects, some public business logic can be written for management, such as user login status maintenance, and token verification.

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

store/: Status management entry file

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

// Module division Read file directoryconst files = ('./modules', false, /\.js$/);
// Automatically resolve the status in vuex according to the module name in the current store().forEach(key => {  // [./,  ./]
    let moduleName = (/\.\//, '').replace(/\.js/, ''); // File name processing path and string after suffix, default file name as namespace    let store = files(key).default; // .default Real export object    let module =  = ( || {});
    module[moduleName] = store;
    module[moduleName].namespaced = true; // Set the namespace, no space, no scope});

export default new (rootModule)

Elegant writing of Element UI library loading on demand

Element UI is currently a common UI component library. There are many components, but if all of them are introduced, it is not very friendly to project packaging. Therefore, most of them recommend the on-demand loading of components and use them.useThe grammar, but the ones written too much are not very good-looking. Therefore, you can refer to the second writing method, encapsulate an object to call it loop. The code will look more elegant.

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

(Button);
(Header);
(Footer);
(Main);
(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};

(components).forEach(component => {
    (component)
})

This is the article about Vue project code routing splitting, Vuex module splitting, element loading on demand. For more related vue route splitting content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!