vite + react +typescript 环境搭建，小白入门级教程

布满荆棘的人生 2024-03-31 13:54 94阅读 0赞

#### 目录 ####

*   *  前言
 *  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 // 使用这个
    
    or
    
    yarn create @vitejs/app  // 同理，使用下面这个
    yarn create vite

### 2. 输入项目名称 ###

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

![在这里插入图片描述][9dc612ef0aa544e487096028ea4df3ea.png]

### 3. 选择框架 ###

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

毫无疑问，选择 React

![在这里插入图片描述][7380d9dfa51c428b8e22f8f6cbdbaf92.png]

### 4. 选择 Js / Ts ###

我选择 `TypeScript`

![在这里插入图片描述][f4e72611ae984944aac23b976a6b41f8.png]

### 5. 项目创建完成 ###

![在这里插入图片描述][912f0289f4fb4095a1ed9f376a150f1b.png]

### 6. 启动项目 ###

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

![在这里插入图片描述][60d3e71d17f64c928d5cdad0e4d95516.png]

## 2. 规范项目目录 ##

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

![在这里插入图片描述][ef869a1891f0406493b4b35001345add.png]

## 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 (
            <Router>
                <Switch>
                    <Route path="/login" component={
        LoginComponent} />
                    {
        /* 中间层 */}
                    <Route exact path="/skeleton" component={
        Skeleton} />
                    <Route exact path="/detail" component={
        Detail} />
                    <Route exact path="/approve" component={
        Approve} /
                    <AuthRoute path="/">
                        <LayoutPage />
                    </AuthRoute>
                </Switch>
            </Router>
        )

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

![在这里插入图片描述][00492973b9ed489d96f53d336de74bd2.png]

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

![在这里插入图片描述][4ba1f2df4be44676ad73abb58d82d6d3.png]

### 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文件 ###

![在这里插入图片描述][ccaa3a4795854ca5996f293d57d7ae2b.png]

--------------------

## 4. 配置 alias 别名 ##

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

在 `vite.config.ts` 中配置

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

![在这里插入图片描述][9df98aad38ed4085a3cab8b229f7b9a4.png]

在 `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.ts
    
    import 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 || {
        };
    	// 让每个请求都携带token
    	if (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: {
        
          // 支持内联 JavaScript
          javascriptEnabled: 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: {
        
          // 支持内联 JavaScript
          javascriptEnabled: 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`

[9dc612ef0aa544e487096028ea4df3ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/38c942ac07334b27892dc49c0a6a8e65.png
[7380d9dfa51c428b8e22f8f6cbdbaf92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/223ac724dd744828883a17ff580fbf2f.png
[f4e72611ae984944aac23b976a6b41f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b84523a93b9749d493e63b290b9caee4.png
[912f0289f4fb4095a1ed9f376a150f1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1ebd21a5ce634e3fb31d1f2b66d36f52.png
[60d3e71d17f64c928d5cdad0e4d95516.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8d70d5a5c6574ac4ba1fb081211b9b05.png
[ef869a1891f0406493b4b35001345add.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0e3d75637f0d4cc9bcd5ba88cfd4790f.png
[00492973b9ed489d96f53d336de74bd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/5bd34f26c37747aa8214dc90bf0fe8c6.png
[4ba1f2df4be44676ad73abb58d82d6d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/200bdfd46f33499085c92ff87a818683.png
[ccaa3a4795854ca5996f293d57d7ae2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/7d3cef8efb564c5fb75e58c3a3ccaf0e.png
[9df98aad38ed4085a3cab8b229f7b9a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8fd71459fc1f498388e87872e4903250.png