Vue项目升级

Vue2项目迁移至Vue3需要谨慎规划，涉及依赖升级、代码重构和兼容性处理。

---

一、迁移前准备

1. 环境检查

   • 确保Node.js版本≥12（推荐14+或16+ LTS）。
   • 使用npm ls或yarn audit检查第三方库的Vue3兼容性。
   • 备份项目代码（如创建Git分支upgrade-vue3）。

2. 学习Vue3新特性

   • Composition API：替代Options API，提升代码组织性。
   • 性能优化：基于Proxy的响应式系统、静态节点提升。
   • 新组件 ：Teleport、Fragments等。

---

二、迁移步骤

1. 更新依赖

bash

npm uninstall vue vue-template-compiler npm install vue@3 @vue/compiler-sfc

• 同步更新Vue CLI（若使用）：

  bash

  npm update -g @vue/cli vue upgrade

2. 修改项目配置

• vue.config.js ：适配Vue3的Webpack配置。

  JavaScript

  module.exports = { chainWebpack: config => { config.resolve.alias.set('vue', '@vue/compat'); // 兼容模式 } };

• babel.config.js ：确保支持ES2020+语法。

  JavaScript

  module.exports = { presets: ['@babel/preset-env'] };

3. 代码重构

• 全局API变更：

  JavaScript

  // Vue2 import Vue from 'vue'; new Vue({ ... }).$mount('#app'); // Vue3 import { createApp } from 'vue'; const app = createApp({ ... }); app.mount('#app');

• 生命周期钩子：

  JavaScript

  // Vue2 export default { mounted() { ... } }; // Vue3 (Composition API) import { onMounted } from 'vue'; export default { setup() { onMounted(() => { ... }); } };

• v-model语法：

  HTML

  <!-- Vue2 --> <ChildComponent v-model="value" /> <!-- Vue3 --> <ChildComponent v-model:title="pageTitle" />

• 移除过滤器：

  JavaScript

  // Vue2 {``{ message | capitalize }} // Vue3 import { computed } from 'vue'; const capitalized = computed(() => message.value.toUpperCase());

4. 第三方库升级

• Vue Router ：从v3升级到v4。

  JavaScript

  import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes });

• Vuex ：从v3升级到v4（或改用Pinia）。

  JavaScript

  import { createStore } from 'vuex'; const store = createStore({ ... });

• UI库：Element UI → Element Plus，Vuetify需确认兼容性。

5. 兼容性处理

• 使用@vue/compat库逐步迁移：

  JavaScript

  // vue.config.js module.exports = { configureWebpack: { resolve: { alias: { 'vue': '@vue/compat' } } } };

• 通过控制台警告定位不兼容代码。

---

三、测试与验证

1. 单元测试 ：更新测试用例（如@vue/test-utils v2）。
2. E2E测试：确保功能逻辑一致。
3. 性能对比：检查首屏渲染和交互响应。

---

四、常见问题与工具

• 破坏性变更 ：参考官方迁移指南。
• 自动化工具 ：
  • GoGoCode：批量转换Options API代码。
  • vue-codemod：辅助升级脚本。

---

五、总结

• 优先升级新项目：直接使用Vue3 + Vite + TypeScript。
• 存量项目：分阶段迁移，先保证功能可用，再优化代码结构。
• 长期维护：关注Vue2的EOL（2023年底），尽早完成迁移。

通过以上步骤，可系统化完成Vue2到Vue3的迁移，平衡开发效率与稳定性。