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

Posted 2021-02-02 ljq66

前言：以下内容基于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特点

1. Declarative（声明式编码）
2. Component-Based(组件化编码）
3. 高效 -- 高效的DOM Diff算法，最小化页面重绘
4. 单向数据流

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

• 生态介绍

1. Vue生态：Vue + Vue-Router + Vuex + Axios + Babel + Webpack
2. React生态：React + React-Router + Redux + Axios + Babel + Webpack

• 编程式实现VS声明式实现

1. 编程式实现：需要以具体代码表达在哪里（where）做什么（what）,如何实现（how）
2. 声明式实现：只需要声明在哪里（where）做什么（what）,不需要关心如何实现（how）

     React脚手架、Yarn介绍

• 安装和使用React脚手架

  npm install -g create-react-app
  create-react-app my-app
  cd my-app
  npm start

• Yarn的介绍

1. Yarn是新一代包管理工具 （npm也是包管理工具）
2. Yarn修复了npm的一些缺陷，提升了某些方面的性能
3. 优点：速度快，安装版本统一、更安全，更简洁的输出，更好的语义化

• Yarn的使用

1. 安装： 

   npm install -g yarn　　

2. 初始化：

   yarn init　　

3. 添加一个包：

   yarn add

4. 删除一个包： 

   yarn remove　　

5. 安装项目所有依赖包： 

   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

1. create-react-app默认安装版本是2.03了，其中有些改变:
2. https://blog.csdn.net/qwe502763576/article/details/83242823
3. 小技巧：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引入项目行内样式
           }],

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

2. 相当于直接把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);
  }

1. primary-color是antd的less变量，修改时可以修改项目的主色调
2. 注意：修改完配置项之后，必须要重新启动！！

---

注：项目来自慕课网