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

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

目录

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

前言

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

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

1. 使用 vite 创建 react 项目

1. npm / yarn 命令初始化

我使用的是

  1. npm init @vitejs/app  // 这个已经被弃用
  3. npm init vite // 使用这个
  5. or
  7. yarn create @vitejs/app  // 同理，使用下面这个
  8. 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 命令下载

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

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

这是以前使用 Switch 写法：

  1. return (
  2.         <Router>
  3.             <Switch>
  4.                 <Route path="/login" component={
  5.     LoginComponent} />
  6.                 {
  7.     /* 中间层 */}
  8.                 <Route exact path="/skeleton" component={
  9.     Skeleton} />
  10.                 <Route exact path="/detail" component={
  11.     Detail} />
  12.                 <Route exact path="/approve" component={
  13.     Approve} /
  14.                 <AuthRoute path="/">
  15.                     <LayoutPage />
  16.                 </AuthRoute>
  17.             </Switch>
  18.         </Router>
  19.     )

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

在这里插入图片描述

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

在这里插入图片描述

2. 更改 react-router-dom 版本

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

有两种方法：

1. 通过 npm 命令降低版本

  1. 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 仍然报错，则使用下述命令：

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

3. 修改App.tsx文件

在这里插入图片描述

4. 配置 alias 别名

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

在 vite.config.ts 中配置

  1. import {
  2.      defineConfig } from 'vite'
  3. import react from '@vitejs/plugin-react'
  4. import path from 'path'
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  9.     plugins: [react()],
  10.     resolve: {
  12.         alias: {
  14.             '@': path.resolve(__dirname, './src')
  15.         }
  16.     }
  17. })

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

在这里插入图片描述

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

  1. // tsconfig.json
  2. {
  4.   "compilerOptions": {
  6.     "paths": {
  8.       "@/*": ["./src/*"],
  9.     }
  10.   }
  11. }

5. 配置 Ant Design 样式库

1. 引入

  1. npm install antd --save
  2. or
  3. yarn add antd

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

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

3. 在页面中使用

  1. import {
  2.      Button, message, Space} from 'antd';

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

下载安装

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

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

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

  1. // http/http.ts
  3. import axios from 'axios'
  4. import NProgress from 'nprogress';
  5. import {
  6.      message } from 'antd';  // ant 组件配置下面会讲到
  7. // import qs from 'qs';
  8. // import store from '@/store';
  10. import 'nprogress/nprogress.css';
  13. //返回其他状态码
  14. axios.defaults.validateStatus = function (status: number) {
  16.   return status >= 200 && status <= 500;
  17. };
  18. //跨域请求，允许保存cookie
  19. axios.defaults.withCredentials = true;
  20. // NProgress 配置
  21. NProgress.configure({
  23.   showSpinner: false,
  24. });
  26. //默认超时时间
  27. axios.defaults.timeout = 30000;
  29. //表单序列化
  30. const serialize = (data: any) => {
  32.     const list: any = [];
  33.     Object.keys(data).forEach((ele) => {
  35.         list.push(`${
  36.       ele}=${
  37.       data[ele]}`);
  38.     });
  39.     return list.join('&');
  40. };
  42. // 配置请求拦截器
  43. axios.interceptors.request.use((config: any) => {
  45.     // 开启进度条
  46.     NProgress.start();
  47.     const token = window.localStorage.getItem('token');
  48.     const meta = config.meta || {
  49.     };
  50.     // 让每个请求都携带token
  51.     if (token) {
  53.         config.headers['Authorization'] = token  // 配置请求头，token的值在自己项目中获取
  54.     }
  55.     /**
  56.     *  下面的部分可以不写
  57.     */
  58.     //headers中配置text请求
  59.     if (config.text === true) {
  61.       config.headers['Content-Type'] = 'text/plain';
  62.     }
  63.     //headers中配置serialize为true开启序列化
  64.     if (config.method === 'post' && meta.isSerialize === true) {
  66.       config.data = serialize(config.data);
  67.     };
  68.     return config
  69. }, (error: any) => {
  71.     return Promise.reject(error)
  72. })
  75. // 配置响应拦截器
  76. axios.interceptors.response.use((res: any) => {
  78.     // 关闭顶部加载进度条
  79.     NProgress.done();
  80.     const status: number = res.data.code || res.status;
  81.     const statusWhiteList: any = [];
  82.     const messages = res.data.msg || res.data.error_description || res.data.message || '未知错误';
  83.      //如果是401则跳转到登录页面
  84.     if (status === 401 || status === 403) {
  86.       window.location.href = '/#/login'; // 如果使用的是 HistoryRouter,路径需要替换，不带 # 
  87.       message.destroy();
  88.       message.error('登录过期，请重新登录');
  89.       return Promise.reject();
  90.     }
  91.     // 如果请求为非200否者默认统一处理
  92.     if (status !== 200) {
  94.       if (res.config.responseType == 'blob') {
  96.         const fileReader: any = new FileReader();
  97.         fileReader.readAsText(res.data);
  98.         fileReader.onload = function () {
  100.           const result = JSON.parse(this.result);
  101.           if (!result.message) {
  103.             result.message = '未知错误';
  104.           }
  105.           message.destroy();
  106.           message.error(result.message);
  107.           return Promise.reject(new Error(result.message));
  108.         };
  109.       } else {
  111.         message.destroy();
  112.         message.error(messages);
  113.         return Promise.reject(new Error(messages));
  114.       }
  115.     }
  117.     return res.data || res
  118. }, (error: any) => {
  120.     NProgress.done();
  121.     const response = error.response;
  122.     // 下面我列举几个常见状态码，具体根据项目中需要，可以将其封装在一个文件中，便于美观
  123.     if(response.status == 401) {
  125.         message.error('登陆已失效')
  126.         window.location.href = "/#/login"
  127.     } else if (response.status == 403) {
  129.         message.error('账号没有权限，请联系管理员')
  130.         window.location.href = "/#/login"
  131.     } else if (response.status == 404) {
  133.         message.error('接口不存在，请联系管理员')
  134.     } else if (response.status == 500) {
  136.         message.error('系统异常，请联系管理员')
  137.     } 
  138.     return Promise.reject(new Error(error));
  139. })
  141. export default axios;

7. 配置 proxy 跨域

在 vite.config.ts 中配置

  1. import {
  2.      defineConfig } from 'vite'
  3. import react from '@vitejs/plugin-react'
  4. import path from 'path'
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  9.     plugins: [react()],
  10.     resolve: {
  12.         alias: {
  14.             '@': path.resolve(__dirname, './src')
  15.         }
  16.     },
  17.     server: {
  19.         port: 3000, // 开发环境启动的端口
  20.         host: '0.0.0.0',
  21.         // open: true, // 项目启动时自动打开浏览器
  22.         proxy: {
  24.             '/api': {
  26.                 target: 'http:xxxxxx', // 当遇到 /api 路径时，会将其转换成 target 的值
  27.                 changeOrigin: true,  // 如果接口跨域，需要进行这个参数配置
  28.                 // 一般情况下，配置上面两个即可
  29.                 // secure: false,      // 如果是 https 接口，需要配置这个参数
  30.                 // rewrite: path => path.replace(/^\/api/, '') // 将 /api 重写为空
  31.             }
  32.         }
  33.     }
  34. })

8. 配置 Less / Sass

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

1. 配置 Less

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

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

2. 在 vite.config.ts 中配置

  1. css: {
  3.   // css预处理器
  4.   preprocessorOptions: {
  6.     less: {
  8.       // 支持内联 JavaScript
  9.       javascriptEnabled: true,  // 一般只需要配置  javascriptEnabled就行，modifyVars也可以稍微配置
  10.       charset: false,
  11.       modifyVars: {
  12.      // 更改主题在这里
  13.           'primary-color': '#52c41a',
  14.           'link-color': '#1DA57A',
  15.           'border-radius-base': '2px'
  16.         },
  17.       // additionalData: '@import "./src/assets/style/global.less";',
  18.     },
  19.   },
  20. },

2. 配置 Sass

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

  1. npm install sass --save
  2. npm install sass-loader --save-dev

2. 在 vite.config.ts 中配置

  1. css: {
  3.   // css预处理器
  4.   preprocessorOptions: {
  6.     scss: {
  8.       // 支持内联 JavaScript
  9.       javascriptEnabled: true, // 一般只需要配置  javascriptEnabled就行，modifyVars也可以稍微配置
  10.       charset: false,
  11.       modifyVars: {
  12.      // 更改主题在这里
  13.           'primary-color': '#52c41a',
  14.           'link-color': '#1DA57A',
  15.           'border-radius-base': '2px'
  16.         },
  17.       // additionalData: '@import "./src/assets/style/global.scss";',
  18.     },
  19.   },
  20. },

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

发表评论

表情：
评论列表 （有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读