这是一套Typescript+React+Antd的通用后台管理系统的视频,我会在这个视频里面带着大家徒手搭了一套基于react的后台管理系统基础设施,之所以叫通用,是因为不管以后做什么类型的管理系统,都可以直接拿这一套代码快速上手项目。
输入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是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 模块,你可以使用这些工具函数来操作文件路径,例如构建、解析、拼接、规范化路径等。