前端项目工程化

发布时间:2023年12月20日

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
文章来源:https://blog.csdn.net/wanmeijuhao/article/details/135079456
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。