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…

【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;搜索引擎就准备好可以随时处理用户搜索了…

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;只显示一…

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() 在当前列表中 将传入的其他序列的元素添加在表尾…

【学习笔记】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(…

pyqt的人脸识别 基于face_recognition库

参考文献&#xff1a; 1、python face_recognition实现人脸识别系统_python facerecognition检测人脸-CSDN博客 2、cv2.VideoCapture()_cv2.videocapture(0)-CSDN博客 1、camera.py文件代码如下&#xff1b;目录如下 import sys from PyQt5.QtWidgets import QApplication, …

NineData正式将SQL开发正式升级为数据库DevOps

NineData SQL 开发早期主要提供 SQL 窗口&#xff08;IDE&#xff09;功能&#xff0c;产品经过将近两年时间的打磨&#xff0c;新增了大量的企业级功能&#xff0c;时至今日已经服务了上万开发者&#xff0c;覆盖了数据库设计、开发、测试、变更等生命周期的功能。 为了让企业…

深入理解数据结构第五弹——排序(2)——快速排序

排序&#xff08;1&#xff09;&#xff1a;深入了解数据结构第四弹——排序&#xff08;1&#xff09;——插入排序和希尔排序-CSDN博客 前言&#xff1a; 在前面我们已经讲过了几种排序方式&#xff0c;他们的效率有快有慢&#xff0c;今天我们来学习一种非常高效的排序方式…

笔记本电脑上的聊天机器人: 在英特尔 Meteor Lake 上运行 Phi-2

对应于其强大的能力&#xff0c;大语言模型 (LLM) 需要强大的算力支撑&#xff0c;而个人计算机上很难满足这一需求。因此&#xff0c;我们别无选择&#xff0c;只能将它们部署至由本地或云端托管的性能强大的定制 AI 服务器上。 为何需要将 LLM 推理本地化 如果我们可以在典配…

windows下使用nginx设置静态资源路由

1、下载nginx http://nginx.org/en/download.html 下载稳定版本&#xff0c;以nginx/Windows-1.24.0为例&#xff0c;下载后解压&#xff0c;解压后如下&#xff1a; 2、启动nginx 打开cmd命令窗口&#xff0c;切换到nginx解压目录下&#xff1a; start nginx # 启动nginx服务…

OpenWrt 多拨负载均衡不起作用

检查 负载均衡->规则->Https->粘滞模式 是否启动&#xff0c;设置为 否 如果设置为是&#xff0c;那么根据官方描述&#xff1a; 来自相同源 IP 的流量&#xff0c;如果已经匹配过此规则并且在粘滞超时时间内&#xff0c;将会使用相同的 WAN 接口 意思就是如果你同一个…

实验六 智能手机互联网程序设计(微信程序方向)实验报告

实验目的和要求 请完成创建图片库应用&#xff0c;显示一系列预设的图片。 提供按钮来切换显示不同类别的图片。 二、实验步骤与结果&#xff08;给出对应的代码或运行结果截图&#xff09; 1.WXML <view> <button bindtap"showAll">所有图片</but…

小程序视频怎么保存到mp4

小程序上的视频如何下载成mp4&#xff0c;本文就将教大家如何将小程序视频保存到mp4&#xff0c;这里要用到一个工具:下载高手 下载高手的文件我已经打包好了 下载高手链接&#xff1a;https://pan.baidu.com/s/1qJ81sNBzzzU0w6DWf-9Nxw?pwdl09r 提取码&#xff1a;l09r -…