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

2023-11-02 10:34:48 浏览数 (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 模块,你可以使用这些工具函数来操作文件路径,例如构建、解析、拼接、规范化路径等。

0 人点赞