使用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

























