# Vue 迁移执行脚本

## 🚀 快速开始

### 第一步：创建迁移分支
```bash
# 确保当前代码已提交
git status

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

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

### 第二步：卸载 React 依赖
```bash
npm uninstall react react-dom \
  lucide-react \
  @vitejs/plugin-react \
  @types/react \
  @types/react-dom \
  eslint-plugin-react-hooks \
  eslint-plugin-react-refresh
```

### 第三步：安装 Vue 依赖
```bash
# 核心依赖
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
```bash
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
```bash
# 备份原文件
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
```bash
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 配置
```bash
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 目录
```bash
mkdir -p src/stores
```

### 第六步：测试配置
```bash
# 检查类型
npm run type-check

# 尝试构建
npm run build
```

---

## 📝 批量替换脚本

### 替换图标库导入
```bash
# 替换所有文件中的 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' {} \;
```

### 替换事件处理（需要手动检查）
```bash
# 注意：这些替换需要手动验证
# onClick -> @click
# onChange -> @change 或 v-model
# onSubmit -> @submit
```

---

## 🔍 验证脚本

### 检查是否还有 React 导入
```bash
grep -r "from 'react'" src/ || echo "✓ 没有找到 React 导入"
grep -r 'from "react"' src/ || echo "✓ 没有找到 React 导入"
```

### 检查是否还有 .tsx 文件
```bash
find src -name "*.tsx" && echo "⚠️ 还有 .tsx 文件需要迁移" || echo "✓ 所有文件已迁移"
```

### 检查图标库使用
```bash
grep -r "lucide-react" src/ && echo "⚠️ 还有 lucide-react 导入" || echo "✓ 图标库已迁移"
```

---

## 🧪 测试命令

```bash
# 开发模式
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. **遇到问题及时记录**，更新迁移文档

---

## 🐛 常见问题处理

### 问题：构建失败
```bash
# 清理缓存
rm -rf node_modules package-lock.json
npm install

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

### 问题：类型错误
```bash
# 检查 env.d.ts 是否存在
ls src/env.d.ts

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

### 问题：图标不显示
```bash
# 确认使用 lucide-vue-next
grep -r "lucide" src/

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

---

## 📊 进度跟踪

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

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

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

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

---

## ✅ 完成检查

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

```bash
# 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. 部署到测试环境