python/finyx_data_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
finyx_data_frontend/docs/迁移检查清单.md

7.1 KiB
Raw Blame History

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 已更新
  • 迁移文档完整
  • 代码注释清晰

📝 备注

在迁移过程中遇到的问题和解决方案：

迁移完成日期: _______________

迁移负责人: _______________

审核人: _______________