TraeCode 国内版接入 DevEco CLI用官方知识开发鸿蒙应用一、前言本文参考环境是 Windows、DevEco CLI1.3.0-stable、DevEco Studio26.0.0.821、HarmonyOSAPI 26。这是本次选用的稳定版本组合后续安装得到的稳定版号可能变化记录实际输出即可。华为快速入门推荐 Node.js 22 及以上并区分稳定版stable与尝鲜版本。DevEco CLI 快速入门在 PowerShell 中操作。已经安装 CLI 的电脑先查询版本缺少时再安装node--version npm--version# 仅在尚未安装时执行npm install-g deveco/deveco-clistable devecocli--version$env:DEVECO_CLI_STUDIO_PATH D:\HarmonyOS\IDE\devecostudio-windows-26.0.0.821\DevEco StudioDEVECO_CLI_STUDIO_PATH来自 CLI 随包 README用于指定非默认安装目录。环境变量只在当前终端会话生效。TraeCode 执行命令的终端也获得相同配置。先固定路径可以减少多版本 Studio 自动识别带来的差异。DevEco CLI 官方包与 README读者可以在一个空的 ASCII 路径创建工程devecocli create--app-name LoginShowcase--bundle-name com.example.loginshowcase--api-level 26--project-pathD:\HarmonyLab\TraeLoginSet-Location-LiteralPathD:\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 CLISkill 是智能体执行任务时可按需加载的操作说明。在本例中deveco-cliSkill 告诉 AI 应怎样调用鸿蒙工具链它本身不提供编译器。TraeCode 国内官方文档把项目技能放在.trae/skills/{技能名}/SKILL.md并提供项目技能列表和启用开关。CLI 1.3.0-stable 在本次工程准备中执行下面的命令后实际写入的是.trae-cn/skills/deveco-cli/SKILL.mddevecocli init--skill--agent trae-cn--projectD:\HarmonyLab\TraeLogin这里需要核对CLI 输出路径与当前 IDE 官方目录。不能看到“安装成功”便直接跳到开发也不能把两个目录当作必然同时生效。为适配本文引用的国内 IDE 文档可把当前 CLI 安装包自带的原始 Skill 复制到官方项目路径$cliPackageRootJoin-Path(npm root-g).Trim()deveco\deveco-cli$skillSourceJoin-Path$cliPackageRootSKILL.md$skillDirectoryD:\HarmonyLab\TraeLogin\.trae\skills\deveco-cli$skillTargetJoin-Path$skillDirectorySKILL.mdNew-Item-ItemType Directory-Path$skillDirectory-Force|Out-Null# 此示例用于目标文件尚不存在的独立工程Copy-Item-LiteralPath$skillSource-Destination$skillTargetGet-FileHash-LiteralPath$skillSource-Algorithm SHA256Get-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请只在当前 HarmonyOS API 26 工程工作先确认项目级 deveco-cli Skill 已实际加载给出技能名称和来源路径。若没有加载先说明原因。 按该 Skill 执行 devecocli docs search查找 TextInput、密码输入、 showPassword 与 onSecurityStateChange 的官方文档并读取相关结果。 保存原始命令、文档标题或 ID以及本工程应采用的 API。 本阶段不修改页面不把 Skill 文件存在当作已加载。可采用的查询命令示例为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 对话中要求先只读核对 SkillTraeCode 返回“项目级 deveco-cli Skill 已加载”来源路径为D:\AIApplication\workspace\wppdocs\鸿蒙材料\DevEco CLI与鸿蒙自动化\四平台鸿蒙登录页_20261005\runs\volcano_traecode_cn\.trae\skills\deveco-cli随后 Agent 获得一次命令确认并实际执行了文档检索devecocli docs search TextInput 密码输入 ArkUI 状态管理 --limit 20 工作目录runs\volcano_traecode_cn 退出码0 错误无可见的返回文档包括FAQ/UI框架/组件使用/如何修改TextInput组件密码模式下图标不能修改的问题/faqs-arkui-1014FAQ/UI框架/UI界面/TextInput实现自定义密码显示效果/faqs-arkui-794FAQ/UI框架/组件使用/如何更改TextInput密码输入模式下passwordIcon的大小、颜色、位置/faqs-arkui-356API参考/ArkUI_方舟UI框架/ArkTS组件/文本与输入/TextInput/ts-basic-components-textinputFAQ/UI框架/UI界面/如何获取ArkTS状态管理框架管理的原始对象/faqs-arkui-367最佳实践/索引/StateStore的全局状态管理/bpta-global-state-management-state-store。这一步证明的是 Skill 已加载、命令被调用、文档搜索成功。它还没有证明登录页已由 TraeCode 正式生成因为只读任务期间 Agent 误生成的草稿已经撤销。六、 用同一规格生成“云栖生活”登录页页面任务限定为手机竖屏本地演示。背景#F6F8FC主文字#1F2937辅助文字#6B7280主按钮#2563EB左右边距约24vp。顶部使用 ArkUI 原生图形或带文字的圆形标识标题“云栖生活”副标题“欢迎回来登录后继续探索”。下方依次是手机号、密码和“登录”按钮底部显示“演示界面不连接真实账号服务”。把第二段提示词交给同一对话根据刚读取的官方文档把 Index.ets 中的 Hello World 改成云栖生活登录页。 按上述颜色、文案和间距使用 ArkTS/ArkUI 原生组件不引入远程图片。 phone 与 password 初始为空showPassword 初始为 false。 手机号为空时提示“请输入手机号”密码为空时提示“请输入密码” 两项非空只显示“演示模式未连接账号服务”。不联网、不存储密码。 密码右侧提供文字清楚的“显示/隐藏”控制切换必须保留原文本。 先说明状态和布局设计再修改页面保留文件差异与实际工具调用。页面的核心不是复杂架构而是三项输入状态和一项反馈状态。下面是待编译验证的教学片段放在Component组件内布局仍由 Agent 根据规格生成Statephone:stringStatepassword:stringStateshowPassword:booleanfalseStatefeedback:stringprivatesubmitDemo():void{if(this.phone.trim().length0){this.feedback请输入手机号return}if(this.password.length0){this.feedback请输入密码return}this.feedback演示模式未连接账号服务}手机号的空白字符串按空输入处理密码只判断是否为空避免擅自去掉用户输入的空格。该片段只表达本次最小交互没有增加手机号格式规则、登录成功跳转或账号数据保存。让 AI 为现有需求写恰当的代码比让它自动扩展“完整登录系统”更容易检查。
TraeCode 国内版接入 DevEco CLI：用官方知识开发鸿蒙应用
TraeCode 国内版接入 DevEco CLI用官方知识开发鸿蒙应用一、前言本文参考环境是 Windows、DevEco CLI1.3.0-stable、DevEco Studio26.0.0.821、HarmonyOSAPI 26。这是本次选用的稳定版本组合后续安装得到的稳定版号可能变化记录实际输出即可。华为快速入门推荐 Node.js 22 及以上并区分稳定版stable与尝鲜版本。DevEco CLI 快速入门在 PowerShell 中操作。已经安装 CLI 的电脑先查询版本缺少时再安装node--version npm--version# 仅在尚未安装时执行npm install-g deveco/deveco-clistable devecocli--version$env:DEVECO_CLI_STUDIO_PATH D:\HarmonyOS\IDE\devecostudio-windows-26.0.0.821\DevEco StudioDEVECO_CLI_STUDIO_PATH来自 CLI 随包 README用于指定非默认安装目录。环境变量只在当前终端会话生效。TraeCode 执行命令的终端也获得相同配置。先固定路径可以减少多版本 Studio 自动识别带来的差异。DevEco CLI 官方包与 README读者可以在一个空的 ASCII 路径创建工程devecocli create--app-name LoginShowcase--bundle-name com.example.loginshowcase--api-level 26--project-pathD:\HarmonyLab\TraeLoginSet-Location-LiteralPathD:\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 CLISkill 是智能体执行任务时可按需加载的操作说明。在本例中deveco-cliSkill 告诉 AI 应怎样调用鸿蒙工具链它本身不提供编译器。TraeCode 国内官方文档把项目技能放在.trae/skills/{技能名}/SKILL.md并提供项目技能列表和启用开关。CLI 1.3.0-stable 在本次工程准备中执行下面的命令后实际写入的是.trae-cn/skills/deveco-cli/SKILL.mddevecocli init--skill--agent trae-cn--projectD:\HarmonyLab\TraeLogin这里需要核对CLI 输出路径与当前 IDE 官方目录。不能看到“安装成功”便直接跳到开发也不能把两个目录当作必然同时生效。为适配本文引用的国内 IDE 文档可把当前 CLI 安装包自带的原始 Skill 复制到官方项目路径$cliPackageRootJoin-Path(npm root-g).Trim()deveco\deveco-cli$skillSourceJoin-Path$cliPackageRootSKILL.md$skillDirectoryD:\HarmonyLab\TraeLogin\.trae\skills\deveco-cli$skillTargetJoin-Path$skillDirectorySKILL.mdNew-Item-ItemType Directory-Path$skillDirectory-Force|Out-Null# 此示例用于目标文件尚不存在的独立工程Copy-Item-LiteralPath$skillSource-Destination$skillTargetGet-FileHash-LiteralPath$skillSource-Algorithm SHA256Get-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请只在当前 HarmonyOS API 26 工程工作先确认项目级 deveco-cli Skill 已实际加载给出技能名称和来源路径。若没有加载先说明原因。 按该 Skill 执行 devecocli docs search查找 TextInput、密码输入、 showPassword 与 onSecurityStateChange 的官方文档并读取相关结果。 保存原始命令、文档标题或 ID以及本工程应采用的 API。 本阶段不修改页面不把 Skill 文件存在当作已加载。可采用的查询命令示例为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 对话中要求先只读核对 SkillTraeCode 返回“项目级 deveco-cli Skill 已加载”来源路径为D:\AIApplication\workspace\wppdocs\鸿蒙材料\DevEco CLI与鸿蒙自动化\四平台鸿蒙登录页_20261005\runs\volcano_traecode_cn\.trae\skills\deveco-cli随后 Agent 获得一次命令确认并实际执行了文档检索devecocli docs search TextInput 密码输入 ArkUI 状态管理 --limit 20 工作目录runs\volcano_traecode_cn 退出码0 错误无可见的返回文档包括FAQ/UI框架/组件使用/如何修改TextInput组件密码模式下图标不能修改的问题/faqs-arkui-1014FAQ/UI框架/UI界面/TextInput实现自定义密码显示效果/faqs-arkui-794FAQ/UI框架/组件使用/如何更改TextInput密码输入模式下passwordIcon的大小、颜色、位置/faqs-arkui-356API参考/ArkUI_方舟UI框架/ArkTS组件/文本与输入/TextInput/ts-basic-components-textinputFAQ/UI框架/UI界面/如何获取ArkTS状态管理框架管理的原始对象/faqs-arkui-367最佳实践/索引/StateStore的全局状态管理/bpta-global-state-management-state-store。这一步证明的是 Skill 已加载、命令被调用、文档搜索成功。它还没有证明登录页已由 TraeCode 正式生成因为只读任务期间 Agent 误生成的草稿已经撤销。六、 用同一规格生成“云栖生活”登录页页面任务限定为手机竖屏本地演示。背景#F6F8FC主文字#1F2937辅助文字#6B7280主按钮#2563EB左右边距约24vp。顶部使用 ArkUI 原生图形或带文字的圆形标识标题“云栖生活”副标题“欢迎回来登录后继续探索”。下方依次是手机号、密码和“登录”按钮底部显示“演示界面不连接真实账号服务”。把第二段提示词交给同一对话根据刚读取的官方文档把 Index.ets 中的 Hello World 改成云栖生活登录页。 按上述颜色、文案和间距使用 ArkTS/ArkUI 原生组件不引入远程图片。 phone 与 password 初始为空showPassword 初始为 false。 手机号为空时提示“请输入手机号”密码为空时提示“请输入密码” 两项非空只显示“演示模式未连接账号服务”。不联网、不存储密码。 密码右侧提供文字清楚的“显示/隐藏”控制切换必须保留原文本。 先说明状态和布局设计再修改页面保留文件差异与实际工具调用。页面的核心不是复杂架构而是三项输入状态和一项反馈状态。下面是待编译验证的教学片段放在Component组件内布局仍由 Agent 根据规格生成Statephone:stringStatepassword:stringStateshowPassword:booleanfalseStatefeedback:stringprivatesubmitDemo():void{if(this.phone.trim().length0){this.feedback请输入手机号return}if(this.password.length0){this.feedback请输入密码return}this.feedback演示模式未连接账号服务}手机号的空白字符串按空输入处理密码只判断是否为空避免擅自去掉用户输入的空格。该片段只表达本次最小交互没有增加手机号格式规则、登录成功跳转或账号数据保存。让 AI 为现有需求写恰当的代码比让它自动扩展“完整登录系统”更容易检查。