本文介绍如何从 Vite 设置空白应用并将其转换为 Power Apps 代码应用。 它介绍如何使用 Power Platform SDK 配置 TypeScript 应用
注释
预览功能不适合生产使用且功能可能受限。 这些功能在正式发布之前可用，以便客户能够提前访问并提供反馈。
先决条件
初始化 Vite 应用程序
打开 Visual Studio Code 并打开新的 PowerShell 终端并输入：
mkdir C:\CodeApps -Force cd C:\CodeApps npm create vite@latest AppFromScratch -- --template react-ts cd C:\CodeApps\AppFromScratch npm install如果您被询问，请同意安装
create-vite按
appfromscratch接受默认包名称。如果系统要求选择框架，请选择 React。
如果系统要求选择变体，请选择 TypeScript。
目前，Power Apps SDK 要求端口在默认配置中为 3000。
使用以下命令安装节点类型定义：
npm i --save-dev @types/node打开
vite.config.ts并更新为：import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import * as path from 'path' // https://vite.dev/config/ export default defineConfig({ base: "./", server: { host: "::", port: 3000, }, plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, });保存 文件。
输入以下内容以测试 Vite 应用：
npm run dev注释
如果要在 macOS 上进行开发，可能需要更新 package.json 以不引用
start vite。 例如需将开发环境条目从start vite && start pac code run："scripts": { "dev": "start vite && start pac code run", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }到
vite && pac code run"scripts": { "dev": "vite && pac code run", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }模板项目在本地启动并运行。 请浏览到给定的
http://localhost:3000地址。
重要
如果未看到端口 3000，请重新访问前面的步骤。
按 Ctrl + C 停止本地服务器。
初始化您的代码应用程序
针对您的 Power Platform 租户，使用 Power Platform CLI 进行身份验证。
pac auth create出现提示时，使用 Power Platform 帐户登录。
注释
还可以使用 Power Platform Tools VS Code 扩展 进行身份验证。
选择您的环境，使用：
pac env select -env <URL of your environment>还可以使用 Power Platform Tools VS Code 扩展来选择环境。
初始化你的代码应用程序，使用：
pac code init --displayName "App From Scratch"请注意，项目中现在有一个
power.config.json文件。使用以下命令安装 Power SDK：
npm install --save "@microsoft/power-apps"package.json并更新现有行："dev": "vite"将其更改为：
"dev": "start pac code run && vite",保存已更新的
package.json在命名
src的文件夹下PowerProvider.tsx并从 github.com/microsoft/PowerAppsCodeApps/docs/assets/PowerProvider.tsx 获取代码保存 文件。
打开
main.tsx并在现有导入下添加以下导入：import PowerProvider from './PowerProvider.tsx'更新
main.tsx：<StrictMode> <App /> </StrictMode>,将其更改为：
<StrictMode> <PowerProvider> <App /> </PowerProvider> </StrictMode>,保存 文件。
现在可以使用以下方法测试代码应用：
npm run dev这会运行 Vite 服务器，但也启动 Power SDK 服务器：
打开 Power SDK 服务器提供的 URL。
重要
请使用与 Power Platform 租户相同的浏览器配置打开该 URL。
你应该会看到应用程序打开成类似于以下所示：
