React项目实战(React后台管理系统、TypeScript+React18)-环境准备（1）

• React项目实战(React后台管理系统、TypeScript React18)视频
• React项目实战(React后台管理系统、TypeScript React18)源码

这是一套Typescript React Antd的通用后台管理系统的视频，我会在这个视频里面带着大家徒手搭了一套基于react的后台管理系统基础设施，之所以叫通用，是因为不管以后做什么类型的管理系统，都可以直接拿这一套代码快速上手项目。

• 用scss做模块化样式管理
• Antd的UI组件配置
• 路由的组件化
• 路由表旧版写法和新版写法的讲解
• 管理系统经典三栏布局的解决方案
• 菜单栏构建及其类型约束
• react-redux的手动搭建各个模块的自动生成
• 异步的解决方案及其高级封装
• 规范了数据交互及其类型约束的写法
• 手动封装了前置路由守卫

一：环境准备

输入node-v npm-v 查看环境

官网：https://ant.design/docs/react/introduce-cn

二：创建项目

进入到d盘文件夹 开始创建项目

代码语言：javascript复制

√ Project name: ... vite-project
√ Select a framework: » React
√ Select a variant: » TypeScript

运行项目

代码语言：javascript复制

cd vite-project
npm install
npm run dev

在浏览器输入、访问：

在浏览器里面打开package.json 查看dependencies

代码语言：javascript复制

 "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

开发版本(项目命令的配置）

三：初始化目录和样式

只保留 main.tsx 入口文件 App.tsx 顶级组件

其余一些不必要的文件目录可以删除

样式初始化 reset-css 比Normalize.css更加直接去除默认的样式

执行以下命令安装 reset-css

代码语言：javascript复制

npm i reset-css

安装完成之后开始引入 全局引入 打开main.tsx

代码语言：javascript复制

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

代码语言：javascript复制

"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的区别主要体现在以下两个方面：

代码语言：javascript复制

使用环境：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

代码语言：javascript复制

$color:rgba(233, 7, 233, 0.133);
body{
    background-color: $color;
}

写点样式代码 然后在main.tsx引入

代码语言：javascript复制

//全局样式
import "./assets/styles/global.scss"

五：路径别名的配置@/

目前的ts对@指向src目录的提示是不支持的，vite默认也是不支持的。需要手动来配置一下@符合的指向

1：安装：npm i -D @types/node

通过将 @types/node 安装为开发依赖，可以在编写TypeScript代码时，使用Node.js核心模块的类型注解和类型检查

2：在vite.config.ts添加配置：

代码语言：javascript复制

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 模块，你可以使用这些工具函数来操作文件路径，例如构建、解析、拼接、规范化路径等。

react typescript 后台 开发环境 配置

0 人点赞