练习 - 将 SharePoint 框架解决方案部署到租户应用程序目录
在本练习中，你将创建一个 SharePoint 框架 （SPFx） 客户端 Web 部件，该部件可用于尝试不同的部署配置。
先决条件
重要
在大多数情况下，安装以下工具的最新版本是最佳选择。 此模块在发布和最后测试过程中，使用了此处列出的版本。
- Node.js v18.*
- Gulp-cli v3.*
- Yeoman v5.*
- Yeoman Generator for SharePoint v1.20.0
- Visual Studio Code
打开命令提示符，并将其更改为要在其中创建项目的文件夹。 通过执行以下命令运行 SharePoint Yeoman 生成器：
yo @microsoft/sharepoint
使用以下内容完成显示的提示（如果显示多个选项，请接受默认答案）：
- 解决方案名称是什么？： DeploymentDemo
- 要创建哪种类型的客户端组件?：Web 部件
- Web 部件的名称是什么？： 部署演示
- 要使用哪个模板？： 无框架
预配项目所需的文件夹后，生成器将通过自动运行 npm install 来安装所有依赖项包。 NPM 完成下载所有依赖项后，请在 Visual Studio Code 中打开项目文件夹。
禁用租户范围部署
对于本模块中的练习，你将手动将 SharePoint 包中的应用程序添加到将使用它的网站。 你不希望让管理员在将包上传到应用程序目录时立即启用应用并将其添加到所有网站。 这可以通过将 ./config/package-solution.json 文件中的 skipFeatureDeployment 属性值设置为 false 来实现。
找到并打开 ./config/package-solution.json 文件。
solution验证对象是否具有名为 skipFeatureDeployment 的属性，并确保此属性的值设置为 false。
为项目创建部署包
通过在项目根目录中用命令行运行以下命令，生成项目：
gulp build
接下来，通过从项目的根目录运行以下命令来创建项目的生产捆绑包：
gulp bundle --ship
最后，通过从项目的根目录运行以下命令来创建项目的生产捆绑包：
gulp package-solution --ship
将包部署到 SharePoint 网站
在浏览器中，导航到 SharePoint 租户的应用程序目录网站： https://{{YOUR-TENANT}}.sharepoint.com/_layouts/15/tenantAppCatalog.aspx。
将在之前步骤中创建的包（位于项目的./sharepoint/solution/deployment-demo.sppkg）拖动到SharePoint 应用程序的库中。
在“启用应用”面板中，选择“启用应用”：
在“已启用此应用”面板中，选择“关闭”。
在网站集中安装 SharePoint 包
导航到现有网站集，或创建一个新网站集。
在左侧导航中选择网站内容。
在新建菜单中，选择应用。
在筛选器中，选择“来自我的组织”。
选择deployment-demo-client-side-solution磁贴中的"添加"按钮以添加 Web 部件。
向页面添加 Web 部件
导航到 SharePoint 页面。
通过选择页面上内容区域右上角的 编辑 按钮，进入编辑模式。
选择 Web 部件图标按钮以打开可用 Web 部件列表：
在“搜索”框下，选择“排序和过滤”下拉列表，然后在“按类别过滤”下面选择“高级”。
在“高级”部分中，选择“部署演示”Web 部件。
检查已部署的 Web 部件文件
页面加载后，打开浏览器的开发人员工具并导航到 源 选项卡。
刷新页面并检查 JavaScript 捆绑包的托管位置。
如果尚未启用 Office 365 CDN，则捆绑包将在应用程序目录网站中名为 ClientSideAssets 的文档库托管。
如果已启用 Office 365 CDN，则捆绑包将在 CDN 自动托管。
删除已部署的 Web 部件
从页面中删除 Web 部件
选择 Web 部件左侧工具栏中的垃圾桶图标：
删除 SharePoint 应用
导航回网站的 网站内容 页。
选择已安装包的快捷菜单，然后选择 删除 操作：
在此视图不支持该操作的对话框中，请选择返回到经典 SharePoint按钮：
选择已安装包的快捷菜单，然后选择 删除 操作：
在左侧导航菜单中，选择 退出经典体验 链接。
从回收站中删除 SharePoint 应用
导航回网站的 网站内容 页。
在命令栏中选择“回收站”。
选区“deployment-demo-client-side-solution”，然后在命令栏中选择“删除”。 在弹出对话框中选择“ 删除 ”以确认删除文件。
选择页面底部的“第二阶段回收站”以导航到第二阶段回收站。
选区“deployment-demo-client-side-solution”，然后在命令栏中选择“删除”。 在弹出对话框中选择“ 删除 ”以确认删除文件。
收回 SharePoint 包
导航回到租户的新式“应用程序目录”。
选择已部署的包，然后从命令栏中选择“删除”：
从回收站中删除 SharePoint 包
从左侧导航栏中选择“更多功能”，然后在“网站内容”下选择“打开”。
在命令栏中选择“回收站”。 使用前面所述的相同步骤从第一阶段和第二阶段回收站中删除 SharePoint 包 deployment-demo.sppkg 。
摘要
在本练习中，你创建了一个 SharePoint 框架 （SPFx） 客户端 Web 部件，该部件可用于尝试不同的部署配置。