在HBuilderX中创建的uni-app应用默认没有components目录

「爱情、让人受尽委屈。」 2024-04-23 12:45 49阅读 0赞

我使用HBuilderX 4.08版本，创建的uni-app应用默认没有生成components目录。其实这个没有什么影响。要创建组件的时候，自己先手工创建一个components目录就行了。

下面演示下面的过程：

*  在HBuilderX中新建一个uni-app应用，默认没有生成components目录。
 *  手工创建一个components目录，然后新建一个自定义组件，但在页面中没有地方引用这个自定义组件，运行到微信开发者工具，在微信开发者工具中，不会自动生成components目录。
 *  在页面中引用自定义组件，运行到微信开发者工具，在微信开发者工具中，会自动生成components目录。

## 新建一个uni-app应用 ##

![在这里插入图片描述][d83333e227564f109247b1dd1349f6fa.png]

输入项目的名称、选择存放目录、选择使用uni-ui项目模版，使用Vue 3，然后点击“创建”：  
![在这里插入图片描述][9b10982569034782b140a6d43bcfe047.png]

项目创建成功了，默认没有生成components目录：  
![在这里插入图片描述][55e0b072e57044798b56226f9b4f9d16.png]

## 自定义一个组件 ##

在项目根目录下手工创建一个components目录：  
![在这里插入图片描述][4eb6c752d0434b0d880226fcaca5492e.png]

![在这里插入图片描述][b4c34ab70dfd4a53ad70f0b2c34af4e7.png]

下面在components目录下面创建一个自定义组件：  
![在这里插入图片描述][efc7b5522b2b482aa870d48b0c88f7d0.png]

输入组件的名字、选择使用scss的模版组件、勾选“创建同名目录”，然后点击“创建”：  
![在这里插入图片描述][26ad546482dc4d05a7a5772d617c8a8c.png]

自定义组件创建成功了：  
![在这里插入图片描述][eccd40d7776c408a821db1da747feef2.png]

在自定义组件中输入一段文本：  
![在这里插入图片描述][824a837671a24c808803c7ef6abb62ba.png]

因为上面只是创建了组件，但还没有地方引用这个组件，所以运行到微信开发者工具中，也不会自动生成components目录。

运行到微信开发者工具：  
![在这里插入图片描述][20fceb9933cf4d4885ae3e847cbd93f9.png]

![在这里插入图片描述][76b2e04a31274950b2725c474365eff9.png]

可以看到，在微信开发者工具中，不会有components目录：  
![在这里插入图片描述][4977f7b2d45740d4ae07b792f129ed96.png]

## 在页面中引用自定义的组件 ##

在index.vue中引用上面的自定义组件，然后保存：  
![在这里插入图片描述][a402a0299e544fefac9e3c8581d6d333.png]

保存后，会自动编译，并更新到微信开发者工具中：  
![在这里插入图片描述][b1a811d63e714b57bb98628374d8ad0e.png]

到微信开发者工具中查看：  
![在这里插入图片描述][284fbbe51f4f45b1b7eddc16b104844c.png]

可以看到，因为已经引用了自定义组件，所以，在微信开发者工具中，也自动生成了components目录，在下面有自定义组件，自定义组件的内容在模拟器中也正常显示出来了。

[d83333e227564f109247b1dd1349f6fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/ec7a0c32319a4849812a1686b8bd967a.png
[9b10982569034782b140a6d43bcfe047.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/d11741b79d874167b37a9b247cf49014.png
[55e0b072e57044798b56226f9b4f9d16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/88a52c4f042940f59eab29167275e3fa.png
[4eb6c752d0434b0d880226fcaca5492e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a542a5fe7a244291b20e3aec9ed9e4c5.png
[b4c34ab70dfd4a53ad70f0b2c34af4e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/5043243c606c448886e4198d377b0e1a.png
[efc7b5522b2b482aa870d48b0c88f7d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/0812f36577a1479586dff9b953dd11fd.png
[26ad546482dc4d05a7a5772d617c8a8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/4575d7f178614278bd36a5b7d47afd66.png
[eccd40d7776c408a821db1da747feef2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/07db35822f8c4929b22976d1c4a56a01.png
[824a837671a24c808803c7ef6abb62ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8aedd37cd4394cf0b4d53164580f23b1.png
[20fceb9933cf4d4885ae3e847cbd93f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/1ea0da47fdfe46e988c7e19a3c985779.png
[76b2e04a31274950b2725c474365eff9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8756fba8a182482e85830f4880ada293.png
[4977f7b2d45740d4ae07b792f129ed96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/d929d46c300042058ec91cb2dc9676f8.png
[a402a0299e544fefac9e3c8581d6d333.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f2fefc1eb52845fba94fe4a7d491985a.png
[b1a811d63e714b57bb98628374d8ad0e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/dacc0cf45bda48e7860f68f02a28c1cd.png
[284fbbe51f4f45b1b7eddc16b104844c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/0aadb468ada54895a3f064cfc9549fcf.png