272 lines
7.1 KiB
Markdown
272 lines
7.1 KiB
Markdown
# Vue 迁移检查清单
|
||
|
||
## 📋 迁移前准备
|
||
|
||
### 代码备份
|
||
- [ ] 创建新的 Git 分支 `vue-migration`
|
||
- [ ] 提交当前所有更改
|
||
- [ ] 创建备份标签 `git tag backup-before-vue-migration`
|
||
|
||
### 环境准备
|
||
- [ ] 确认 Node.js 版本 >= 16.0.0
|
||
- [ ] 清理 node_modules 和 package-lock.json
|
||
- [ ] 准备测试环境
|
||
|
||
---
|
||
|
||
## 🔧 依赖管理
|
||
|
||
### 移除 React 依赖
|
||
- [ ] 移除 `react`
|
||
- [ ] 移除 `react-dom`
|
||
- [ ] 移除 `lucide-react`
|
||
- [ ] 移除 `@vitejs/plugin-react`
|
||
- [ ] 移除 `@types/react`
|
||
- [ ] 移除 `@types/react-dom`
|
||
- [ ] 移除 `eslint-plugin-react-hooks`
|
||
- [ ] 移除 `eslint-plugin-react-refresh`
|
||
|
||
### 安装 Vue 依赖
|
||
- [ ] 安装 `vue@^3.4.0`
|
||
- [ ] 安装 `pinia@^2.1.0`
|
||
- [ ] 安装 `vue-router@^4.2.0` (可选)
|
||
- [ ] 安装 `lucide-vue-next@^0.344.0`
|
||
- [ ] 安装 `@vueuse/core@^10.7.0` (可选)
|
||
- [ ] 安装 `@vitejs/plugin-vue@^5.0.0`
|
||
- [ ] 安装 `vue-tsc@^1.8.25`
|
||
- [ ] 安装 `@vue/eslint-config-typescript@^12.0.0`
|
||
- [ ] 安装 `eslint-plugin-vue@^9.20.0`
|
||
|
||
---
|
||
|
||
## ⚙️ 配置文件更新
|
||
|
||
### package.json
|
||
- [ ] 更新 `scripts.build` 为 `vue-tsc && vite build`
|
||
- [ ] 更新 `scripts.lint` 支持 Vue 文件
|
||
- [ ] 添加 `scripts.type-check` 脚本
|
||
- [ ] 移除所有 React 相关依赖
|
||
- [ ] 添加所有 Vue 相关依赖
|
||
|
||
### vite.config.ts
|
||
- [ ] 替换 `@vitejs/plugin-react` 为 `@vitejs/plugin-vue`
|
||
- [ ] 添加路径别名 `@` 指向 `./src`
|
||
- [ ] 保持服务器配置不变
|
||
- [ ] 保持预览配置不变
|
||
|
||
### tsconfig.json
|
||
- [ ] 更新 `jsx` 为 `"preserve"`
|
||
- [ ] 添加 `baseUrl: "."`
|
||
- [ ] 添加 `paths: { "@/*": ["./src/*"] }`
|
||
- [ ] 确保 `include` 包含 `*.vue` 文件
|
||
|
||
### 新建文件
|
||
- [ ] 创建 `src/env.d.ts` (Vue 类型声明)
|
||
- [ ] 创建 `.eslintrc.cjs` (ESLint 配置)
|
||
- [ ] 创建 `src/stores/` 目录 (Pinia stores)
|
||
|
||
---
|
||
|
||
## 📁 文件结构迁移
|
||
|
||
### 组件文件转换
|
||
- [ ] `src/components/ProgressBar.tsx` → `ProgressBar.vue`
|
||
- [ ] `src/components/SidebarItem.tsx` → `SidebarItem.vue`
|
||
- [ ] `src/components/TableCheckItem.tsx` → `TableCheckItem.vue`
|
||
- [ ] `src/components/Toast.tsx` → `Toast.vue` + `ToastItem.vue`
|
||
- [ ] `src/layouts/MainLayout.tsx` → `MainLayout.vue`
|
||
- [ ] `src/layouts/Sidebar.tsx` → `Sidebar.vue`
|
||
- [ ] `src/pages/DashboardView.tsx` → `DashboardView.vue`
|
||
- [ ] `src/pages/ProjectListView.tsx` → `ProjectListView.vue`
|
||
- [ ] `src/pages/EngagementView.tsx` → `EngagementView.vue`
|
||
- [ ] `src/pages/engagement/SetupStep.tsx` → `SetupStep.vue`
|
||
- [ ] `src/pages/engagement/InventoryStep.tsx` → `InventoryStep.vue`
|
||
- [ ] `src/pages/engagement/ContextStep.tsx` → `ContextStep.vue`
|
||
- [ ] `src/pages/engagement/ValueStep.tsx` → `ValueStep.vue`
|
||
- [ ] `src/pages/engagement/DeliveryStep.tsx` → `DeliveryStep.vue`
|
||
|
||
### 状态管理迁移
|
||
- [ ] `src/contexts/ToastContext.tsx` → `src/stores/toast.ts` (Pinia)
|
||
- [ ] 创建 `src/stores/index.ts` (Pinia 导出)
|
||
|
||
### 入口文件迁移
|
||
- [ ] `src/main.tsx` → `src/main.ts`
|
||
- [ ] `src/App.tsx` → `src/App.vue`
|
||
|
||
### 保持不变的文件
|
||
- [ ] `src/types/index.ts` (类型定义)
|
||
- [ ] `src/data/mockData.ts` (模拟数据)
|
||
- [ ] `src/index.css` (样式文件)
|
||
- [ ] `tailwind.config.js` (Tailwind 配置)
|
||
|
||
---
|
||
|
||
## 🔄 代码转换检查
|
||
|
||
### Hooks 转换
|
||
- [ ] 所有 `useState` 转换为 `ref` 或 `reactive`
|
||
- [ ] 所有 `useEffect` 转换为 `watch` 或 `watchEffect`
|
||
- [ ] 所有 `useMemo` 转换为 `computed`
|
||
- [ ] 所有 `useCallback` 转换为普通函数或 `computed`
|
||
- [ ] 所有 `useContext` 转换为 `inject` 或 Pinia store
|
||
- [ ] 所有 `useRef` 转换为 `ref`
|
||
|
||
### 事件处理转换
|
||
- [ ] 所有 `onClick` 转换为 `@click`
|
||
- [ ] 所有 `onChange` 转换为 `@change` 或 `v-model`
|
||
- [ ] 所有 `onSubmit` 转换为 `@submit`
|
||
- [ ] 所有事件处理器参数正确传递
|
||
|
||
### 条件渲染转换
|
||
- [ ] 所有 `{condition && <Component />}` 转换为 `<Component v-if="condition" />`
|
||
- [ ] 所有三元表达式转换为 `v-if/v-else`
|
||
- [ ] 所有 `map` 循环转换为 `v-for`
|
||
|
||
### Props 和 Emits
|
||
- [ ] 所有组件 Props 使用 `defineProps<Props>()`
|
||
- [ ] 所有事件使用 `defineEmits<Emits>()`
|
||
- [ ] Props 传递使用 `:prop="value"`
|
||
- [ ] 事件监听使用 `@event="handler"`
|
||
|
||
### 图标库转换
|
||
- [ ] 所有 `lucide-react` 导入替换为 `lucide-vue-next`
|
||
- [ ] 所有图标组件 `size={20}` 替换为 `:size="20"`
|
||
- [ ] 所有图标组件正确渲染
|
||
|
||
### 样式类转换
|
||
- [ ] 所有 `className` 替换为 `class`
|
||
- [ ] 所有动态类使用 `:class` 绑定
|
||
- [ ] Tailwind CSS 类保持不变
|
||
|
||
---
|
||
|
||
## 🧪 功能测试清单
|
||
|
||
### Dashboard 页面
|
||
- [ ] KPI 卡片正常显示
|
||
- [ ] 项目作业全景表正常显示
|
||
- [ ] 风险雷达正常显示
|
||
- [ ] 所有数据正常加载
|
||
|
||
### 项目列表页面
|
||
- [ ] 项目列表正常显示
|
||
- [ ] 搜索功能正常
|
||
- [ ] 筛选功能正常
|
||
- [ ] 项目卡片点击正常
|
||
- [ ] 新建项目功能正常
|
||
|
||
### 项目作业台
|
||
- [ ] 步骤导航器正常显示
|
||
- [ ] 步骤切换正常
|
||
- [ ] SetupStep: 表单验证正常
|
||
- [ ] SetupStep: 行业选择正常
|
||
- [ ] InventoryStep: 方案选择正常
|
||
- [ ] InventoryStep: 文件上传正常
|
||
- [ ] InventoryStep: 结果表格正常
|
||
- [ ] InventoryStep: 排序功能正常
|
||
- [ ] ContextStep: 表单填写正常
|
||
- [ ] ContextStep: 场景添加正常
|
||
- [ ] ValueStep: 场景显示正常
|
||
- [ ] ValueStep: 场景选择正常
|
||
- [ ] DeliveryStep: 交付物列表正常
|
||
- [ ] DeliveryStep: 下载功能正常
|
||
|
||
### 通用功能
|
||
- [ ] Toast 通知正常显示
|
||
- [ ] Toast 自动关闭正常
|
||
- [ ] 演示模式切换正常
|
||
- [ ] 侧边栏导航正常
|
||
- [ ] 响应式布局正常
|
||
- [ ] 移动端适配正常
|
||
|
||
---
|
||
|
||
## 🐛 错误检查
|
||
|
||
### 编译错误
|
||
- [ ] 运行 `npm run dev` 无编译错误
|
||
- [ ] 运行 `npm run build` 无构建错误
|
||
- [ ] 运行 `npm run type-check` 无类型错误
|
||
|
||
### 运行时错误
|
||
- [ ] 浏览器控制台无错误
|
||
- [ ] 所有页面正常加载
|
||
- [ ] 所有交互正常响应
|
||
|
||
### 类型错误
|
||
- [ ] 所有 TypeScript 类型正确
|
||
- [ ] 所有组件 Props 类型正确
|
||
- [ ] 所有事件类型正确
|
||
|
||
---
|
||
|
||
## 📊 性能检查
|
||
|
||
### 加载性能
|
||
- [ ] 首屏加载时间 ≤ 2s
|
||
- [ ] 页面切换流畅
|
||
- [ ] 无长时间阻塞
|
||
|
||
### 运行时性能
|
||
- [ ] 大数据量表格渲染正常
|
||
- [ ] 无内存泄漏
|
||
- [ ] 无不必要的重渲染
|
||
|
||
---
|
||
|
||
## 🧹 清理工作
|
||
|
||
### 删除旧文件
|
||
- [ ] 删除所有 `.tsx` 文件
|
||
- [ ] 删除 `src/contexts/` 目录（如果不再需要）
|
||
- [ ] 删除 React 相关配置文件
|
||
|
||
### 更新文档
|
||
- [ ] 更新 README.md
|
||
- [ ] 更新技术栈说明
|
||
- [ ] 更新开发指南
|
||
- [ ] 更新部署文档
|
||
|
||
### Git 提交
|
||
- [ ] 提交所有更改
|
||
- [ ] 编写详细的提交信息
|
||
- [ ] 创建 Pull Request（如适用）
|
||
|
||
---
|
||
|
||
## ✅ 最终验收
|
||
|
||
### 功能完整性
|
||
- [ ] 所有功能正常工作
|
||
- [ ] 所有交互行为一致
|
||
- [ ] 所有样式保持一致
|
||
|
||
### 代码质量
|
||
- [ ] 代码符合 Vue 3 最佳实践
|
||
- [ ] 无 ESLint 错误
|
||
- [ ] 无 TypeScript 错误
|
||
- [ ] 代码注释完整
|
||
|
||
### 文档完整性
|
||
- [ ] README 已更新
|
||
- [ ] 迁移文档完整
|
||
- [ ] 代码注释清晰
|
||
|
||
---
|
||
|
||
## 📝 备注
|
||
|
||
在迁移过程中遇到的问题和解决方案：
|
||
|
||
1.
|
||
2.
|
||
3.
|
||
|
||
---
|
||
|
||
**迁移完成日期**: _______________
|
||
|
||
**迁移负责人**: _______________
|
||
|
||
**审核人**: _______________
|