您的位置:首页 > Web前端 > Vue.js

Vue项目架构(规范)

2020-06-03 04:33 225 查看

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

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

  • 内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: