当前位置：首页 > news >正文

【React+Ts+Vite+AntDesign】从0到1基础项目搭建（动态路由）

news 来源：原创 2024/9/20 16:49:56

新建项目

npm create vite

在这里插入图片描述

配置路由

项目根目录执行命令安装依赖

npm install react-router-dom

安装AntDesign

项目根目录执行命令安装依赖

npm install antd --save

至于使用AntDesign，就这一步就可以了，使用table举例：
官网：https://ant.design/components/table-cn
在这里插入图片描述

其他关键配置

src>新建router文件夹>新建index.tsx

// index.tsx
import { lazy, ComponentType } from 'react'// 动态路由部分
const pages = import.meta.glob('../pages/**/*.tsx')
const dynamicRoutes = Object.entries(pages).filter(([path]) => !path.includes('/components/')).map(([path, component]) => {const name = path.match(/\.\.\/pages\/(.*)\.tsx$/)?.[1]if (!name) return nulllet routePath = `/${name.toLowerCase()}`routePath = routePath.replace(/\/index$/, '').replace(/\[([^\]]+)\]/g, ':$1')if (routePath === '/index') routePath = '/'return {path: routePath,element: lazy(component as () => Promise<{ default: ComponentType<any> }>)}}).filter(Boolean)// 固定路由部分
const notView = lazy(() => import('../404'))
const Home = lazy(() => import('@/pages/Home/index'))
const staticRoutes = [{path: '/',element: Home},{path: '*',element: notView }
]
// 合并动态路由和固定路由
const routes = [...staticRoutes, ...dynamicRoutes]
export default routes

App.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import routes from './router'
import { Suspense } from 'react'function App() {const safeRoutes = routes || []return (<BrowserRouter><div><Suspense fallback={<div>Loading...</div>}><Routes>{safeRoutes.map((route) =>route && <Route key={route.path} path={route.path} element={<route.element />} />)}</Routes></Suspense></div></BrowserRouter>)
}
export default App

src>新建pages文件夹
再新建Home文件夹>index.tsx

// src/pages/Home/index.tsx
import React from 'react';const Home: React.FC = () => {return <div>Home Page</div>;
};export default Home;

测试页面，能正常显示内容就ok。
后续所有跳转页面都在pages/目录
例：
在这里插入图片描述
这样就不用一个一个傻瓜式的写路由了，只需要管理文件，路由自动读取。
关于出现问题：

报错找不到模块“@/

修改vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path'export default defineConfig({plugins: [react()],resolve: {alias: {'@': resolve('./src'),},},
});

修改tsconfig.json

{"compilerOptions": {"baseUrl": "./", // 设置基础路径为当前目录"paths": { // 配置路径映射，@ 符号代表 src 目录"@/*": ["./src/*"]},"target": "ES2020", // 目标编译版本为 ES2020"useDefineForClassFields": true, // 允许类字段使用 defineProperty 进行定义"module": "ESNext", // 使用 ES 模块系统"lib": ["ES2020", "DOM", "DOM.Iterable"], // 编译时需要引入的库"skipLibCheck": true, // 跳过库文件的类型检查/* Bundler mode */"moduleResolution": "bundler", // 模块解析策略为 bundler"allowImportingTsExtensions": true, // 允许导入 TypeScript 扩展文件"resolveJsonModule": true, // 允许导入 JSON 模块"isolatedModules": true, // 确保每个文件都可以单独编译"noEmit": true, // 不生成输出文件"jsx": "preserve", // 保留 JSX 语法/* Linting */"strict": true, // 启用所有严格类型检查选项"noUnusedLocals": true, // 禁止未使用的局部变量"noUnusedParameters": true, // 禁止未使用的函数参数"noFallthroughCasesInSwitch": true // 禁止 switch 语句中存在空缺情况},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] // 包含的文件类型
}