React + Ts + Vite + Antd 项目搭建

news/2024/11/14 6:57:58/

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.ppmy.cn/news/1428227.html

相关文章

深度学习基础——残差神经网络(ResNet)

深度学习基础——残差神经网络&#xff08;ResNet&#xff09; 1. 定义 残差神经网络&#xff08;ResNet&#xff09;是一种深度神经网络结构&#xff0c;由微软研究院的Kaiming He等人于2015年提出。它通过引入残差块&#xff08;Residual Block&#xff09;来解决深度神经网…

探索C++的奇妙世界:学习之旅的点点滴滴

在这个信息技术飞速发展的时代&#xff0c;编程语言作为计算机与人类沟通的桥梁&#xff0c;其重要性不言而喻。在众多编程语言中&#xff0c;C以其高效、灵活和强大的特性&#xff0c;吸引了无数编程爱好者的目光。今天&#xff0c;我将与大家分享我学习C的历程和心得&#xf…

Golang插件系统实现

插件可以在解耦的基础上灵活扩展应用功能&#xff0c;本文介绍了如何基于Golang标准库实现插件功能&#xff0c;帮助我们构建更灵活可扩展的应用。原文: Plugins with Go 什么是插件 简单来说&#xff0c;插件就是可以被其他软件加载的软件&#xff0c;通常用于扩展应用程序的功…

java-Spring-入门学习-第二天(单例模式和多例模式)

目录 Bean作用域 单例模式(默认可以不写) Spring下的 AutoWired 依赖注入 JaveEE下的 Resource 依赖注入 多例模式 Bean作用域 ​在Spring框架中&#xff0c;Bean是按照作用域来创建的&#xff0c;常见的作用域有两种&#xff1a;Singleton 和 Prototype。Singleton (单例…

LeetCode———100——相同的树

目录 ​编辑 1.题目 2.解答 1.题目 . - 力扣&#xff08;LeetCode&#xff09; 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&…

(vue)el-select选择框加全选/清空/反选

(vue)el-select选择框加全选/清空/反选 <el-form-item label"批次"><el-selectv-model"formInline.processBatch"multiplecollapse-tagsfilterableplaceholder"请选择"style"width: 250px"no-data-text"请先选择企业、日…

Golang学习笔记_RabbitMQ的原理架构和使用

RabbitMQ 简介 实现了高级消息队列协议&#xff08;Advanced Message Queuing Protcol&#xff09;AMQP消息队列中间件的作用&#xff08;Redis实现MQ里面有写过&#xff0c;这里简单带过&#xff09; 解耦削峰异步处理缓存消息通信提高扩展性 RabbitMQ 架构理解 #mermaid-s…

Golang数据类型

文章目录 数据类型的基本介绍基本数据类型整数类型字符类型浮点数类型复数类型布尔类型string类型 常量类型转换基本数据类型相互转换基本数据类型与string的转换 指针类型值类型和引用类型 数据类型的基本介绍 数据类型的基本介绍 Go中的每一种数据都定义了明确的数据类型&…