单项目架构

路由

1. 路由模块化处理

按照模块引入路由，并向外暴露该模块的路由routes； 在路由的index页面不做引入组件，并设置路由的处理这样可以减少多人开发时路由模块的冲突。

2. 路由去中心化 路由的模块化处理其实就是进行了去中心化；
3. 路由自动收集 可以通过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
        }
    ]
})

接口管理

接口模块化 接口自动收集

组件

1. 全局公共组件 全局需要的组件可以在src/components 中进行封装，方便使用和管理
2. 模块公共组件 有些组件只是在某个模块共用，可以在这个模块下新建一个components组件存储模块级的组件，这样既可以很快找到组件、也可以从文件划分上区别出组件的使用范围，有别于全局的公共组件

数据持久化

1. 动态路由携带参数
2. url 携带参数
3. localstorage