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

加油,陌生人! (来来往往不陌生,希望对您有所帮助)

Logo

前往低代码交流专区

更多推荐