【共享单车】—— 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);
}

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

注：项目来自慕课网

posted @ 2019-01-09 22:40 柳洁琼Elena 阅读(1214) 评论(0) 编辑收藏举报

刷新页面返回顶部

独立天地间，清风洒兰雪

人因为幸福而成功，而不是因为成功而幸福

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

公告

独立天地间， 清风洒兰雪

人因为幸福而成功，而不是因为成功而幸福

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

公告

独立天地间，清风洒兰雪