vue2+js项目升级vue3项目流程

Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有了显著的提升。升级到 Vue 3 可以让你的项目受益于这些改进。但是，升级过程也需要谨慎，因为涉及到代码的重构和潜在的兼容性问题。

1. 升级前的准备

• 备份项目： 在开始升级之前，务必备份你的项目，以防万一。
  • 使用git的话，切记在新的分支，待测试文档后再合并
• 了解 Vue 3 的新特性和差异： 熟悉 Vue 3 的新特性，如 Composition API、Teleport、Suspense 等，以及与 Vue 2 的主要差异。
• 选择合适的升级方式： 可以选择渐进式升级（逐步替换组件）或一次性大规模升级，根据项目规模和复杂度来决定。
  • 如果选择渐进式，从根组件组件开始，把它用到的子组件全部升级；但我发现渐进式有点问题，最好是一次性的升级完，不然有些小bug如果没e2e测试都发现不了的
  • 关于版本，如果决定升级，可以一步步来，最好卡vue小版本，2.6 -> 2.7 有大变动
    • 例如我卡在这个版本然后升级的

          "vue": "2.6.10",

          "vue-router": "~3.5.1",

          "vuex": "~3.6.2"

2. 升级步骤

2.1 升级依赖

• 更新 Vue 和相关依赖： 将 package.json 中的 Vue 和其他依赖（如 Vue Router、Vuex）升级到最新版本。
  • 还可以利用vite create，创建一个新项目，然后把组件慢慢挪过去
• 处理依赖冲突： 升级过程中可能会遇到依赖冲突，需要仔细分析并解决。

2.2 迁移组件

• 使用 Composition API： 将 Vue 2 的 Options API 逐步迁移到 Vue 3 的 Composition API，以获得更好的代码组织和复用性。
  • 这部分可选，其实vue3依旧支持配置的组件
• 调整模板语法： 适配 Vue 3 的模板语法变化，如 v-model 的用法、teleport 的使用等。
  • 需要注意v-model的自定义绑定
  • 需要注意slot (这个很重要，之前没注意就导致了内容丢失）
• 处理自定义指令和过滤器： 迁移自定义指令和过滤器，注意 Vue 3 中的写法变化。
  • 过滤器 | 已经移除
  • 自定义指令不太建议用 - 不然迁移到别的框架可用部分比较少了，建议用ref拿到引用后处理

2.3 迁移全局 API

• 替换全局 API： Vue 3 移除了一些全局 API，需要找到替代方案。
  • vue3建议组合式开发不依赖this，所以最好是把this.xxx去掉，而是用一个模块导出方法
• 使用 provide/inject： 对于全局状态管理，可以考虑使用 provide/inject 或 Vuex
  • 这部分强烈建议，使用reactive + provide/inject管理状态

2.4 迁移路由和状态管理

• 升级 Vue Router 和 Vuex： 将 Vue Router 和 Vuex 升级到与 Vue 3 兼容的版本。
  • 不太建议使用状态管理了，不然升级vue4可能会很麻烦，😄 
• 调整配置： 根据新版本的文档，调整路由和状态管理的配置。
  • 需要注意如果用推荐的vite，环境变量的获取变了，需要用import.meta.env代替process.env

2.5 迁移 TypeScript

• 更新 TypeScript 配置： 如果项目使用 TypeScript，需要更新 tsconfig.json 配置，以支持 Vue 3 的类型定义。

2.6 迁移测试代码

• 更新测试用例： 调整测试用例，以适应 Vue 3 的变化。
  • e2e测试不用怎么变，单元测试可能变动工作量挺大的

3. 注意事项

• 渐进式升级： 建议采用渐进式升级，逐步替换组件，降低风险。
• 充分测试： 在每个升级阶段，都要进行充分的测试，确保功能正常。
• 注意兼容性： 如果项目需要支持老版本的浏览器，需要注意兼容性问题。
• 利用官方文档和社区资源： Vue 官方文档提供了详细的升级指南和示例，社区也有很多相关的讨论和解决方案。
• 考虑使用工具： 可以使用一些工具来辅助升级，如自动化代码转换工具。

4. 常见问题

• 组件通信： Vue 3 提供了 Composition API 和 provide/inject 等方式来实现组件通信，可以根据具体需求选择合适的方式。
• TypeScript： 升级到 Vue 3 后，TypeScript 的配置可能需要调整，以支持新的类型定义。
• 性能优化： Vue 3 在性能方面有显著的提升，可以进一步优化项目的性能。
• 构建分包： Vue3 分包不支持webpackChunkName指定分包，需要通过vite-rollup的mamualChunk指定包名，不然每个import()方式的引用模块都会是个单独的包

总结

升级到 Vue 3 是一个值得投入的过程，它可以为你的项目带来更好的开发体验和性能。在升级过程中，需要仔细规划、逐步推进，并注意可能遇到的问题。