使用Vue3开发鸿蒙的HelloWorld(附详细实现代码)_vue.js

尽管此前对Vue3有碎片化了解,但将其应用于移动端开发尚属首次尝试。在开发实践中,笔者系统梳理了从环境搭建到完整应用落地的全流程。

手机:华为Mete60 pro系统:鸿蒙OS 5.0连接:USB直连,

连接手机方法检查开发者选项和USB调试设置问题:未正确开启开发者权限或USB调试。解决步骤:在Mate 40E Pro上开启开发者模式:设置 > 关于手机 > 版本号 连续点击7次。返回 设置 > 系统和更新 > 开发人员选项,开启:✅ USB调试✅ 仅充电模式下允许ADB调试重新连接手机,弹出授权提示时勾选 “始终允许”。

npm create vue@latest my-mobile-appcd my-mobile-appnpm installnpm install vant@next

npm run dev

npm run build

生成 dist 文件夹,内部包含:

配置项目名称和存储路径,点击 Finish。

更改下名字和基础配置,选择SDK版本,然后点finish。

在DevEco项目中,逐级创建资源目录:

将Vue的 dist 文件夹内所有内容复制到 rawfile 目录下:

修改 index.js,打开文件 entry/src/main/js/default/pages/index/index.js,替换为以下代码:

export default { setup() { return { // 指向 rawfile 中的 index.html src: $rawfile("index.html") } }}

修改 index.hml,打开文件 entry/src/main/js/default/pages/index/index.hml,替换为以下代码:

【注意:这里一定要先注册华为的账号】

等待自动生成签名文件(首次可能需要几分钟)。

在DevEco Studio顶部工具栏,点击 Run ‘entry’(绿色三角形图标)。

选择已连接的设备 HUAWEI Mate 60。

等待编译完成,应用会自动安装到手机并启动。

到此这篇关于使用Vue3开发鸿蒙的HelloWorld的文章就介绍到这了,更多相关Vue3开发鸿蒙HelloWorld内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


本文地址: https://www.earthnavs.com/jishuwz/1217cde81bb18a52659d.html
全局中部横幅
中国工商银行中国网站

工商银行金融服务全面介绍,投资理财信息丰富全面,在线交易方便快捷,满足客户专业化、多元化、人性化的金融服务需求,打造集业务、信息、交易、购物、互动于一体综合性金融服务平台。

国家划分

国外网站大全为您分享亚洲、北美、欧洲等六大洲,美国、日本、韩国、英国等上百个国家的各个类型的著名国外网站。

魔盾安全

该站点未添加描述description...

《Linux就该这么学》

Linux就该这么学(LinuxProbe)—系统化的Linux学习与运维实战站点:命令行、RHEL10、RHCSA/RHCE、Shell脚本、Ansible、Docker、Kubernetes、服务器部署与优化教程。

宇阳

记录所学知识,缩短和大神的差距!

腾讯网

腾讯网从2003年创立至今,已经成为集新闻信息,区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道,充分满足用户对不同类型资讯的需求。同时专注不同领域内容,打造精品栏目,并顺应技术发展趋势,推出网络直播等创新形式,改变了用户获取资讯的方式和习惯。

金泉翱联网

金泉翱联网精心聚合最新的网站相关知识信息,全力打造出一个全新的网站平台资源整合体。在这里,为您提供全网范围内各类问题的解答,还有丰富的天气资讯、文学辞典、历史知识以及实用的生活小常识等内容。

网云穿内网穿透

网云穿是一款便捷,免费的内网穿透及端口映射软件,使您无需服务器,无需设置路由器即可对外发布应用,远程桌面,支付调试,NAS云盘,游戏联机等都可使用,支持Http,Https,Tcp,Udp协议,让您不再为网络不互通烦恼.

米发免费域名转发|301重定向|域名跳转|技术分享和记录

米发是领先的域名跳转服务提供商,支持创建隐藏URL转发、301跳转,自动支持HTTPS,访问量报表查看,更有监控目标地址跳转到可访问的地址以及团队协作功能。