uniapp开发：uniapp之切换vue3，一直使用一直爽

最新推荐文章于 2025-10-11 16:06:07 发布
原创 最新推荐文章于 2025-10-11 16:06:07 发布 · 1.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文介绍了如何在uniapp中切换到vue3.x版本，包括创建uni-app项目、在manifest.json中选择Vue3版本以及验证vue3功能的简单示例。强调了HBuilderX版本需3.2+，并提示vue3的优点，鼓励开发者学习和使用。

目录

前言

随着vue3.0发布以来，紧随着vue3.2又发布了，这尤大大也太厉害了吧。在这里vue3.x的优点就不多说了，反正就是爽。

uniapp也是跟紧的步伐，在前几个版本就开始支持vue3.x的使用，甚至在2.9.3的cli版本就开始支持了，更多相关信息查看官方更新日志。从 HBuilderX 3.2 起，支持创建 vue3 的 uni-app 项目，更多uniapp相关信息查看uni-app 项目支持 vue 3.0 介绍，及升级指南。用法与常规vue3.2的用法差不多，有一种感觉，一直使用一直爽！那么接下来就简单地介绍下uniapp具体怎么使用vue3到项目中，跑起来~

使用步骤

1. 创建uniapp项目

使用Hbuilder X =》文件 =》新建 =》项目 =》选择uni-app自定义项目名 =》创建

image

2. 选择VUE3版本

使用Hbuilder X打开创建好的项目 =》打开项目根目录manifest.json文件，基础配置项 =》选择VUE版本选择，选择版本3 =》成功切换到vue3模式

最低0.47元/天 解锁文章
uni-app 项目支持 vue 3.0 介绍及升级指南
前端程序员、项目经理、人工智能博主
10-31 2391
更新uni-app编译器，支持基于 Vite 编译到小程序平台。至此，uni-app在App/H5/小程序全平台支持Vue 3.0开发，且全平台支持Vite编译器，下载 HBuilderX 3.3.0+ 体验。hello-uniapp H5 端已迁移 vue3，点击体验除支持vue3语法特性外，uni-app特有的生命周期钩子支持，如onLaunchonShowonLoad… ，使用方法见Vue2 迁移 Vue3 文档。
uniapp封装路由管理（兼容Vue2和Vue3）
青衫折扇的博客
03-06 1149
router.config.js文件无需配置任何路径，均在pages.json中配置即可。我这里是在项目根目录创建了一个config文件夹，两个文件都在config文件夹中。不管是Vue2的组合式API下还是Vue3的setup语法糖下都可以正常使用。以上配置在uniapp框架下不管是Vue2或者是Vue3都通用。我这里简单做了一下封装有什么问题欢迎留言指正。最后在main.js中我们全局挂载一下。以上有什么问题可以下面留言一起学习。Vue3中 setup语法糖。Vue2 组合式API。
uni-simple-router v3 路由、拦截、最优雅的解决方案重磅来袭
qq_37919080的博客
07-11 1961
uni-simple-router-v3 是一款适用于 Vue 3、Vite 和 uni-app 的路由管理器插件，它为您的应用提供了强大的路由功能和灵活的路由配置选项。特点：1.跨平台支持 2.基于 Vue 3 和 Vite 3. 动态路由配置 4. 嵌套路由和页面结构 5.路由守卫和导航控制 6. 视图过渡和用户体验
uniapp学习【vue3在uniapp中语法，使用element，使用uView UI】
最新发布
m0_71207979的博客
10-11 1308
均基于setup语法糖。
uniapp开发：uniapp快速体验vue3.2之setup语法糖，怎么使用怎么爽
m0_54852350的博客
02-23 2269
目录 概要 拉开序幕的setup语法糖 生命周期钩子 ref函数与reactive函数对比 computed计算属性 监视（watch、watchEffect） 组件传值 provide/inject style样式使用v-bind绑定动态值 获取路由信息 全局API的转移 Composition API 的优势 关注我，不迷路 vue3.x相关会在将来持续更新… 概要 随着vue3.0的发布，不久后vue3.2紧接着发布了，现在uniapp也支持了vue3.2的编译。vue3.x的优点我在这里就不多说
uniapp项目使用vue3
m0_67403188的博客
03-11 6596
uniapp项目使用vue3 1.首先创建普通uniapp项目 2.找到manifest.json文件vue版本选择 选择3 3.重新运行提示： 请确认您的项目模板是否支持vue3:根目录缺少 index.html 在根目录下创建index.html，模板已放在下方 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view
uniapp-vue3-unocss-hbuilderx
02-25
uniapp-vue3是基于Vue.js开发的uni-app框架的最新版本，它允许开发者使用Vue.js开发原生应用、Web应用以及各种小程序等，提供了一套编写一次，可以发布到iOS、Android、Web（包括微信小程序）等多平台的能力。而Vue3...
uniapp 基于 vue3 开发的【验证码输入框】
04-11
概要：uniapp 基于 vue3 开发的【验证码输入框】，输入值的输入框切换和光标是否自动聚焦等； 使用人群：使用 uniapp 基于 vue3 开发的应用，需要用到输入验证码； 使用场景：短信验证码登录、短信验证码验证身份、...
精选资源
uniapp + vue3 +vite + ts + pinia 框架模板
01-31
标题 "uniapp + vue3 + vite + ts + pinia 框架模板" 提供了我们讨论的关键技术栈。这是一个基于uni-app、Vue.js 3、vite、TypeScript和Pinia的项目模板，用于构建移动端应用。让我们逐一探讨这些技术的特性与它们在...
UNI-APP_使用vue3组件通讯,父组件调用子组件方法等
小歪博客
02-09 1284
UNI-APP_使用vue3组件通讯,父组件调用子组件方法等
uniapp项目中使用vue3开发多端项目实践
tigerhhzz的博客
06-21 4219
本项目中使用vue3开发多端项目实践，hbuilderx内置vue3模块，使用了vite4.x构建，编译构建项目的速度比火箭还快，超爽！pinia-plugin-unistorage 基于uniapp pinia实现多端的更简单的全局本地数据缓存。选择uni-app项目，输入项目名/路径，选择项目模板，勾选vue3版本，点击创建，即可成功创建。该插件是 pinia-plugin-persistedstate 的 uniapp 版本。点击编辑器的运行 > 运行到浏览器 > 选择浏览器。
Uniapp中使用Vue3开发微信小程序的全局状态管理实践
Jiaberrr的博客
02-11 1341
在开发微信小程序时，状态管理是一个非常重要的环节。随着项目规模的增大，组件之间的状态共享和通信变得复杂，传统的props和event方式已经无法满足需求。Uniapp作为一个跨平台开发框架，支持Vue3语法，并且提供了多种状态管理方案。本文将介绍如何在Uniapp中使用Vue3的结合Pinia进行全局状态管理，以提升开发效率和代码可维护性。通过本文的介绍，我们了解了如何在Uniapp中使用Vue3和Pinia进行全局状态管理。Pinia的简洁API和强大功能使得状态管理变得更加轻松和高效。
Uniapp中使用vue3语法
qq_1336674576的博客
07-24 545
Uniapp中使用vue3语法
uniapp 使用vue3 (第二篇 全局方法)
热门推荐
weixin_44596839的博客
04-23 1万+
uniapp vue3 挂载全局公共方法
uniapp 小程序 使用vue3+ts运行项目
weixin_71403100的博客
07-18 5564
下载完模板后进行解压，利用vscode打开文件，会发现报这样的错误👇主要原因是没有下载依赖。注意：若不能直接使用命令下载，可去gitee下载模板使用。其中dist里面的dev文件就是小程序打包生成的文件👇。解决以上错误：使用npm i 下载全部依赖即可。第一种：通过HBuilderX可视化界面创建。第二种：通过vue-cli命令行。此时终端会提示操作步骤👇。
Uniapp入门（vue3)
Engure
09-28 1714
uniapp 基本使用
uniapp 使用vue3+vite创建uniapp|项目
weixin_42178050的博客
06-15 1170
uniapp 使用vue3+vite创建uniapp|项目 https://www.csdn.net/tags/MtTaEg1sNTM3NDM2LWJsb2cO0O0O.html
uniapp使用Vue3组合式，如何进行Vue模块自动导入
ning的博客
10-08 1947
通过使用插件，我们可以在uniapp项目中实现Vue3组合式API的自动导入，从而减少重复劳动，提高开发效率。这是一个简单但非常实用的技巧，值得每个uniapp开发者尝试。希望这篇博客能帮助你在uniapp开发中更加高效地使用Vue3组合式API。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章uniapp使用Vue3组合式API版本，如何实现从vue模块中自动导入。
uniapp移动端： vue3+ts+vite如何实现中英文切换
02-28
### 实现 Vue3、TypeScript 和 Vite 构建的 UniApp 项目中的多语言切换 #### 创建 `locales` 文件夹及其子文件 在项目根目录下创建名为 `locales` 的文件夹，并在此文件夹内建立三个 TypeScript 文件：`index.ts`、`en.ts` 和 `zh.ts`。这些文件用于存储不同语言的消息[^1]。 #### 配置 i18n 设置 编辑 `locales/index.ts` 来初始化 vue-i18n 插件实例： ```typescript // locales/index.ts import { createI18n } from &#39;vue-i18n&#39;; import en from &#39;./en&#39;; import zh from &#39;./zh&#39;; const i18n = createI18n({ locale: navigator.language.includes(&#39;zh&#39;) ? &#39;zh&#39; : &#39;en&#39;, fallbackLocale: &#39;en&#39;, messages: { en, zh, }, }); export default i18n; ``` #### 编写消息文件 对于每种支持的语言，在对应的 `.ts` 文件中定义相应的翻译字符串集合。例如，中文版可以如下编写： ```typescript // locales/zh.ts export default { message: { hello: &#39;你好世界&#39; } }; ``` 同样地，英语版本也可以按照相同结构来设置： ```typescript // locales/en.ts export default { message: { hello: &#39;Hello world!&#39; } }; ``` #### 主应用入口处引入 i18n 最后一步是在应用程序的主要启动脚本（通常是 main.js 或者类似的文件）里面注册这个国际化的对象: ```javascript // main.ts or app.vue (depending on your project structure) import App from &#39;./App.vue&#39;; import router from &#39;./router&#39;; // 如果有路由的话 import store from &#39;./store&#39;; // 如果有状态管理库的话 import i18n from &#39;./locales&#39;; createApp(App).use(router).use(store).use(i18n).mount(&#39;#app&#39;); ``` 通过上述操作之后，便可以在模板里使用 `$t()` 函数来进行文字内容的本地化处理了。比如 `<p>{{ $t(&#39;message.hello&#39;) }}</p>` 将会依据当前用户的浏览器偏好自动显示为 “你好世界” 或者 "Hello world!"。 为了使用户能够手动更改界面语言，还需要提供一种方式让用户选择他们想要使用的语言环境。这通常涉及到更新 Vuex Store 中的状态或者是直接调用 `i18n.global.locale.value = newLangCode;`.
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值