前端项目工程化

1. 项目前期:

• 项目架构
• 工程搭建
• 项目规范
• 公共代码

(1). 架构与工程化的区别:

①. 项目架构:
   a. 项目一开始的设计,如页面如何布局、框架选型

②. 项目工程化:
   a. 项目的规范、标准制定、约束
   b. 如Mock数据(easy mock)、Axios封装(Loading处理、错误拦截).

(2). 项目工程化解决哪些问题:

①. 新项目开发时,提高开发效率.
②. 老项目维护时,降低维护难度.

(3). 如何项目工程化:

①. 项目架构设计:
   a. 与工程化是密不可分的
   b. 架构设计不合理,后期维护成本很大.

②. 目录结构定义:
   a. 语义化,尽量将公共的提取出来

③. 制定项目开发规范:
   a. ESLint规范

④. 封装:
   a. 模块化(更细的颗粒度)、组件化(稍微粗的颗粒度,成品)
   b. 如表格组件里面包含分页模块、轮播组件里面包含图片模块

⑤. 前后端接口规范:

⑥. 性能优化(webpack)、自动化部署(压缩、合并、打包)

(4). 常见工程化:

①. 架构设计、目录定义、路由封装

②. Axios封装、错误拦截、loading封装、Mock、API封装

③. Header、Footer、表单封装、表格封装、分页封装、菜单封装、NoData封装

④. 公共机制、公共样式

2. AntD UI组件:

业务功能组件(调用基础组件)和基础组件.

• ETable组件封装
• BaseForm组件封装
• 表格内嵌单选、复选封装

(1). 页面与组件:

页面pages与组件components要区分.

①. 页面结构
②. 目录结构
③. 组件结构

3. 公共机制封装:

• Axios请求插件封装(错误拦截)
• API封装
• 权限、菜单封装
• 日期、金额、手机号封装…
• Loading、分页…

4. 工程搭建:

①. 核心库:
   React16、Router4.0、Redux 

②. 中间件:
   Axios、Map、ECharts、AntD

③. 公共机制:
   菜单、权限、Header Footer ETable、EForm、Loading、API、Axios