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

news2024/11/18 21:35:26

目录

    • 前言
  • 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

在这里插入图片描述

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 (
        <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

在这里插入图片描述

这是使用 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.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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/111066.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

rabbitmq基础5——集群节点类型、集群节点基础运维，集群管理命令，API接口工具

rabbitmq基础5——集群节点类型、集群节点基础运维，集群管理命令，API接口工具

文章目录一、集群节点类型1.1 内存节点1.2 磁盘节点二、集群基础运维2.1 剔除单个节点2.1.1 集群正常踢出正常节点2.1.2 服务器异常宕机踢出节点2.1.3 集群正常重置并踢出节点2.2 集群节点版本升级2.3 集群某单节点故障恢复2.3.1 机器硬件故障2.3.2 机器掉电2.3.3 网络故障2.3.…
阅读更多...
Android ShapeableImageView使用

Android ShapeableImageView使用

ShapeableImageView使用使用 导包 implementation com.google.android.material:material:1.4.0属性 属性描述shapeAppearance样式shapeAppearanceOverlay样式&#xff0c;叠加层strokeWidth描边宽度strokeColor描边颜色 样式 名称属性值描述cornerFamilyrounded圆角cut裁剪…
阅读更多...
学习记录-mybatis+vue+elementUi实现品牌查询

学习记录-mybatis+vue+elementUi实现品牌查询

和以往不同的是&#xff0c;这一次使用了vue和axios来接收后端传过来的参数&#xff0c;并且新建了impl文件来继承service层的接口。该过程实现一共分为4步骤 步骤一 ①mapper mapper 写mapper接口 其实就是写SQL语句了&#xff0c;第一步就是写SQL。这里使用的是注解开发&…
阅读更多...
程序员危机如何化解？

程序员危机如何化解？

很多人认为程序员一定要干到管理层&#xff0c;才会有继续走下去的希望&#xff0c;而踏实做技术的程序员&#xff0c;只会面临淘汰。事实真是如此吗&#xff1f; △ 截图来源脉脉&#xff0c;如侵删 先不说结论&#xff0c;我们一起先看看网友们的看法&#xff1a; △ 截…
阅读更多...
报表控件Stimulsoft v2023.1全新发布 | 附免费下载试用

报表控件Stimulsoft v2023.1全新发布 | 附免费下载试用

Stimulsoft Ultimate 宣布发布新版本2023.1&#xff01;在最新版本中添加了对Razor Pages的支持、新的数据监视器可视化工具、为PHP和Blazor平台更新了组件,欢迎下载试用&#xff01; Stimulsoft Ultimate官方正版下载 Razor Pages 在 2023.1.1 版中&#xff0c;我们添加了对…
阅读更多...
跨域问题以及解决跨域问题的vue-cli解决方案

跨域问题以及解决跨域问题的vue-cli解决方案

跨域问题 写项目前要问后端,接口支持跨域吗? 支持就不会出现问题,不支持就需要解决跨域问题 1.如何判断一个浏览器的请求是否跨域&#xff1f; 在A地址&#xff08;发起请求的页面地址&#xff09;向B地址&#xff08;要请求的目标页面地址&#xff09;发起请求时&#xff…
阅读更多...
【JavaEE】多线程(三)线程的状态

【JavaEE】多线程(三)线程的状态

✨哈喽&#xff0c;进来的小伙伴们&#xff0c;你们好耶&#xff01;✨ &#x1f6f0;️&#x1f6f0;️系列专栏:【JavaEE】 ✈️✈️本篇内容:线程的状态&#xff0c;线程安全问题&#xff01; &#x1f680;&#x1f680;代码存放仓库gitee&#xff1a;JavaEE初阶代码存放&a…
阅读更多...
抗癌药物之多肽药物偶联物技术（PDC）介绍

抗癌药物之多肽药物偶联物技术（PDC）介绍

长期以来&#xff0c;心血管疾病是全球中年人死亡的主要原因。这种情况最近在高收入国家发生了变化&#xff0c;现在癌症导致的死亡人数是心血管疾病的两倍。2018 年&#xff0c;癌症导致全球 960 万人死亡&#xff0c;1810 万新病例被诊断出来。女性最常发生的癌症是乳腺癌&am…
阅读更多...
12Python继承与多态

12Python继承与多态

继承 面向对象三大特性 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的 类 中继承 实现代码的重用&#xff0c;相同的代码不需要重复的编写多态 不同的对象调用相同的方法&#xff0c;产生不同的执行结果&#xff0c;增加代码的灵活度 1继承的概念、语法和特点 继承的概…
阅读更多...
奖项快报 | ALVA Systems 上榜 《2022 高成长企业 TOP100》！

奖项快报 | ALVA Systems 上榜 《2022 高成长企业 TOP100》！

近日&#xff0c;《2022 高成长企业 TOP 100》榜单发布&#xff0c;凭借卓越的创新能力与在工业 AR 领域的赋能价值&#xff0c;ALVA Systems 在2022年度高成长企业TOP100大赛活动中脱颖而出&#xff0c;成功入选榜单。 *ALVA Systems 入选榜单 创新驱动&#xff0c;赋能数字经…
阅读更多...
【ARM -- stm32 汇编代码点亮LED灯】

【ARM -- stm32 汇编代码点亮LED灯】

ARM -- stm32 汇编代码点亮LED灯实现过程查询开发手册分析RCC章节分析GPIO章节编写代码实现过程 查询开发手册 分析RCC章节 一、确定RCC基地址 二、分析RCC_MP_AHB4ENSETR寄存器 1、RCC_MP_AHB4ENSETR寄存器的功能是使能GPIO组相关控制器&#xff1b; 2、RCC_MP_AHB4ENSET…
阅读更多...
07第四章：01_常用注解

07第四章：01_常用注解

常用注解 1、Table 作用&#xff1a;建立实体类和数据库表之间的对应关系。 默认规则&#xff1a;实体类类名首字母小写作为表名&#xff0c;如 Employee -> employee 表 用法&#xff1a;在 Table 注解的 name 属性中指定目标数据库的表名&#xff1b; 案例&#xff1…
阅读更多...
WPF依赖属性、附加属性、属性继承、类型转换详解

WPF依赖属性、附加属性、属性继承、类型转换详解

依赖属性 依赖属性回调方法与参数 具有依赖属性的类必须继承自DependencyObject&#xff0c;定义依赖属性要有2个步骤 //1属性包装器&#xff0c;目的是为了向正常属性一样使用依赖属性 public int Name {get { return (int)GetValue(NameProperty); }set { SetValue(NamePr…
阅读更多...
国家“数据安全三认证”图解来了

国家“数据安全三认证”图解来了

二十大指引新时代新征程。蓝图已经绘就&#xff0c;号角已经吹响&#xff0c;新征程是充满光荣和梦想的远征。二十大报告深刻阐明了实现中华民族伟大复兴的一系列重大问题&#xff0c;系统擘画了以中国式现代化推进民族复兴的宏伟蓝图&#xff0c;是引领中华民族伟大复兴的政治…
阅读更多...
论文导读 | GPU上的动态图数据管理技术浅析

论文导读 | GPU上的动态图数据管理技术浅析

一、背景介绍 随着相关技术的发展&#xff0c;图计算与分析系统在大量场景中得到应用。同时&#xff0c;为了解决图规模巨大等因素导致的性能下降问题&#xff0c;研究人员利用GPU这一新型计算硬件&#xff0c;设计了大量高效的图计算与分析解决方案。GPU提供的高并发计算能力…
阅读更多...
我司何晓磊受邀参加东盟与中日韩中小企业人工智能产业论坛并担任评委

我司何晓磊受邀参加东盟与中日韩中小企业人工智能产业论坛并担任评委

我司何晓磊受邀参加东盟与中日韩中小企业人工智能产业论坛并担任评委 一、活动背景 为推动东盟与中日韩&#xff08;103&#xff09;中小企业服务联盟务实合作&#xff0c;帮助中小企业提高生产力和技术创新能力&#xff0c;进一步提高国际化发展水平&#xff0c;促进东亚区域…
阅读更多...
C++——哈希练习题

C++——哈希练习题

文章目录一、编程题1.在长度 2N 的数组中找出重复 N 次的元素2. 两个数组的交集二、面试题给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在这40亿个数中。【腾讯】&#xff08;一&#xff09;位图应用1. 给定100亿个整…
阅读更多...
C++ ：STL：初识

C++ ：STL：初识

1&#xff1a;STL初识 1.1 STL的诞生 STL 诞生来源 长久依赖&#xff0c;软件界一直希望建立一种可重复利用的东西C 的面向对象和泛型思想&#xff0c;目的就是复用性的提升大多数情况下&#xff0c;数据结构和算法都未能有一套标准&#xff0c;导致被迫从事大量重复的工作为了…
阅读更多...
多线程问题（一）

多线程问题（一）

目录 一、为什么引入线程&#xff1f; 二、线程和进程的区别 三、创建线程的五种方式 1、创建类继承Thread类 2、创建类实现Runnable接口 3、构造Thread类的匿名内部类 4、构造Runnable的匿名内部类 5、使用lambda表达式 四、start方法与run方法的区别 五、线程…
阅读更多...
Promise对象的使用

Promise对象的使用

一、什么是Promise Promise 是异步编程的一种解决方案&#xff0c;比传统的解决方案&#xff08;回调函数和事件&#xff09;更合理和更强大。从语法上说&#xff0c;Promise 是一个对象&#xff0c;从它可以获取异步操作的消息。Promise 提供统一的 API&#xff0c;各种异步操…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023