使用Vue3开发鸿蒙的HelloWorld(附详细实现代码)
作者：沙振宇
1、简介
随着华为HarmonyOS在移动终端与IoT领域的快速普及，其分布式架构与跨端协同能力正吸引着越来越多的开发者。近期笔者有幸参与华为Mate 60 Pro的鸿蒙原生应用开发，在探索过程中发现：通过Vue3与HarmonyOS ArkUI框架的深度融合，前端开发者可以无缝迁移Web开发经验，快速构建高性能的鸿蒙原生应用。这种技术组合不仅延续了Vue3的响应式编程范式，更通过ArkUI的声明式UI语法，实现了"一次开发，多端部署"的跨端开发新范式。
尽管此前对Vue3有碎片化了解，但将其应用于移动端开发尚属首次尝试。在开发实践中，笔者系统梳理了从环境搭建到完整应用落地的全流程。
2、效果
3、环境
3.1、开发环境
操作系统：Windows 11
编辑模拟：VSCode
编译连接：DevEco
Node.js版本：20.9.0
Vue版本：3.6.5
3.2、运行环境
手机：华为Mete60 pro
系统：鸿蒙OS 5.0
连接：USB直连，
连接手机方法 检查开发者选项和USB调试设置 问题：未正确开启开发者权限或USB调试。 解决步骤： 在Mate 40E Pro上开启开发者模式： 设置 > 关于手机 > 版本号 连续点击7次。 返回 设置 > 系统和更新 > 开发人员选项，开启： ✅ USB调试 ✅ 仅充电模式下允许ADB调试 重新连接手机，弹出授权提示时勾选 “始终允许”。
4、实现
4.1、在VSCode上使用Vue开发HelloWorld
4.1.1、通过 Vite 快速创建项目
npm create vue@latest my-mobile-app cd my-mobile-app npm install npm install vant@next
4.1.2、修改 src/App.vue
<template>
<div class="app-container">
<HelloWorld></HelloWorld>
</div>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<style>
/* 全局基础样式 */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.app-container {
max-width: 600px;
margin: 0 auto;
height: 100vh;
}
</style>
4.1.3、模拟Web浏览器运行
npm run dev
<template>
<div class="hello-container">
<span class="hello-title">hello world</span>
</div>
</template>
<script setup>
</script>
<style scoped>
.hello-container {
padding: 20px;
min-height: 100vh;
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hello-title {
color: black;
font-size: 24px;
margin-bottom: 40px;
text-align: center;
}
/* 移动端适配 */
@media (max-width: 768px) {
.hello-title {
font-size: 20px;
}
}
</style>
</style>
4.2、使用DevEco完成手机App端移植
4.2.1、构建Vue 3项目为静态文件
npm run build
生成 dist 文件夹，内部包含：
4.2.2、创建HarmonyOS JS工程
打开DevEco Studio，选择 Create Project。
选择模板：Empty Ability（JS语言）。
配置项目名称和存储路径，点击 Finish。
更改下名字和基础配置，选择SDK版本，然后点finish。
4.2.3、导入Vue静态资源
在DevEco项目中，逐级创建资源目录：
entry/src/main/js/default/resources/rawfile/
将Vue的 dist 文件夹内所有内容复制到 rawfile 目录下：
entry/src/main/js/default/resources/rawfile/
4.2.4、修改主页加载Web资源
修改 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，替换为以下代码：
<div class="container">
<!-- 添加 Web 组件，占满全屏 -->
<web src="{{src}}" style="width: 100%; height: 100%"></web>
</div>
4.2.5、配置应用签名
【注意：这里一定要先注册华为的账号】
开启自动签名：
点击菜单栏 File > Project Structure > Project > Signing Configs。
勾选 Automatically generate signing，点击 OK。
等待自动生成签名文件（首次可能需要几分钟）。
4.2.6、运行应用到手机
在DevEco Studio顶部工具栏，点击 Run ‘entry’（绿色三角形图标）。
选择已连接的设备 HUAWEI Mate 60。
等待编译完成，应用会自动安装到手机并启动。
总结
到此这篇关于使用Vue3开发鸿蒙的HelloWorld的文章就介绍到这了,更多相关Vue3开发鸿蒙HelloWorld内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！