项目架构

写代码之前需要做好的事情 ： 项目架构

sass

自己封装 component

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

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

架构设计包含链路

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

项目架构的意义

• 我们要提高工作效率
• 我们需要一个标准
• 希望我们的项目可以更好的维护，扩展

如何建设项目架构体系

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

生产环境优化

通用库改用CDN
关闭sourcemap防止源码泄露
丑化html/css/js
生成gzip
移除掉debugger/console
利用webpack-bundle-analyzer做资源分析，提供进一步优化的数据分析
想对性能、资源了解更多的，推荐Vue SPA 项目webpack打包优化指南这篇文章。

post-css 后处理器 (提供一系列可用插件，提升css的开发效率)
less / scss / sass 预处理器 （提供一套新css语法）

项目目录

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