優雅的寫好Vue專案程式碼 — 路由拆分、Vuex模組拆分、element按需載入

路由的拆分

專案較大路由較多時，路由拆分是一個不錯的程式碼優化方案，按不同業務分為多個模組，結構清晰便於統一管理。

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