【共享单车】—— React后台管理系统开发手记：项目准备

Z时代
2024-01-10
分类：综合

react

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。

一、项目概述

React全家桶

React基础知识、生命周期

Router 4.0 语法讲解

Redux集成开发

AnD UI组件

最实用基础组件

AntD栅格系统

ETable组件封装

BaseForm组件封装

表格内嵌单选、复选封装

公共机制封装

Axios请求插件封装

API封装

错误拦截

权限、菜单封装

日期、金额、手机号封装...

项目整体架构

Mock-Server -> json

核心框架库：React16、Router4.0、Redux

中间件和插件：Axios、Map、ECharts、AntD

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

收获

React全家桶技能

地图和React集成技能

前端图表开发技巧

基于React的UI框架 - AntD

前端后台架构设计、公共机制封装、后台管理系统开发经验

二、React介绍

React基础

Facebook开源的一个JavaScript库

React结合生态库构成一个MV*框架

React特点

Declarative（声明式编码）

Component-Based(组件化编码）

高效 -- 高效的DOM Diff算法，最小化页面重绘

单向数据流

MV*框架代表 - 只关注视图View层+数据层Model

生态介绍

Vue生态：Vue + Vue-Router + Vuex + Axios + Babel + Webpack

React生态：React + React-Router + Redux + Axios + Babel + Webpack

编程式实现VS声明式实现

编程式实现：需要以具体代码表达在哪里（where）做什么（what）,如何实现（how）

声明式实现：只需要声明在哪里（where）做什么（what）,不需要关心如何实现（how）

React脚手架、Yarn介绍

安装和使用React脚手架

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

Yarn的介绍

Yarn是新一代包管理工具（npm也是包管理工具）

Yarn修复了npm的一些缺陷，提升了某些方面的性能

优点：速度快，安装版本统一、更安全，更简洁的输出，更好的语义化

Yarn的使用

安装：
```
npm install -g yarn　　
```

初始化：
```
yarn init　　
```

添加一个包：
```
yarn add
```

删除一个包：
```
yarn remove　　
```

安装项目所有依赖包：
```
yarn/yarn install　
```

构建项目的配置

npm install -g yarn

npm install -g create-react-app

create-react-app bike-manager

cd bike-manager

yarn add react-router

yarn remove react-router

实际开发中，不使用react-router，只使用react-router-dom

三、基础插件安装，Less文件加载配置

安装React-router、Axios
```
yarn add react-router-dom axios
```

安装AntD （基于Less开发）
```
yarn add antd
```

暴露webpack
```
yarn eject
```
注：如果yarn eject 报错的解决的方法
```
git add .
git commit -m '注释'
yarn eject
```

安装less less-loader
```
yarn add less less-loader
```

修改less-loader

create-react-app默认安装版本是2.03了，其中有些改变:

https://blog.csdn.net/qwe502763576/article/details/83242823

小技巧：VScode打开内嵌终端窗口，可以输入命令行

启动项目
```
yarn start　　
```

四、AntD

官网：https://ant.design/index-cn

普通使用：引入UI组件和css文件

@import 'antd/dist/antd.css'
import {Button} from 'antd'

按需加载css文件内容【只会打包所需组件，减少请求量】

安装babel-plugin-import插件：
```
yarn add babel-plugin-import
```
实现按需加载所需的css，而不是每次都引入所有的css

webpack.config.js中在babel-loader配置处配置：完整如下↓

{
   test: /\.(js|mjs|jsx|ts|tsx)$/,
   include: paths.appSrc,
   loader: require.resolve('babel-loader'),
   options: {
      customize: require.resolve(
         'babel-preset-react-app/webpack-overrides'
      ),
      plugins: [
         //要插入的内容
         ['import', {
             libraryName: 'antd', //libraryName表示导出的库名，
             style: 'css'  //style表示将css引入项目行内样式
         }],

这个在package.json/babelrl/webpack.config.js中配置都可以，pugins是个二维数组！！

相当于直接把antd.less文件引入到项目js中，不用再引入import 'antd/dist/antd.css'

定制主题：修改less变量

"style": true  //true标识直接加载antd的less文件

坑：编译失败，前面只是引入使用了less-loader,并没有添加配置项

解决：最新的react脚手架版本中，配置文件中关于css的rules中的use值被提到外部声明成了一个配置函数，函数返回该样式文件类型所需要的loader数组

if (preProcessor) {
    let loader = {
         loader: require.resolve(preProcessor),
         options: {
              sourceMap: shouldUseSourceMap,
         },
    }
    if (preProcessor === "less-loader") {
        loader.options.modifyVars = {
            'primary-color': '#f9c700'
        }
        loader.options.javascriptEnabled = true
    }
    loaders.push(loader);
}