【React】Vite创建React+TS项目

前提条件

有node环境,且node版本>=18.0.0

创建项目

npm create vite@latest

1.起项目名

在这里插入图片描述

2.选择框架在这里插入图片描述

3.选择语言在这里插入图片描述

TypeScript + SWC 是指 Vite 使用 SWC(Speedy Web Compiler)作为 TypeScript 的编译器。

SWC 是一个针对 JavaScript 和 TypeScript 的超快速编译器,相比于传统的 TypeScript 编译器(tsc),SWC 具有更快的编译速度。

SWC 通过利用 Rust 编写的编译器,使用了更先进的优化技术,使得它在处理 TypeScript 代码时能够更快地进行转换和编译。特别是在大型项目中,SWC 相对于传统的 TypeScript 编译器有着更快的性能,特别是在启动项目和进行热模块更新时。

4.依次执行命令,启动项目

在这里插入图片描述
至此项目已初始化完毕

关闭严格模式

建议关闭严格模式,因为不能自动检测副作用,有意双重调用。将严格模式注释即可。

main.ts中

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App.tsx"
import "./index.scss"ReactDOM.createRoot(document.getElementById("root")!).render(// <React.StrictMode><App />// </React.StrictMode>
)

配置sass

下载

npm install sass

将项目初始化时的index.css文件,修改为.sass后缀后即可书写sass代码。

注意: main.ts中引入样式时,后缀也要修改

import "./index.scss"

vite.config.ts中注册全局样式

// 配置Scss
css: {preprocessorOptions: {scss: {additionalData: `@import "./src/styles/sassConfig";`,},},
},

配置路径别名

安装path

npm i @types/node --save-dev

在 vite.config.ts 中引入path,并声明快捷字符及其对应文件夹,这里以@表示src目录为例,代码如下:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"
import { resolve } from "path"export default defineConfig({plugins: [react()],// 配置路径别名resolve: {alias: {"@": resolve(__dirname, "src"),},},
})

此时@已经可以正确读取src目录,但是输入@后,并未出现提示,需要在tsconfig.json文件中声明路径。

在这里插入图片描述
tsconfig.json,注意:这里的字符与目录一定要与vite.config.ts中的配置保持一致。

{"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"lib": ["ES2020", "DOM", "DOM.Iterable"],"module": "ESNext","skipLibCheck": true,"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx","strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,// 路径别名"baseUrl": ".","paths": {"@/*":["./src/*"]}},"include": ["src"],"references": [{ "path": "./tsconfig.node.json" }]
}

添加后,再次输入@后,编译器会读取src目录下的资源。

在这里插入图片描述

配置路由

配置请求

1. 下载axios及类型声明文件

npm install axios @types/axios

2. 根据需求封装axios

这里以最基本请求举例

// 在项目中创建一个 axios.js 文件import axios from 'axios';const instance = axios.create({baseURL: 'http://api.example.com', // 你的 API 地址timeout: 5000, // 请求超时时间(毫秒)headers: {'Content-Type': 'application/json', // 设置请求头,根据实际情况修改}
});// 请求拦截器
instance.interceptors.request.use(config => {// 在发送请求之前做些什么,比如添加 token 等return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use(response => {// 对响应数据做点什么return response.data;},error => {// 对响应错误做点什么return Promise.reject(error);}
);export default instance;

3. 解决跨域

首先在项目根目录下创建三个文件,分别对应全局环境、开发环境、生产环境。

在这里插入图片描述
.env

NODE_ENV = envVITE_NAME = '全局环境'
VITE_API_URL=''

.env.development

NODE_ENV = developmentVITE_NAME = '开发环境'
VITE_API_URL='/api'
VITE_TARGET ='http://.....'

.env.production

NODE_ENV = productionVITE_NAME = '生产环境'
VITE_API_URL = ''
VITE_TARGET ='https://xxx.com/'

vite.config.ts中配置跨域

import react from "@vitejs/plugin-react-swc"
import { defineConfig, loadEnv } from "vite"export default defineConfig(({ mode }) => {const config = loadEnv(mode, "./")return {plugins: [react()],// 配置跨域server: {port: 8888,host: "192.168.31.207",proxy: {"/api": {target: config.VITE_TARGET,  // 会自动判断当前环境,对应上述三个文件中的targetchangeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ""),},},},}
})

配置Antd

1. 安装

官方地址

// npm
npm install antd --save
// yarn
yarn add antd
// pnpm
pnpm install antd --save

2. 下载icon

官方地址

// npm
npm install @ant-design/icons --save
// yarn
yarn add @ant-design/icons
// pnpm
pnpm install @ant-design/icons --save

3. 国际化

下载完毕后,默认语言为英文,需要在main.ts中注入并配置antd

import ReactDOM from "react-dom/client"
import App from "./App.tsx"
import "./index.scss"
// antd部分
import { ConfigProvider } from "antd"
import "dayjs/locale/zh-cn"
import zhCN from "antd/locale/zh_CN"ReactDOM.createRoot(document.getElementById("root")!).render(<ConfigProvider locale={zhCN}><App /></ConfigProvider>
)

4.定制主题

可以更改组件默认样式,创建配置文件如下,具体请查阅官方文档

export default {components: {Button: {colorPrimary: "#205fd4",  // 改变Button的type为primary时的颜色},},
}

在main.ts中注册自定义theme文件

import theme from "@/config/antdTheme" // 自定义theme文件ReactDOM.createRoot(document.getElementById("root")!).render(<ConfigProvider theme={theme}><App /></ConfigProvider>
)

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

操作系统知识-存储管理+文件管理管理-嵌入式系统设计师备考笔记

0、前言 本专栏为个人备考软考嵌入式系统设计师的复习笔记&#xff0c;未经本人许可&#xff0c;请勿转载&#xff0c;如发现本笔记内容的错误还望各位不吝赐教&#xff08;笔记内容可能有误怕产生错误引导&#xff09;。 本章的主要内容见下图&#xff1a; 1、存储管理&#…

数据分析及应用 | 超强!深度学习Top10算法!(建议收藏!)

本文来源公众号“数据分析及应用”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;超强&#xff01;深度学习Top10算法&#xff01; 自2006年深度学习概念被提出以来&#xff0c;20年快过去了&#xff0c;深度学习作为人工智能领域…

基于Andriod的连锁药店管理系统(源码|论文)

一、系统架构 前端&#xff1a;vue | uni-app 后端&#xff1a;spring | springmvc | mybatis 环境&#xff1a;jdk1.8 | mysql | maven | node 二、代码及数据库 三、功能介绍 01. 登录页 02. 管理后台-首页 03. 管理后台-个人中心-修改密码 04. 管理后台-个人中心-个…

iOS报错-Command PhaseScriptExecution failed with a nonzero exit code

问题&#xff1a;iOS debug没问题&#xff0c;一打包就报错&#xff1a; Command PhaseScriptExecution failed with a nonzero exit code 解决方法如下&#xff1a; 在项目的Pods目录下&#xff0c;找到Targets Support Files->Pods-xxxx-frameworks.sh 如下&#xff1a…

Linux TCP参数——tcp_adv_win_scale

文章目录 tcp_adv_win_scaleip-sysctl.txt解释buffering overhead内核缓存和应用缓存示例计算深入理解从2到1(tcp_adv_win_scale的值)总结 tcp_adv_win_scale adv-advise&#xff1b;win-window; 用于指示TCP中接收缓存比例的值。 static inline int tcp_win_from_space(int …

【大数据面试题】 018 数据仓库的分层了解吗?说说你的理解

一步一个脚印&#xff0c;一天一道面试题。 数据仓库是比较常见的考点。今天就介绍一下数据仓库的分层。本篇文章会较多的图片是来自尚硅谷的。 数据仓库的背景和好处 数据仓库的诞生就和大数据的诞生有很大的相似。大数据的诞生是为了处理超大的数据&#xff0c;并在其中探…

kerberos验证协议安装配置使用

一、kerberos是什么 Kerberos 是一个网络身份验证协议&#xff0c;用于在计算机网络中进行身份验证和授权。它提供了一种安全的方式&#xff0c;允许用户在不安全的网络上进行身份验证&#xff0c;并获取访问网络资源的权限。 二、安装配置kerberos服务端 1、安装kerberos #检…

如何快速解决msvcr80.dll丢失问题,教你5种方法轻松搞定

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“msvcr80.dll丢失”。MSVCR80.dll文件的丢失可能会引发一系列系统运行与软件功能上的问题。作为一个重要的动态链接库文件&#xff0c;它在Windows操作系统中扮演着关键角色&#xff0c;尤其…

【C++】Stack queue 模拟实现及容器适配器

目录 一、stack 1、stack 基本介绍 2、stack 的使用 3、stack 模拟实现 二、queue 1、queue 基本介绍 2、queue 的使用 3、queue 模拟实现 三、容器适配器 1、什么是适配器 ​2、deque 的基本介绍 3、deque 的基本结构 4、deque 的缺陷 一、stack 1、stack 基本介…

计算机二级(Python)真题讲解每日一题:《十字叉》

描述‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬ ‪‬‪‬‪‬‪‬‪‬‮‬‪…

数据可信流通:从运维信任到技术信任

1.数据可信流通概念 "数据可信流通"通常指的是确保数据在不同系统、应用程序或者组织之间的传输和交换过程中的可信性、完整性和安全性。在数据流通的过程中&#xff0c;确保数据的真实性、完整性和保密性是非常重要的&#xff0c;尤其是涉及到敏感信息或者重要数据…

本地知识库的底层逻辑是什么?为什么企业需要它?

如果我们将企业比作一座繁华的城市&#xff0c;那么信息就像是城市的建筑&#xff0c;知识库则是城市的地图。知识库不仅可以帮我们存储整理和搜寻信息&#xff0c;而且还可以为我们提供信息的结构以便我们能够更好地理解和利用这些信息。今天&#xff0c;我们要探讨的就是这个…