使用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
全局中部横幅
SegmentFault

SegmentFault思否是中国专业的开发者技术社区。我们以技术问答、技术博客、技术课程、技术资讯为核心的产品形态,为开发者提供纯粹、高质的技术交流平台。

梦想思维优质互联网资源分享平台

梦想资源站-优质的互联网分享平台资源每日更新

EwoMail邮件服务器,企业邮箱,一键搭建,安全稳定的开源邮件系统

Linux邮件服务器软件,一键搭建,轻量级的WebMail网页客户端,开源邮件系统,企业邮箱,轻松搭建,容易架设,支持反垃圾和防病毒,企业级邮箱系统解决方案

资源之家

资源之家提供免费副业项目、手机搬砖项目、抖音快手小红书无货源电商,抖音引流工具、网站源码、软件源码、技术教程、无人直播等等网络资源分享,是全网最大的资源网!

爱收集资源网

爱收集资源网每天更新大量原创技术教程,线报活动,QQ软件等,欢迎各位小刀娱乐网的基佬访问学习,给QQ爱好者们带来一个绿色温馨快乐的娱乐家园

三氟乙酸,三氟乙酸酐,叔丁醇钾,偶氮二异丁腈,N

山东欣烨化工有限公司集科研,生产,三氟乙酸,叔丁醇钾,偶氮二异丁腈,超氧化钾,N-甲基吡咯烷酮,二甲基二硫醚,异丁酸,对氯苯酚,氧化苯乙烯,三氟丙酸乙酯,三氟丙酸甲酯,三氟丙酸,三氟乙酸乙酯,三氟乙酸酐,三氟乙酰乙酸乙酯,二氟乙胺.二氟乙醇,三氟乙醇,医药中间体,农药中间体,酚醛树脂等系列产品。

小站百科

小站百科专业领先的网站目录平台,专注于免费提交和整理国内各行业排名前列的众多知名网站,我们的目标是打造一个全面、权威、专业的网站目录平台,助力用户快速定位所需信息,提升网络浏览效率。

千寻网

千寻网导航是一个集合众多网站的网址导航站点,包含了各类网站的分类导航,如资源博客、网址导航、影视视频、电影短剧、网路资讯等,涵盖了网民日常使用的各类网站

滑动验证

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

235资源网

235资源网,最新资源网,免费资源分享,电脑软件下载,手机软件,网站源码,设计素材,游戏资源,影视素材,电脑系统安装,IT技术教程