前言：

组件和模块的定位不同。组件一般用于前端，模块化在后台运用的比较多。例如vue中的组件，主要是为了拆分vue实例的代码量，让我们可以以不同的组件来划分不同的功能模块，将来我们需要什么样的功能，就直接调用对应的组件即可。

区别：

组件化：主要从ui界面上进行划分。例如前端的组件化，方便ui组件的调用。

模块化：主要从代码逻辑的角度进行划分，方便代码分层开发，保证每个功能模块职责单一。

什么是组件

组件的出现，就是为了拆分Vue实列的代码里的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个每个功能模块的职能一致。
组件化：是从UI界面的角度进行规划；前端的组件化，方便UI组件的重用。

全局组件定义的三种方式

第一种

 <div id="app">
        <!-- 如果要使用组件，直接把组件的名称，以HTML标签形式，引入到页面中即可 -->
    <mycom1></mycom1>
    </div>

<script>
        var com1 = Vue.extend({
        template:'<h3>使用Vue.extend 来创建全局的Vue组件</h3>'
        })
        //1,使用Vue.component('组件名'，创建出来的组件模板对象)
        Vue.component('mycom1',com1)
 </script>

第二种

<script>
Vue.component('mycom2',{template:'<div><h3>使用Vue.component 创建出来的组件</h3>s<span>template</span></div>'
        })
</script>

第三种

<templat id="temp">
 <div>
   <h1>通过templat元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
   <h4>好用，不错</h4>
  </div>
</templat>

<script>
 Vue.component('mycom2',{
            template:'temp'
        })
</script>

注意：不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素。

在工作项目开发中第三种方法最好用

概念: 

组件化: 

      1:  就是"基础库"或者"基础组件", 意思就是把重复的代码部分提炼出一个个组件供给功能使用

      2: 功能相对单一或者独立, 在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。

     3: 使用场景: 是对一些重复代码进行封装在需要的时候调用即可(例如: 按钮, 输入框, 搜索框)

     4:  目得: 复用, 解耦

模块化:

        1: 就是"业务框架"或者"业务模块", 将不同的业务进行划分, 同一类型的整合在一起, 所以功能会相对复杂, 但是都属于同一个业务

        2: 按照项目功能需求划分成不同类型的业务框架（例如：注册、登录、外卖、直播.....）

        3: 目得:  隔离.分装, 模块之间有依赖的关系, 可以通过路由进行模块直接的耦合问题

区别:

• 组件：就像一个个小的单位，多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件。

• 模块：就像是独立的功能和项目（如淘宝：注册、登录、购物、直播…），可以调用组件来组成模块，多个模块可以组合成业务框架。

使用组件化和模块化的好处 :

• 开发和调试效率高：随着功能越来越多，代码结构会越发复杂，要修改某一个小功能，可能要重新翻阅整个项目的代码，把所有相同的地方都修改一遍，重复劳动浪费时间和人力，效率低；使用组件化，每个相同的功能结构都调用同一个组件，只需要修改这个组件，即可全局修改。

• 可维护性强：便于后期代码查找和维护。

• 避免阻断：模块化是可以独立运行的，如果一个模块产生了bug，不会影响其他模块的调用。

• 版本管理更容易：如果由多人协作开发，可以避免代码覆盖和冲突。

 总结:    

• 其实组件相当于库，把一些能在项目里或者不同类型项目中可复用的代码进行工具性的封装。
• 而模块相应于业务逻辑模块，把同一类型项目里的功能逻辑进行进行需求性的封装。