这是我参与8月更文挑战的第25天，活动详情查看：8月更文挑战
组件化和模块化源于软件开发，现在越来越被更多地应用于UI设计当中。下面是示意图。
一、什么是组件化和模块化
组件： 组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。
模块： 分属同一功能/业务的代码进行隔离（分装）成独立的模块，可以独立运行，以页面、功能或其他不同粒度划分程度不同的模块，位于业务框架层，模块间通过接口调用，目的是降低模块间的耦合，由之前的主应用与模块耦合，变为主应用与接口耦合，接口与模块耦合。
二、组件化和模块化的区别
组件化：从UI界面的角度分析的，把一些可复用的UI元素，抽离为单个组件，便于项目的维护和开发。多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件。
模块化：是从代码的角度分析的，把一些可复用的代码，抽离为单个模块，便于项目的维护和开发。可以调用组件来组成模块，多个模块可以组合成业务框架。
三、为什么要使用组件化和模块化？
-
开发和调试效率高：随着功能越来越多，代码结构会越发复杂，要修改某一个小功能，可能要重新翻阅整个项目的代码，把所有相同的地方都修改一遍，重复劳动浪费时间和人力，效率低；使用组件化，每个相同的功能结构都调用同一个组件，只需要修改这个组件，即可全局修改。
-
可维护性强：便于后期代码查找和维护。
-
避免阻断：模块化是可以独立运行的，如果一个模块产生了bug，不会影响其他模块的调用。
-
版本管理更容易：如果由多人协作开发，可以避免代码覆盖和冲突。
总结
- 其实组件相当于库，把一些能在项目里或者不同类型项目中可复用的代码进行工具性的封装。
- 而模块相应于业务逻辑模块，把同一类型项目里的功能逻辑进行进行需求性的封装。
