企业网站建设 新天地网络,长沙网站制作有哪些公司,企业把网站关闭原因,网站建设中404什么意思关于使用Vue开发鸿蒙应用的教程,我这篇之前的博客还不够完整和详细。那么这次我会尝试写一个更加完整和逐步的指南,从环境准备,到目录结构,再到关键代码讲解,以及调试和发布等,希望可以让大家详实地掌握这个过程。
一、准备工作
下载安装 DevEco Studio 下载地址#xff1a;…关于使用Vue开发鸿蒙应用的教程,我这篇之前的博客还不够完整和详细。那么这次我会尝试写一个更加完整和逐步的指南,从环境准备,到目录结构,再到关键代码讲解,以及调试和发布等,希望可以让大家详实地掌握这个过程。
一、准备工作
下载安装 DevEco Studio 下载地址DevEco Studio官网 注册华为开发者联盟账号 官网地址华为开发者联盟 创建首个鸿蒙项目 HelloWorld
1.1 配置开发环境
在开发之前我们需要做一些准备工作 成为开发者之前我们需要先注册账号并实名使用远程模拟器需要实名分为“个人实名”和“企业实名”。个人开发者做个人实名人证即可。注册地址https://developer.harmonyos.com/cn/home该页面右上角点击注册完成实名即可。 下载开发工具下载地址https://developer.harmonyos.com/cn/develop/deveco-studioDevEco 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的配置向导
运行已安装的DevEco Studio首次使用请选择Do not import settings单击OK。安装Node.js与ohpm。可以指定本地已安装的Node.js或ohpmNode.js版本要求为v14.19.1及以上且低于v17.0.0对应的npm版本要求为6.14.16及以上路径位置如果本地没有合适的版本可以选择Install按钮选择下载源和存储路径后进行在线下载单击Next进入下一步。 说明 如果配置向导界面出现的是设置HTTP Proxy Setup说明网络受限请根据参考信息配置DevEco Studio代理后再下载Node.js、ohpm和SDK。 在SDK Setup界面单击文件夹按钮设置HarmonyOS SDK存储路径单击Next进入下一步。 说明 HarmonyOS SDK路径中不能包含中文字符。 在弹出的SDK下载信息页面单击Next并在弹出的License Agreement窗口阅读License协议需同意License协议后单击Next。 说明 下载SDK过程中如果出现下载JS SDK失败提示“Install Js dependencies failed.”请根据JS SDK安装失败处理指导进行处理。 确认设置项的信息点击Next开始安装。 等待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 ~/.zshrcb. 单击字母“i”进入Insert模式。 c. 输入以下内容添加HDC_SERVER_PORT端口信息。
export HDC_SERVER_PORT7035d. 编辑完成后单击Esc键退出编辑模式然后输入“:wq”单击Enter键保存。 e. 执行以下命令使配置的环境变量生效。
source ~/.bash_profilef. 环境变量配置完成后关闭并重启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.vuecreateApp(App).use(ArkUI).mount(#app)// App.vue
templatediv classappframe appearonAppearIndex/Index/frame/div
/templatescript
import Index from ./pages/Index.vueexport default {components: { Index }
}
/script// Index.vue
templatediv classpagetextHello World/text/div
/template
