TraeCode 国内版接入 DevEco CLI：用官方知识开发鸿蒙应用

一、前言

本文参考环境是 Windows、DevEco CLI 1.3.0-stable 、DevEco Studio 26.0.0.821 、HarmonyOS API 26 。这是本次选用的稳定版本组合；后续安装得到的稳定版号可能变化，记录实际输出即可。华为快速入门推荐 Node.js 22 及以上，并区分稳定版 @stable 与尝鲜版本。DevEco CLI 快速入门

在 PowerShell 中操作。已经安装 CLI 的电脑先查询版本，缺少时再安装：

powershell 复制代码

node --version
npm --version
# 仅在尚未安装时执行
npm install -g @deveco/deveco-cli@stable
devecocli --version

$env:DEVECO_CLI_STUDIO_PATH = 'D:\HarmonyOS\IDE\devecostudio-windows-26.0.0.821\DevEco Studio'

DEVECO_CLI_STUDIO_PATH 来自 CLI 随包 README，用于指定非默认安装目录。环境变量只在当前终端会话生效。

TraeCode 执行命令的终端也获得相同配置。先固定路径，可以减少多版本 Studio 自动识别带来的差异。DevEco CLI 官方包与 README

读者可以在一个空的 ASCII 路径创建工程：

powershell 复制代码

devecocli create --app-name LoginShowcase --bundle-name com.example.loginshowcase --api-level 26 --project-path 'D:\HarmonyLab\TraeLogin'
Set-Location -LiteralPath 'D:\HarmonyLab\TraeLogin'

本次基线准备时，create 拒绝了含中文字符的工程路径，因此示例采用 D:\HarmonyLab\TraeLogin。已有工程直接打开自己的独立副本即可，不要重新执行创建命令覆盖已有材料。确认根目录存在 build-profile.json5、oh-package.json5，目标页面是 entry/src/main/ets/pages/Index.ets。创建、检查与构建命令来自 CLI 随包说明。DevEco CLI 官方包

登录页很适合用来练习鸿蒙 AI Coding：页面看得见，交互容易复现，错误也容易定位。我们使用虚构应用"云栖生活"，让 TraeCode 国内版围绕同一份需求工作，先查官方知识，再生成 ArkTS/ArkUI 页面，最后用工具链检查。这套方法也能迁移到设置页、表单页和详情页。

TraeCode 在这项任务中的价值，是把项目文件、可复用 Skill 和工具调用放进同一开发过程。DevEco CLI 则把鸿蒙工程创建、文档检索、构建和运行能力交给智能体调用。华为将 CLI 定位为适配外部 AI Agent 的鸿蒙开发入口，覆盖官方知识库和开发工具。DevEco Studio 与 CLI 官方介绍

二、 TraeCode 安装DevEco CLI

Skill 是智能体执行任务时可按需加载的操作说明。在本例中，deveco-cli Skill 告诉 AI 应怎样调用鸿蒙工具链；它本身不提供编译器。TraeCode 国内官方文档把项目技能放在 .trae/skills/{技能名}/SKILL.md，并提供项目技能列表和启用开关。

CLI 1.3.0-stable 在本次工程准备中执行下面的命令后，实际写入的是 .trae-cn/skills/deveco-cli/SKILL.md：

powershell 复制代码

devecocli init --skill --agent trae-cn --project 'D:\HarmonyLab\TraeLogin'

这里需要核对CLI 输出路径与当前 IDE 官方目录。不能看到"安装成功"便直接跳到开发，也不能把两个目录当作必然同时生效。

为适配本文引用的国内 IDE 文档，可把当前 CLI 安装包自带的原始 Skill 复制到官方项目路径：

powershell 复制代码

$cliPackageRoot = Join-Path (npm root -g).Trim() '@deveco\deveco-cli'
$skillSource = Join-Path $cliPackageRoot 'SKILL.md'
$skillDirectory = 'D:\HarmonyLab\TraeLogin\.trae\skills\deveco-cli'
$skillTarget = Join-Path $skillDirectory 'SKILL.md'
New-Item -ItemType Directory -Path $skillDirectory -Force | Out-Null
# 此示例用于目标文件尚不存在的独立工程
Copy-Item -LiteralPath $skillSource -Destination $skillTarget
Get-FileHash -LiteralPath $skillSource -Algorithm SHA256
Get-FileHash -LiteralPath $skillTarget -Algorithm SHA256

目录应当是 .trae/skills/deveco-cli/SKILL.md，而不是把 SKILL.md 直接放在 .trae/skills/ 下。两份哈希一致证明复制内容一致；它仍不能证明 IDE 已经加载。已有同名技能时先检查内容，避免把自定义规则直接覆盖。

接着进入 TraeCode"设置 → 技能与命令"，查看"项目"页签里是否出现并启用 deveco-cli。若直接放置文件后未出现，可使用官方提供的项目技能导入入口导入随包 SKILL.md。然后新建对话，明确调用该技能并保留运行轨迹。官方说明支持在对话中手动指定 Skill，也允许智能体根据任务按需加载。TraeCode 技能创建与调用

三、先查询官方知识，让代码生成有依据

登录页涉及 TextInput、输入类型、文本状态、密码可见性和事件回调。先把这些知识取回来，再让 AI 使用，能减少模型凭印象拼接 API 的情况。CLI 随包说明提供 docs catalog、docs search 和 docs read：搜索返回候选文档，阅读命令才取得文档正文。DevEco CLI 文档检索说明

将下面的第一段提示词复制到 TraeCode：

text 复制代码

请只在当前 HarmonyOS API 26 工程工作，先确认项目级 deveco-cli
Skill 已实际加载，给出技能名称和来源路径。若没有加载，先说明原因。
按该 Skill 执行 devecocli docs search，查找 TextInput、密码输入、
showPassword 与 onSecurityStateChange 的官方文档，并读取相关结果。
保存原始命令、文档标题或 ID，以及本工程应采用的 API。
本阶段不修改页面，不把 Skill 文件存在当作已加载。

可采用的查询命令示例为：

powershell 复制代码

devecocli docs catalog
devecocli docs search TextInput --limit 5
devecocli docs search showPassword --limit 5
# 将结果中的真实 documentId 代入；不要照抄占位文本
# devecocli docs read '<返回的真实文档ID>'

这里要检查 AI 是否实际执行了命令，以及是否读到目标 API 对应的正文。官方知识不是贴上"我查过文档"便结束；记录中应能看到查询词、文档标题和选型理由。华为关于输入框问题的 FAQ 提醒，在密码模式使用 showPassword 时，建议在 onSecurityStateChange 回调同步状态；这正好说明"小开关"也有需要查证的行为。华为输入框官方 FAQ

五、TraeCode CN 首轮接入实测结果

本次打开的窗口标题是 volcano_traecode_cn - TraeCode CN，工程树中可以看到 .trae、.trae-cn、entry 和 requirements。在 Agent 对话中要求先只读核对 Skill，TraeCode 返回"项目级 deveco-cli Skill 已加载"，来源路径为：

text 复制代码

D:\AIApplication\workspace\wppdocs\鸿蒙材料\DevEco CLI与鸿蒙自动化\四平台鸿蒙登录页_20261005\runs\volcano_traecode_cn\.trae\skills\deveco-cli

随后 Agent 获得一次命令确认并实际执行了文档检索：

text 复制代码

devecocli docs search TextInput 密码输入 ArkUI 状态管理 --limit 20
工作目录：runs\volcano_traecode_cn
退出码：0
错误：无

可见的返回文档包括：

FAQ/UI框架/组件使用/如何修改TextInput组件密码模式下图标不能修改的问题/faqs-arkui-1014；
FAQ/UI框架/UI界面/TextInput实现自定义密码显示效果/faqs-arkui-794；
FAQ/UI框架/组件使用/如何更改TextInput密码输入模式下passwordIcon的大小、颜色、位置/faqs-arkui-356；
API参考/ArkUI_方舟UI框架/ArkTS组件/文本与输入/TextInput/ts-basic-components-textinput；
FAQ/UI框架/UI界面/如何获取ArkTS状态管理框架管理的原始对象/faqs-arkui-367；
最佳实践/索引/StateStore的全局状态管理/bpta-global-state-management-state-store。

这一步证明的是 Skill 已加载、命令被调用、文档搜索成功。它还没有证明登录页已由 TraeCode 正式生成，因为只读任务期间 Agent 误生成的草稿已经撤销。

六、用同一规格生成"云栖生活"登录页

页面任务限定为手机竖屏本地演示。背景 #F6F8FC，主文字 #1F2937，辅助文字 #6B7280，主按钮 #2563EB，左右边距约 24vp。顶部使用 ArkUI 原生图形或带文字的圆形标识，标题"云栖生活"，副标题"欢迎回来，登录后继续探索"。下方依次是手机号、密码和"登录"按钮，底部显示"演示界面，不连接真实账号服务"。

把第二段提示词交给同一对话：

text 复制代码

根据刚读取的官方文档，把 Index.ets 中的 Hello World 改成云栖生活登录页。
按上述颜色、文案和间距，使用 ArkTS/ArkUI 原生组件，不引入远程图片。
phone 与 password 初始为空，showPassword 初始为 false。
手机号为空时提示"请输入手机号"，密码为空时提示"请输入密码"；
两项非空只显示"演示模式，未连接账号服务"。不联网、不存储密码。
密码右侧提供文字清楚的"显示/隐藏"控制，切换必须保留原文本。
先说明状态和布局设计，再修改页面；保留文件差异与实际工具调用。

页面的核心不是复杂架构，而是三项输入状态和一项反馈状态。下面是待编译验证的教学片段 ，放在 @Component 组件内；布局仍由 Agent 根据规格生成：

typescript 复制代码

@State phone: string = ''
@State password: string = ''
@State showPassword: boolean = false
@State feedback: string = ''

private submitDemo(): void {
  if (this.phone.trim().length === 0) {
    this.feedback = '请输入手机号'
    return
  }
  if (this.password.length === 0) {
    this.feedback = '请输入密码'
    return
  }
  this.feedback = '演示模式，未连接账号服务'
}

手机号的空白字符串按空输入处理；密码只判断是否为空，避免擅自去掉用户输入的空格。

该片段只表达本次最小交互，没有增加手机号格式规则、登录成功跳转或账号数据保存。

让 AI 为现有需求写恰当的代码，比让它自动扩展"完整登录系统"更容易检查。

TraeCode 国内版接入 DevEco CLI：用官方知识开发鸿蒙应用