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

                                                                                                                                                                                    ### 单项目架构

路由

路由模块化处理

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

路由去中心化 路由的模块化处理其实就是进行了去中心化；
路由自动收集 可以通过require.context自动导入组件，减少了每增加一个页面进行import HelloWorld from ‘@/view/HelloWorld’的工作； 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  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
        }
    ]
})

接口管理

接口模块化 接口自动收集

组件

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

数据持久化

动态路由携带参数
url 携带参数
localstorage

本文标题： 单项目架构

本文作者： OSChina

发布时间： 2021年04月15日 10:04

最后更新： 2025年04月03日 11:07

原始链接： https://haoxiang.eu.org/b005b279/

版权声明： 本文著作权归作者所有，均采用CC BY-NC-SA 4.0许可协议，转载请注明出处！

赏
× 喜欢就赞赏一下呗！
打赏二维码