详细教程 - 从零开发 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的设置领导：

• 运行已安装的DevEco Studio，初次使用，请选择Do not import settings，单击OK。
  
• 安装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。
  

• 在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. 打开终端工具，实行以下命令，根据输出结果分别实行不同命令。
  

1. echo $SHELL

复制代码

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

1. vi ~/.bash_profile

复制代码

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

1. vi ~/.zshrc

复制代码

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

1. export HDC_SERVER_PORT=7035

复制代码

d. 编辑完成后，单击Esc键，退出编辑模式，然后输入“:wq”，单击Enter键保存。
e. 实行以下命令，使设置的情况变量生效。

1. 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 打开项目
  
• 预览和调试
  
• 一键摆设到模拟器
  

示例代码：

1. // vue.config.js
2. module.exports = {
3.   outputDir: './dist',
4.   indexPath: 'pages/index/index.html'  
5. }
7. // main.js
8. import {createApp} from 'vue'
9. import ArkUI from '@hm-ui/vue';
10. import App from './App.vue'
12. createApp(App).use(ArkUI).mount('#app')
14. // App.vue  
15. <template>
16.   <div class="app">
17.     <frame @appear="onAppear">
18.       <Index></Index>
19.     </frame>
20.   </div>
21. </template>
23. <script>
24. import Index from './pages/Index.vue'
26. export default {
27.   components: { Index }
28. }  
29. </script>
31. // Index.vue
32. <template>
33.   <div class="page">
34.     <text>Hello World</text>
35.   </div>  
36. </template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。