Vue.js 命名约定：单实例组件的“子代”答案

【问题标题】：Vue.js naming conventions: 'children' of single-instance componentsVue.js 命名约定：单实例组件的“子代”
【发布时间】：2020-08-30 02:42:06
【问题描述】：

我一直在努力遵守Vue Style Guide 中提出的编码标准，但我不确定如何解决这种特殊情况。根据指南：

这些应该如何结合？想象一个带有单实例标头的典型网页。在其中，我们将有许多标题链接，特定于标题（它们不会出现在其他地方）。

如果我遵循 (1)，我的标题组件将变为 TheHeader，但如果我也遵循 (2)，我将不得不将我的标题链接命名为 TheHeaderLink。这是一种误导，因为通常会有不止一个。如果我放弃 The 链接，我将失去将耦合组件按字母顺序排列在一起的好处。

相反，如果我删除标题的The 并使用AppHeader 和AppHeaderLink，我不再传达标题是单例的事实。

我想这归结为个人偏好和/或编码团队标准，但也许有一些我没有看到的约定或解决方案？

【问题讨论】：

【解决方案1】：

鉴于 Node.js 允许您 require 或 import folders as modules，我个人喜欢将子组件（与其父组件紧密耦合）“封装”或组织在一个独立的文件夹中，并提供一个单个入口点。

所以，我会离开这个......

components/
|- TheHeader.vue
|- TheHeaderLink.vue
|- TheHeaderLogo.vue

...到那个：

components/
|- TheHeader/
   |- index.vue
   |- HeaderLink.vue
   |- HeaderLogo.vue

index.vue 是（上述）入口点，这基本上是您原来的 TheHeader 组件重命名。

当然你会像往常一样导入它：

import TheHeader from '@/components/TheHeader';
// or
const TheHeader = require('@/components/TheHeader');

但是，是的，我认为这只是一个偏好问题。

【讨论】：

哦，整洁。我以类似的文件夹结构开始我的项目，并且在阅读样式指南后正在重构。具体来说，它说最好避免使用文件夹（vuejs.org/v2/style-guide/…，在详细说明中），但我想这是权衡利弊的问题。
啊，所以它甚至在文档中也有（虽然详细的解释不应该真的在隐藏部分）。但是，我相信这个独立的文件夹在我们的案例中更有意义，因为将库和东西组织在一起要容易得多。我通常将其保留在最多 1 到 2 个嵌套文件夹以保持其井井有条，并且不必担心快速文件切换。