Vue项目架构(规范)

Vue项目架构(规范)

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

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

架构设计

• 应用层
  • 路由（约定式路由）
  • 状态管理
  • 视图库（全局组件）
  • 数据通信
  • 国际化
  • 适配
  • 请求库 …等
• 基础设施层
  • 项目目录
  • 规范（开发规范，命名规范，工作流规范，技术栈规范，兼容规范，文档规范，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

加油，陌生人！ （来来往往不陌生，希望对您有所帮助）