vue大型项目拆分_记一次 Vue 项目重构

随着公司项目越做越复杂，因前期团队对 Vue 使用经验不足，导致留下比较多坑。再这样下去项目会变成越来越难以维护，于是我对主管说：“主管，我想重构”，便有了这次的重构经历。经过对项目分析，主要存在以下问题：

全局样式满天飞

组件越来越多，管理不方便

核心页面 1300 多行代码，阅读性非常差

本项目是一个金融类项目，采用可视化的资产架构描述方式，并根据资产架构生成税务报告。使用 Vue 全家桶进行业务开发，并在 Element UI 基础上进行定制化，可视化建模使用 mxGraph

减少全局样式

项目出现全局样式满天飞的情况，有以下原因

组件内样式想要覆写子组件样式，去除了 scoped 关键字

为了样式在不同组件间复用，将样式提到了全局

组件销毁后，Vue是不会删除对应样式标签的，所以组件内样式不写 scoped 存在污染全局样式的风险。

为了解决第一个问题，这次重构的做法是，坚决所有组件都使用 scoped。需要覆写子组件时使用深度作用选择器解决。这样仅不会污染全局样式，还对子组件覆写样式一目了然。

对于弹窗这类确实要作用到全局的样式，我们统一写在命名为 global.scss 的文件，并使用 BEM 规范命名。

对于在组件间复用的样式，分模块地放到 modules 文件夹下，组件内使用时再用 @import 导入。

来看看重构后的 style 文件夹长这个样子

全局样式样式只剩下 nomalize.css、一些自定义的 reset、element-ui 的默认样式、上文提到的 global，还有就是图标。

分类管理组件

未重构前，全局基础组件放置在 components/common 文件夹，业务组件与其他未归类的组件全放在 components 文件下，看起来非常混乱。

经重构后，将组件分为五类: business、common、function、slot，还有一种就是为某个页面特定提供的，下面会提到。

business 为业务组件跟业务有耦合，可在页面间复用，但不适用于其他项目。而 slot、function、common 这几类是可脱离当前项目使用的。 slot、function 与 common 一样，不同的是 common 使用频率非常高是全局注册的。而 slot、function 是局部注册使用的。slot 的特别之处在于，这类组件只提供一个样式外壳，无太多交互，能很好地被其他组件利用。

像下图所示其他 Panel 组件都可以复用 slot目录下的 Panel 组件。

这次重构经我总结后得出应该在这两种情况下创建组件

可复用的，如上面提到 components 目录下的组件

不可复用的，纯粹为了减少某个页面代码，使 template 结构更清晰。

例如仅仅是传入 props 做数据展示

又或者该组件直接与页面进行交互，该组件无嵌套其他组件

像下面 NodeDetai 页面分离出来的 components 就是上面提到的不可复用组件。

<