Vue实战中的模块化开发

最近公司接了一个Pc端的后台项目，所以我也从APP转向了Web平台的开发，在经受了一年多的APP开发的折磨之后终于迎来了春天，再也不用自己梳理业务、绘制原型、编写各种文档、处理IM、做后台保活这些让人秃顶的事，终于可以轻松的做我的码农了。

前端技术选择

使用的技术：Vue
使用的UI库：若依
api: axios

总结

虽然这种后台管理系统都比较简单，多数页面都是重复重复再重复，但是在开发过程中如果用心去写，去总结还是会有很多收获的，结束。

---

这就结束了？
不，开个玩笑，哈哈

一、什么是模块化开发

举用积木造房子例子说明什么是模块化：

加入我们想用积木拼一个房子出来，我们会先将一个个积木拼接成一个个的横条，圆圈等小模块，然后再用这些横条、圆圈这些小模块拼成墙面、窗户、门、房顶等大模块，最后再用墙面、窗户、房顶拼成最终的成品——房子。这些小模块和大模块拼装过程就是模块化。小模块更加的灵活，大模块对于开发同类的产品更快

二、模块化开发的优点

想必很多新手都遇到过这种情况：拿到设计图后一看一共30个页面其中有一半以上的页面基本上都是重复的这不是很容易搞定吗？偷偷的一笑，安抚一下自己浮躁的内心就开始写第一个页面，然后非常熟练地使用CV大发（Ctrl+C/V）完成任务，这个时候产品经理过来说这块布局不好看改一下，然后我们一顿操作一个页面一个页面的改，改完了产品经理又说这样也不好看，再麻烦一下改回去吧，是不是突然就傻比了？
这个时候模块化开发的优点就凸显出来了，我们直接写一个适合大部分情况的模板，然后根据页面的具体要求稍作修改即可满足需求，省时省力还能减少的代码量，方便后期的维护工作，并且在这个项目写的东西，说不定在另外一个项目中还能用的到，你说爽不爽。

三、模块化开发在我本次开发中发挥的优势

既然知道了什么是模块化和模块化开发的优点,当然是用起来啦，光说不练假把式。

1、产生封装想法的背景：

在此次开发中前端共两人，我和另外一个前端，在我入这个项目之前都是她一人在做；刚入项目组的时候我对这个项目是一脸蒙蔽，当时写页面还是copy她的页面然后自己再慢慢的改，但写两个页面之后我基本上对这些有个大概的了解了，然后我就不再按照她的开始写了。因为我通过写的这两个界面发现页面中有些地方是通用的，但是每个页面都需要写一次即使是copy也需要花费很多时间去做修改，所以我就想能不能生成一个模板哪里用引哪里。
我对比了之前的页面和所有的原型图，因为设计是个大懒逼设计图都是残缺的所以看原型图比较全些，对比发现页面基本上包含两大元素一个是搜索条件模块，一个是列表展示模块，列表展示直接用elementUI的el-table已经够简单了绘制起来不复杂所以保持现状即可，那么就剩下搜索条件这块了，我对比发现所有页面的搜索条件加起来基本上就那几个只是不同的页面显示的检索条件不同而已，所以就开始了第一版的搜索条件封装。

2、页面搜索条件模块化封装的第一版

• 实现思路：将所有的搜索条件放入同一个Vue组件中，然后加上判断条件控制元素的显示隐藏，统一引入api接口，给每一个搜索条件添加一个change事件，当用户改变选项时调用父组件的方法将参数传入到父组件，大概就这么个思路；
• 完成封装并使用：花费了半天的时间开始搞，第一步计划先将当前页面所需要的搜索条件给封好放到公共组件中，以后页面用到其他的再慢慢的添加，搞好之后我就迫不及待的想要写个页面试试，然后发现真的省事了很多，嘿嘿美滋滋。
• 发现新问题：接下来几个页面都是按照这种方式去进行开发，但是随着页面的增加和搜索元素的增加页面变得越来越臃肿，即使当初写的时候基本上我每一行每一个功能都有注释我也不愿意再看这个组件的内容了，真是糟糕透顶了，所以开始了第二版的封装.

3、页面搜索条件模块化封装的第二版

• 目标：因为第一版代码的臃肿所以产生的第二版的封装，那么这个版本主要任务就是在继承第一版的优点的同时使代码更加的简洁易于维护；
• 实现思路：将整个搜索模块分成多个模块，第一个模块就是外层的壳子，内部放入一个插槽(slot)；然后再将每一个搜索条件都单独封装，最后将所有的组件挂载到全局供整个项目使用
• 结果：感觉挺好用再也不用写一堆v-if了代码也简化了不少，并且也是实现了样式上的统一，如果要更改搜索条件的布局只用改外边的那层壳子，哎，真香！

4、优势

• 开发中的优势，做的重复工作少了很多，代码量也少了很多
• 后期维护中的优势，有一天领导让我们将所有的搜索框添加一个模糊搜索的功能，我写的页面只用修改一下封装好的几个模块然后就大功告成了，另外一个前端需要一个页面一个页面的改，我想这优势够明显吧

---

最后当一下搬运工：
初步理解前端模块化开发
模块化开发
算了你们还是自己百度吧！