前端架构

1.全局样式

从产品到UI，主题色，字体大小，字体，间距，颜色的指定，此时可以总结出，尽量解耦

2.UI库

分基础组件(通用组件)+业务组件(异步组件，动态组件)

3.工具tool

针对业务，公用的方法，ajax的封装，国际化等

4.路由

自动化路由，根据文件名称自动生成路由

模块化路由，针对模块，将路由进行模块文件区分

5.全局组件

使用性特别高的组件，进行全局自动化注册，根据文件名或者vue的name属性

6.api(接口)

6-1.针对接口的api，进行接口api化(方法形式的调用：this.login.loginIn())，数据自动注入(绑定到data)，防止同地址接口重复访问

6-2.联调前，用mock数据进行代替

6-3.和后端配合，协商基础数据格式的确定

1.空数据的展示形式null,"",...

2.空数组[],null...

3.data是数组的时候是否需要包层

4.token的约定等

6-4.接口文档的工具和格式

7.代码规范和风格的检查

eslint配合prettier，或者是其他的标准+自定义

8.单元测试

9.持续集成

travisCI，Linux shell，shelljs，jekins

实现代码规范风格的检测+单元测试+打包+git提交+通知等

10.静态资源

字体的选择font，小图标(iconfont,svg,base64)，图片的格式(png,jpg,webp...)

11.针对框架vue或react(以vue举例)

基础UI库的管理(ElementUI),指令directive，过滤filter,插件等的统一管理

12. 前端文档的编写 VuePress

13.性能优化+构建优化

14.环境变量+配置(webpack)