位置: IT常识 - 正文

Vue2 大型项目升级 Vue3 详细经验总结(vue2升级3)

编辑:rootadmin
Vue2 大型项目升级 Vue3 详细经验总结 前言

推荐整理分享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 用法也改变等。

Vue2 大型项目升级 Vue3 详细经验总结(vue2升级3)

第三步: 把项目使用到的第三方插件和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

TypeScript

TypeScript 官网文档:https://www.tslang.cn/

VueRouter

VueRouter 官网及其介绍: https://router.vuejs.org/zh/

Pinia

Pinia 官网及其介绍:https://pinia.web3doc.top/

Axios

Axios 官网及其介绍:http://www.axios-js.com/

Sass

Sass 官网及其介绍:https://www.sass.hk/

Element Plus

Element 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 类型
本文链接地址:https://www.jiuchutong.com/zhishi/290660.html 转载请保留说明!

上一篇:uniapp路由—— uni-simple-router(uniapp route)

下一篇:一只带着幼崽的长胡子皇狨猴 (© Chris White/iStock/Getty Images Plus)(带着崽崽宠老公免费阅读)

  • 什么是gis(什么是g3手机)(gis是干什么的)

    什么是gis(什么是g3手机)(gis是干什么的)

  • oppok9s怎么设置返回键(oppok9s怎么设置动态壁纸)

    oppok9s怎么设置返回键(oppok9s怎么设置动态壁纸)

  • 酷狗投屏到电视怎么能带歌词(酷狗投屏到电视上不能自动下一首吗)

    酷狗投屏到电视怎么能带歌词(酷狗投屏到电视上不能自动下一首吗)

  • 钉钉师生群可以改备注吗(钉钉师生群可以容纳多少人)

    钉钉师生群可以改备注吗(钉钉师生群可以容纳多少人)

  • 快手100快币多少分(快手100个快币值多少钱)

    快手100快币多少分(快手100个快币值多少钱)

  • 钉钉的设置在哪个位置(钉钉的设置哪个地方有聊天背景)

    钉钉的设置在哪个位置(钉钉的设置哪个地方有聊天背景)

  • 苹果手机还原主屏幕布局是什么(苹果手机还原主屏幕怎么恢复)

    苹果手机还原主屏幕布局是什么(苹果手机还原主屏幕怎么恢复)

  • 华为手机怎么设置永不休眠(华为手机怎么设置24小时时间显示)

    华为手机怎么设置永不休眠(华为手机怎么设置24小时时间显示)

  • 腾讯会议怎么查看回放(腾讯会议怎么查看历史会议参会人员信息)

    腾讯会议怎么查看回放(腾讯会议怎么查看历史会议参会人员信息)

  • 表格粘贴不了什么原因(表格粘贴不过来怎么办)

    表格粘贴不了什么原因(表格粘贴不过来怎么办)

  • 电脑怎么下载淘宝网到桌面(电脑怎么下载淘宝卖家版)

    电脑怎么下载淘宝网到桌面(电脑怎么下载淘宝卖家版)

  • OPPOfindx外屏碎了(oppofindx外屏碎了怎么办)

    OPPOfindx外屏碎了(oppofindx外屏碎了怎么办)

  • 微信发30秒视频怎么发朋友圈(微信发30秒视频不用微视)

    微信发30秒视频怎么发朋友圈(微信发30秒视频不用微视)

  • 华为移动服务是做什么的(华为移动服务是什么问题)

    华为移动服务是做什么的(华为移动服务是什么问题)

  • 怎么设计自己的头像(怎么设计自己的logo)

    怎么设计自己的头像(怎么设计自己的logo)

  • 小米智能出行如何使用(小米智能出行怎么使用)

    小米智能出行如何使用(小米智能出行怎么使用)

  • 美团卷码是什么意思啊(美团中的卷码什么意思)

    美团卷码是什么意思啊(美团中的卷码什么意思)

  • 怎么看网线是不是光纤(怎么看网线是不是断了)

    怎么看网线是不是光纤(怎么看网线是不是断了)

  • 做近视眼手术是怎么样一种体验?

    做近视眼手术是怎么样一种体验?

  • 苹果xr使用小常识(iphone xr用法大全)

    苹果xr使用小常识(iphone xr用法大全)

  • 联系人加入黑名怎样可以恢复(联系人加入黑名单对方提示什么)

    联系人加入黑名怎样可以恢复(联系人加入黑名单对方提示什么)

  • 怎么发送实况照片(怎么发送实况照片给微信好友)

    怎么发送实况照片(怎么发送实况照片给微信好友)

  • win10适配器wlan不见了(win10 wifi适配器)

    win10适配器wlan不见了(win10 wifi适配器)

  • 无法加入群聊多久解封(无法加入群聊怎么回事)

    无法加入群聊多久解封(无法加入群聊怎么回事)

  • 快手能看到对方关注的人吗(快手能看到对方的关注和粉丝吗)

    快手能看到对方关注的人吗(快手能看到对方的关注和粉丝吗)

  • 云视通怎么添加摄像头

    云视通怎么添加摄像头

  • win10中的通知栏怎样添加或删除图标通知(win10通知栏怎么设置)

    win10中的通知栏怎样添加或删除图标通知(win10通知栏怎么设置)

  • 公转私做账麻烦吗
  • 息税前利润含义
  • 实缴时间不能超过申请时间怎么办
  • 技术服务的分录
  • 工资记借方还是贷方
  • 2019年一季度季报怎样填写
  • 预缴税款什么时候可以手动填写申报表
  • 与收益相关的政府补助会计分录总额法
  • 二手房增值税如何交
  • 卖二手车
  • 资产的计量属性主要包括哪些
  • 发票抵扣联做进项税入账处理是怎样的?
  • 工程毛利为亏损的原因
  • 增资需要登报吗
  • 计提坏账准备的前提条件
  • 民间非营利组织会计制度
  • 几种更正法
  • 利润表适用执行小企业
  • 土地抵扣进项税,,能调回来吗
  • 残保金属于现金流量表中的哪一项
  • 净资产回报率的变化
  • 华为matex3用什么芯片
  • win10 搜狗
  • 651错误是怎么回事
  • 在业和存续是什么经营状态
  • 固定资产计提折旧的方法
  • 计提住房公积金
  • 计提债券本年利息分录
  • 苹果电脑录屏的视频保存在哪里
  • phpswitch语句成绩判断
  • 基建项目和工程项目区别
  • 罚款支出计入什么
  • php安装及使用教程
  • 传承古老文化
  • 数学建模三个人谁最难
  • 遍历目录文件
  • 一个残疾证一年单位免多少税2023
  • 财政拨款结转的二级科目有哪些
  • 小规模纳税人没有收入怎么报税
  • 小规模公司卖车怎么开票
  • 研发增值税税率怎么算
  • 纳税申报表上的销售额
  • sql server的数据库
  • 行政事业单位赞助支出会计核算办法
  • sqlserversa用户登录失败
  • 资本公积账务处理办法
  • 外经证预缴税款网上申报
  • 不动产拆除的收入处理
  • 以前的房产证现在能过户吗
  • 支付宝电子发票怎么开
  • 生产成本结转到本年利润吗
  • 财付通交易手续费多少
  • sqlserver的sql文件导入mysql
  • mysql5.7bug
  • linux promisc
  • win7ie11如何降为ie8
  • vi编辑器是干什么的
  • securecrt设置英文
  • 电脑windows xp
  • macbookair电脑屏幕
  • 防止linux断电系统崩溃
  • win7系统在哪里看显卡
  • linux各种重定向及其含义
  • django web开发
  • opengl入门教程
  • linux4个主要部分
  • node.js详解
  • canvas实例
  • 安卓自定义状态栏图标
  • jquery日期控件 datepicker
  • context和getApplicationContext()介绍
  • js面向对象编程的三大特性
  • python pil库官网
  • python连接mysql实例分享
  • 学什么专业可以在税务局上班
  • 税友核心价值观
  • 苏州公积金密码怎么改
  • 浙江省国家税务局总局官网
  • 社保征管职责是什么
  • 贵州税务发票流向查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设