單項目架構 - JavaShuo

單項目架構

路由

路由模塊化處理

按照模塊引入路由，並向外暴露該模塊的路由routes；在路由的index頁面不作引入組件，並設置路由的處理這樣能夠減小多人開發時路由模塊的衝突。vue

路由去中心化路由的模塊化處理其實就是進行了去中心化；
路由自動收集能夠經過require.context自動導入組件，減小了每增長一個頁面進行import HelloWorld from '@/view/HelloWorld'的工做；代碼以下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
// require.context 實現自動化導入模板
const contexts = require.context('../view', true, /\.vue$/) ;
// 經過正則匹配，參數1：相對文件目錄，參數2，是否包含子目錄文件
const routes = [];
contexts.keys().forEach(key => {
    // 除去文件名開頭的./ 和 .vue 結尾的擴展名
    const componentConfig = contexts(key).default;
    const routePath = key.replace(/^\.\//,'').replace(/\.vue$/,'');
    // 全局註冊組件
    routes.push({
        path: '/' + routePath,
        name: componentConfig.name,
        component: resolve => require([`../view/${routePath}`], resolve)
    })
});

export default new Router({
    routes: [
        ...routes,
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

接口管理

接口模塊化接口自動收集vue-router

組件

全局公共組件全局須要的組件能夠在src/components 中進行封裝，方便使用和管理
模塊公共組件有些組件只是在某個模塊共用，能夠在這個模塊下新建一個components組件存儲模塊級的組件，這樣既能夠很快找到組件、也能夠從文件劃分上區別出組件的使用範圍，有別於全局的公共組件

數據持久化

動態路由攜帶參數
url 攜帶參數
localstorage