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

uniapp从 vue2 项目迁移到 vue3流程

article 2026/2/27 11:14:18

以下是必须为迁移到 vue3 进行调整的要点，以便 vue2 项目可以在 vue3 上正常运行。

1. 在index.js中创建应用程序实例

// Before - Vue 2
import Vue from 'vue'
import App from './App'
// with no need for vue3
Vue.config.productionTip = false
// vue3 is no longer needed
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()// After - Vue 3
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}

2. 添加全局属性，例如:全局网络请求

// Before - Vue 2
Vue.prototype.$http = () => {};// After - Vue 3
const app = createApp({});
app.config.globalProperties.$http = () => {};

3. 插件使用，例如:使用vuex的存储

// Before - Vue 2
import store from "./store";
Vue.prototype.$store = store;// After - Vue 3
import store from "./store";
const app = createApp(App);
app.use(store);

4. 项目根目录必须创建一个index.html文件

复制并粘贴以下内容:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="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模块规格

5. 模块导入，例如:

//Before - Vue 2, use commonJS
var utils = require("../../../common/util.js");//After - Vue 3, only ES6 module is supported
import utils from "../../../common/util.js";

6. 模块导出，例如：

//Before - Vue 2, if dependent, export using commonJS
module.exports.X = X;//After - Vue 3, can be manually changed to ES6 for export
export default { X };

7. vuex 使用情况

// Before - Vue 2import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {}})export default store// After - 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选项。这个选项可以用来定义一个组件可以向其父对象发出的事件。

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

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

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

与 Vue2相比， Vue3 对v-model的适应性有了很大变化。您可以使用多种v-model。 model，相应的语法也发生了变化。

...当为自定义组件修改modelValue时， Vue3 v-model props和事件的默认名称将被更改。 props.value已更改为 props.modelValue和 event.value已更改为 update:modelValue

export default {props: {// value:String,//Replace value as modelValuemodelValue:String}
}

事件返回:更改之前的 this.$emit('input')到 this.$emit('update:modelValue')，此步骤将在vue3中省略。

9. 自定义组件上的v-model等同于传递modelValue prop并接收抛出的update:modelValue事件:

  <ChildComponent v-model="pageTitle" /><!-- Abbreviation for the following: --><ChildComponent:modelValue="pageTitle"@update:modelValue="pageTitle = $event"/>

10. 如果需要更改模型名称，作为组件中模型选项的替代方案，我们现在可以向v-model传递一个参数:

  <ChildComponent v-model:title="pageTitle" /><!-- Abbreviation for the following: --><ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

11. 对时段的改编

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

<!-- Usage supported by Vue2 -->
<uni-nav-bar><view slot="left" class="city"><!-- ... --></view>
</uni-nav-bar>

<!-- Usage supported by Vue3 -->
<uni-nav-bar><template v-slot:left><view class="city"><!-- ... --></view></template>
</uni-nav-bar>

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

如果您想了解更多，请浏览vue官网。文章来源于uniapp官网，文章地址：从vue2迁移到vue3。

如果文章对您有帮助，还请您点赞支持
感谢您的阅读，欢迎您在评论区留言指正分享

uniapp从 vue2 项目迁移到 vue3流程

以下是必须为迁移到 vue3 进行调整的要点，以便 vue2 项目可以在 vue3 上正常运行。 1. 在index.js中创建应用程序实例 // Before - Vue 2 import Vue from vue import App from ./App // with no need for vue3 Vue.config.productionTip false // vue3 is no lon…...

编程日记 2026/2/22 14:47:53

案例：网络命名空间模拟隔离主机场景

场景描述假设我们需要在同一台物理机上模拟两台独立的主机（Host A 和 Host B），它们分别位于不同的网络命名空间中，并通过虚拟以太网对（veth pair）进行通信。目标是展示网络命名空间的隔离性和跨命名空间的…...

编程日记 2026/2/20 10:03:21

23种设计模式-生成器(Builder)设计模式

工厂方法设计模式 🚩什么是生成器设计模式？🚩生成器设计模式的特点🚩生成器设计模式的结构🚩生成器设计模式的优缺点🚩生成器设计模式的Java实现🚩代码总结🚩总结 🚩什么…...

编程日记 2026/2/16 11:14:18

算法训练营第二十二天 | 回溯算法（四）

文章目录前言一、Leetcode 491.递增子序列二、Leetcode 46.全排列三、Leetcode 47.全排列Ⅱ 前言提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启…...

编程日记 2026/2/8 21:18:39

NLP高频面试题（十一）——RLHF的流程有哪些

随着大语言模型（如GPT系列）的快速发展，RLHF（Reinforcement Learning from Human Feedback，即基于人类反馈的强化学习）逐渐成为训练高质量模型的重要方法。本文将简单清晰地介绍RLHF的整体流程。一、RLHF …...

编程日记 2025/9/21 2:34:51

测试用例设计方法与Prompt转化：一键生成高效提示词的实用指南

在测试工程师的日常工作中，设计测试用例是确保软件质量的关键环节。然而，如何快速、高效地设计出覆盖率高、逻辑严密的测试用例却是一个常见的挑战。本文将结合常用的测试用例设计方法，探索如何通过Prompt（提示词）转化…...

编程日记 2025/9/15 21:04:56

蓝桥杯备考：BFS最短路径之Meteor Shower S流星雨

本题是一个BFS最短路问题，我们可以先把时刻的矩阵搞出来，哪些时刻哪些方块儿不能走用来剪枝如果第一次走到永远不会被扎到的区域，那时候就是我们的最短距离定义方向向量 #include <iostream> #include <queue> #include <c…...

编程日记 2026/2/16 11:14:16

【＜二＞丹方改良：Spring 时代的 JavaWeb】之 Spring Boot 中的 RESTful API 设计：从上手到骨折

<前文回顾> 点击此处查看合集 https://blog.csdn.net/foyodesigner/category_12907601.html?fromshareblogcolumn&sharetypeblogcolumn&sharerId12907601&sharereferPC&sharesourceFoyoDesigner&sharefromfrom_link <今日更新> 一、开篇整活…...

编程日记 2026/2/25 20:56:04

【深度学习与大模型基础】第8章-概率分布

一、概率质量函数什么是概率质量函数？ 概率质量函数是用来描述离散随机变量的概率分布的工具。它告诉我们，某个离散随机变量取某一个特定值的概率是多少。举个例子：抛硬币假设你有一个程序，模拟抛硬币的结果。硬币有两个可能…...

编程日记 2025/7/24 16:21:21

数据结构5（初）：排序

目录 1、排序的概念以及常见的排序算法 1.1、排序的概念 1.2、常见的排序算法 2、常见排序算法的实现 2.1、插入排序 2.1.1、直接插入排序 2.1.2、希尔排序 2.2、选择排序 2.2.1、直接选择排序 2.2.2、堆排序 2.3、交换排序 2.3.1、冒泡排序 2.3.2、快速排序 2.3.…...

编程日记 2026/2/22 21:37:35

表达式括号匹配(stack)（信息学奥赛一本通-1353）

【题目描述】假设一个表达式有英文字母（小写）、运算符（，—，∗，/）和左右小（圆）括号构成，以“ ”作为表达式的结束符。请编写一个程序检查表达式中的左右圆括号…...

编程日记 2025/9/3 7:29:47

RabbitMQ 详细原理解析

RabbitMQ 是一个基于 AMQP（Advanced Message Queuing Protocol） 协议的开源消息代理中间件，广泛用于分布式系统中的异步通信、服务解耦、流量削峰等场景。其核心设计围绕生产者、消费者、队列、交换机和虚拟主机等组件，结合 AMQP …...

编程日记 2025/9/19 8:51:10

2025-03-23 学习记录--C/C++-C语言 sprintf()实现将多个值按指定格式拼接成字符串

C语言 sprintf()实现将多个值按指定格式拼接成字符串举个例子 🌰：将字符串 “m” 与数字 0、1、2 动态拼接成 “m0”、“m1”、“m2”：👇🏻 #include <stdio.h> // 包含标准输入输出库，用于使用输入…...

编程日记 2026/2/26 18:22:08

【小程序开发】完整项目结构长啥样？

Hello，欢迎来到AI技术库。AI写代码的时代，人人都可以成为程序员。欢迎继续【小程序开发】系列课。上节课中，我们学习了【手把手教你小程序开发】什么是大前端？，本节课，我们学习第二篇小程序的完整项目结构。本文适合阅读对象： 1. 非计算机专业AI爱好者；2. 小程序开发…...

编程日记 2026/2/25 3:12:29

JVM的组成及各部分的作用

JVM（Java虚拟机）是Java程序运行的核心环境，负责将Java字节码转换为机器码并执行。以下是JVM的主要组成部分及其作用： 1. 类加载器子系统（Class Loader Subsystem） 作用加载：将 .class 文件加载…...

编程日记 2026/2/19 21:13:55

计算机网络精讲day2———计算机网络的性能指标（下）

性能指标5：时延带宽积时延带宽积传播时延*带宽这里要注意是传播时延不是发送时延重点：管道法解析时延带宽积我们以一个圆柱形管道来代表链路，管道的长度是链路的传播时延（以时间作为单位单位表示链路长度）&#x…...

编程日记 2026/2/25 16:53:58

Android LiveData 的 `setValue` 与 `postValue` 区别详解

Android LiveData 的 setValue 与 postValue 区别详解一、核心区别线程限制 • setValue：必须且仅能在主线程调用，否则会抛出 IllegalStateException。 • postValue：可在任意线程调用，内部通过 Handler 将任务切换到主线程执行 setValue。数据更新机制 • setValue：同…...

编程日记 2026/2/14 12:01:08

【多线程】初始线程和Thread类

一. 线程 1. 线程的引入虽然进程已经可以解决并发编程这种问题，但是进程在频繁进行创建和销毁的时候，系统开销非常大，如果一个服务器向你发送多个请求，针对每一个请求，都需要创建一个进程来应答，每个进程…...

编程日记 2026/2/13 19:01:37

WebLogic中间件常见漏洞

一、后台弱⼝令GetShell 1.环境搭建 cd vulhub-master/weblogic/weak_password docker-compose up -d 2.访问网站并登陆后台 /console/login/LoginForm.jsp 默认账号密码：weblogic/Oracle123 3.点击部署，点击安装&#xff…...

编程日记 2026/2/21 9:43:48

[笔记.AI]多头自注意力机制（Multi-Head Attention）

多头自注意力是深度学习领域，特别是自然语言处理（NLP）和Transformer模型中的关键概念。其发展源于对序列数据中复杂依赖关系的建模需求，特别是在Transformer架构的背景下。举例比喻-读长篇文章用一个简单的比喻来理解“多头注…...

编程日记 2026/2/19 7:42:02

【基于ROS的A算法实现路径规划】A | ROS | 路径规划 | Python

### 记录一下使用Python实现ROS平台A*算法路径规划 ### 代码可自取 ：Xz/little_projecthttps://gitee.com/Xz_zh/little_project.git 目录一、思路分析二、算法实现三、路径规划实现一、思路分析要求使用A*算法实现路径规划，可以将该任务分为三…...

编程日记 2026/2/24 20:28:57

keda基于postgresql伸缩dify-api服务

1 概述 dify-api使用postgresql来存储数据，在dify控制台每新建一个聊天机器的聊天框，就会在conversations表里新插入一条记录，并且不断地更新字段updated_at，示例如下： dify# select * from conversations limit 1; …...

编程日记 2026/2/22 17:12:52

趣味极简品牌海报艺术贴纸设计圆润边缘无衬线粗体装饰字体 Chunko Bold - Sans Serif Font

Chunko Bold 是一种功能强大的显示字体，体现了大胆极简主义的原则 – 当代设计的主流趋势。这种自信的字体将粗犷的几何形状与现代的趣味性相结合，具有圆润的边缘和强烈的存在感，与当今的极简主义设计方法完美契合。无论是用于鲜明的构图还是…...

编程日记 2026/2/15 17:45:40

VoLTE（Voice over Long-Term Evolution）

VoLTE，即Voice over Long-Term Evolution，是一种基于4G LTE网络的高质量语音通话技术。与传统的2G和3G网络中的语音通话不同，VoLTE将语音信号转换为数据包，通过LTE网络进行传输，从而实现了更快的连接速度和更高的通话质…...

编程日记 2026/2/15 3:07:26

指针，数组易混题解析（一）

目录一.相关知识点 1.数组名是什么？ 两个例外： 2.strlen 3.sizeof 4. * ( ) 与 [ ] 的互换二.一维数组三.字符数组 1. 字符 （1）sizeof （2）strlen 2.字符串 （1）si…...

编程日记 2026/2/18 0:42:30

Java 基础篇：数组

前言数组（Array）是 Java 中最基本的数据结构之一，它用于存储相同类型的元素，并且在内存中是连续存储的。数组具有高效的索引访问特点，但长度固定，不能动态调整。本文将介绍数组的基本概念、声明和初始化方…...

编程日记 2026/2/19 4:33:13

从汽车 BCM 方案看国产 MCU 芯片的突围与挑战

摘要 ：汽车车身控制模块（BCM）作为汽车电子系统的核心控制单元，其性能高度依赖于微控制单元（MCU）芯片。随着汽车智能化与电动化的发展，国产 MCU 芯片在 BCM 领域的应用逐渐扩大。本文结合行业数据…...

编程日记 2026/2/18 17:20:54

深入理解 Spring 框架中的 IOC 容器

一、Spring 框架概述 Spring 框架是一个轻量级的 Java 开发框架，由 Rod Johnson 在 2003 年创建。它的诞生旨在简化企业级应用开发的复杂性。Spring 框架提供了诸如 IoC（控制反转）和 AOP（面向切面编程）等核心功能&…...

编程日记 2026/2/15 16:48:04

深入理解 Java 中 instanceof 操作符

目录 1. instanceof 的基本用法 1.1 语法 1.2 示例 2. instanceof 的用途 2.1 类型检查 2.2 类型转换 2.3 多态编程 3. instanceof 的注意事项 3.1 null 检查 3.2 接口检查 3.3 继承关系 3.4 性能问题 4. instanceof 代码示例 4.1 多态处理 4.2 接口检查 4.3 n…...

编程日记 2026/2/21 16:29:21

2025前端面试题记录

vue项目目录的执行顺序是怎么样的？ 1、package.json 　　在执行npm run dev时，会在当前目录寻找package.json文件，此文件包含了项目的名称版本、项目依赖等相关信息。 2、webpack.config.js(会被vue-cli脚手架隐藏) 3、vue.config.js 　　对…...

编程日记 2026/2/22 3:11:04