uniapp极速上手鸿蒙开发

uniapp 团队 与版本 4.28.2024092502 起，支持鸿蒙应用开发，现在是 4.76.2025082103,同时支持鸿蒙应用和元服务开发了。

我们现在上手感受一下

环境配置

• HBuilderX 下载地址
• DevEco Studio

底下主要针对真机做的演示

项目要求

在创建uniapp项目的时候，需要选择 vue3，vue2不支持

搭建流程

1. AGC平台上新建项目，目的是活动boundleName以及调试和发布证书
2. 下载和安装 DevEco Studio
3. 使用 DevEco Studio 创建项目，然后配置boundleName和调试和发布证书
4. 复制证书相关的配置
5. 下载和安装 hbuilder
6. hbuilder 下载相关插件
7. hbuilder 配置 DevEco Studio 工具路径
8. hbuilder新建uniapp vue3工程
9. hbuilder配置鸿蒙应用的证书
10. hbuilder运行项目

AGC平台上新建项目

可以根据需求选择新建工程还是项目。 这里选择项目

下载和安装 DevEco Studio

下载和安装DevEco Studio

boundleName和调试和发布证书

因为真机在调试时候需要使用调试证书

应用在发布的时候需要使用发布整数，因此一次性都配置获得即可

配置链接

DevEco Studio 新建项目获得证书配置信息

这个步骤主要为了得到证书的配置代码，uniapp运行项目的时候需要用到

在使用DevEco Studio新建完项目后，参考链接 进行证书的配置

得到配置文件 build-profile.json5 后续复制整个代码到uniapp创建的项目即可

下载和安装 hbuilder

这里下载和安装

hbuilder 下载相关插件

工具-插件安装 关键是这几个 鸿蒙、vue3

hbuilder 配置 DevEco Studio 工具路径

这里配置DevEco Studio 工具的路径 工具-设置

hbuilder新建uniapp vue3工程

新建vue3工程

hbuilder配置鸿蒙应用的证书

在项目根目录下配置 \harmony-configs\build-profile.json5 如果不存在，则手动新建。

然后复制、粘贴证书代码进去

hbuilder运行项目

最后，运行项目

效果