【前端】从零开始搭建现代前端框架：React 19、Vite、Tailwind CSS、ShadCN UI-第二章《快速开始：使用 Vite + TypeScript 初始化项目》

原创已于 2025-12-05 13:02:14 修改 · 441 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #json #javascript

于 2025-12-05 12:05:16 首次发布

前端专栏收录该内容

17 篇文章

订阅专栏

从零开始搭建现代前端框架：React 19、Vite、Tailwind CSS、ShadCN UI、Zustand 完整实战教程

第 2 章：快速开始 — 使用 Vite + TypeScript 初始化项目

在上一章中，我们明确了项目目标、技术栈与未来的总体架构路线。本章将正式开始动手，从零初始化一个 基于 React 19 + TypeScript + Vite 的开发环境。

本章你将完成：

创建项目目录
初始化 Vite 项目（React + TS 模板）
安装所有必要依赖
配置基础开发环境（ESLint / Prettier / Tailwind 前置）
解析 package.json 结构，理解项目运行机制

完成本章后，你将拥有一个可以运行、可开发的项目基础结构，为后续多语言、主题、路由、权限等模块打下坚实基础。

2.1 创建项目目录

在任意目录执行：

pnpm create vite@latest web-app --template react-ts

rolldown-vite 是将 Rolldown（一款兼容 Rollup 的 Rust 编写打包工具）集成到 Vite 的实验性方案，目标是用性能更优的 Rust 实现替代 Vite 默认的 Rollup 打包器。

这里选择No

Install with pnpm and start now?

这里选择Yes时，将会自动执行以下命令

cd web-app    
pnpm install
pnpm dev

选择No，需要手动执行以下命令

接着：

cd web-app
pnpm install

完成后文件结构如下：

这是最基础的 React + TypeScript + Vite 项目。

2.2 运行项目，确认环境无误

执行：

pnpm dev

你将看到：

打开浏览器确认项目运行无误。

2.3 安装项目所需的全部依赖

我们项目使用了丰富但结构清晰的技术栈。下面按照模块安装必要依赖。

2.3.1 安装 UI & 样式相关依赖

Tailwind CSS（下一章会配置）

pnpm add -D tailwindcss postcss autoprefixer

shadcn/ui 工具

我们稍后会使用它生成高质量 UI 组件：

pnpm dlx shadcn@latest init

（暂时忽略错误，具体用法在后面章节展开）

2.3.2 安装国际化 i18n

pnpm add react-i18next i18next i18next-browser-languagedetector

2.3.3 安装主题切换

pnpm add next-themes

2.3.4 安装数据请求层（ky）

pnpm add ky

2.3.5 安装状态管理（Zustand）

pnpm add zustand

2.3.6 安装后端数据管理（TanStack Query）

pnpm add @tanstack/react-query

2.3.7 安装路由（React Router v7）

pnpm add react-router-dom

2.3.8 安装表单（react-hook-form + zod）

pnpm add react-hook-form zod
pnpm add @hookform/resolvers

2.3.9 安装 Toast（sonner）

pnpm add sonner

2.3.10 安装 mock（mockjs）

pnpm add mockjs

2.3.11 安装 Recharts 图表组件

pnpm add recharts

2.3.12 SVG 处理插件（可选）

如果你想像 shadcn 那样使用 svg 组件：

pnpm add -D vite-plugin-svgr

我们会在 vite.config.ts 中配置它。

至此，所有核心依赖已经安装完毕。

接下来，我们需要理解 package.json 的结构。

2.4 理解 package.json（本项目的依赖结构解析）

下面是当前项目核心依赖的结构化说明：

✔ React & Vite

"react": "^19.2.0",
"react-dom": "^19.2.0",
"vite": "^7.2.4",
"@vitejs/plugin-react": "^5.1.1",

用途：基础框架 + 构建工具

✔ TypeScript

"typescript": "~5.9.3"

用途：整个项目的类型安全与工程能力基座

✔ UI & 样式系统

"tailwindcss": "^4.1.17",
"autoprefixer": "^10.4.22",
"postcss": "^8.5.6",

shadcn + CVA + Tailwind = 通用组件体系的三角组合。

✔ 状态与数据请求

"zustand": "^5.0.9"
"ky": "^1.14.0",
"@tanstack/react-query": "^5.90.12",

✔ 国际化

"i18next": "^25.7.1",
"i18next-browser-languagedetector": "^8.2.0",
"react-i18next": "^16.3.5",

✔ 路由

"react-router-dom": "^7.10.1",

支持最新的 Data APIs、Suspense、Lazy routes

✔ 表单 + 校验

"react-hook-form": "^7.68.0",
"zod": "^4.1.13",
"@hookform/resolvers": "^5.2.2",

✔ Mock

"mockjs": "^1.1.0"

✔ 通知组件（Toast）

"sonner": "^2.0.7",

✔ 图表

"recharts": "^3.5.1",

整体结构非常清晰：

依赖结构有明确边界
业务逻辑与 UI 逻辑分离
每个模块都有清晰职责

2.5 配置 Vite（基础版本）

vite.config.ts ：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

更新为：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr'; // 如果你使用 SVG 组件

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    svgr(), // 可选
  ],
  server: {
    port: 5173,
  },
});

2.6 清理默认模板

默认 App.tsx 内容过于简单，我们先清空：

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

修改 src/App.tsx：

export default function App() {
  return <div>App Initialized</div>;
}

下一章会替换为真实结构。

2.7 本章小结

本章完成了：

✔ 初始化 Vite + React + TypeScript 项目
✔ 安装所有框架核心依赖
✔ 解析 package.json
✔ 配置基础 Vite 环境
✔ 清理默认模板