菜鸟-创作你的创作

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

lichongyang

下面给你一篇 《使用 Vue3 开发鸿蒙 HarmonyOS NEXT 的 HelloWorld（含完整代码 + 工程结构 + 步骤）》
适用于 ArkTS + Vue3（Cross-UI 框架） 的方式，也是当前最主流、最推荐的写法。

🚀 1. HarmonyOS Vue3 开发方式说明

鸿蒙不是直接运行传统 Web Vue3，而是通过 ArkUI Cross-UI + Vue DSL 的方式支持 Vue3 语法。

你可以使用以下方式：

🛠 2. 创建一个 HarmonyOS Vue3 项目

第一步：创建项目

  1. 打开 DevEco Studio
  2. 点击：New Project
  3. 选择：
    Cross-App → Vue（也可能显示 Vue Quick Start）
  4. 工程名：HelloWorld
  5. 最低 API：HarmonyOS NEXT API 12 或更高

项目模板会包含 Vue3 开发能力。

📁 3. Vue3 项目结构（鸿蒙版）

典型结构：

entry/
 ├─ src/
 │   ├─ main.ets
 │   ├─ pages/
 │   │    └─ Index.vue
 │   └─ app.ets
 ├─ resources/
 ├─ build-profile.json5
 └─ hvigorfile.ts

其中所有 Vue 页面放在：

entry/src/pages/*.vue

📌 4. ArkTS + Vue3 HelloWorld 完整代码

你将看到三部分：

  1. main.ets → 启动入口
  2. app.ets → 应用配置
  3. Index.vue → Vue3 页面（Hello World）

✅ ① main.ets（程序入口）

import { createApp } from '@ohos/vue';
import App from './app.ets';

createApp(App).mount('#app');

✅ ② app.ets（应用根组件）

export default {
  data() {
    return {};
  },
  render() {
    return (
      <div class="container">
        <router-view></router-view>
      </div>
    );
  }
}

✅ ③ Index.vue（你的 Hello World 页面）

这是鸿蒙 Vue3 页面，语法与 Web Vue3 一致，只是组件由 HarmonyOS 渲染。

<template>
  <div class="wrapper">
    <text class="title">Hello World!</text>
    <text class="sub">这是 Vue3 + HarmonyOS NEXT!</text>

    <button class="btn" @click="count++">
      点击我：{{ count }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<style>
.wrapper {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.title {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 20px;
}

.sub {
  font-size: 24px;
  color: #666;
  margin-bottom: 40px;
}

.btn {
  padding: 16px 32px;
  background-color: #007dff;
  color: white;
  border-radius: 16px;
}
</style>

运行后界面显示：

Hello World!
这是 Vue3 + HarmonyOS NEXT!
[ 点击我：0 ]

🎯 5. 运行你的应用

在 DevEco Studio 中：

  1. 选择 HarmonyOS 模拟器 或 真机运行
  2. 点击 Run ▶️
  3. 看到 HelloWorld 页面成功运行

⚡ 6. 常见问题（非常重要）

❓ 是否可以使用 ElementPlus、Vant 等 WebUI？

➤ 不能
HarmonyOS 的 Vue3 是“原生渲染”，不是 WebView。

使用必须选用：

✔ 鸿蒙原生组件（ArkUI）
✔ 官方 Cross-UI 规范

❓ setup() 里能用 Vue3 所有特性吗？

绝大多数可以，包括：

❓ 能调原生能力吗？

可以，使用 ArkTS API，例如：

import router from '@ohos.router';

router.pushUrl({
  url: 'pages/Detail'
});

🎁 7. 完整可运行工程（复制即可）

如果你愿意，我可以为你生成：

✨ 直接可运行的完整 DevEco Studio 项目结构
✨ 详细的跨端 Vue3 + ArkTS 示例组件
✨ 增加路由、网络请求、存储、原生能力调用
✨ 封装一个鸿蒙版的 mini Vue UI 组件库

退出移动版