目录

• • 前言
• 1. 使用 vite 创建 react 项目
• • 1. npm / yarn 命令初始化
  • 2. 输入项目名称
  • 3. 选择框架
  • 4. 选择 Js / Ts
  • 5. 项目创建完成
  • 6. 启动项目
• 2. 规范项目目录
• 3. 使用 react-router-dom 路由
• • 1. 使用 npm / yarn 命令下载
  • 2. 更改 react-router-dom 版本
  • • 1. 通过 npm 命令降低版本
    • 2. 手动修改 package.json 文件，然后 npm install
  • 3. 修改App.tsx文件
• 4. 配置 alias 别名
• 5. 配置 Ant Design 样式库
• 6. 配置axios与顶部加载进度条，进行二次封装
• 7. 配置 proxy 跨域
• 8. 配置 Less / Sass
• • 1. 配置 Less
  • 2. 配置 Sass

前言

使用 vite 创建项目，node 版本需要大于12.0.0，

可以使用 node -v 查看自己当前的node版本

1. 使用 vite 创建 react 项目

1. npm / yarn 命令初始化

我使用的是

npm init @vitejs/app  // 这个已经被弃用npm init vite // 使用这个oryarn create @vitejs/app  // 同理，使用下面这个
yarn create vite

2. 输入项目名称

项目名称默认为 vite-project，可以自定义，我自定义为demo

3. 选择框架

• Vanilla：原生js，没有任何框架集成
• Vue：vue3框架，只支持 vue3
• React：react框架
• Preact：轻量化 react 框架
• Lit：轻量级web组件
• Svelte：svelte 框架
• Others：其他

毫无疑问，选择 React

4. 选择 Js / Ts

我选择 TypeScript

5. 项目创建完成

6. 启动项目

• 进入项目：cd demo
• 安装依赖：npm install
• 启动项目：npm run dev

2. 规范项目目录

根据脚手架自动生成的项目目录肯定不能满足项目开发，所以我一般会规范项目目录。

3. 使用 react-router-dom 路由

1. 使用 npm / yarn 命令下载

npm install react-router-dom -S  // --save  加上 -S 或 --save 会让依赖更新到 package.json 文件中or yarn add react-router-dom -S

注意： react-router-dom V6 已经抛弃了 Switch组件，改用 Routes 组件 ，使用时请注意！！！

这是以前使用 Switch 写法：

return (LoginComponent} />{/* 中间层 */}Skeleton} />Detail} />Approve} /)

现在 react-router-dom V6，引入 Switch 会报错！需要使用 Routes

这是使用 router-dom V6 的写法：

2. 更改 react-router-dom 版本

对于我个人而言，目前还是使用 react-router-domo V5版本更舒心一些，所以，替换路由版本为V5

有两种方法：

1. 通过 npm 命令降低版本

npm install react-router-dom@5.2.1 -S

2. 手动修改 package.json 文件，然后 npm install

tips: 建议使用第一种方法，第二种方法容易报各种错误，

如果使用上述方法后 react-router-dom 报错，可以尝试下以下方法解决：

1、删除 node_modules 文件夹，然后重新 npm install 下载

如果删除后重新下载，react-router-dom 仍然报错，则使用下述命令：

 npm i --save @types/react-router-dom

3. 修改App.tsx文件

4. 配置 alias 别名

在开发中，使用 alias 别名匹配文件是一件非常爽的事情。

在 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')}}
})

但配置过后，页面仍然报错，找不到该模块。

在 tsconfig.json 文件中再次进行如下配置，即可解决：

// tsconfig.json
{"compilerOptions": {"paths": {"@/*": ["./src/*"],}}
}

5. 配置 Ant Design 样式库

1. 引入

npm install antd --save
or
yarn add antd

2. 在 App.tsx 中引入样式文件

// App.tsx
import 'antd/dist/antd.css';

3. 在页面中使用

import { Button, message, Space} from 'antd';

6. 配置axios与顶部加载进度条，进行二次封装

下载安装

npm i axios -S  // 安装 axios
npm i --save nprogress  // 安装顶部加载进度条

进行二次封装： 将其配置在 http 文件夹下

配置 请求拦截器 与 响应拦截器

// http/http.tsimport axios from 'axios'
import NProgress from 'nprogress';
import { message } from 'antd';  // ant 组件配置下面会讲到
// import qs from 'qs';
// import store from '@/store';import 'nprogress/nprogress.css';//返回其他状态码
axios.defaults.validateStatus = function (status: number) {return status >= 200 && status <= 500;
};
//跨域请求，允许保存cookie
axios.defaults.withCredentials = true;
// NProgress 配置
NProgress.configure({showSpinner: false,
});//默认超时时间
axios.defaults.timeout = 30000;//表单序列化
const serialize = (data: any) => {const list: any = [];Object.keys(data).forEach((ele) => {list.push(`${ele}=${data[ele]}`);});return list.join('&');
};// 配置请求拦截器
axios.interceptors.request.use((config: any) => {// 开启进度条NProgress.start();const token = window.localStorage.getItem('token');const meta = config.meta || {};// 让每个请求都携带tokenif (token) {config.headers['Authorization'] = token  // 配置请求头，token的值在自己项目中获取}/***  下面的部分可以不写*///headers中配置text请求if (config.text === true) {config.headers['Content-Type'] = 'text/plain';}//headers中配置serialize为true开启序列化if (config.method === 'post' && meta.isSerialize === true) {config.data = serialize(config.data);};return config
}, (error: any) => {return Promise.reject(error)
})// 配置响应拦截器
axios.interceptors.response.use((res: any) => {// 关闭顶部加载进度条NProgress.done();const status: number = res.data.code || res.status;const statusWhiteList: any = [];const messages = res.data.msg || res.data.error_description || res.data.message || '未知错误';//如果是401则跳转到登录页面if (status === 401 || status === 403) {window.location.href = '/#/login'; // 如果使用的是 HistoryRouter,路径需要替换，不带 # message.destroy();message.error('登录过期，请重新登录');return Promise.reject();}// 如果请求为非200否者默认统一处理if (status !== 200) {if (res.config.responseType == 'blob') {const fileReader: any = new FileReader();fileReader.readAsText(res.data);fileReader.onload = function () {const result = JSON.parse(this.result);if (!result.message) {result.message = '未知错误';}message.destroy();message.error(result.message);return Promise.reject(new Error(result.message));};} else {message.destroy();message.error(messages);return Promise.reject(new Error(messages));}}return res.data || res
}, (error: any) => {NProgress.done();const response = error.response;// 下面我列举几个常见状态码，具体根据项目中需要，可以将其封装在一个文件中，便于美观if(response.status == 401) {message.error('登陆已失效')window.location.href = "/#/login"} else if (response.status == 403) {message.error('账号没有权限，请联系管理员')window.location.href = "/#/login"} else if (response.status == 404) {message.error('接口不存在，请联系管理员')} else if (response.status == 500) {message.error('系统异常，请联系管理员')} return Promise.reject(new Error(error));
})export default axios;

7. 配置 proxy 跨域

在 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')}},server: {port: 3000, // 开发环境启动的端口host: '0.0.0.0',// open: true, // 项目启动时自动打开浏览器proxy: {'/api': {target: 'http:xxxxxx', // 当遇到 /api 路径时，会将其转换成 target 的值changeOrigin: true,  // 如果接口跨域，需要进行这个参数配置// 一般情况下，配置上面两个即可// secure: false,      // 如果是 https 接口，需要配置这个参数// rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空}}}
})

8. 配置 Less / Sass

Less 与 Sass 是 Css 预处理语言，支持变量、嵌套，mixin 和导入等功能，可以极大的简化 css写法

1. 配置 Less

1. 使用 npm 安装 less 和 less-loader

npm install less --save
npm install less-loader --save-dev// 此处也可以合并命令

2. 在 vite.config.ts 中配置

css: {// css预处理器preprocessorOptions: {less: {// 支持内联 JavaScriptjavascriptEnabled: true,  // 一般只需要配置  javascriptEnabled就行，modifyVars也可以稍微配置charset: false,modifyVars: { // 更改主题在这里'primary-color': '#52c41a','link-color': '#1DA57A','border-radius-base': '2px'},// additionalData: '@import "./src/assets/style/global.less";',},},
},

2. 配置 Sass

1. 使用 npm 安装 sass 和 sass-loader

npm install sass --save
npm install sass-loader --save-dev

2. 在 vite.config.ts 中配置

css: {// css预处理器preprocessorOptions: {scss: {// 支持内联 JavaScriptjavascriptEnabled: true, // 一般只需要配置  javascriptEnabled就行，modifyVars也可以稍微配置charset: false,modifyVars: { // 更改主题在这里'primary-color': '#52c41a','link-color': '#1DA57A','border-radius-base': '2px'},// additionalData: '@import "./src/assets/style/global.scss";',},},
},

注意： Less 与 sass 使用一个即可，我一般使用 Less