位置: IT常识 - 正文
Vue2 大型项目升级 Vue3 详细经验总结(vue2升级3)
编辑：rootadmin推荐整理分享Vue2 大型项目升级 Vue3 详细经验总结(vue2升级3)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue做大型项目,vue2.0项目升级vue3.0,vue2.0项目升级vue3.0,vue项目升级,vue2搭建项目,vue大型项目撑得住吗,vue大型项目撑得住吗,vue2项目升级3,内容如对您有帮助，希望把文章链接给更多的朋友！
前段时间，公司准备在现有的 Vue2 项目中做一个聊天系统，但考虑开发聊天系统的周期并不短，客户又急需。于是准备对接腾讯的 IM 组件，来实现。
不知道的这里贴个官网： IM TUIKit 官方文档
对于 TUIKit，官方文档上有以下要求： 然而我们公司项目是使用 Vue2 版本的，这显然不符合要求。如果要对接，那么必然要升级项目为Vue3 版本。
思考首先要明白，Vue2 升级 Vue3 能带来什么？
可以参看一下这篇博客： 应不应该从 Vue 2 升级到 Vue 3
总结一下下列几点：
Vue3 优点：1. 增加了代码的可维护性Vue2 使用的是 options 的API ，代码逻辑比较分散，可读性差，可维护性差。Vue3 使用的是 compositionAPI 逻辑分明，可维护性高，更友好的支持TS。在 template 模板中支持多个根节点，支持jsx语法。
2. 提升了页面渲染性能Vue3 在更新DOM算法上，做了优化。在 Vue2 中,每次更新diff，都是全量对比，Vue3则只对比带有标记的，这样大大减少了非动态内容的对比消耗。
3. 加强了 MVVM 双向数据绑定的效率Vue2 的双向数据绑定是利用 ES5 的 Object.definePropert() 对对象属性进行劫持，结合 发布订阅模式的方式来实现的。Vue3 中使用了 es6 的 ProxyAPI 对数据代理。 相比于vue2.x，使用proxy的优势如下：
defineProperty只能监听某个属性，不能对全对象监听可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）可以监听数组，不用再去单独的对数组做特异性操作 vue3.x 可以检测到数组内部数据的变化4. 项目可持续发展Vue 2官方还会再维护两年，但两年后的问题和需求，官方就不承诺修复和提供解答了，Vue 3 则不会。
当然，还有其他的，这里只是列出几个主要的。
升级存在的隐患新的响应式系统用了 Proxy，会存在兼容性问题（不支持IE）。框架底层进行了大量重构，新增和删除了很多原来的API，代码结构也发生了变化。很多地方需要进行破坏性修改，从而容易导致各种问题的出现。项目使用到的第三方插件和 UI框架（Element）也需要替换和更改成 对应Vue3可用版本。升级方式通过工具+手动升级
思路：第一版可以先从基础进行迁移。完成框架整体升级到Vue3（可运行）之后可以进行细化。
步骤：第一步： 先把Vue2 框架整体替换成 Vue3，因为目前 Vue3也是兼容了 Options 写法，这样代码结构可以先不用更改，后期可以逐步修改（因为涉及到所有页面和组件）。之后新增的页面和组件按照 Vue3 新增的 compositionAPI 结构来写。
第二步： 把 Vue3 中已经不再支持的 API 和语法进行修改替换。包括 Vue3 已经不再支持过滤器filter，v-model 用法也改变等。
第三步： 把项目使用到的第三方插件和UI框架（Element）替换成Vue3版本，对应用法可能也需要修改。需要通过 package.json 里注册目录，在页面进行检索修改。
对于这一步升级有以下几点比较麻烦：
项目中依赖的库并不支持vue3vue2到vue3的一些破坏性更改项目中依赖组件库(ElementUI等)的破坏性更改对一些新特性的尝试(vite,ts,pinia)等 公司项目迁移造成稳定性破坏(极其重要)第四步： 确保项目代码语法编译无误后，需要检查代码中的业务是否正确，避免对公司项目迁移造成稳定性破坏(极其重要)。
第五步： 使用 TypeScript 重构 JS 代码，TypeScript 比 JavaScript 多了静态类型检查，也增加了一些新的语法，是给项目锦上添花。但是这一步会比较耗时（因为相当于修改把JS代码都要过一遍），但是项目中可以同时存在JS 和 TS，所以可以逐步替换。
使用自动化工具： 通过使用目前比较好用的开源工具可以完成第一步和第二步的转换，目前使用比较多的就是 gogocode：文档
对于工具改造代码，存在很多未知性，项目业务代码中有些比较复杂的（例如表单联动，规则校验等等）可能会对原来的逻辑有影响，需要逐一人工比对和测试。
实施1. 创建一个新的 vue3 + TS 项目，里面安装完相关基础依赖整个项目重新搭建，使用了 Vue3 作为技术框架。使用了 Vite 作为打包和构建工具（代替了之前 Vue2 的 Webpack 构建工具），因为 Vite 拥有更好的打包编译性能。 增加了 TypeScript 依赖，可以作为 TS 代码编写编译，增强了项目可持续维护性（之后可转成全TS）。使用 VueRouter 4.1.1 版本作为项目页面路由控制，此版本为 Vue3 配套版本。使用了 Pinia 代替了 Vuex 作为统一状态管理模块，因为 Pinia 与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。Api请求模块仍然采用了易用、简洁且高效的http库 Axios。使用 Sass 作为 CSS 的预编译语言，增强 CSS 的灵活性。使用升级版 Element Plus 作为界面 UI 框架。
技术栈Vue3项目使用的是 Vue ^3.2.36 版本。 Vue3 官网及其介绍：https://v3.cn.vuejs.org/guide/introduction.html
TypeScriptTypeScript 官网文档：https://www.tslang.cn/
VueRouterVueRouter 官网及其介绍： https://router.vuejs.org/zh/
PiniaPinia 官网及其介绍：https://pinia.web3doc.top/
AxiosAxios 官网及其介绍：http://www.axios-js.com/
SassSass 官网及其介绍：https://www.sass.hk/
Element PlusElement Plus 官网及其介绍：https://element-plus.gitee.io/zh-CN/guide/design.html
代码规范使用 EditorConfig + Prettier + ESLint 组合来实现代码规范化。
这样做带来好处：
解决团队之间代码不规范导致的可读性差和可维护性差的问题。解决团队成员不同编辑器导致的编码规范不统一问题。提前发现代码风格问题，给出对应规范提示，及时修复。 减少代码审查过程中反反复复的修改过程，节约时间。自动格式化，统一编码风格，从此和脏乱差的代码说再见。VSCode 编辑器 需要去插件市场下载插件 EditorConfig for VS Code 、Prettier - Code formatter、ESLint。 JetBrains 系列（WebStorm、IntelliJ IDEA 等）则不用额外安装插件，可直接使用 EditorConfig 配置。
构建工具Vite项目使用的是 Vite ^2.9.9 版本。 Vite 官网及其介绍 : https://vitejs.cn/
运行要求Vue 版本：3.0以上 node 版本：Vite 需要 Node.js 版本 >= 12.0.0 浏览器：非IE浏览器
项目目录结构src│ App.vue 项目根节点│ env.d.ts 类型上一篇：uniapp路由—— uni-simple-router(uniapp route)
下一篇：一只带着幼崽的长胡子皇狨猴 (© Chris White/iStock/Getty Images Plus)(带着崽崽宠老公免费阅读)
