快速入门：使用 VS Code 生成你的第一个应用

适用于： 开发人员版

安装适用于 Visual Studio Code 的 SharePoint Embedded 扩展，以创建容器类型、配置拥有应用和计费、注册容器类型、创建容器以及从编辑器中的引导式视图加载示例应用：

从 Visual Studio Marketplace 获取扩展

使用 SharePoint Embedded Visual Studio Code 扩展为第一个应用创建标准容器类型。 该扩展还配置拥有应用、附加 Azure 计费并注册容器类型。 然后，创建一个容器并运行本地示例应用。

本文开始构建之旅。 有关更多计费指南，请参阅 创建和配置容器类型。

提示

更喜欢使用编码代理而不是引导式视图进行构建？ 使用 SharePoint Embedded MCP 服务器 通过自然语言预配和管理资源。

先决条件

开始之前，请确保你有：

• 安装了 Visual Studio Code。
• 对 Microsoft 365 租户的管理访问权限。
• 具有 SharePoint 的租户。
• 你的帐户可以访问的 Azure 订阅和资源组。
• Azure 订阅的所有者或参与者权限。
• 为示例应用安装的 Node.js 和 npm。
• 在 Microsoft Entra ID 中授予管理员同意的权限。

重要

你需要对 Microsoft 365 租户具有管理访问权限。 如果没有租户，请使用 Microsoft 365 开发人员计划、Microsoft 客户数字体验或 Microsoft 365 E3 试用版。

安装扩展

使用本文顶部的按钮或从编辑器中安装扩展：

1. 打开 Visual Studio Code。
2. 从活动栏打开 “扩展 ”。
3. 搜索 SharePoint Embedded。
4. 选择“安装”。
5. 如果已安装扩展，请更新它。
6. 在活动栏中选择 SharePoint Embedded 图标。

登录

1. 在 SharePoint 内嵌视图中，选择登录操作。
2. 使用 Microsoft 365 管理员帐户。
3. 在浏览器中完成身份验证。
4. 查看请求的权限。
5. 选择 “接受” 以授予管理员同意。
6. 重定向时返回到 Visual Studio Code。

重要

仔细查看同意提示。 扩展需要租户权限才能配置开发资源。

登录后，扩展将显示 SharePoint Embedded 主页视图。

创建标准容器类型

容器类型定义一组 SharePoint Embedded 容器的关系、访问权限、计费责任和选定行为。

1. 选择“ 创建容器类型”。
2. 对于计费方式，请选择 “标准”。
3. 输入容器类型名称。
4. 按照提示操作，直到创建完成。

当拥有该应用的组织支付 SharePoint Embedded 使用费用时，请使用标准容器类型。 对于评估，请选择 试用版。 对于客户租户计费，请选择使用 directToCustomer 计费分类的直通选项。

创建或选择拥有的应用

每个容器类型都有一个拥有的 Microsoft Entra ID 应用程序。

1. 新建 Microsoft Entra ID 应用程序或选择现有应用程序 ID。
2. 如果创建新应用程序，请输入其名称。
3. 让扩展配置开发设置。

警告

如果选择现有应用程序，扩展会更新该应用的配置。 不要对此快速入门使用生产应用。

有关该模型，请参阅 SharePoint Embedded 应用体系结构。

配置标准计费

Standard 容器类型需要 Azure 计费。 该扩展使用帐户可以访问的 Azure 订阅和资源组附加计费。

1. 选择 Azure 订阅。
2. 选择资源组。
3. 等待扩展注册 Microsoft.Syntex 资源提供程序并附加帐单。

如果跳过计费设置或没有所需的 Azure 权限，树会显示未设置计费。 若要稍后完成设置，请右键单击容器类型。 然后选择 附加帐单。

在本地注册容器类型

必须先在使用租户中注册容器类型，然后应用才能创建容器或访问内容。

1. 创建后，按照提示在本地租户中注册容器类型。
2. 如果提示不可见，请右键单击容器类型，然后选择“ 注册”。
3. 查看权限。
4. 在浏览器中授予管理员同意。
5. 返回到 Visual Studio Code。

注册配置拥有应用可对容器类型的容器使用的权限。

创建首个容器

1. 在 SharePoint Embedded 树中，展开容器类型。
2. 右键单击 “容器”。
3. 选择“ 创建容器”。
4. 输入容器名称。
5. 确认容器出现在树中。

容器是 SharePoint Embedded 中的基本存储单元和安全边界。

加载示例应用

1. 在 SharePoint Embedded 视图中，选择 加载示例应用。
2. 选择 SharePoint Embedded 示例。

1. 查看有关本地纯文本机密的警告。
2. 如果系统提示创建客户端密码，请选择“ 确定” 进行本地开发。
3. 让扩展填充运行时配置文件。

重要

示例配置仅用于开发。 它以纯文本形式将身份验证机密存储在本地计算机上。

运行示例应用

打开终端，并从生成的示例目录运行示例应用。

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

示例启动：

• 一个 React 客户端应用程序。
• 一台 Azure Functions 应用程序服务器。

等待两个控制台输出都出现。

则：

1. 打开http://localhost:8080
2. 使用同一 Microsoft 365 管理员帐户登录。
3. 在主页上选择 “容器” 。
4. 从示例 UI 创建容器并上传文件。

注意

初始启动可能需要几分钟时间，而依赖项会安装并且两个应用程序都将生成。

疑难解答入门

症状	支票
端口冲突	当端口 8080 正在使用时，应用会尝试下一个可用端口。
依赖关系失败	运行 npm install，然后再次运行 npm run start 。
身份验证错误	确认 Microsoft Entra ID 应用具有预期的重定向 URI。
Access denied	确认注册和管理员同意成功。
未设置计费	确认你对所选 Azure 订阅具有“所有者”或“参与者”权限，然后使用附加帐单。

清理

完成测试后：

1. 删除不再需要的测试容器。
2. 查看为本快速入门创建的 Azure 计费资源。
3. 删除不再需要的本地示例机密。

后续步骤

有关容器类型选项的详细信息，请参阅创建 和配置容器类型。