1、介绍

DevEco CLI 将 DevEco Studio 工具链统一封装为一个 CLI，内置 ohpm、hvigor、hdc、emulator、hilog，同时集成 HarmonyOS 技能安装、项目脚手架、本地 HarmonyOS 文档检索和 MCP 服务。因此，这篇文章用来记录Windows系统的操作流程，并在Trae集成DevEco CLI 实现一个简单的日历选择功能。

在Trae中需要注意沙箱问题，如果在沙箱中编译有可能会导致编译出错，建议可以将devecocli命令添加至白名单，或者不在沙箱中运行

DevEco CLI 开源地址： https://gitcode.com/openharmony-sig/deveco-cli

1.1核心功能一览

2、CLI使用的前置条件

• 操作系统为 macOS 或 Windows
• Node.js >= 18，推荐使用22及以上版本
• DevEco Studio >= 6.1.0 ( macOS：必须安装在 ~/Applications 或 /Applications 目录下。)

3、环境快速安装

• 安装

npm install -g @deveco/deveco-cli@latest

• 检查是否安装成功，安装成功有下面的页面

devecocli help

• AI Agent集成（关键步骤）

# 方式一：安装 Skill（推荐大部分用户使用）
devecocli init -f

# 方式二：配置 MCP 服务（需要更高级能力时使用）
devecocli init --mcp

# 方式三：指定 Agent 和工程路径
devecocli init --skill --agent trae-cn --project ./MyApp

# Trae中全局安装演示
devecocli init --agent trae-cn

显示成功将DevEcoCLI已经安装到Trae的技能skliis中

Trae中的技能列表：

3.2 安装注意事项

• Windows 路径规范 安装路径不要包含中文、空格、特殊字符。

• macOS 路径限制 DevEco Studio 必须位于 ~/Applications 或 /Applications 目录。如果你把它装在了自定义路径（比如外接硬盘），CLI 会报找不到工具链。解决办法是创建软链接或重新安装到标准位置。

4、使用DevEcoCLI实现日历选择应用

这是本文的核心章节。我们将完整演示：如何把一个复杂的 UI 需求拆分为 AI 能理解的清晰指令，如何通过多轮对话让 AI 逐步生成代码，以及如何用 DevEco CLI 完成构建和运行。

4.1需求分析

我们要开发一个日历选择组件，核心要求：

1. 单选模式：点击某个日期，该日期高亮显示（蓝色圆形背景）
2. 多选模式：点击起始日期，再点击结束日期，区间内的日期整体高亮
3. 多选区间渲染：起始日期右侧显示半圆形、结束日期左侧显示半圆形、中间日期显示连续条带连接
4. 动态切换：通过顶部控件在单选/多选之间切换，切换时清空已有选择
5. 信息展示：多选模式下底部显示起始日期、结束日期、共选天数

视觉上，多选区间的效果类似 iOS 日历的时间段选择器：

起始日期 [深蓝半圆]══════[浅蓝条带]══════[深蓝半圆] 结束日期

4.2 拆解需求

用 AI 写代码有一个坑我踩过很多次：把一大段需求直接扔给 AI。结果呢？AI 不是人，它不会"抓重点"。需求越长，遗漏越多，搞不好还给编一些不存在的东西出来。 后来我发现一个简单的原则：按开发顺序把需求拆成多个独立步骤，每步只描述一个目标。这样每一步产出都好验证，出错了也知道在哪一步。 以下是我们的 6 步拆分：

Step 1: 创建工程 → 生成空项目骨架
Step 2: 日历网格 → 渲染当月日期，支持月份切换
Step 3: 单选逻辑 → 点击高亮、状态切换
Step 4: 多选核心 → 区间渲染（半圆+条带+跨行处理）
Step 5: 信息展示 → 底部日期信息栏

4.3 Step 1：创建工程骨架

用 devecocli 帮我创建一个 HarmonyOS 应用工程，应用名为 CalendarPicker，
包名 com.example.calendarpicker，API Level 用当前 SDK 支持的最高版本。
全局使用状态管理（V2）装饰器

• 编译结果

执行后，项目目录结构如下：

CalendarPicker/
├── entry/
│   └── src/main/
│       ├── ets/
│       │   └── pages/
│       │       └── Index.ets       # 默认页面
│       └── module.json5            # 模块配置
├── build-profile.json5
└── oh-package.json5

• 启动模拟器

帮我打开模拟器并进行调试

4.4 Step 2：日历月视图渲染

AI 指令：

在当前工程中实现一个日历月视图组件。要求：

1. 显示为 7 列网格布局，列头为"日 一 二 三 四 五 六"
2. 自动计算当月第一天是周几，前面空白格留空
3. 每个日期格子为正方形，显示日期数字
4. 顶部显示当前年月（如"2026年6月"），左右箭头可切换月份
5. 所有逻辑放在 CalendarGrid.ets 组件中
6. 日期数据模型单独放在 model/CalendarModel.ets 中

• 运行结果

这一步产出一个基础的日历视图，能显示月份、切换上下月，但还不能点击选择。

4.5 Step 3：单选模式

AI 指令：

单选模式需求：
1、实现点击日期时，会自动切换选中的日期。
2、默认选中今天的日期。

4.6 Step 4：多选模式

这一步生成比较复杂，如果生成的样式不符合，需要来回让Agent多次调整。

AI 指令

多选模式需求：
1、添加多选功能切换按钮。
2、多选的样式：
2.1 起始日期和结束日期之间是一条连续的线，显示的颜色和选中的颜色一致，字体也需要一致。
2.2 起始日期左边为半圆形，结束日期右边为半圆形。
2.3 仅选择起始日期时，显示的演示和单选是一样的。
2.4 

4.6 Step 5：信息展示

AI 指令

信息展示需求：
1、单选时需要展示选中日期。
2、多选的时候需要展示选中范围和天数。

5、Skill 市场：让 AI 真正"懂鸿蒙"

5.1 Skill 是什么？

如果说 DevEco CLI 的命令是"手"（执行具体的开发操作），那 Skill 就是"脑"（告诉 AI 如何正确使用这些操作）。

一个 Skill 本质上是一套结构化的指令集，封装了某个领域的专业知识和操作流程。安装一个 Skill 后，AI 就能在那个领域做出更准确的判断和操作。

例如：

• 安装了"ArkTS 语法检查" Skill → AI 写完代码会自动帮你检查语法错误
• 安装了"设计稿转代码" Skill → AI 能直接理解 Figma 设计稿并生成 ArkUI 代码
• 安装了"文档检索" Skill → AI 写代码时会自动查询官方文档验证 API 用法

5.2 Skill 列表操作

# 查看所有可用 Skill
devecocli skills list

# 查看详情（含描述和已安装的 Agent）
devecocli skills list --long

# 搜索特定 Skill
devecocli skills find 设计

# 安装 Skill
devecocli skills add --skill hmos-design-to-code

# 安装全部 Skill
devecocli skills add --all

# 移除 Skill
devecocli skills remove --skill hmos-design-to-code

5.3 获取Skills

更多skill可以通过格物平台获取 ：https://matrix.openharmony.cn/#/skillSquare，解决了Skills分散导致寻找难、Skills上架质量保障、Skills的生态共建与复用三类关键问题。

6.写在最后

这篇文章写到这里，希望通过简单的案例，将devecocli以Skill的方式嵌入到Trae中，并且按照需求生成页面、打开模拟器、调试代码的完整流程讲明白。开发者可以自定义自己的skill，搭配着DevEcoCLI使用，达到更完善的效果。希望这篇文字可以帮助到你