這是一套Typescript+React+Antd的通用后臺(tái)管理系統(tǒng)的視頻，我會(huì)在這個(gè)視頻里面帶著大家徒手搭了一套基于react的后臺(tái)管理系統(tǒng)基礎(chǔ)設(shè)施，之所以叫通用，是因?yàn)椴还芤院笞鍪裁搭愋偷墓芾硐到y(tǒng)，都可以直接拿這一套代碼快速上手項(xiàng)目。
- 用scss做模塊化樣式管理
- Antd的UI組件配置
- 路由的組件化
- 路由表舊版寫法和新版寫法的講解
- 管理系統(tǒng)經(jīng)典三欄布局的解決方案
- 菜單欄構(gòu)建及其類型約束
- react-redux的手動(dòng)搭建各個(gè)模塊的自動(dòng)生成
- 異步的解決方案及其高級(jí)封裝
- 規(guī)范了數(shù)據(jù)交互及其類型約束的寫法
- 手動(dòng)封裝了前置路由守衛(wèi)
一：環(huán)境準(zhǔn)備
輸入node-v npm-v 查看環(huán)境
官網(wǎng)：https://ant.design/docs/react/introduce-cn
二：創(chuàng)建項(xiàng)目
進(jìn)入到d盤文件夾
開始創(chuàng)建項(xiàng)目
√ Project name: ... vite-project
√ Select a framework: ? React
√ Select a variant: ? TypeScript
運(yùn)行項(xiàng)目
cd vite-project
npm install
npm run dev
在瀏覽器輸入、訪問(wèn)：
在瀏覽器里面打開package.json
查看dependencies
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
開發(fā)版本(項(xiàng)目命令的配置）
三：初始化目錄和樣式
只保留
main.tsx 入口文件
App.tsx 頂級(jí)組件
其余一些不必要的文件目錄可以刪除
樣式初始化
reset-css 比Normalize.css更加直接去除默認(rèn)的樣式
執(zhí)行以下命令安裝
reset-css
npm i reset-css
安裝完成之后開始引入
全局引入
打開main.tsx
import "reset-css"
正確的樣式引入順序
1：樣式初始化一般放在最前
2：ui框架的樣式
3：組件的樣式
四：scss的安裝和使用
SCSS是CSS的一種預(yù)處理語(yǔ)言，它是在CSS的基礎(chǔ)上增加了變量（variables）、嵌套（nested nutes）、混合（mixin）、導(dǎo)入（inline imports）等高級(jí)功能，可以幫助我們減少CSS重復(fù)的代碼，節(jié)省開發(fā)時(shí)間。SCSS是Sass3.0后的一個(gè)版本，后綴名為.scss。
安裝：npm i -save-dev sass
vite中使用很方便、loader都不用自己配置、只需要安裝好即可使用
安裝完成
依賴dependencies和開發(fā)環(huán)境下的依賴devDependencies
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^7.2.8",
"react-router-dom": "^6.3.0",
"redux": "^4.1.2",
"reset-css": "^5.0.2"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"sass": "^1.69.5",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}
dependencies和devDependencies的區(qū)別主要體現(xiàn)在以下兩個(gè)方面：
使用環(huán)境：dependencies用于生產(chǎn)環(huán)境，即在編碼階段和呈現(xiàn)頁(yè)面階段都需要使用，比如js框架vue、頁(yè)面路由vue-router、各種ui框架antd、element-ui、vant等。而devDependencies用于開發(fā)環(huán)境，僅僅在寫代碼過(guò)程中需要使用，比如css預(yù)處理器、vue-cli腳手架、eslint等。
安裝的依賴包：devDependencies下的依賴包僅用于本地或開發(fā)環(huán)境下的運(yùn)行代碼，若發(fā)到線上，其實(shí)就不需要devDependencies下的所有依賴包，比如各種loader，babel全家桶及各種webpack的插件等只用于開發(fā)環(huán)境，不用于生產(chǎn)環(huán)境，因此不需要打包。而dependencies是我們線上（生產(chǎn)環(huán)境）下所要依賴的包，比如vue，我們線上時(shí)必須要使用的，所以要放在dependencies下。
總的來(lái)說(shuō)，dependencies和devDependencies的區(qū)別在于使用環(huán)境和安裝的依賴包的不同。
新建一個(gè)全局scss文件
global.scss
$color:rgba(233, 7, 233, 0.133);
body{
background-color: $color;
}
寫點(diǎn)樣式代碼
然后在main.tsx引入
//全局樣式
import "./assets/styles/global.scss"
五：路徑別名的配置@/
目前的ts對(duì)@指向src目錄的提示是不支持的，vite默認(rèn)也是不支持的。需要手動(dòng)來(lái)配置一下@符合的指向
1：安裝：npm i -D @types/node
通過(guò)將 @types/node 安裝為開發(fā)依賴，可以在編寫TypeScript代碼時(shí)，使用Node.js核心模塊的類型注解和類型檢查
2：在vite.config.ts添加配置：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve:{
alias:{
"@":path.resolve(__dirname,'./src')
}
}
})
import path from "path" 是使用ES模塊語(yǔ)法導(dǎo)入Node.js的內(nèi)置模塊 path。
在Node.js中，path 模塊提供了一組用于處理文件路徑的實(shí)用工具函數(shù)。通過(guò)導(dǎo)入 path 模塊，你可以使用這些工具函數(shù)來(lái)操作文件路徑，例如構(gòu)建、解析、拼接、規(guī)范化路徑等。
