Vue项目架构(规范)
2020-06-03 04:33
225 查看
Vue项目架构(规范)
项目架构的优点,以及意义
- 效率提升。让开发者关注业务开发
- 学习成本降低。框架封装了很多底层复杂性
- 更强的约束。所有动作必须按照框架规定的执行, 避免干坏事、蠢事。更强的约束也意味着框架集成度更高、框架内部可以做更多事情,但灵活性也更低。
- 产品质量。框架内部会自动处理很多事情,例如性能优化、安全性处理
- 可维护性。所有项目都按照一致的、标准化的规范开发,升级迭代方便。这一点对团队项目的可维护性很重要。
- 健壮性:可以让项目代码以更少的代码维护更多的功能模块
架构设计
- 应用层 路由(约定式路由)
- 状态管理
- 视图库(全局组件)
- 数据通信
- 国际化
- 适配
- 请求库 …等
-
项目目录
架构体系
- 第一阶段: 前端工程化 / 基础设施 (自动化建设)
- 第二阶段: 应用开发方案整合 (技术栈选型)
- 第三阶段: 组件体系 (全局应用封装)
- 第四阶段:打通上下游 (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
加油,陌生人! (来来往往不陌生,希望对您有所帮助)
相关文章推荐
- vue脚手架初始化项目名称规范
- iOS项目工程结构,数据流思想和代码规范 工程结构架构,减少耦合混乱以及防治需求大改造成结构重构,如何构建稳定可扩展可变换的工程结构的思考
- C语言项目开发-项目架构和编程命名规范
- vue 项目其他规范
- vue-cli脚手架构建Vue项目及相关配置
- Android项目包名命名规范及常见项目架构
- 前端开发规范之项目架构
- Atitit 项目源码的架构,框架,配置与环境说明模板 规范 标准化
- vue项目前端架构设计
- 关于项目架构设计的一些规范
- iOS新建项目架构规范
- Vue项目中ESlint规范示例代码
- iOS 新建项目架构规范
- vue项目搭建(由于是初学者,路由及文件的放置有些不规范,一般子组件建议放于components下)
- iOS新建项目架构规范
- Vue2项目架构搭建(二)——vue-cli脚手架创建项目
- 14、vue.js 之项目代码规范
- 安卓项目包命名规范及常见项目架构
- iOS架构之路:IOS项目中的编码规范
- 齿科服务项目–前端vue-cli 多页面架构配置