32 lines
1.3 KiB
Markdown
32 lines
1.3 KiB
Markdown
# Task01：项目初始化与 UI 库集成
|
||
|
||
## 目标
|
||
- 使用 Vite + React + TypeScript 创建项目骨架
|
||
- 集成 TailwindCSS 与 shadcn/ui，准备基础组件（Card/Badge/Button/Alert/Accordion/Separator）
|
||
|
||
## 步骤（计划）
|
||
1) 初始化 Vite 项目（在 `g:\work\projects\ai-stuff\test_webcodecs` 目录内）：
|
||
- `npm create vite@latest . -- --template react-ts`
|
||
- `npm install`
|
||
2) 安装并配置 TailwindCSS：
|
||
- `npm install -D tailwindcss postcss autoprefixer`
|
||
- `npx tailwindcss init -p`
|
||
- Tailwind 配置：`content` 指向 `./index.html` 与 `./src/**/*.{ts,tsx}`
|
||
- 在 `src/index.css` 添加：`@tailwind base; @tailwind components; @tailwind utilities;`
|
||
3) 初始化 shadcn/ui：
|
||
- `npx shadcn-ui@latest init`
|
||
- 选择 Vite + React + TypeScript 模板，路径默认 `./src/components/ui`
|
||
- 添加组件：
|
||
- `npx shadcn-ui@latest add button card badge alert accordion separator`
|
||
4) 建立基础目录：
|
||
- `src/components/DetectorCard.tsx`（空组件占位）
|
||
- `src/utils/codecs/`（空目录占位）
|
||
|
||
## 验收标准
|
||
- `npm run dev` 能启动并渲染示例页面
|
||
- Tailwind 与 shadcn/ui 样式正常（按钮与卡片能显示）
|
||
- 存在 `src/utils/codecs` 目录为后续实现准备
|
||
|
||
## 产出
|
||
- Vite + React + TS 基础工程
|
||
- Tailwind 与 shadcn/ui 已集成，组件可用 |