首页 > 其他分享 >少年,该升级 Vue3 了!

少年,该升级 Vue3 了!

时间:2023-09-18 15:44:06浏览次数:49  
标签:vue 少年 升级 Vue Vue3 组件 import OpenTiny opentiny

你好,我是 Kagol。

前言

根据 Vue 官网文档的说明,Vue2 的终止支持时间是 2023 年 12 月 31 日,这意味着从明年开始:

  • Vue2 将不再更新和升级新版本,不再增加新特性,不再修复缺陷

image.png

虽然 Vue3 正式版本已经发布快3年了,但据我了解,现在依然还有很多业务在使用 Vue2,迟迟没有升级 Vue3。

为什么要等到 Vue2 彻底停止维护,才考虑升级 Vue3 这个如此重要的问题呢???

本文是一篇 Vue2 升级 Vue3 的指南,主要包含以下部分:

  1. 使用 Vue CLI 搭建 Vue2 工程
  2. 使用 ElementUI 搭建表格、表单
  3. 使用 OpenTiny Vue 替换一个组件
  4. 使用 OpenTiny Vue 替换一个页面
  5. 使用 OpenTiny Vue 替换整个应用
  6. 使用 gogocode 升级到 Vue3,组件代码无需修改

1 创建 Vue2 项目

先用 Vue CLI 创建一个 Vue2 项目(也可以使用 Vite 配合 @vitejs/plugin-vue2vite-plugin-vue2 插件)。

// 安装 Vue CLI
npm install -g @vue/cli

// 创建 Vue2 项目
vue create vue2-demo

输出以下信息说明项目创建成功

标签:vue,少年,升级,Vue,Vue3,组件,import,OpenTiny,opentiny
From: https://www.cnblogs.com/kagol/p/17712132.html

相关文章

  • 花10美元升级到Window10
    微软将于今年7月底正式结束为期一年的Windows10免费升级活动,如果你当前正用着Windows7/8.1,还请务必抓住最后几个月的机会。不过对于运行WindowsXP或Vista的老用户来说,想要花费较少的代价升级至最新的Windows10操作系统,就只剩下购买授权这条路了。幸运的是,在7月29号之前,你仍可通......
  • Vue3深度解析:reactive和ref的区别你真的了解吗?
    Vue3中引入了CompositionAPI,其中包含了reactive和ref两个核心函数。这两个函数都是用于创建响应式数据的,但它们之间有一些区别。首先,让我们来看一下reactive函数。reactive函数接受一个普通对象作为参数,并返回一个新的响应式对象。这个响应式对象会跟踪所有属性的变化,并在属性发......
  • vue3 computed属性
    该随笔是根据b站小满zs的Vue3+vite+Ts+pinia+实战+源码+electron的视频学习写的,Vue3+vite+Ts+pinia+实战+源码+electron......
  • Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建
    前言:接下来又得被迫开启新的一门课程的学习了,上半年末尾淘汰又即将拉开序幕【已经记不清经历过多少次考试了】,需要去学习其它领域的技术作为考试内容,我选了springboot相关技术,所以。。总之作为男人,不能轻易言败,尽力而为,抱怨解决不了任何问题,逆境使人进步,我坚信这点,效果:在正式学习......
  • Spring Boot&Vue3前后端分离实战wiki知识库系统<十三>--单点登录开发二
    接着SpringBoot&Vue3前后端分离实战wiki知识库系统<十二>--用户管理&单点登录开发一继续往下。登录功能开发: 接下来则来开发用户的登录功能,先准备后端的接口。后端增加登录接口:1、UserLoginReq:先来准备用户登录的请求实体:packagecom.cexo.wiki.req;importjavax.validation.co......
  • 极验率先推出一键认证安全版,供客户自主免费升级,规避日常运营中的风险盲区
    2017年6月1日,互联网服务开始响应《中华人民共和国网络安全法》的要求实施账号实名认证。由此,手机号码成为网络世界最主要的“身份证”,也让本机号码一键认证成为可能。其中,极验是最早的直连三大运营商的五家供应商之一,早在2017年就正式对外提供一键认证接口。一键认证于2020年进入普......
  • vue3 浏览器“Uncaught runtime errors:” 全屏报错提示关闭
      在项目的vue.config.js中配置module.exports={devServer:{client:{overlay:false//编译错误时,取消全屏覆盖(建议关掉)}}}......
  • vue2和vue3使用echarts时无数据,怎么显示暂无数据图片或文字
    一开始也经历了用v-if和v-show,v-show的话echarts还会留出暂无数据图片的位置,导致echarts变形,v-if在加载和不加载切换时,dom会获取不到;后来也是在网上找的方法,时间有点长,原文地址就不贴了。对了,在网上查方法的时候还找到了echarts noDataLoading这个方法,按照网上的写完,但是并没有......
  • 聚焦产业智能化升级,文心大模型企业应用私享会-北京站成功举办!
    随着大模型的破圈,各行各业掀起了新一轮AI浪潮,AIGC自主生成文字、图片、语音、视频、代码,将深度改变办公、电商、娱乐、教育、媒体等行业,引领人工智能实现从感知理解到生成创造的飞跃。9月13日下午,“文心大模型企业应用私享会”于北京中关村软件园成功举办。大模型技术专家、大模型......
  • vue3项目rem自适应大小如何实现
    ❝rem自适应方案只是页面自适应的解决方案之一,本文主要讲解一下实现过程!本文演示的是Vue3语法!❞rem自适应随着现在互联网设备的日益更新,各大尺寸的屏幕参差不穷导致我们的布局在某些小屏或者大屏上与UI的表现并不一致所以,很多人寻求各种解决方案,我们现在的很多移动端框架都是支持......