探索 Vue 中项目架构的设计

Posted 2021-06-05 前端开发屋

每日心里话:做事有始有终值得开始的事就值得完成。聪明人做事总是有始有终。

阅读掌握时间:6 分钟

昨天以 throttle 节流组件为例，实现了 Vue 中的高阶组件，今天来了解一下 Vue 中项目架构的设计。

项目架构的优点，以及意义

• 效率：让开发者关注业务开发；
• 学习成本降低：框架封装了很多底层复杂性；
• 约束性：所有动作必须按照框架规定的执行, 避免干坏事、蠢事。更强的约束也意味着框架集成度更高、框架内部可以做更多事情，但灵活性也更低；
• 产品质量：框架内部会自动处理很多事情，例如性能优化、安全性处理；
• 可维护性：所有项目都按照一致的、标准化的规范开发，升级迭代方便。这一点对团队项目的可维护性很重要；
• 健壮性：可以让项目代码以更少的代码维护更多的功能模块。

架构设计

1. 应用层
• 路由（约定式路由）
• 状态管理
• 视图库（全局组件）
• 数据通信
• 国际化
• 适配
• 请求库 …等
2. 基础设施层
• 项目目录
• 规范（开发规范，命名规范，工作流规范，技术栈规范，兼容规范，文档规范，UI 规范，生产发布规范）
• 应用类型（MPA（多页面），SPA（单页面），SSR（服务端渲染））
• 性能优化（编码性能，打包优化，开发环境的优化）

架构体系

• 第一阶段: 前端工程化 / 基础设施 （自动化建设）
• 第二阶段: 应用开发方案整合 （技术栈选型）
• 第三阶段: 组件体系 （全局应用封装）
• 第四阶段：打通上下游 （ui-前端-后端-测试）

项目目录(仅供参考)

src
├── App.vue
├── api
│   └── index.js
├── assets
│   ├── logo.png
│   └── scss
│       ├── _mixin.scss
│       ├── _variables.scss
│       └── index.scss
├── components
│   ├── Popup
│   │   └── index.vue
│   ├── TabBar
│   │   └── index.vue
│   ├── Table
│   │   └── index.vue
│   ├── Tabs
│   │   ├── index.js
│   │   ├── tabPane.vue
│   │   └── tabs.vue
│   ├── TimeLine
│   │   ├── TimeLine.vue
│   │   ├── TimeLineItem.vue
│   │   └── index.js
│   └── Tip
│       └── index.vue
├── directives
│   └── zzz.js
├── filters
│   └── a.js
├── main.js
├── mixins
├── plugins
│   └── baseComponent.js
├── router
│   └── index.js
├── store
│   └── index.js
├── utils
│   ├── cookies.js
│   ├── fetch.js
│   ├── map.js
│   └── storage.js
└── views
    └── home
        └── index.vue

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）

欢迎加我微信「 vx172537 」拉你进技术群，长期交流学习...

点个在看支持我吧，转发就更好了