关于前端框架vue2升级为vue3的相关说明

news2024/11/15 23:46:33

一些框架需要升级

当前(202306) Vue 的最新稳定版本是 v3.3.4。Vue 框架升级为最新的3.0版本,涉及的相关依赖变更有:

  • 前提条件:已安装 16.0 或更高版本的Node.js(摘)

  • 必须的变更:核心库vue@2>3、路由vue-router@3>4、状态管理vuex@3>4

  • 构建工具链: Vue CLI > Vite(摘)

  • 状态管理: Vuex > Pinia, Pinia 是作为 Vuex 5 的雏形而创建的(摘)

  • IDE 支持: Vetur > Volar(摘)

  • Vue CLI是官方提供的基于 Webpack 的 Vue 工具链,它现在处于维护模式。我们建议使用 Vite 开始新的项目,除非你依赖特定的 Webpack 的特性;(摘)

  • 更详细框架变更与推荐,可访问 vue3 离线文档;

创建 vue3 项目

虽然 Vue CLI 也已升级以支持 Vue 3,但它现在处于维护状态,不再推荐用于新项目。有关从 Vue CLI 迁移到 Vite 的信息;(摘)

  • 通过vue/cli@5 创建:Vue Router+Vuex+Sass+Jest+ESLint+Prettier
vue create vue3-demo
cd vue3-demo
yarn serve

在这里插入图片描述

  • 使用 vite 创建:Vue Router+Pinia+Vitest+ESLint+Prettier
# 这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具
# 生成的项目中的示例组件使用的是组合式 API 和 <script setup>,而非选项式 API
npm init vue@latest
cd vue3_vite
npm install
npm run format
npm run dev

在这里插入图片描述

vue-router迁移说明

在 Vue Router API 从 v3(Vue2)到 v4(Vue3)的重写过程中,大部分的 Vue Router API 都没有变化,但是在迁移你的程序时,你可能会遇到一些破坏性的变化(摘)

vuex迁移说明

几乎所有的 Vuex 4 API 都与 Vuex 3 保持不变。但是,仍有一些非兼容性变更需要注意。(摘)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/804651.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CAN总线开发必看! 如何使用CANlib检测CAN帧溢出情况? Kvaser三招帮你轻松解决

从1980年代&#xff0c;Kvaser就开始CAN产品的研发&#xff0c;在相关产品开发领域有近40多年的经验&#xff0c;对CAN和相关总线技术有着非常深入的研究。广州智维电子科技是KVASER的中国引进者&#xff0c;我们会不定期分享一些有趣的发现和特定情况的技术处理。 在开发严重…

美国过境签证申请也要面签吗?

随着人们出国旅行的增加&#xff0c;美国过境签证成为了一个热门话题。对于许多人来说&#xff0c;了解美国过境签证的流程和要求非常重要。在这篇文章中&#xff0c;知识人网小编将介绍美国过境签证是否需要面签&#xff0c;以及相关的注意事项。 首先&#xff0c;让我们来了解…

Redis7学习笔记01

一、redis7实战教程简洁 1、大纲&#xff1a; ①、适合对象&#xff0c;从小白到熟手&#xff0c;一套全包圆 ②、Redis专题-大厂面试题&#xff0c;含100道 ③、Redis专题-真实需求生产真实案例 ④、Redis7新特性 2、小白篇高阶篇&#xff1a; 3、大厂面试题&#xff1a…

web场景-静态资源规则与定制化

一、SpringBoot默认静态资源路径 1.1 静态资源放在类路径下: /static/public/resources/META-INF/resources 1.2 浏览器访问&#xff1a; 当前项目根路径/ 静态资源名 eg&#xff1a;如上图&#xff0c;要想访问这四张图片&#xff0c;访问路径依次为&#xff1a;localhos…

1400*C. Computer Game

Example input 6 15 5 3 2 15 5 4 3 15 5 2 1 15 5 5 1 16 7 5 2 20 5 7 3 output 4 -1 5 2 0 1 解析&#xff1a; k个电&#xff0c; 第一种为 k>a 时&#xff0c;只玩游戏 k-a; 第二种&#xff0c;k>b,一边玩一边充电 k-b 问完成n轮游戏的情况下&#xff0c;优先第…

被逼无奈在小公司熬了2年,现在我终于进了腾讯测试岗...

其实两年前校招的时候就往腾讯投了一次简历&#xff0c;结果很明显凉了&#xff0c;随后这个理想就被暂时放下了&#xff0c;但是这个种子一直埋在心里&#xff0c;想着总有一天会再次挑战的。 其实这两年除了工作以外&#xff0c;其余时间基本上都在学习&#xff0c;打磨自己…

基于OpenCV solvePnP函数估计头部姿势

人脸识别 文章目录 人脸识别一、姿势估计概述1、概述2、姿态估计3、在数学上表示相机运动4、姿势估计需要什么5、姿势估计算法6、Levenberg-Marquardt 优化 二、solvePnP函数1、函数原型2、参数详解 三、OpenCV源码1、源码路径 四、效果图像示例参考链接 一、姿势估计概述 1、…

vue中通过JavaScript实现web端鼠标横向滑动触控板滑动效果-demo

JavaScript实现web端鼠标横向滑动&触控板滑动效果 支持鼠标拖动滑动&触控板滑动效果 web端实现滑动&#xff0c;就是对鼠标按下、鼠标松开、鼠标移动事件进行监听 效果图 代码 结构代码 <template><div class"swiper"><div class"co…

财报解读:谷歌成功绝地反击?厮杀尚未真正开始!

在经历了一轮激烈的攻防战之后&#xff0c;谷歌、微软同一天发布了财报&#xff0c;从数据来看&#xff0c;谷歌成功抵御了微软携OpenAI发起的挑战&#xff0c;业绩表现全面超预期&#xff0c;而微软的业绩虽然整体也超预期&#xff0c;但相比其四面出击的高调则黯淡了许多。 巨…

GoogleLeNet V2 V3 —— Batch Normalization

文章目录 Batch Normalizationinternal covariate shift激活层的作用BN执行的位置数据白化网络中的BN层训练过程 BN的实验效果MNIST与GoogleLeNet V1比较 GoogleLeNet出来之后&#xff0c;Google在这个基础上又演进了几个版本&#xff0c;一般来说是说有4个版本&#xff0c;之前…

12-1_Qt 5.9 C++开发指南_自定义插件和库-自定义Widget组件(提升法(promotion)创建自定义定制化组件)

当UI设计器提供的界面组件不满足实际设计需求时&#xff0c;可以从 QWidget 继承自定义界面组件。 有两种方法使用自定义界面组件&#xff1a; 一种是提升法(promotion)&#xff0c;例如在8.3 节将一个QGraphicsView组件提升为自定义的 QWGraphicsView 类&#xff0c;提升法用…

python将UTC +8 时间 转换为 UTC 时间

因为在工作的时候&#xff0c;有时候经常使用 UTC 时间&#xff0c;因为北京时间是 UTC 8&#xff0c;有时候要自己换算一下&#xff0c;或者 时间戳转换的时候有问题&#xff0c;所以就写了这个。 import time from datetime import datetime import pytz# 输入时间字符串 # …

LLM当前状态和潜在影响;谷歌Brain2Music读取大脑活动生成音乐

&#x1f989; AI新闻 &#x1f680; 谷歌Brain2Music利用AI读取大脑活动生成音乐 摘要&#xff1a;谷歌发布了名为Brain2Music的论文&#xff0c;通过人工智能和脑部成像技术生成个性化音乐。他们招募了5名志愿者&#xff0c;记录他们在听不同音乐类型时的大脑活动数据。通过…

刷完阿里 P8 面试官推荐的 Java 高并发核心编程文档后终拿蚂蚁 offer

前言 学完阿里 P8 面试官推荐的 Java 高并发核心编程文档后终于拿到了蚂蚁 p6 的 offer&#xff0c;这份文档包含的内容有点多。 主要包含的内容&#xff1a;Java NIO、Reactor 模式、高性能通信框架 Netty、分布式锁、分布式 ID、分布式缓存、高并发架构、多线程、线程池、内…

C语言IO篇(一) 输出百分号

1.百分号输出问题是什么&#xff1f; C语言中无法直接打印单个的%。 2.怎么解决百分号输出问题&#xff1f; 在C语言中&#xff0c;如何输出百分号呢&#xff1f; 1.在printf中用2个连续 %% 输出百分号。 2.将内容写入到字符串后打印 3.为什么出现百分号输出问题&#xff1f; …

install wxwidgets and wxPython on Linux

安装wxwidgets https://wiki.wxwidgets.org/Compiling_and_getting_startedhttps://wiki.wxwidgets.org/Compiling_and_getting_started 安装wxPython pip install wxPython 安装wxformbuilderhttps://github.com/wxFormBuilder/wxFormBuilder/releaseshttps://github.com/wx…

通达信赫尔均线 (HMA) 指标公式设置及原理详解

我们知道传统的均线存在短周期均线&#xff08;如5日均线&#xff09;灵敏但不够平滑&#xff0c;大周期均线&#xff08;如120日均线&#xff09;平滑但反应滞后、无法及时反映当前行情变化的缺点。&#xff08;如下图&#xff09;赫尔均线 (HMA) 正是为了解决这样的问题&…

AtcoderABC229场

A - First GridA - First Grid 题目大意 要求判断是否可以从每个黑色方块到达其他所有黑色方块&#xff0c;只能经过黑色方块&#xff0c;并且黑色方块之间必须相连&#xff08;共享一条边&#xff09;。 思路分析 据题意&#xff0c;不能的只有以下两种情况 .# #. #. .#…

交互式AI技术与模型部署:bert-base-chinese模型交互式问答界面设置

使用Gradio实现Question Answering交互式问答界面&#xff0c;首先你需要有一个已经训练好的Question Answering模型&#xff0c;这里你提到要使用bert-base-chinese模型。 Gradio支持PyTorch和TensorFlow模型&#xff0c;所以你需要将bert-base-chinese模型转换成PyTorch或Te…

双击start.bat文件闪退,运行报错“unable to access jarfile”

问题&#xff1a;电脑运行“start.bat”文件&#xff0c;无反应&#xff0c;闪退&#xff0c;管理员身份运行报错“unable to access jarfile” 解决思路&#xff1a; 1、由于该项目运行需要jdk环境&#xff0c;检查jdk版本需要是1.8.0_251版本 通过在 cmd 命令行输入java -v…