前端架构

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)

你可能感兴趣的:(前端)