React + Ts + Vite + Antd 项目搭建

1、创建项目

npm create vite 项目名称

选择 react

选择 typescript

关闭严格模式

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

 2、配置sass

npm install sass

更换所有后缀css为sass

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

// 配置Scss

  css: {

    preprocessorOptions: {

      scss: {

        additionalData: `@import "./src/styles/sassConfig";`,

      },

    },

  },

3、配置路径别名 

安装path      npm i @types/node --save-dev 

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

import { resolve } from "path"

// 配置路径别名

  resolve: {

    alias: {

      "@": resolve(__dirname, "src"),

    },

  },

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

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

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

4、配置axios请求

(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)解决跨域

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

vite.config.ts中配置跨域

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from "path"
export default defineConfig(({ mode }) => {const config = loadEnv(mode, "./")return {plugins: [react()],// 配置Scsscss: {preprocessorOptions: {scss: {additionalData: `@import "./src/styles/sassConfig";`,},},},// 配置路径别名resolve: {alias: {"@": resolve(__dirname, "src"),},},// 配置跨域server: {port: 8888,host: "192.168.31.207",proxy: {"/api": {target: config.VITE_TARGET,  // 会自动判断当前环境,对应上述三个文件中的targetchangeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ""),},},}}
})

5、配置Antd

安装:npm install antd --save

下载icon:npm install @ant-design/icons --save

国际化

下载完毕后,默认语言为英文,需要在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>
)

6、配置路由

安装 npm i react-router-dom@6

(1)在src文件目录下创建router文件夹 

import type { RouteObject, } from 'react-router-dom';
import { Navigate } from "react-router-dom";
import { lazy } from 'react';const Home = lazy(() => import('@/pages/Home'));
const NotFound = lazy(() => import('@/pages/NotFound'));//使用路由懒加载优化提升const routes: RouteObject[] = [{path: "/",element: <Navigate to="/home" />,},{path: '/404',element: <NotFound />,},{path: '/home',element: <Home />,// children: [//     {//         index : true,//         element: <Home />//     },//     {//         path: "/about",//         element: <About />,//         children: [//             { index : true, element: <AboutIndex />},//             { path : "/about/:id", element :<AboutList />}//         ]//     },//     {//         path: "/bussiness",//         element: <Bussiness />,//     }// ]},
];export default routes;

(2)在scr/App.tsx文件中加入

 
import React from 'react';
import './App.css';
import { useRoutes } from 'react-router';
import routes from './route';function App() {return (<div className="App">{useRoutes(routes)}</div>);
}export default App;

(3)在scr/main.tsx文件中配置路由模式

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>
);

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

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

相关文章

2023年图灵奖颁发给艾维·维格森(Avi Wigderson),浅谈其计算复杂性理论方面做出的重要贡献

Avi Wigderson是一位以色列计算机科学家&#xff0c;他在计算复杂性理论方面做出了重要的贡献&#xff0c;并对现代计算产生了深远的影响。 Wigderson的主要贡献之一是在证明计算复杂性理论中的基本问题的困难性方面。他证明了许多经典问题的困难性&#xff0c;如图论中的图同构…

LeetCode: 209 长度最小的子数组

209. 长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1…

大话数据结构学习笔记-算法

定义 算法是解决特定问题求解步骤的描述&#xff0c;在计算机中表现为指令的有限序列&#xff0c;并且每条指令表示一个或多个操作。 特性 算法具有五个基本特性&#xff1a;输入、输出、有穷性、确定性和可行性。 输入:算法可以具有零个或多个输入 输出:算法至少有一个或…

【QT教程】QT6 Web性能优化

QT6 Web性能优化 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C扩展开发视频课程 免费QT视频课程 您可以看免费1000个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看 免费…

vue 常用的日历排班,带农历显示组件(2024-04-16)

显示当前月日历组件&#xff0c;里面带农历或节日显示 后面可以丰富一些国家法定节假期的业务需求 代码 js-calendar.js 文件 var lunarInfo [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, //1900-19090x04ae0, 0x0a5b6, 0…

SEO之搜索引擎的工作原理(三)

初创企业需要建站的朋友看这篇文章&#xff0c;谢谢支持&#xff1a;我给不会敲代码又想搭建网站的人建议 &#xff08;接上一篇。。。&#xff09; 排名 经过搜索引擎蜘蛛抓取页面&#xff0c;索引程序计算得到倒排索引后&#xff0c;搜索引擎就准备好可以随时处理用户搜索了…

故障键盘(Lc2810)——模拟

你的笔记本键盘存在故障&#xff0c;每当你在上面输入字符 i 时&#xff0c;它会反转你所写的字符串。而输入其他字符则可以正常工作。 给你一个下标从 0 开始的字符串 s &#xff0c;请你用故障键盘依次输入每个字符。 返回最终笔记本屏幕上输出的字符串。 示例 1&#xff…

YOLOv8 目标检测项目实操

一 yolov8 背景介绍 YOLOv8是一种尖端的、最先进的(SOTA)模型&#xff0c;建立在以前 YOLO 版本的成功基础上&#xff0c;并引入了新的特性和改进&#xff0c;以进一步提高性能和灵活性。YOLOv8被设计为快速、准确、易于使用&#xff0c;这使它成为一个很好的选择&#xff0c;…

RAG (Retrieval Augmented Generation) 结合 LlamaIndex、Elasticsearch 和 Mistral

作者&#xff1a;Srikanth Manvi 在这篇文章中&#xff0c;我们将讨论如何使用 RAG 技术&#xff08;检索增强生成&#xff09;和 Elasticsearch 作为向量数据库来实现问答体验。我们将使用 LlamaIndex 和本地运行的 Mistral LLM。 在开始之前&#xff0c;我们将先了解一些术…

【Web】2022DASCTF Apr X FATE 防疫挑战赛 题解(全)

目录 warmup-php soeasy_php warmup-java warmup-php spl_autoload_register函数实现了当程序遇到调用没有定义过的函数时&#xff0c;会去找./class/函数名.php路径下的php文件&#xff0c;并把它包含在程序中。 拿到附件拖进Seay里自动审计一下 显然利用终点为evaluateExp…

SpringBoot项目如何实现邮件发送

文章目录 1. 开启邮箱SMTP服务2. 导入pom依赖3. 在配置文件中添加邮箱配置3. 封装EmailTask类4. 写测试类 1. 开启邮箱SMTP服务 这里以163邮箱为例&#xff0c;点击设置——更多设置——POP3/SMTP/IMAP——开启服务 根据提示开启服务之后会得到一个授权码&#xff0c;只显示一…

(通义千问,miyagpt,AlchatOS,aitianhu1,a1r,1ai)分享6个好用的GPT

目录 1、通义千问 (aliyun.com) 2、MIYAGPT (miyadns.com) 3、AIchatOS 4、 Safeline Waf CE (aitianhu1.top)

数据库:SQL分类之DCL详解

1.管理用户 1.查询用户 use mysql ; select * from user ; 2.创建用户 create user 用户名主机名 identified by 密码 ; 例&#xff1a; //创建用户itcast ,只能够在当前主机local host访问&#xff0c;密码123456 create user itcastlocalhost identified by 123456;//创建用…

postgreSql判断表是否存在某个字段

在PostgreSQL中&#xff0c;可以使用information_schema.columns视图来检查表是否存在某个字段。以下是一个SQL查询示例&#xff0c;它检查名为sys_statlog的表中是否存在名为origin_type的字段&#xff1a; SELECT EXISTS (SELECT 1FROM information_schema.columnsWHERE tab…

攻防演练,现在收到通知服务器已经被攻破,作为蓝方,怎么检查服务器被攻破的痕迹

在攻防演练中&#xff0c;如果您的服务器被告知已经被攻破&#xff0c;重要的是要快速并系统地响应&#xff0c;以确定攻击的范围、方法和影响。这包括确认攻击的痕迹、哪些数据可能被访问或盗取&#xff0c;以及如何尽快恢复安全状态。以下是一系列步骤和建议&#xff0c;帮助…

Cisco ACI使用Postman配置交换机-未完待续

先看下不使用脚本的情况下是怎么配置交换机端口的&#xff1f; 例&#xff1a; 有10个交换机接口要开trunk&#xff0c;透传50个vlan&#xff0c; 使用GUI的操作方式为 1 进入EPG -->Static port 2 右键&#xff0c;绑定接口 3 选中node -->指定接口—>指定vlan —>…

python 列表对象函数

对象函数必须通过一个对象调用。 列表名.函数名() append() 将某一个元素对象添加在列表的表尾 如果添加的是其他的序列&#xff0c;该序列也会被看成是一个数据对象 count() 统计列表当中 某一个元素出现的次数 extend() 在当前列表中 将传入的其他序列的元素添加在表尾…

JAVA后端面试

一、基础 1、创建对象的方法 new、反射、clone、反序列化 Class cl Class.forName("TestMe"); 2、有哪些引用类型 强引用、软引用、弱引用、虚引用 3、JVM 类加载机制 双亲委派机制&#xff08;Parent-Delegate Model&#xff09;是Java类加载器中采用的一种…

hover时预览切换,点击后才正式切换

1、使用CSS的:hover伪类 虽然这不是通过JavaScript或jQuery直接绑定事件&#xff0c;但CSS的:hover伪类可以用来改变元素在鼠标移入和移出时的样式。这种方法主要用于视觉效果的改变&#xff0c;而不是执行复杂的JavaScript逻辑。 #myElement:hover { /* 当鼠标悬停在#myEleme…

【学习笔记】Python大数据处理与分析——pandas数据分析

一、pandas中的对象 1、Series对象 由两个相互关联的数组(values, index)组成&#xff0c;前者&#xff08;又称主数组&#xff09;存储数据&#xff0c;后者存储values内每个元素对应关联的标签。 import numpy as np import pandas as pds1 pd.Series([1, 3, 5, 7])print(…