1、簡(jiǎn)介

隨著華為HarmonyOS在移動(dòng)終端與IoT領(lǐng)域的快速普及，其分布式架構(gòu)與跨端協(xié)同能力正吸引著越來越多的開發(fā)者。近期筆者有幸參與華為Mate 60 Pro的鴻蒙原生應(yīng)用開發(fā)，在探索過程中發(fā)現(xiàn)：通過Vue3與HarmonyOS ArkUI框架的深度融合，前端開發(fā)者可以無縫遷移Web開發(fā)經(jīng)驗(yàn)，快速構(gòu)建高性能的鴻蒙原生應(yīng)用。這種技術(shù)組合不僅延續(xù)了Vue3的響應(yīng)式編程范式，更通過ArkUI的聲明式UI語法，實(shí)現(xiàn)了"一次開發(fā)，多端部署"的跨端開發(fā)新范式。

盡管此前對(duì)Vue3有碎片化了解，但將其應(yīng)用于移動(dòng)端開發(fā)尚屬首次嘗試。在開發(fā)實(shí)踐中，筆者系統(tǒng)梳理了從環(huán)境搭建到完整應(yīng)用落地的全流程。

2、效果

3、環(huán)境

3.1、開發(fā)環(huán)境

操作系統(tǒng)：Windows 11
編輯模擬：VSCode
編譯連接：DevEco
Node.js版本：20.9.0
Vue版本：3.6.5

3.2、運(yùn)行環(huán)境

手機(jī)：華為Mete60 pro
系統(tǒng)：鴻蒙OS 5.0
連接：USB直連，

連接手機(jī)方法
檢查開發(fā)者選項(xiàng)和USB調(diào)試設(shè)置
問題：未正確開啟開發(fā)者權(quán)限或USB調(diào)試。

解決步驟：
在Mate 40E Pro上開啟開發(fā)者模式：
設(shè)置 > 關(guān)于手機(jī) > 版本號(hào) 連續(xù)點(diǎn)擊7次。

返回 設(shè)置 > 系統(tǒng)和更新 > 開發(fā)人員選項(xiàng)，開啟：
? USB調(diào)試
? 僅充電模式下允許ADB調(diào)試

重新連接手機(jī)，彈出授權(quán)提示時(shí)勾選 “始終允許”。

4、實(shí)現(xiàn)

4.1、在VSCode上使用Vue開發(fā)HelloWorld

4.1.1、通過 Vite 快速創(chuàng)建項(xiàng)目

npm create vue@latest my-mobile-app

cd my-mobile-app
npm install
npm install vant@next

4.1.2、修改 src/App.vue

<template>
  <div class="app-container">
    <HelloWorld></HelloWorld>
  </div>
</template>
 
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
 
<style>
/* 全局基礎(chǔ)樣式 */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
.app-container {
  max-width: 600px;
  margin: 0 auto;
  height: 100vh;
}
</style>

4.1.3、模擬Web瀏覽器運(yùn)行

npm run dev

<template>
  <div class="hello-container">
    <span class="hello-title">hello world</span>

  </div>
</template>
 
<script setup>
</script>
 
<style scoped>
.hello-container {
  padding: 20px;
  min-height: 100vh;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
.hello-title {
  color: black;
  font-size: 24px;
  margin-bottom: 40px;
  text-align: center;
}
 
/* 移動(dòng)端適配 */
@media (max-width: 768px) {
  .hello-title {
    font-size: 20px;
  }
}
</style>
</style>

4.2、使用DevEco完成手機(jī)App端移植

4.2.1、構(gòu)建Vue 3項(xiàng)目為靜態(tài)文件

npm run build

生成 dist 文件夾，內(nèi)部包含：

4.2.2、創(chuàng)建HarmonyOS JS工程

打開DevEco Studio，選擇 Create Project。

選擇模板：Empty Ability（JS語言）。

配置項(xiàng)目名稱和存儲(chǔ)路徑，點(diǎn)擊 Finish。

更改下名字和基礎(chǔ)配置，選擇SDK版本，然后點(diǎn)finish。

4.2.3、導(dǎo)入Vue靜態(tài)資源

在DevEco項(xiàng)目中，逐級(jí)創(chuàng)建資源目錄：

entry/src/main/js/default/resources/rawfile/

將Vue的 dist 文件夾內(nèi)所有內(nèi)容復(fù)制到 rawfile 目錄下：

entry/src/main/js/default/resources/rawfile/

4.2.4、修改主頁加載Web資源

修改 index.js，打開文件 entry/src/main/js/default/pages/index/index.js，替換為以下代碼：

export default {
  setup() {
    return {
      // 指向 rawfile 中的 index.html
      src: $rawfile("index.html")
    }
  }
}

修改 index.hml，打開文件 entry/src/main/js/default/pages/index/index.hml，替換為以下代碼：

<div class="container">
  <!-- 添加 Web 組件，占滿全屏 -->
  <web src="{{src}}" style="width: 100%; height: 100%"></web>
</div>

4.2.5、配置應(yīng)用簽名

【注意：這里一定要先注冊(cè)華為的賬號(hào)】

開啟自動(dòng)簽名：

點(diǎn)擊菜單欄 File > Project Structure > Project > Signing Configs。

勾選 Automatically generate signing，點(diǎn)擊 OK。

等待自動(dòng)生成簽名文件（首次可能需要幾分鐘）。

4.2.6、運(yùn)行應(yīng)用到手機(jī)

在DevEco Studio頂部工具欄，點(diǎn)擊 Run ‘entry’（綠色三角形圖標(biāo)）。

選擇已連接的設(shè)備 HUAWEI Mate 60。

等待編譯完成，應(yīng)用會(huì)自動(dòng)安裝到手機(jī)并啟動(dòng)。

總結(jié)

到此這篇關(guān)于使用Vue3開發(fā)鴻蒙的HelloWorld的文章就介紹到這了,更多相關(guān)Vue3開發(fā)鴻蒙HelloWorld內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論