这是一套Typescript+React+Antd的通用后台管理系统的视频，我会在这个视频里面带着大家徒手搭了一套基于react的后台管理系统基础设施，之所以叫通用，是因为不管以后做什么类型的管理系统，都可以直接拿这一套代码快速上手项目。
- 用scss做模块化样式管理
- Antd的UI组件配置
- 路由的组件化
- 路由表旧版写法和新版写法的讲解
- 管理系统经典三栏布局的解决方案
- 菜单栏构建及其类型约束
- react-redux的手动搭建各个模块的自动生成
- 异步的解决方案及其高级封装
- 规范了数据交互及其类型约束的写法
- 手动封装了前置路由守卫
一：环境准备
输入node-v npm-v 查看环境
官网：https://ant.design/docs/react/introduce-cn
二：创建项目
进入到d盘文件夹
开始创建项目
√ Project name: ... vite-project
√ Select a framework: » React
√ Select a variant: » TypeScript
运行项目
cd vite-project
npm install
npm run dev
在浏览器输入、访问：
在浏览器里面打开package.json
查看dependencies
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
开发版本(项目命令的配置）
三：初始化目录和样式
只保留
main.tsx 入口文件
App.tsx 顶级组件
其余一些不必要的文件目录可以删除
样式初始化
reset-css 比Normalize.css更加直接去除默认的样式
执行以下命令安装
reset-css
npm i reset-css
安装完成之后开始引入
全局引入
打开main.tsx
import "reset-css"
正确的样式引入顺序
1：样式初始化一般放在最前
2：ui框架的样式
3：组件的样式
四：scss的安装和使用
SCSS是CSS的一种预处理语言，它是在CSS的基础上增加了变量（variables）、嵌套（nested nutes）、混合（mixin）、导入（inline imports）等高级功能，可以帮助我们减少CSS重复的代码，节省开发时间。SCSS是Sass3.0后的一个版本，后缀名为.scss。
安装：npm i -save-dev sass
vite中使用很方便、loader都不用自己配置、只需要安装好即可使用
安装完成
依赖dependencies和开发环境下的依赖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的区别主要体现在以下两个方面：
使用环境：dependencies用于生产环境，即在编码阶段和呈现页面阶段都需要使用，比如js框架vue、页面路由vue-router、各种ui框架antd、element-ui、vant等。而devDependencies用于开发环境，仅仅在写代码过程中需要使用，比如css预处理器、vue-cli脚手架、eslint等。
安装的依赖包：devDependencies下的依赖包仅用于本地或开发环境下的运行代码，若发到线上，其实就不需要devDependencies下的所有依赖包，比如各种loader，babel全家桶及各种webpack的插件等只用于开发环境，不用于生产环境，因此不需要打包。而dependencies是我们线上（生产环境）下所要依赖的包，比如vue，我们线上时必须要使用的，所以要放在dependencies下。
总的来说，dependencies和devDependencies的区别在于使用环境和安装的依赖包的不同。
新建一个全局scss文件
global.scss
$color:rgba(233, 7, 233, 0.133);
body{
background-color: $color;
}
写点样式代码
然后在main.tsx引入
//全局样式
import "./assets/styles/global.scss"
五：路径别名的配置@/
目前的ts对@指向src目录的提示是不支持的，vite默认也是不支持的。需要手动来配置一下@符合的指向
1：安装：npm i -D @types/node
通过将 @types/node 安装为开发依赖，可以在编写TypeScript代码时，使用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模块语法导入Node.js的内置模块 path。
在Node.js中，path 模块提供了一组用于处理文件路径的实用工具函数。通过导入 path 模块，你可以使用这些工具函数来操作文件路径，例如构建、解析、拼接、规范化路径等。
