当前位置： 首页 > news >正文

uniapp vue2项目迁移vue3项目

news 2026/1/2 7:25:41

uniapp vue2项目迁移vue3项目，必须适配的部分

一、main.js 创建应用实例
// 之前 - Vue 2
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false    // vue3 不再需要
App.mpType = 'app'    // vue3 不再需要
const app = new Vue({
...App
})
app.$mount()// 之后 - Vue 3
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
二、全局属性，例如：全局网络请求
// 之前 - Vue 2
Vue.prototype.$http = () => {};// 之后 - Vue 3
const app = createApp({});
app.config.globalProperties.$http = () => {};
三、插件使用，例如：使用 vuex 的 store
// 之前 - Vue 2
import store from "./store";
Vue.prototype.$store = store;// 之后 - Vue 3
import store from "./store";
const app = createApp(App);
app.use(store);
四、项目根目录必需创建 index.html 文件，粘贴复制如下内容：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/><title></title><!--preload-links--><!--app-context--></head><body><div id="app"><!--app-html--></div><script type="module" src="/main.js"></script></body>
</html>
五、只支持使用 ES6 模块规范，commonJS 需改为 ES6 模块规范
  • 导入模块, 例如：
// 之前 - Vue 2, 使用 commonJS
var utils = require("../../../common/util.js");// 之后 - Vue 3， 只支持 ES6 模块
import utils from "../../../common/util.js";
  • 模块导出，例如：
// 之前 - Vue 2, 依赖如使用 commonJS 方式导出
module.exports.X = X;// 之后 - Vue 3， 可手动改为 ES6 导出
export default { X };
六、vuex 用法
// 之前 - Vue 2import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {}})export default store// 之后 - Vue 3import { createStore } from 'vuex'const store = createStore({state: {}})export default store
七、避免在同一元素上同时使用 v-if 与 v-for

而 Vue3 中，v-if 总是优先于 v-for 生效。以上写法将会在 Vue3 中与预期不符合，由于语法上存在歧义，建议避免在同一元素上同时使用两者（更多）

  • 生命周期的适配

    在 Vue3 中组件卸载的生命周期被重新命名

    • destroyed 修改为 unmounted
    • beforeDestroy 修改为 beforeUnmount

  • 事件的适配

    Vue3 现在提供了一个emits选项，类似于现有props选项。此选项可用于定义组件可以向其父对象发出的事件， 更多

    强烈建议使用emits记录每个组件发出的所有事件。

    这一点特别重要，因为去除了.native修饰符。emits 现在在未使用声明的事件的所有侦听器都将包含在组件的中$attrs，默认情况下，该侦听器将绑定到组件的根节点。

<template><button @click="onClick">OK</button>
</template>
<script>export default {emits: ["click"],methods: {onClick() {this.$emit("click", "OK");},},};
</script>

v-model 的适配

Vue3 的 v-model 相对 Vue2 来说 ，有了较大的改变。可以使用多 model,相应语法也有变化。更多

  • 修改 modelValue 用于自定义组件时，Vue3 v-model prop 和事件默认名称已更改 props.value 修改为 props.modelValue ,event.value 修改为 update:modelValue 
export default {props: {// value:String,// 替换 value 为 modelValuemodelValue: String,},
};

事件返回

将之前的 this.emit('input') 修改为 this.emit('update:modelValue') ，vue3 中将省略这一步骤

自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --><ChildComponent:modelValue="pageTitle"@update:modelValue="pageTitle = $event"
/>

若需要更改 model 名称，作为组件内 model 选项的替代，现在我们可以将一个 argument 传递给 v-model：

<ChildComponent v-model:title="pageTitle" /><!-- 是以下的简写: --><ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

插槽的适配

Vue3 将不支持 slot="xxx" 的用法 ，请使用 v-slot:xxx 用法。更多

<!--  Vue2 支持的用法 -->
<uni-nav-bar><view slot="left" class="city"><!-- ... --></view>
</uni-nav-bar><!--  Vue3 支持的用法 -->
<uni-nav-bar><template v-slot:left><view class="city"><!-- ... --></view></template>
</uni-nav-bar>

  • 从 Vue 3.0 开始，过滤器已删除，不再支持，建议用方法调用或计算属性替换它们。更多

  • 在 Vue3 中，处理 API Promise 化 调用结果的方式不同于 Vue2。更多

    • Vue3 中，调用成功会进入 then 方法，调用失败会进入 catch 方法
    • Vue2 中，调用无论成功还是失败，都会进入 then 方法，返回数据的第一个参数是错误对象，第二个参数是返回数据
    • Vue 2 写法转 Vue 3 写法
// 在 main.js 中写入以下代码即可
function isPromise(obj) {return (!!obj &&(typeof obj === "object" || typeof obj === "function") &&typeof obj.then === "function");
}uni.addInterceptor({returnValue(res) {if (!isPromise(res)) {return res;}return new Promise((resolve, reject) => {res.then((res) => {if (res[0]) {reject(res[0]);} else {resolve(res[1]);}});});},
});
Vue 3 写法转 Vue 2 写法
// 在 main.js 中写入以下代码即可
function isPromise(obj) {return (!!obj &&(typeof obj === "object" || typeof obj === "function") &&typeof obj.then === "function");
}uni.addInterceptor({returnValue(res) {if (!isPromise(res)) {return res;}const returnValue = [undefined, undefined];return res.then((res) => {returnValue[1] = res;}).catch((err) => {returnValue[0] = err;}).then(() => returnValue);},
});
总结

以下列举迁移到 vue3，必须适配的几个点，vue2 项目才能正常运行在 vue3 上。更多查看完整的非兼容特性列表

© 著作权归作者所有,转载或内容合作请联系作者


喜欢的朋友记得点赞、收藏、关注哦！！！

相关文章：

uniapp vue2项目迁移vue3项目

uniapp vue2项目迁移vue3项目&#xff0c;必须适配的部分 一、main.js 创建应用实例 // 之前 - Vue 2 import Vue from vue import App from ./App Vue.config.productionTip false // vue3 不再需要 App.mpType app // vue3 不再需要 const app new Vue({ ...App }) …...

编程日记 2024/11/25 12:49:33

16.C++STL 3(string类的模拟，深浅拷贝问题)

⭐本篇重点&#xff1a;string类的模拟&#xff0c;自己实现一个简单的string类 ⭐本篇代码&#xff1a;c学习/05.string类的学习 橘子真甜/c-learning-of-yzc - 码云 - 开源中国 (gitee.com) 目录 一. 经典string类的模拟 1.1 深浅拷贝问题 1.2 使用深拷贝完成经典string类的…...

编程日记 2024/11/25 12:48:32

神经网络10-Temporal Fusion Transformer (TFT)

Temporal Fusion Transformer (TFT) 是一种专为时序数据建模而设计的深度学习模型&#xff0c;它结合了Transformer架构和其他技术&#xff0c;旨在有效地处理和预测时序数据中的复杂模式。TFT 于 2020 年由 Google Research 提出&#xff0c;旨在解决传统模型在时序预测中的一…...

编程日记 2024/11/25 12:47:31

“iOS profile文件与私钥证书文件不匹配”总结打ipa包出现的问题

目录 文件和证书未加载或特殊字符问题 证书过期或Profile文件错误 确认开发者证书和私钥是否匹配 创建证书选择错误问题 申请苹果 AppId时勾选服务不全问题 ​总结 在上线ios平台的时候&#xff0c;在Hbuilder中打包遇见了问题&#xff0c;生成ipa文件时候&#xff0c;一…...

编程日记 2024/11/25 12:46:30

《图像梯度与常见算子全解析：原理、用法及效果展示》

简介:本文深入探讨图像梯度相关知识&#xff0c;详细介绍图像梯度是像素灰度值在不同方向的变化速度&#xff0c;并以 “pig.JPG” 图像为例&#xff0c;通过代码展示如何选取图像部分区域并分析其像素值以论证图像梯度与边缘信息的关联。接着全面阐述了 Sobel 算子&#xff0c…...

编程日记 2024/11/25 12:44:28

【c++篇】：探索c++中的std::string类--掌握字符串处理的精髓

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨文章所属专栏&#xff1a;c篇–CSDN博客 文章目录 前言一.std::string对象的创建二.std::string对象的访问三.std::str…...

编程日记 2024/11/25 12:42:26

LlamaIndex ollama 搭建本地RAG应用，建立本地知识库

目录 简介安装前的准备下载ollama创建llamaindex conda环境&#xff0c;为后面编码作准备 环境变量迁移ollama到其他盘运行ollama方式一方式二禁止ollama开机自启动运行第一个模型 Chatbox聊天下载Chatbox配置ollama地址和模型验证 建立自身特定知识数据搭配大语言模型创建项目…...

编程日记 2024/11/25 12:41:24

draggable的el-dialog实现对话框标题可以选择

请看图 这个对话框使用了el-dialog并且draggable属性设置成了true&#xff0c;所以标题栏这里就可以拖动&#xff0c;现在用户想选中标题栏的文本进而复制。我看到这个需求头都大了。 我能想到的方案有三个&#xff1a;1. 取消draggable为true 2. 标题文案后面加一个复制按钮 …...

编程日记 2024/11/25 12:40:23

2024年Android面试总结

2024年Android面试总结 1.动画类型有哪些&#xff1f;插值器原理&#xff1f; 2.StringBuffer和StringBuilder区别&#xff1f; 3.jvm内存模型&#xff1f; 4.线程池7大核心参数及原理&#xff1f; 5.Android多进程通信方式有哪些&#xff1f;各自的优缺点&#xff1f; 6…...

编程日记 2024/11/25 12:37:18

树莓派3:64位系统串口(UART)使用问题的解决方法

前言 当我们要使用串口进行zigbee的短距离通信时,发现无法使用串口. 原因 树莓派3bCPU内部有两个串口,一个硬件串口(就是我们平时使用的UART),还有一个迷你串口(mini-uart),在老版本的树莓派中把硬件串口分配在GPIO上,可以单独使用.但是在新的树莓派中官方把硬件串口给了蓝牙…...

编程日记 2024/11/25 12:35:15

SemiDrive E3 硬件设计系列---唤醒电路设计

一、前言 E3 系列芯片是芯驰半导体高功能安全的车规级 MCU&#xff0c;对于 MCU 的硬件设计部分&#xff0c;本系列将会分模块进行讲解&#xff0c;旨在介绍 E3 系列芯片在硬件设计方面的注意事项与经验&#xff0c;本文主要讲解 E3 硬件设计中唤醒电路部分的设计。 二、RTC 模…...

编程日记 2024/11/25 12:32:11

淘宝接口高并发采集核心要点解读，开启电商数据智能应用新纪元

一、引言 在电商蓬勃发展的今天&#xff0c;淘宝作为全球知名的电商巨头&#xff0c;其平台上的数据犹如一座蕴藏无限价值的宝藏。准确且高效地采集淘宝接口数据&#xff0c;并通过高并发技术实现大规模数据获取&#xff0c;对于电商企业的精准营销、市场趋势分析、竞品监测以及…...

编程日记 2024/11/25 12:31:10

C#里怎么样快速使用LINQ实现查询？

C#里怎么样快速使用LINQ实现查询？ 在C#里使用LINQ，是一个方便的功能， 不过，要学会使用这部分的功能，需要比较多的学习时间，否则，使用起就比较难。 因为它的表现方式，与编程语言通用的功能，还是差别比较大。 当数据量比较小，没有特定的顺序时，使用LINQ访问会比较好…...

编程日记 2024/11/25 12:30:09

2024新版微软edge浏览器输入百度网址时自动补全tn=68018901……小尾巴的解决

以前一直是Windows11 21h2版本&#xff0c;浏览器内输入baidu不会自动补全tnxx的百度推广小尾巴。然后前几天在BIOS内开启了tpm2.0&#xff0c;升级Windows11到了24h2版本。 发现在edge浏览器内只要输入b&#xff0c;就会自动补全为baidu.com?tnXXX的这么一个百度推广形式。开…...

编程日记 2024/11/25 12:28:04

uni-app打包H5自定义微信分享

1、配置分享信息 修改uni-app的index.html，添加Open Graph（OG）标签来配置分享信息。 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="description" content="标题"/>…...

编程日记 2024/11/25 12:26:00

大模型专栏--大模型应用场景

紧接着第一篇&#xff0c;什么是大模型&#xff0c;这篇文章讨论一下大模型的应用场景和应用方式有哪些&#xff1f; 基础使用 随着 GPT 的出现&#xff0c;AI 大模型已经越来越多得出现在日常生活和学术研究&#xff0c;工作中。 按照使用方向有以下几种&#xff1a; 自然语…...

编程日记 2024/11/25 12:24:56

骑砍2霸主MOD开发(29)-顶点动画

一.定制化顶点动画(MorphAnimation) 定制化顶点动画用于人物Agent的面部表情. 1.创建MorphAnimation对应静态资源morph_animation.tpac 2.Agent设置对应MorphAnimation [EngineMethod("set_agent_facial_animation", false)] void SetAgentFacialAnimation(UIntPtr …...

编程日记 2024/11/25 12:14:46

-Dspring.profiles.active=dev与--spring.profiles.active=dev的区别

在Spring Boot应用程序中&#xff0c;-Dspring.profiles.activedev和--spring.profiles.activedev都用于指定要激活的Spring配置文件&#xff08;profile&#xff09;&#xff0c;但它们在不同的环境中使用&#xff0c;并且有不同的作用域。 -Dspring.profiles.activedev&#…...

编程日记 2024/11/25 12:13:45

面向对象高级（2）单例设计对象与代码块

面向对象高级&#xff08;2&#xff09; 单例设计模式、main方法与代码块 引言&#xff1b; 设计模式&#xff1a;特定环境下特定问题的处理方法。可理解为一种经典的可以参照的模板。单例设计模式则是只存在单个对象实例、且只有一种方法获取对象实例的一种设计模式。 单例设…...

编程日记 2024/11/25 12:12:44

47小型项目的规划与实施

每天五分钟学Linux | 第四十七课&#xff1a;小型项目的规划与实施 大家好&#xff01;欢迎再次来到我们的“每天五分钟学Linux”系列教程。在前面的课程中&#xff0c;我们学习了并发编程的知识&#xff0c;包括如何管理和使用进程与线程。今天&#xff0c;我们将探讨如何规划…...

编程日记 2024/11/25 12:11:41

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/12/17 20:13:54

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/12/25 4:27:19

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/12/21 6:19:19

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/12/22 9:33:34

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/12/30 13:50:23

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/12/31 13:00:16

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/12/26 18:51:33

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43