Vue对全局组件进行维护

目录

背景

目标

优化思路

优化过程

拓展与思考

---

背景

        公司的业务越来越复杂，偶然发现全局的components目录中有许多公共组件，这些组件都是什么可能一下子无法知道，需要一个一个看，若轻易修改，牵一发而动全身，可能直接导致其他模块异常甚至报错瘫痪。

        我作为公司三年的老员工对这些组件尚不清楚，如果是新人上手，那将会是何等难受呢？那就尝试去优化一下吧。以下本人将论述自己在组件工程目录中的一些优化建议。

目标

• 提高公共组件目录的可读性。
• 调用公共组件易上手。

优化思路

• 统一组件命名规则，最推荐大驼峰的命名方式。
• 单一或者每个类型的组件创建文件夹进行管理。
• 为这些组件整理一个图文并貌的文档，新上手的开发者直接查看文档就能知道组件的展示效果、使用场景、入参、事件、其他说明等信息，不用看代码就可以直接使用。
• 每个组件都可以有demo组件，单组件运行，直接查看单一组件调用运行的效果将会事半功倍。

优化过程

        根据项目工程中的情况，选择一个较为合适的目录新建一个md文件（如果需插入图片等资源要注意路径的管理），使用markdown语法，如下图是对图片组件的说明。

        预览一下效果，我们可以知道在什么场景下可以使用组件，如何使用，效果是否符合需求等信息。

        新上手的小伙伴在开发前查阅文档，可清晰看到每个组件的使用方法，不至于接触后一头雾水。

        除此之外，我们需要进一步去思考，为每个组件添加一个demo组件，用来单独调用。在入口文件讲挂载在根Dom元素上的App.vue修改为我们需要查看的demo地址。

        另外也可以使用Vue CLI官方网站内置的快速原型开发，可以对单独Vue组件启动服务，以达到预览目的。快速原型开发 | Vue CLI

        做到此处，我们的目录结构有了很大的变化，原本铺天盖地的vue组件现在可以更容易管理，更方便查阅。

拓展与思考

        在此基础上，其实还有优化很多的空间，如：将“公共组件.md”文件添加目录，可查询可定位，节省查询时间。甚至可以进行分类，如：结构组件、音视频组件、动画组件、列表组件等分类维护。

        但是过于细致的拆分在加大工作量的同时带来的小颗粒度维护成本也会变高，在工程优化中，最好做到适可而止，切勿过度，根据具体暴露出的问题针对性解决，够用就好。

        以上工作可能被评定为的价值不大、意义有限，但作为一种显性知识的输出，对个人而言是思考和沉淀的过程，对公司而言更是组织过程资产的积累。