React入门-使用 Vite 搭建基于 React 和 TypeScript 的后台管理应用（一）

使用 Vite 搭建基于 React 和 TypeScript 的后台管理应用（一）

一、项目概述

本文介绍了如何使用 Vite 快速搭建一个基于 React 和 TypeScript 的后台管理应用，涵盖从环境搭建到基础功能实现的全过程。

二、技术选型

React 18 ：作为核心前端库，提供高效的组件化开发体验，利用其最新的特性提升应用性能和开发效率。
React-Router 7 ：用于实现应用内的路由管理，支持复杂单页面应用的页面切换和导航功能。
Ant Design 5 ：作为 UI 组件库，提供丰富、美观且易于使用的界面组件，加快界面开发速度。

三、目标功能实现

工程创建与基础配置 ：使用 Vite 快速创建 React + TypeScript 项目，通过修改 package.json 文件指定 React 和 React-Dom 版本为 18.0.0，确保项目基于最新稳定版本运行。
路由与菜单管理 ：安装 React-Router-Dom 实现路由功能，将菜单和路由数据提取到单独文件中集中管理，便于后期维护和扩展。
- 菜单数据 ：定义包含图标、标签、路径等信息的菜单项数组，使用 Ant Design 图标库增强视觉效果。
- 路由数据 ：配置与菜单对应的路由对象数组，明确各路由路径与组件的映射关系。
页面布局与组件开发 ：应用布局分为 Header、Sidebar 和 Content 三部分，初始化 Home、About、Dashboard 和 User 四个简单组件，实现基本页面展示功能。同时，实现菜单可收缩功能，收缩后仅展示图标，优化界面空间利用。

四、项目搭建过程

创建工程 ：通过命令 npm create vite react-admin-vite -- --template react-ts 快速初始化项目，利用 Vite 的 React + TypeScript 模板奠定开发基础。
版本调整与依赖安装 ：修改 package.json 中 React 相关版本号后，执行 npm install 安装依赖。随后安装 React-Router-Dom 和 Ant Design，完善项目功能所需的库支持。
数据管理与框架搭建 ：创建菜单和路由数据文件，定义清晰的数据结构，实现应用基本导航和页面展示框架。

菜单数据复制代码

import {
  HomeOutlined,
  InfoCircleOutlined,
  DashboardOutlined,
  UserOutlined,
} from '@ant-design/icons'

const menuItems = [
  { key: '1', label: 'Home', path: '/', icon: HomeOutlined },
  { key: '2', label: 'About', path: '/about', icon: InfoCircleOutlined },
  { key: '3', label: 'Dashboard', path: '/dashboard', icon: DashboardOutlined },
  { key: '4', label: 'User', path: '/user', icon: UserOutlined },
]

export default menuItems

路由数据复制代码

import React from 'react'
import { RouteObject } from 'react-router-dom'
import Home from './components/Home.tsx'
import About from './components/About.tsx'
import Dashboard from './components/Dashboard'
import User from './components/User'

const routes: RouteObject[] = [
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/dashboard',
    element: <Dashboard />,
  },
  {
    path: '/user',
    element: <User />,
  },
]

效果展示：

五、项目总结

效率提升 ：借助 AI 工具，快速解决菜单、路由数据提取及简单组件生成等问题，大幅降低学习成本，提高开发效率。
问题解决 ：在布局全屏展示问题上，通过分析发现并手动删除 React-Ts 模板自带的干扰 CSS 样式，成功解决问题，积累实际开发经验。

六、代码资源

项目完整代码托管于 Gitee，地址为：gitee.com/animal-fox_...