finyx_data_frontend/docs/迁移执行脚本.md

Vue 迁移执行脚本

🚀 快速开始

第一步：创建迁移分支

# 确保当前代码已提交
git status

# 创建迁移分支
git checkout -b vue-migration

# 创建备份标签
git tag backup-before-vue-migration

第二步：卸载 React 依赖

npm uninstall react react-dom \
  lucide-react \
  @vitejs/plugin-react \
  @types/react \
  @types/react-dom \
  eslint-plugin-react-hooks \
  eslint-plugin-react-refresh

第三步：安装 Vue 依赖

# 核心依赖
npm install vue@^3.4.0 \
  pinia@^2.1.0 \
  vue-router@^4.2.0 \
  lucide-vue-next@^0.344.0 \
  @vueuse/core@^10.7.0

# 开发依赖
npm install -D @vitejs/plugin-vue@^5.0.0 \
  vue-tsc@^1.8.25 \
  @vue/eslint-config-typescript@^12.0.0 \
  eslint-plugin-vue@^9.20.0

第四步：更新配置文件

4.1 更新 vite.config.ts

cat > vite.config.ts << 'EOF'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    host: '0.0.0.0',
    port: 5173,
    strictPort: false,
    open: false,
  },
  preview: {
    host: '0.0.0.0',
    port: 4173,
  },
})
EOF

4.2 更新 tsconfig.json

# 备份原文件
cp tsconfig.json tsconfig.json.backup

# 更新 jsx 配置
sed -i 's/"jsx": "react-jsx"/"jsx": "preserve"/' tsconfig.json

# 添加路径别名（如果不存在）
if ! grep -q '"baseUrl"' tsconfig.json; then
  # 需要手动添加 baseUrl 和 paths
  echo "请手动添加 baseUrl 和 paths 配置"
fi

4.3 创建 env.d.ts

cat > src/env.d.ts << 'EOF'
/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
EOF

4.4 创建 ESLint 配置

cat > .eslintrc.cjs << 'EOF'
module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
  ],
  parserOptions: {
    ecmaVersion: 2021,
  },
  rules: {
    'vue/multi-word-component-names': 'off',
  },
}
EOF

第五步：创建 Pinia Store 目录

mkdir -p src/stores

第六步：测试配置

# 检查类型
npm run type-check

# 尝试构建
npm run build

---

📝 批量替换脚本

替换图标库导入

# 替换所有文件中的 lucide-react
find src -type f \( -name "*.vue" -o -name "*.ts" \) -exec sed -i 's/from '\''lucide-react'\''/from '\''lucide-vue-next'\''/g' {} \;
find src -type f \( -name "*.vue" -o -name "*.ts" \) -exec sed -i 's/from "lucide-react"/from "lucide-vue-next"/g' {} \;

替换事件处理（需要手动检查）

# 注意：这些替换需要手动验证
# onClick -> @click
# onChange -> @change 或 v-model
# onSubmit -> @submit

---

🔍 验证脚本

检查是否还有 React 导入

grep -r "from 'react'" src/ || echo "✓ 没有找到 React 导入"
grep -r 'from "react"' src/ || echo "✓ 没有找到 React 导入"

检查是否还有 .tsx 文件

find src -name "*.tsx" && echo "⚠️ 还有 .tsx 文件需要迁移" || echo "✓ 所有文件已迁移"

检查图标库使用

grep -r "lucide-react" src/ && echo "⚠️ 还有 lucide-react 导入" || echo "✓ 图标库已迁移"

---

🧪 测试命令

# 开发模式
npm run dev

# 类型检查
npm run type-check

# 构建
npm run build

# 预览构建结果
npm run preview

# Lint 检查
npm run lint

---

📋 迁移顺序建议

1. 基础组件 (1-2天)

   • ProgressBar.vue
   • SidebarItem.vue
   • TableCheckItem.vue

2. Toast 系统 (1天)

   • Toast.vue
   • ToastContainer.vue
   • stores/toast.ts

3. 布局组件 (2天)

   • Sidebar.vue
   • MainLayout.vue

4. 页面组件 (按复杂度)

   • DashboardView.vue
   • ProjectListView.vue
   • EngagementView.vue

5. 工作流步骤 (按顺序)

   • SetupStep.vue
   • InventoryStep.vue
   • ContextStep.vue
   • ValueStep.vue
   • DeliveryStep.vue

6. 入口文件 (1天)

   • main.ts
   • App.vue

---

⚠️ 注意事项

1. 不要一次性迁移所有文件，建议按阶段进行
2. 每迁移一个组件就测试一次，确保功能正常
3. 保留原 .tsx 文件，直到新 .vue 文件完全测试通过
4. 使用 Git 提交每个阶段的更改，方便回滚
5. 遇到问题及时记录，更新迁移文档

---

🐛 常见问题处理

问题：构建失败

# 清理缓存
rm -rf node_modules package-lock.json
npm install

# 清理构建缓存
rm -rf dist .vite

问题：类型错误

# 检查 env.d.ts 是否存在
ls src/env.d.ts

# 检查 tsconfig.json 配置
npm run type-check

问题：图标不显示

# 确认使用 lucide-vue-next
grep -r "lucide" src/

# 确认使用 :size 而不是 size
grep -r "size={" src/

---

📊 进度跟踪

使用以下命令跟踪迁移进度：

# 统计 .tsx 文件数量
find src -name "*.tsx" | wc -l

# 统计 .vue 文件数量
find src -name "*.vue" | wc -l

# 检查 React 导入
grep -r "from 'react'" src/ | wc -l

---

✅ 完成检查

迁移完成后，运行以下检查：

# 1. 无 .tsx 文件
find src -name "*.tsx" && echo "❌ 还有 .tsx 文件" || echo "✓ 所有文件已迁移"

# 2. 无 React 导入
grep -r "from 'react'" src/ && echo "❌ 还有 React 导入" || echo "✓ 无 React 导入"

# 3. 无 lucide-react
grep -r "lucide-react" src/ && echo "❌ 还有 lucide-react" || echo "✓ 图标库已迁移"

# 4. 构建成功
npm run build && echo "✓ 构建成功" || echo "❌ 构建失败"

# 5. 类型检查通过
npm run type-check && echo "✓ 类型检查通过" || echo "❌ 类型检查失败"

---

🎯 下一步

迁移完成后：

1. 全面功能测试
2. 性能测试
3. 更新文档
4. 代码审查
5. 部署到测试环境