当前位置: 首页 > news >正文

详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第一节

关于使用Vue开发鸿蒙应用的教程,我这篇之前的博客还不够完整和详细。那么这次我会尝试写一个更加完整和逐步的指南,从环境准备,到目录结构,再到关键代码讲解,以及调试和发布等,希望可以让大家详实地掌握这个过程。

一、准备工作

  • 下载安装 DevEco Studio

下载地址:DevEco Studio官网

  • 注册华为开发者联盟账号

官网地址:华为开发者联盟

  • 创建首个鸿蒙项目 HelloWorld
1.1 配置开发环境

在开发之前我们需要做一些准备工作

  • 成为开发者之前,我们需要先注册账号,并实名(使用远程模拟器需要),实名分为“个人实名”和“企业实名”。个人开发者做个人实名人证即可。注册地址:https://developer.harmonyos.com/cn/home,该页面右上角点击注册,完成实名即可。

  • 下载开发工具,下载地址:https://developer.harmonyos.com/cn/develop/deveco-studio,DevEco Studio内置了OpenJDK,版本为1.8

  • 下载nodejs,如果你是使用js的方式进行开发,需要下载nodejs,如果你仅用Java开发,可以先不装nodejs

  • 在实名完成并且下载了开发工具后,安装DevEco Studio,一路next即可。完成安装先不要打开。由于harmonyOS的应用基于gradle进行构建,因此请自行下载gradle并配置环境变量。

1.2 下载SDK及工具链

DevEco Studio提供SDK Manager统一管理SDK及工具组件,包括如下组件包:

组件包名说明
NativeC/C++语言SDK包。
ArkTSArkTS语言SDK包。
JSJS语言SDK包。
JavaJava语言SDK包。从API Version 8开始,不再提供Java语言SDK包。
System-image-phone本地模拟器Phone设备镜像文件。
System-image-tv本地模拟器TV设备镜像文件,仅支持API Version 6。
System-image-wearable本地模拟器Wearable设备镜像文件,仅支持API Version 6。
Emulator本地模拟器工具包。
ToolchainsSDK工具链,应用/服务开发必备工具集,包括编译、打包、签名、数据库管理等工具的集合。
Previewer应用/服务预览器,在开发过程中可以动态预览Phone、TV、Wearable、LiteWearable等设备的应用/服务效果,支持JS、ArkTS和Java应用/服务预览。

应用/服务支持API Version 4至9,首次使用DevEco Studio,工具的配置向导会引导您下载SDK及工具链。配置向导默认下载 API Version 9的SDK及工具链,如需下载API Version 4至8,可在工程配置完成后,进入HarmonyOS SDK界面手动下载,方法如下:

  • 在DevEco Studio欢迎页,单击Configure(或图标)> Settings > SDK > HarmonyOS页签(macOS系统为Configure > Preferences > SDK > HarmonyOS)。
  • 在DevEco Studio打开工程的情况下,单击Files > Settings > SDK > HarmonyOS页签进入(macOS系统为DevEco Studio > Preferences > SDK > HarmonyOS)。

接下来介绍首次启动DevEco Studio的配置向导:

  1. 运行已安装的DevEco Studio,首次使用,请选择Do not import settings,单击OK。
  2. 安装Node.js与ohpm。可以指定本地已安装的Node.js或ohpm(Node.js版本要求为v14.19.1及以上,且低于v17.0.0;对应的npm版本要求为6.14.16及以上)路径位置;如果本地没有合适的版本,可以选择Install按钮,选择下载源和存储路径后,进行在线下载,单击Next进入下一步。

说明
如果配置向导界面出现的是设置HTTP Proxy Setup,说明网络受限,请根据参考信息配置DevEco Studio代理后,再下载Node.js、ohpm和SDK。

在这里插入图片描述

  1. 在SDK Setup界面,单击文件夹按钮,设置HarmonyOS SDK存储路径,单击Next进入下一步。

说明:
HarmonyOS SDK路径中不能包含中文字符。

在这里插入图片描述

  1. 在弹出的SDK下载信息页面,单击Next,并在弹出的License Agreement窗口,阅读License协议,需同意License协议后,单击Next。

说明:
下载SDK过程中,如果出现下载JS SDK失败,提示“Install Js dependencies failed.”,请根据JS SDK安装失败处理指导进行处理。

在这里插入图片描述

  1. 确认设置项的信息,点击Next开始安装。
    在这里插入图片描述
  2. 等待Node.js、ohpm和SDK下载完成后,单击Finish,界面会进入到DevEco Studio欢迎页。
1.3 配置HDC工具环境变量

HDC是为开发者提供HarmonyOS应用/服务的调试工具,为方便使用HDC工具,请为HDC端口号设置环境变量。

  • Windows环境变量设置方法:
    在此电脑 > 属性 > 高级系统设置 > 高级 > 环境变量中,添加HDC端口变量名为:HDC_SERVER_PORT,变量值可设置为任意未被占用的端口,如7035。
    在这里插入图片描述
    环境变量配置完成后,关闭并重启DevEco Studio。
  • macOS环境变量设置方法:
    a. 打开终端工具,执行以下命令,根据输出结果分别执行不同命令。
echo $SHELL 

如果输出结果为/bin/bash,则执行以下命令,打开.bash_profile文件。

vi ~/.bash_profile

如果输出结果为/bin/zsh,则执行以下命令,打开.zshrc文件。

vi ~/.zshrc

b. 单击字母“i”,进入Insert模式。
c. 输入以下内容,添加HDC_SERVER_PORT端口信息。

export HDC_SERVER_PORT=7035

d. 编辑完成后,单击Esc键,退出编辑模式,然后输入“:wq”,单击Enter键保存。
e. 执行以下命令,使配置的环境变量生效。

source ~/.bash_profile

f. 环境变量配置完成后,关闭并重启DevEco Studio。

首次使用DevEco Studio,如果配置向导界面出现Set up HTTP Proxy界面,可能需要通过配置代理服务器才能访问,请配置Proxy。具体参考:更新中…

二、使用 Vue CLI 创建工程

  • 全局安装 @vue/cli
  • 通过 vue create hello-harmonyos 初始化
  • 使用默认的 babel/eslint 等preset

三、安装 ArkUI 依赖

  • 安装快速启动模板:yarn add @hm-ui/ui-vue-quickstart
  • 引入arkui主题样式,配置根字体等

四、配置和目录结构

  • 配置 outputDir 为鸿蒙项目发布目录
  • src/pages 存放页面组件
  • src/slice 分片组织 Stores

五、实现 Hello World 页面

  • 导入 ArkUI 组件如
  • 编辑 pages/Index.vue 实现文字显示

六、调试和发布

  • 通过 DevEco Studio 打开项目
  • 预览和调试
  • 一键部署到模拟器

示例代码:

// vue.config.js
module.exports = {outputDir: './dist',indexPath: 'pages/index/index.html'  
}// main.js
import {createApp} from 'vue'
import ArkUI from '@hm-ui/vue';
import App from './App.vue'createApp(App).use(ArkUI).mount('#app')// App.vue  
<template><div class="app"><frame @appear="onAppear"><Index></Index></frame></div> 
</template><script>
import Index from './pages/Index.vue'export default {components: { Index } 
}  
</script>// Index.vue
<template><div class="page"><text>Hello World</text></div>  
</template>

相关文章:

详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第一节

关于使用Vue开发鸿蒙应用的教程,我这篇之前的博客还不够完整和详细。那么这次我会尝试写一个更加完整和逐步的指南,从环境准备,到目录结构,再到关键代码讲解,以及调试和发布等,希望可以让大家详实地掌握这个过程。 一、准备工作 下载安装 DevEco Studio 下载地址&#xff1a;…...

R语言对医学中的自然语言(NLP)进行机器学习处理(1)

什么是自然语言(NLP)&#xff0c;就是网络中的一些书面文本。对于医疗方面&#xff0c;例如医疗记录、病人反馈、医生业绩评估和社交媒体评论,可以成为帮助临床决策和提高质量的丰富数据来源。如互联网上有基于文本的数据(例如,对医疗保健提供者的社交媒体评论),这些数据我们可…...

什么是CI/CD?如何在PHP项目中实施CI/CD?

CI/CD&#xff08;持续集成/持续交付或持续部署&#xff09;是一种软件开发和交付方法&#xff0c;它旨在通过自动化和持续集成来提高开发速度和交付质量。以下是CI/CD的基本概念和如何在PHP项目中实施它的一般步骤&#xff1a; 持续集成&#xff08;Continuous Integration -…...

玩转Docker(四):容器指令、生命周期、资源限制、容器化支持、常用命令

文章目录 一、容器指令1.运行2.启动/停止/重启3.暂停/恢复4.删除 二、生命周期三、资源限制1.内存限额2.CPU限额3.磁盘读写带宽限额 四、cgroup和namespace五、常用命令 一、容器指令 1.运行 按用途容器大致可分为两类&#xff1a;服务类容器和工具类的容器。 服务类容器&am…...

回归预测 | MATLAB实现CHOA-BiLSTM黑猩猩优化算法优化双向长短期记忆网络回归预测 (多指标,多图)

回归预测 | MATLAB实现CHOA-BiLSTM黑猩猩优化算法优化双向长短期记忆网络回归预测 &#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现CHOA-BiLSTM黑猩猩优化算法优化双向长短期记忆网络回归预测 &#xff08;多指标&#xff0c;多图&#xff09;效果…...

Qt/C++视频监控安卓版/多通道显示视频画面/录像存储/视频播放安卓版/ffmpeg安卓

一、前言 随着监控行业的发展&#xff0c;越来越多的用户场景是需要在手机上查看监控&#xff0c;而之前主要的监控系统都是在PC端&#xff0c;毕竟PC端屏幕大&#xff0c;能够看到的画面多&#xff0c;解码性能也强劲。早期的手机估计性能弱鸡&#xff0c;而现在的手机性能不…...

【docker】容器使用(Nginx 示例)

查看 Docker 客户端命令选项 docker上面这三张图都是 常用命令&#xff1a; run 从映像创建并运行新容器exec 在运行的容器中执行命令ps 列出容器build 从Dockerfile构建映像pull 从注册表下载图像push 将图像上载到注册表…...

【QT】时间日期与定时器

目录 1.时间日期相关的类 2.日期时间数据与字符串之间的转换 2.1 时间、日期编辑器属性设置 2.2 日期时间数据的获取与转换为字符串 2.3 字符串转换为日期时间 3.QCaIendarWidget日历组件 3.1基本属性 3.2 公共函数 3.3 信号 4.实例程序演示时间日期与定时器的使用 …...

蓝桥杯专题-真题版含答案-【古代赌局】【古堡算式】【微生物增殖】【密码发生器】

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…...

和鲸科技携手深圳数据交易所,“数据+数据开发者生态”赋能人工智能产业发展

信息化时代&#xff0c;数据驱动决策的重要性日益凸显。通过利用数据可以深入了解市场需求、客户行为、竞争态势等关键信息&#xff0c;从而制定更为有效的战略和决策。围绕推动数据要素产业发展&#xff0c;近日&#xff0c;深圳数据交易所&#xff08;以下简称“深数所”&…...

在MFC(Microsoft Foundation Classes)中 CreateThread函数

CreateThread是Windows API中用于创建新线程的函数。以下是对函数参数的详细解释&#xff1a; lpThreadAttributes&#xff08;可选&#xff09;&#xff1a;指向SECURITY_ATTRIBUTES结构的指针&#xff0c;用于指定线程的安全性。可以设置为NULL&#xff0c;表示使用默认安全…...

Ubuntu 常用命令之 ls 命令用法介绍

Ubuntu ls 命令用法介绍 ls是Linux系统下的一个基本命令&#xff0c;用于列出目录中的文件和子目录。它有许多选项可以用来改变列出的内容和格式。 以下是一些基本的ls命令选项 -l&#xff1a;以长格式列出文件&#xff0c;包括文件类型、权限、链接数、所有者、组、大小、最…...

【解决】Windows 11检测提示电脑不支持 TPM 2.0(注意从DTPM改为PTT)

win11升级&#xff0c;tpm不兼容 写在最前面1. 打开电脑健康状况检查2. 开启tpm3. 微星主板AMD平台开启TPM2.0解决电脑健康状况检查显示可以安装win11&#xff0c;但是系统更新里显示无法更新 写在最前面 我想在台式电脑上用win11的专注模式&#xff0c;但win10不支持 1. 打…...

ChatGPT 也宕机了?如何预防 DDOS 攻击的发生

最近&#xff0c;开发人工智能聊天机器人的公司 OpenAI 遭受了一次规模较大的分布式拒绝服务&#xff08;DDoS&#xff09;攻击&#xff0c;导致其旗下的 ChatGPT 服务在短短 12 小时内遭遇了 4 次断网&#xff0c;众多用户遭受了连接失败的问题。 这次攻击事件引起了广泛的关…...

wireshark下载安装

下载 Wireshark Download 等待下载完成 安装 双击 下面的一定垚勾选上 下图的也一定要勾选上 修改为不重启&#xff0c;不需要重启也是正常的...

如何退回chrome旧版ui界面?关闭Chrome浏览器新 UI 界面

之前启用新UI的方式 Chrome 已经很久没有进行过大的样式修改&#xff0c;但近期在稳定分支中添加了新的 flags 实验性标志&#xff0c;带来了全新的设计与外观&#xff0c;启用方式如下&#xff1a; 在 Chrome 浏览器的搜索栏中输入并访问 chrome://flags 搜索“refresh 2023…...

指针进阶篇

指针的基本概念&#xff1a; 指针是一个变量&#xff0c;对应内存中唯一的一个地址指针在32位平台下的大小是4字节&#xff0c;在64位平台下是8字节指针是有类型的&#xff0c;指针类型决定该指针的步长&#xff0c;即走一步是多长指针运算&#xff1a;指针-指针表示的是两个指…...

C语言之单链表理解与应用

其实网上有好多关于单链表理解&#xff0c;其实知乎上有一篇写的很好&#xff0c;利用图形与代码结合&#xff0c;我觉得写的很好&#xff0c;大家也可以去查一下&#xff0c;每个人都有自己的想法与理解&#xff0c;这里主要看单链表概念&#xff0c;应用场景&#xff0c;举例…...

SpringBoot对PDF进行模板内容填充、电子签名合并

1. 依赖引入–这里只包含额外引入的包 原有项目包不含括在内 <!-- pdf编辑相关--> <dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.13.3</version> </dependency><de…...

Vue3快速上手笔记

Vue3快速上手 1.Vue3简介 2020年9月18日&#xff0c;Vue.js发布3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;海贼王&#xff09;耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者github上的tags地址&#xff1a;https://github.com/vuejs/vue-next/release…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...