组件用.vue还是.js

在我看来，Vue.js是目前可用的最好的JS框架。 我最喜欢的功能之一是.vue单文件组件。 很难管理更大的组件，尤其是当您开始创建自定义子组件并添加静态资产时，会变得非常困难。 这是我尝试过的一些方法，您可能也喜欢它们。

一些快速的基础知识

这可能是您的常识，但以防万一：

• 使用PascalCase文件命名。
  示例： ComponentName.vue
  doc参考
• 使用默认词（例如App，Base或V）作为基础组件的开头。
  示例： AppTable.vue
  doc参考
• 前言组件与一个活动实例的最大用The 。
  示例： TheLargeComponent.vue
  doc参考
• 始终为组件使用多词名称。 前置App或The简化此操作，但是对所有组件都执行此操作。 这是为了避免与始终为单个单词的标准HTML标签发生冲突。
  示例： MainModal.vue 而不是 Modal.vue
  doc参考

它通常是怎么做的。

我经常看到这种情况，而对于大型项目，这将成为一场噩梦。 所有组件都在components文件夹中，所有资产都在一个中央资产文件夹中，单实例子组件仅通过在其父名称前加上前缀（两层后变得非常有趣）来表示。 通常这看起来像这样：

好吧，所以这显然很快变得混乱了，我们该如何解决呢？ 让我们开始第一个选择！

1.将组件放在其自己的文件夹中。

我尝试过的第一个选择。 将文件夹命名为LargeComponent并将原始组件放入其中。 您可以在这里做两件事。

首先，您可以命名组件index.vue ，它可能在您的构建系统中工作，并且具有不更改导入语句的巨大好处。 这确实非常方便，但是非常棘手，不是最稳定的解决方案。 注意：如果您在导入中指定文件扩展名（例如 LargeComponent.vue 则此方法不起作用

其次，您可以将其命名为父文件夹，然后将其保留为LargeComponent.vue ，这可能是此处最明智的选择。 这确实将导入从./components/LargeComponent更改为./components/LargeComponent/LargeComponent ，这并不理想。

专业版

• 组件文件夹中的所有项目都表示并代表一个组件。
• 对于其他开发人员来说很容易理解。
• 子组件和资产可以使用相对的原始导入来导入： ./assets/img/banner.png

其次，这种方法看起来很像这种方法，而且可能是最简单的一种方法：

2.将文件夹放在vue组件旁边。

此解决方案在指定文件扩展名方面没有问题，并且不会更改导入。

components
|-- LargeComponent.vue 
|-- LargeComponent
|  |--components
|  |  |--LargeComponentModal.vue
|  |--assets
|  |  |--img
|  |  |  |--banner.png 

文件本身的导入确实看起来有些复杂，但也非常清楚： ./LargeComponent/assets/img/banner.png 。 这也使主要组件文件夹看上去更混乱，但不一定更不清楚。

专业版

• 在每个构建系统中均可使用，非常简单。
• 对于其他开发人员来说很容易理解。
• 为组件创建文件夹时不更改导入。

最后，如果您使用的是未指定文件扩展名的导入，那么我真的很喜欢它：

3.将index.json放入组件文件夹中

非常简单，您只需将此index.json文件放入组件文件夹中：

{
"name": "MY_COMPONENT_NAME",
"private": true,
"main": "./MY_COMPONENT_NAME.vue"
}

这样可以正确解决导入问题。 您可以在components文件夹中保持整洁的结构，每个元素代表一个组件。 您将得到以下文件夹结构：

这具有上述方法的所有优点，但是当使用指定了文件扩展名的导入时，它更加晦涩难懂，并且失去了它的最大优点之一。

专业版

• 为组件创建文件夹时不更改导入。
• 所有组件数据都包含在一个文件夹中。
• 相对进口更清洁。

奖金回合：Vue-Router用户的提示

构建SPA时，我真的很喜欢将单实例组件放在与其所属页面相对应的文件夹中，如下所示：

而已！

感谢您的阅读，非常希望能对您有所帮助，如果您有建议和改进，请不要在评论中留下！

建筑的东西？ 我也喜欢做事，如果您想查看我在做什么，请 在Twitter上 关注我 ！

额外的可选奖励轮：更多关于原因！

我在Kasp的评论中提出了一个问题，我认为它解决了帖子中可能缺少的一些信息。 答案花了很长时间，所以我决定只将其包含在帖子本身中。 问题如下：

为什么要根据实例数将组件分开？
我们目前正在制作Vue应用程序的方法（还没有变得那么大）有一个components文件夹和一个views文件夹。 每个视图本质上都是具有一个或多个组件的页面。 Components文件夹严格包含应用程序的基本构建块。
您能建议什么时候变坏吗？ 我在想，当页面太多时，views文件夹可能会不知所措。

首先，您可能想将单实例组件（SIC）与其余组件分开。 这些SIC仅用于使您的页面构建更加方便并分离逻辑。 我已经非常喜欢将它们包含在与视图耦合的components文件夹中。 没有其他组件会或应该使用这些单实例组件，因此使其他视图/组件可以访问它们没有任何意义。 除此之外，还有一个很大的优势，那就是使视图本身更易于访问它们，并更清楚地知道发生了什么。

这样一来，您便可以只使用components文件夹了：听起来像是这样：一个充满可重用组件的文件夹，您可以在应用程序中的任何地方使用它，而不仅仅是一个充满以“ .vue”和不是顶层视图。

但是您可能需要资产。 当然适合您的较大组件。 将它们放在常规资产文件夹中非常不方便。 您可以将它们全部放置在主/static文件夹中，但我个人认为这非常好，并且可以轻松地为每个组件使用专用文件夹。

您可能已经猜到了它的去向，但是刚创建用来保存此资产文件夹的文件夹是放置要为其创建该组件的组件的单实例子级的理想位置（最好是在…中，您猜到它是components夹！）。 同样，与视图一样，没有其他组件会或应该每个都使用这些视图，并且对于将要使用的一个组件，它应该尽可能简单明了。

感谢您提出这个问题，并希望我的回答能解决问题！

干杯!

翻译自: https://hackernoon.com/learn-to-manage-large-vue-js-components-in-4-min-64fc2b9b2ef9

组件用.vue还是.js