UniApp+Vue3开发鸿蒙（HarmonyOS）App全流程指南(小白也能看懂的详细教程)

二、创建UniApp项目（Vue3）

打开HBuilderX，选择“文件” -> “新建” -> “项目”，选择 UniApp 项目模板，并确保基础框架选择 Vue3。填写项目名称和存储路径，点击创建。

创建完成后，项目结构如下：

- pages/ (页面文件夹)- static/ (静态资源)- App.vue (应用入口)- main.js (入口文件)- manifest.json (应用配置)- pages.json (页面配置)- uni.scss (全局样式)

三、配置鸿蒙平台支持

在 UniApp 中，鸿蒙被归为“APP”平台，但需要额外配置。打开 manifest.json，在“APP模块配置”中，勾选“鸿蒙（HarmonyOS）”。然后配置应用图标、启动页等。

你还需要在项目根目录创建 harmony-configs 文件夹，放置鸿蒙特有的配置文件，如 config.json 等。具体配置参考鸿蒙官方文档。

四、编写代码（Vue3语法）

利用 Vue3 的组合式API，我们可以高效开发。例如，在 pages/index/index.vue 中：

注意：鸿蒙平台支持基本的HTML标签，但推荐使用UniApp的跨端组件。

五、调试与预览

在HBuilderX中，选择运行到鸿蒙设备。如果已安装DevEco Studio并启动模拟器，HBuilderX会自动连接。你也可以在DevEco Studio中打开生成的鸿蒙工程进行调试。

对于 HarmonyOS应用 的调试，建议使用DevEco Studio的模拟器，它提供了完整的鸿蒙环境。

六、打包发布

当开发完成，点击HBuilderX的“发行” -> “原生APP-云打包”，选择鸿蒙平台，填写证书信息，即可生成hap包。然后上传到鸿蒙应用市场。

整个 UniApp 配合 Vue3 开发 鸿蒙App 的流程就是如此。通过这种方式，你可以快速将现有项目迁移到鸿蒙平台，或者开发全新的 HarmonyOS应用。

—— 完成 ——