1. 首頁 > 生活百科 > >

優雅的寫好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 routerVUEX模塊拆分同樣將狀態管理也按照模塊進行劃分管理，創建一個根模塊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)})

    推薦閱讀