【共享單車】—— React後臺管理系統開發手記：項目準備

時間 2019-11-09

標籤共享單車 react 後臺管理系統開發手記項目準備欄目 React 简体版

原文原文鏈接

前言：如下內容基於React全家桶+AntD實戰課程的學習實踐過程記錄。最終成果github地址：https://github.com/66Web/react-antd-manager，歡迎star。javascript

1、項目概述css

React全家桶前端

React基礎知識、生命週期
Router 4.0 語法講解
Redux集成開發

AnD UI組件java

最實用基礎組件
AntD柵格系統
ETable組件封裝
BaseForm組件封裝
表格內嵌單選、複選封裝

公共機制封裝react

Axios請求插件封裝
API封裝
錯誤攔截
權限、菜單封裝
日期、金額、手機號封裝...

項目總體架構webpack

Mock-Server -> json
核心框架庫：React1六、Router4.0、Redux
中間件和插件：Axios、Map、ECharts、AntD
公共機制：菜單、權限、Header、Footer、ETable、EForm、Loading、API、Axios...

收穫ios

React全家桶技能
地圖和React集成技能
前端圖表開發技巧
基於React的UI框架 - AntD
前端後臺架構設計、公共機制封裝、後臺管理系統開發經驗

2、React介紹git

React基礎github

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介紹web

安裝和使用React腳手架

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

Yarn的介紹

Yarn是新一代包管理工具（npm也是包管理工具）
Yarn修復了npm的一些缺陷，提高了某些方面的性能
優勢：速度快，安裝版本統1、更安全，更簡潔的輸出，更好的語義化

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

3、基礎插件安裝，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　　
```

4、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);
}