单项目架构 - 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