SPFx WebPart中缺失自动生成的components文件夹，如何手动创建？

components文件夹并不是SPFx项目创建时强制自动生成的，很多教程里的自动生成效果，是因为后续用Yeoman命令添加了组件，或是创建WebPart时选择了带组件的模板。不想新建项目的话，有两种简单方案可以解决：

方法一：手动创建 #

1. 定位到src/webparts/你的WebPart名称目录，直接新建components文件夹
2. 在components里按需创建对应文件：
   • PeoplePicker.tsx：编写人员选择器的UI组件逻辑
   • PeoplePicker.module.scss：组件专属样式文件
   • 可选：PeoplePicker.types.ts：定义组件用到的TypeScript类型
3. 在WebPart主文件（比如YourWebPartNameWebPart.ts）中导入组件，示例代码：

   import { PeoplePicker } from './components/PeoplePicker';
   

方法二：用Yeoman命令自动生成 #

1. 打开终端，进入你的SPFx项目根目录
2. 运行命令：

   yo @microsoft/sharepoint
   

3. 按照提示选择：Add a new component to an existing web part
4. 选中要添加组件的目标WebPart，输入组件名称（比如PeoplePicker）
5. Yeoman会自动在对应WebPart目录下生成components文件夹，以及配套的tsx、scss和类型文件

完成后就能搭建出和教程一致的目录结构，接下来就可以在components文件夹内开发人员选择器组件了。

内容的提问来源于stack exchange，提问作者LeberkäseWhatsappgruppe