前言：以下內容基於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
普通使用：引入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變量，修改時可以修改項目的主色調
- 注意：修改完配置項之后，必須要重新啟動！！
注：項目來自慕課網