Vue 项目中，每个页面都有 2~3 个对话框，应该如何整理存放和复用？

[giter]

前端基于 Vue3 + Element Plus + Vite + TypeScript 。当前，每个页面都有类似于：详情对话框、编辑对话框和各种嵌套对话框等，该复用的已经复用过了，剩下的对话框都含有各自的特色内容，不宜复用，强行复用可能会导致单文件代码量过多不利于后期维护。

目前的疑问：我现在的做法是拆分每个 el-dialog 为单文件组件，存放到 components 文件夹下（可能有违 components 这个文件夹的定义，我的理解是 components 用来存放一些复用性很高的组件，而不是这种零散的对话框单组件文件）所以就导致我现在的项目结构很多 xxxDialog.vue 文件，既不知道如何归类存放，也不知道该怎么高效复用。

[bsg1992]

组件只用于某一个页面，不需要再进行封装了。

[konakona]

收藏了，想看看大家的做法。

[giter]

@bsg1992 那存放这些页面对话框，只能放到 components 文件夹下？我想用更优雅一点的方式，不然太多 xxxDialog.vue 文件了，看着碍眼

[owen800q]

@bsg1992 不行。这样 template 太长了，不好维护

[giter]

@owen800q 确实是，有些对话框的内容都好长了，全放在一个页面 template 下的话，动不动就上千行代码，确实很不利于后面维护

[owen800q]

@giter 没办法。我们有三十多个 xxModal.vue, 一个 modal 都至少一百五十行代码， 不可以把他放在原来的页面，不然不好维护

[LandCruiser]

components 文件夹下是放公共组件的地方，不能公用的组件不要往那放。
比如商品浏览这个功能的所有组件，应该是在 src/views/GoodsList/目录下
这个目录下应该有/GoodsItem.vue GoodsDetail.vue GoodsDialog.vue
而不是把 GoodsDialog 放到/src/components/下去

[giter]

@owen800q #6 难道只能这样滋生更多的 xxxModel.vue 或者 xxxDialog.vue 吗？太多类似文件感觉没充分复用，但强行复用又是另一个大麻烦

[LandCruiser]

还有就是你没有必要为了抽象而抽象，为了提取组件而提取组件。提不提去组件不是按代码行数来的，同样几百行代码，有时候提出去方便，有时候写在一起方便。

[giter]

@LandCruiser 有想过这个问题，谢谢，后面如果实在没有更好的办法，我就把对话框组件文件挪到 views 页面同级目录下，毕竟 components 只适合放通用性组件文件

[bsg1992]

@giter
我的习惯是，基础组件以及业务类组件，放在 components 目录下。
基础组件按照功能进行文件夹划分
业务组件按照业务类型进行文件夹划分

如果业务中出现了强依赖的组件，直接扔到该业务页面下建立一个文件夹进行管理。

其实这种情况非常普遍，有一些业务功能看似能复用，
但是他往往带有非常强的业务特有场景，这个时候你在想去复用他其实是没有意义的。

[bsg1992]

在工作中也看到一些同事，为了代码的复用，拆成 N 个组件，然后组件中甚至暴露了 N 多个 slot ，这样反而本末倒置，为了抽象而抽象。

[giter]

@bsg1992 #11 那确实没得好的办法了，官方对 components 文件夹的定义是可复用性组件，对 views 文件夹的定义是可通过浏览器访问的页面（ vue-router 下引入的组件文件来自 views 目录），所以如果没有好的归类地方，那最好的应该还是随 views 一起存放，外层用文件夹包裹以区分不同的页面内容

[giter]

@bsg1992 #12 也不是为了代码复用而拆分，而是页面内容太多不利于维护，拆分后可以做到一个页面只完成一项或多项类似的功能，全部糅杂在一个页面真的很头疼，尤其是对话框很多的情况下

[zcf0508]

组件单独抽象一方面是复用，一方面是解耦，把对话框单独挪出去可以保证对话框内的逻辑独立，然后在主页面引用多个独立的对话框组件，是挺好的实践

[giter]

@zcf0508 正确的

[lmqdlr]

components 下面是公共组件，页面目录放一个 components 存放页面组件

[MrUser]

这样？
./index.vue
./components/
./dialogs/
./list/index.vue
./list/dialogs/
./detail/index.vue
./detail/dialogs/

[humbass]

整不是应该抽离出来，写成 Promise 的方式调用吗？

[iOCZS]

从某种程度上讲，dialog 也是一个 route 。。。