企业官网建设流程全解析

power-platform-skills 是微软开源的 AI 智能体插件市场，其中的 Code Apps 插件专门用于构建 Power Apps 代码应用（Code Apps）。它基于 React + Vite + TypeScript 技术栈，让 AI 编程助手（GitHub Copilot 或 Claude Code）带着你从脚手架搭建、连接 Dataverse 与 SharePoint 数据源，到一键部署上线，全程只需几条斜杠命令。本文将带你完整走通这条开发链路。

一、环境准备与插件安装

开始之前，请确认本地满足以下条件：

在任意文件夹中打开 Copilot CLI 或 Claude Code，依次执行两条命令：

/plugin marketplace add microsoft/power-platform-skills /plugin install code-apps-preview@power-platform-skills

第一条命令添加插件市场，第二条安装 Code Apps 插件（插件市场定义见 marketplace.json，Code Apps 插件对应code-apps-preview）。安装完成后即可使用/create-code-app等斜杠命令。

二、完整工作流：从零到部署上线

输入/create-code-app后，AI 助手会引导你走完 10 步工作流，其完整定义见 create-code-app/SKILL.md：

1. 验证前置条件→ 2.收集需求（应用名、数据需求、UI 偏好）→ 3.制定计划→ 4.脚手架搭建→ 5.项目初始化→ 6.基线构建部署→ 7.添加数据源→ 8.实现应用→ 9.最终构建部署→ 10.输出总结

其中两个关键动作值得新手重点了解：

🚀 脚手架搭建：插件统一使用degit拉取官方 Vite 模板，而不是git clone，可以下载干净的模板文件：

npx degit microsoft/PowerAppsCodeApps/templates/vite {你的文件夹名} --force cd {你的文件夹名} npm install

🔐 项目初始化：绑定应用名与环境 ID（可从 make.powerapps.com 的 URL 中获取 GUID）。首次运行会自动弹出浏览器完成 Microsoft 账号登录，无需单独配置认证：

pa app init -n '应用名称' -e <environment-id>

初始化后会生成power.config.json配置文件，后续所有命令都依赖它定位环境。随后插件会先构建并部署一次"空壳"应用，验证整条流水线畅通后才开始写业务代码。

三、连接 Dataverse：自动生成类型安全的服务

存储和管理自定义业务数据（表单、增删改查）是 Dataverse 的主场。执行/add-dataverse后，核心命令为：

pa app add>const result = await AccountsService.getAll({ select: ["name", "accountnumber"], filter: "statecode eq 0", orderBy: ["name asc"], top: 50 });

💡注意：Dataverse 的选项集（picklist）字段存储的是整数而非字符串，且生成文件不建议手动修改。更多字段陷阱可参考 dataverse-reference.md。

四、连接 SharePoint：读取列表与文档库

如果数据存放在 SharePoint 站点中（比如项目里程碑列表、文档库），使用/add-sharepoint技能。它分四步发现并接入数据，完整流程见 add-sharepoint/SKILL.md：

# 1️⃣ 获取连接 ID（可先运行 /list-connections 技能） pa connection list # 2️⃣ 发现可访问的站点 pa connector list-datasets --connector sharepointonline -c <connection-id> # 3️⃣ 发现站点内的列表和文档库 pa connector list-tables --connector sharepointonline -c <connection-id> -d '<站点URL>' # 4️⃣ 添加连接器，生成类型化服务 pa app add>// 读取列表项 const result = await SharePointOnlineService.GetItems({ dataset: "https://contoso.sharepoint.com/sites/Projects", table: "Project Milestones" }); // 新增列表项 await SharePointOnlineService.PostItem({ dataset: "https://contoso.sharepoint.com/sites/Projects", table: "Project Milestones", item: { Title: "新项目", Status: "Active" } });

💡注意：与 Dataverse 不同，SharePoint 的选择列（Choice）使用字符串值而非整数码，列表列名在 API 中的编码可能与显示名不同（空格会变成_x0020_）。详见 sharepoint-reference.md。

五、Connector-First 原则：新手必须知道的一条规则

Power Apps 代码应用运行在 Power Platform 的沙箱中，运行时不允许直接向外发起 HTTP 请求。因此fetch、axios或 Graph API 直连在部署后都会失败——所有外部数据访问都必须走 Power Platform 连接器（Connector）。

这个"连接器优先"原则由插件的共享指令强制执行，定义见 shared-instructions.md。插件也为此内置了完整的连接器技能矩阵：

不确定该连什么数据源时，直接运行/add-datasource，插件会问你需求并推荐最合适的连接器。

六、部署上线与故障排查

开发完成后，构建 + 推送两条命令即可上线：

npm run build pa app push

插件内置了安全护栏：构建不通过绝不部署，且部署前会再次向用户确认（规则定义见 shared-instructions.md；仅部署流程见 deploy/SKILL.md）。部署成功后会输出应用 URL，形如https://apps.powerapps.com/play/e/{env-id}/app/{app-id}。

常见问题速查（完整版见 troubleshooting.md）：

七、核心模块路径速查

总结

power-platform-skills 的 Code Apps 插件把"React + Vite 开发、Dataverse/SharePoint 数据接入、Power Platform 部署"三件事串联成了 AI 驱动的自动化流水线：/create-code-app负责从零搭建，/add-dataverse与/add-sharepoint负责类型安全的数据接入，/deploy负责安全上线。对于新手来说，只要掌握"连接器优先"这一条核心规则，再配合插件内置的护栏与参考文档，就能用熟悉的 React 技术栈快速交付可用的 Power Apps 代码应用。