详细教程 - 从零开发 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/276878.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

解决由于找不到XINPUT1_3.dll,无法继续执行代码问题的多种方法

解决由于找不到XINPUT1_3.dll,无法继续执行代码问题的多种方法

在打开游戏时突然提示xinput1_3.dll丢失的情况&#xff0c;出现这样的问题可能会对于电脑新手是一件棘手的事情&#xff0c;xinput1_3.dll&#xff08;Microsoft XINPUT Library&#xff09;是一款由Microsoft公司开发的动态链接库文件&#xff0c;主要用于支持游戏手柄的即插即…
阅读更多...
新闻式软文怎么写大纲？媒介盒子解答

新闻式软文怎么写大纲？媒介盒子解答

在写新闻式软文的前的关键一步就是列好大纲&#xff0c;有了一份详细的大纲&#xff0c;我们就能快速组织好思路&#xff0c;确保文章结构清晰&#xff0c;提高软文推广的效果&#xff0c;今天媒介盒子就来和大家聊聊新闻式软文怎么写大纲。 一、 写作步骤 大纲的写作步骤主要…
阅读更多...
SQL Server数据库使用T-SQL语句简单填充

SQL Server数据库使用T-SQL语句简单填充

文章目录 操作步骤&#xff1a;1.新建数据库起名RGB2.新建表起名rgb3.添加三个列名4.点击新建查询5.填入以下T-SQL语句&#xff0c;点击执行&#xff08;F5&#xff09;6.刷新之后&#xff0c;查看数据 操作环境&#xff1a; win10 Microsoft SQL Server Management Studio 20…
阅读更多...
红帽认证RHCE9.0版本2023年12月的红帽9.0版本RHCSA题⽬+答案，本人已过，全国通用

红帽认证RHCE9.0版本2023年12月的红帽9.0版本RHCSA题⽬+答案，本人已过，全国通用

红帽认证9版本2023年12月的红帽9.0版本RHCSA题⽬答案&#xff0c;本人已过&#xff0c;全国通用 需要完整的RHCSA和RHCE的考试答案的题目以及RHCE9考试的模拟环境和考试笔记教材的请添加微信&#xff0c;需备注来自csdn&#xff0c;不然通不过 1、配置⽹络设置? 将?node1?…
阅读更多...
C语言-＞动态内存管理

C语言-＞动态内存管理

系列文章目录 文章目录 前言 ✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青_C语言,函数,指针-CSDN博客 目的&#xff1a;学习malloc&#xff0c…
阅读更多...
绿色视角下的高校校园建设及能耗管理

绿色视角下的高校校园建设及能耗管理

摘 要&#xff1a;2019年住建部发布了《绿色校园评价标准》(GB/T51356—2019)&#xff0c;将创建绿色校园提上了日程。绿色校园建设的目标是践行绿色发展理念&#xff0c;建立生态文明教育工作长效机制。创建绿色校园要从政府、社会、学校三个层面来实施&#xff0c;以加快高校…
阅读更多...
使用Python处理Excel中一对多匹配关系

使用Python处理Excel中一对多匹配关系

import pandas as pddf pd.read_excel(rC:\Users\wangkejun\Desktop\1.xls)# 提取一一对应的数据 sku_list [] channel_list []for sku, channel in zip(df[XXX], df[XXXX]):if pd.isna(channel): # 判断是否为缺失值continue # 是缺失值则跳过该行数据if , in str(sku): …
阅读更多...
Android---Kotlin 学习007

Android---Kotlin 学习007

集合可以方便你处理一组数据&#xff0c;也可以作为值参传给函数&#xff0c;和我们学过的其它变量类型一样&#xff0c;List、Set 和 Map 类型的变量也分为两类&#xff0c;只读和可变。 List创建与元素获取 通过 listOf() 函数创建一个 List 集合。 val listString : List&…
阅读更多...
快来看！苹果开放侧载，对开发者来说是祸是福?

快来看！苹果开放侧载，对开发者来说是祸是福?

不知道你们听说了没有&#xff1f; 苹果公司在向SEC提供的2023年10-K文件中明确表现&#xff0c;伴随着欧盟委员会《数字市场法案》的正式落地将不得不在苹果手机上开放“应用侧载”功能。 简单来说&#xff0c;就是你的App可以不用在App Store里下载&#xff0c;而是可以通过…
阅读更多...
正则表达式：简化模式匹配的利器

正则表达式：简化模式匹配的利器

正则表达式&#xff1a;简化模式匹配的利器 一、正则表达式简介1.1 正则表达式介绍1.2 正则表达式使用场景 二、正则表达式语法2.1 正则表达式元字符和特性2.2 正则表达式常用匹配 三、正则表达式实战3.1 常见的正则表达式用法3.2 正则表达式的过滤用法3.3 正则表达式的代码用法…
阅读更多...
做外贸你遇到过哪些奇葩客户？

做外贸你遇到过哪些奇葩客户？

近日的某个晚上&#xff0c;突然有一个外国人加whatsapp, 然后对方说是从社媒上看到我的联系方式&#xff0c;所以就加上我了。 我心想&#xff0c;难道对方有什么产品需求&#xff0c;不知道看上的是哪款产品&#xff0c;还没等我回复信息&#xff0c;对方又说他们所在的地区…
阅读更多...
基于VGG-16+Android+Python的智能车辆驾驶行为分析—深度学习算法应用(含全部工程源码)+数据集+模型（一）

基于VGG-16+Android+Python的智能车辆驾驶行为分析—深度学习算法应用(含全部工程源码)+数据集+模型（一）

目录 前言总体设计系统整体结构图系统流程图 运行环境Python环境TensorFlow 环境Pycharm 环境Android环境 相关其它博客工程源代码下载其它资料下载 前言 本项目采用VGG-16网络模型&#xff0c;使用Kaggle开源数据集&#xff0c;旨在提取图片中的用户特征&#xff0c;最终在移…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023