第02章：使用Vite初始化项目

第02章：使用Vite初始化项目

本章中，我们将使用Vite来初始化项目，然后了解初始的项目结构，理解vite.config.ts的基础配置，最后初始化Git仓库并配置.gitignore。

一、环境准备与项目创建

1.系统要求

• Node.js 18.0+ (推荐 24.x LTS 版本)
• pnpm 7+
• 代码编辑器 (推荐 VS Code)

2.创建 Vite React + TypeScript 项目

• 打开终端，执行以下命令：

# 使用 pnpm
pnpm create vite backend-management-system --template react-ts

安装时选择如下选项，会自动安装依赖并启动开发服务器

• 如果未选择安装并启动，可以进入项目目录手动安装依赖并启动：

cd backend-management-system

# 安装依赖
pnpm install

# 启动项目
pnpm dev

• 服务启动成功后，访问 http://localhost:5173 即可看到 React 应用

二、项目主要结构分析

backend-management-system/
├── node_modules/           # 依赖项
├── public/                 # 静态资源
│   └── vite.svg
├── src/
│   ├── assets/            # 图片、字体等资源
│   │   └── react.svg
│   ├── components/        # React 组件
│   │   └── HelloWorld.tsx
│   ├── App.css           # 应用样式
│   ├── App.tsx           # 根组件
│   ├── index.css         # 全局样式
│   ├── main.tsx          # 应用入口
│   └── vite-env.d.ts     # Vite 类型定义
├── .gitignore            # git忽略规则
├── eslint.config.js      # ESLint配置
├── index.html            # HTML 模板
├── package.json          # 项目配置
├── tsconfig.json         # TypeScript 配置
├── tsconfig.node.json    # Node.js TypeScript 配置
└── vite.config.ts        # Vite 配置

三、初始化Git仓库

1.创建Git仓库

2.本地仓库与远程仓库关联

• 在项目终端依次执行下面的git命令

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Julychen-1024/backend-management-system.git
git push -u origin main

• 执行完成后，就可以在github看到项目了

3.配置.gitignore

暂时使用项目创建后默认的配置，后续如果使用到环境变量等配置，可以添加到.gitignore中

好了，现在我们的项目已经初始化完成了，下一章中，我们将实现工程化相关的配置。