feat: 增加鸿蒙

quliangen · Dec 28, 2023 · 38238f4 · 38238f4
1 parent ee9dcfa
commit 38238f4
Show file tree

Hide file tree

Showing 14 changed files with 69 additions and 3 deletions.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -21,7 +21,9 @@ export default defineConfig({
       '/standard/': sidebarStandard(),
       '/project/': sidebarProject(),
       '/bugfix/': sidebarBugfix(),
-      '/tool/': sidebarTool()
+      '/tool/': sidebarTool(),
+      '/harmony-os/': sidebarHarmony(),
+
     },
 
     footer: {
@@ -39,7 +41,7 @@ function nav() {
     { text: '工程化', link: '/project/npm/npm-starter-simple', activeMatch: '/project/' },
     { text: '爬坑指北', link: '/bugfix/install-question', activeMatch: '/bugfix/' },
     { text: '武器库', link: '/tool/vscode-hotkeys', activeMatch: '/tool/' },
-
+    { text: 'Harmony OS', link: '/harmony-os/setup', activeMatch: '/harmony-os/' },
   ]
 }
 
@@ -114,3 +116,15 @@ function sidebarTool() {
     }
   ]
 }
+
+function sidebarHarmony() {
+  return [
+    {
+      text: '',
+      collapsible: true,
+      items: [
+        { text: '前端开箱-Harmony OS', link: '/harmony-os/setup' }
+      ]
+    },
+  ]
+}
diff --git a/docs/harmony-os/images/helloharmony.png b/docs/harmony-os/images/helloharmony.png
diff --git a/docs/harmony-os/images/helloword.png b/docs/harmony-os/images/helloword.png
diff --git a/docs/harmony-os/images/sdk预览.png b/docs/harmony-os/images/sdk预览.png
diff --git a/docs/harmony-os/images/创建项目.jpg b/docs/harmony-os/images/创建项目.jpg
diff --git a/docs/harmony-os/images/增加设备.png b/docs/harmony-os/images/增加设备.png
diff --git a/docs/harmony-os/images/本地预览虚拟环境.png b/docs/harmony-os/images/本地预览虚拟环境.png
diff --git a/docs/harmony-os/images/添加遥遥领先.png b/docs/harmony-os/images/添加遥遥领先.png
diff --git a/docs/harmony-os/images/运行报错.png b/docs/harmony-os/images/运行报错.png
diff --git a/docs/harmony-os/images/运行设备.png b/docs/harmony-os/images/运行设备.png
diff --git a/docs/harmony-os/images/遥遥领先.png b/docs/harmony-os/images/遥遥领先.png
diff --git a/docs/harmony-os/images/项目基本目录.png b/docs/harmony-os/images/项目基本目录.png
diff --git a/docs/harmony-os/setup.md b/docs/harmony-os/setup.md
@@ -0,0 +1,51 @@
+# 前端开箱-Harmony OS
+
+## 缘起：万物互联、遥遥领先。
+
+### HarmonyOS 第一课 [传送门](https://developer.harmonyos.com/cn/documentation/teaching-video/)
+> 跟着第一课开卷
+
+#### 一、下载开发套件 DevEco Studio
++ 访问 [HUAWEI DevEco Studio](https://developer.huawei.com/consumer/cn/deveco-studio/) 选择系统 版本下载
+
+#### 二、Mac 安装
+> 需要 Node环境
+
+  1. 解压安装包，双击 deveco-studio-3.1.0.501-aarch64.dmg 文件
+  2. 安装后在【启动台】打开，按照指引安装 SDK。
+  3. 安装 本地预览SDK。
+  + 打开EevEco 左下角 Configure -> Plugins 选择 SDK --> 勾选 System-image-phone --> 点击右下角 Apply 
+  <img src="./images/sdk预览.png" width="320px">
+  + 点击 Tools --> 勾选 Emulator --> 右下角 Apply。
+  <img src="./images/本地预览虚拟环境.png" width="320px">
+
+
+#### 三、创建示例项目
+> Hello Harmony!
+
+1. 打开EevEco --> Create Project
+  <img src="./images/创建项目.jpg" width="400px">
+2. 设置项目基本信息
+  <img src="./images/helloword.png" width="400px">
+3. 项目基本目录
+  <img src="./images/项目基本目录.png" width="400px">
+  第一次看到代码的我，惊呼一声 “好家伙！” 果然是 ArkTS，好眼熟哇。
+
+4. 把 Hello World 修改为 Hello Harmony!，点击运行【绿色三角】。
+   发现：
+  <img src="./images/运行报错.png" width="320px">
+  原因没有添加设备
+
+5. 点击添加设备按钮
+  <img src="./images/增加设备.png" width="400px">
+6. 点击右下角添加设备 【Tips: 第一次安装，需要先指定 Location 点击 Edit 选择目录即可】
+  <img src="./images/添加遥遥领先.png" width="400px">
+
+7. 设置后点击设备后 运行按钮
+  <img src="./images/运行设备.png" width="400px">
+8. 属于你的遥遥领先：
+   <img src="./images/遥遥领先.png" width="320px">
+9. 再次运行程序
+   <img src="./images/helloharmony.png" width="320px">
+
+##### 刚开始接触，开发体验都很顺畅，基本无坑。后面先从基础开始。
diff --git a/docs/index.md b/docs/index.md
@@ -22,5 +22,6 @@ features:
     details: install 常见问题
   - title: 🦋 武器库
     details: VScode、工具库
-
+  - title: 🚀 Harmony OS 
+    details: 鸿蒙
 ---