练习 - 使用 Power Apps CLI
在本练习中，您将需要安装 Power Platform CLI，并创建您的第一个 Power Apps Component Framework (PCF) 组件。
任务 1：安装 CLI
安装 npm（随附 Node.js）或 Node.js（随附 npm）。 我们推荐您使用 LTS（长期支持）版本 10.15.3 或更高版本。
启动 Visual Studio Code。
选择终端并选择新建终端。
运行
pac命令以查看哪些命令可用：pac
您可以依次输入
pac和命令以查看提供的选项。 例如，尝试以下操作：pac admin导航到 Power Apps Maker Portal 并确保选择开发环境。
在屏幕右上角，选择设置图标并选择会话详细信息。
在 Power Apps 会话详细信息对话框中选择并复制实例 url 值以便稍后在练习中使用。
返回到 Visual Studio Code 终端，键入以下命令以从 CLI 建立连接并在系统提示时登录到测试环境。
pac auth create --name Lab --url <Your Instance URL>键入以下
who命令，以显示环境和用户信息。 这有助于确保您处于正确的环境中。pac org who
任务 2：创建 PCF 组件
运行下面的命令，以在用户的文件夹中创建名为 labPCF 的新文件夹。
md labPCF将目录更改为您创建的文件夹。
cd labPCF运行下面的命令以初始化组件项目。
pac pcf init --namespace lab --name FirstControl --template field键入以下命令，然后按 Enter。 这将从 npm 存储库中向下拉取所有依赖项。
npm install在 Visual Studio Code 中打开文件夹。
code -a .浏览已创建的文件。
在 FirstControl 文件夹中打开 index.ts。
将以下两个变量粘贴到导出中。
private label: HTMLInputElement;private _container: HTMLDivElement;
将以下内容粘贴到 init() 函数中，创建 HTML 控件并设置标签值。
this.label = document.createElement("input"); this.label.setAttribute("type", "label"); this.label.value = "My First PCF"; this._container = document.createElement("div"); this._container.appendChild(this.label); container.appendChild(this._container);保存文件。
转到终端，输入以下命令，然后按 Enter。 这将使用最新代码启动测试工具。
npm start测试工具在项目早期很有用，可将控件可视化，而无需将其部署到环境。 您可以调整属性值，以更改控件区域的大小。 探索测试工具后，请切换回终端，然后按 Ctrl-C 以终止执行测试工具。
如果出现提示，键入 Y，然后按 [ENTER]。
运行以下命令以列出环境中的解决方案。
pac solution list这些是环境中的现有解决方案。 下一步将为组件添加一个解决方案。
键入以下 push 命令以将控件推送到环境。
pac pcf push --publisher-prefix lab再次运行
pac solution list命令。 您应看到已经列出 PowerAppsTools_lab 解决方案。 这是在打包进行用户测试或投入生产或作为其他解决方案的一部分之前在开发环境中安装组件进行单元测试的方式。
任务 3：在应用中使用组件（可选）
在左侧的菜单中选择环境。
选择要用于实验室的环境。
选择设置。
展开产品区域，然后选择功能。
在右侧，启用允许发布包含代码组件的画布应用功能。
导航到 Power Apps Maker Portal 并确保处于正确的环境中。
选择解决方案。
选择以打开 PowerAppsTools_lab 解决方案。
您应看到您的组件已经列出。
选择 + 新建 | 应用 | 画布应用。
为“格式”选择手机，为“应用名称”输入第一个 PCF，然后选择创建。
在左侧窗格中选择添加 (+)，然后选择获取更多组件。
选择代码选项卡。
选择您的组件。
选择导入。
在左侧工具栏上，选择 + 并展开代码组件。
选择 FirstControl。 您现在应看到画布带有我的第一个 PCF 字样的控件。
选择保存以保存应用程序。
您现在已经构建了第一个 PCF 组件并在画布应用中使用该组件。