如何在VSCode的SharePoint项目src/webparts目录新增Web部件？
2026-5-21
在现有SPFx项目中添加新Web部件的步骤
嘿，这事儿其实挺简单的，跟着下面的步骤操作就能搞定：
- 首先打开Visual Studio Code的终端，确保你的工作目录是项目的根目录（就是包含
package.json文件的那个文件夹）。如果当前不在根目录，用cd命令切换过去就行，比如cd path/to/your/spfx-project。 - 在终端里运行Yeoman的SPFx生成器命令：
yo @microsoft/sharepoint - 接下来会进入交互式配置流程，按照提示选就行：
- 第一个问题会问你要创建哪种组件，直接选Web Part（或者对应选项的序号，比如输入
1）。 - 输入新Web部件的名称，比如
AnotherHelloWorld——注意别和已有的HelloWorld重名哦。 - 输入Web部件的描述，随便写个清晰的说明就行，比如
Second hello world web part for demonstration。 - 最后选择开发框架，选和你原来的
HelloWorld一致的框架（比如React或者No JavaScript Framework），确保项目技术栈统一。
- 第一个问题会问你要创建哪种组件，直接选Web Part（或者对应选项的序号，比如输入
- 等生成器自动完成代码生成和依赖配置后，你就能在
src/webparts目录下看到新的Web部件文件夹了，结构和原来的HelloWorld完全一致。 - 要是想验证一下，直接运行
gulp serve启动本地工作区，就能在SharePoint工作台里看到新的Web部件啦。
内容的提问来源于stack exchange，提问作者Szybki
相关产品推荐
相关产品推荐
