经过之前vue基础知识的学习，我们现在终于要学习vue的重点内容了——组件。
组件化开发的好处有很多，代码复用、模块划分清晰、方便协作等，vue中的组件更是企业级开发中的基础。所以初学者一定要熟练掌握vue组件的相关内容。

1.组件化开发

我们在开发网页时，需要把网页的各个部分划分成不同的组件，通过各种组件的组合和套用，形成一个完整的网页，使用官方的图片可以清晰的看到这一点。

比如网页中，可以拆分成大三块，头部，左侧和右侧的组件，左侧的组件又有两个组件组成，右侧的组件里有三个子组件，它们这样形成了图右侧这个树形结构。这些组件最后像图左侧这样的方式组合到一起，形成了一个简单的网页。
组件化开发就是我们把网页拆分成不同的组件，单独去开发每一个组件，最后把它们组合到一起。
那么问题来了，应该怎么样去划分组件？这个问题涉及到很多开发经验，对于初学者来说，我们先记住一条：

一块相同的内容，会在多个地方用到，我们就把这块内容做一个单独的组件。

其他的原则我们以后再说，现在先举个例子：
比如现在有一个项目要做一个简单的企业站，这个网站有首页、产品介绍、关于我们、招聘信息等页面，那么它每个页面顶部都会有一个导航栏，方便点击跳转。那么这个导航栏就是相同的内容，在多个地方用到，那么我们就很有理由把导航栏做成一个组件。

2.创建我们的第一个组件

1）我们像之前的课程里一样，用vue cli创建一个项目,名字叫component_dome，选择vue3版本

vue create component_dome

创建完成后，我们还像以前一样，把没有用的内容先删掉，留下一个纯净的App.vue

<template>
  <div></div>
</template>

<script>
// 组件基础
export default {
  name: 'App',
}
</script>

<style></style>

2）在src目录下新建一个文件夹，叫做components，我们在工作中一般把公用的组件都放到这个文件里
3）创建组件
需求是做一个计数器组件，计数器开始是0，每次点击都加一
在components下创建一个文件： counter.vue，我们给组件起名字叫counter，它的文件格式是.vue，和App.vue一样，他们的基本格式也是一样的，都是由template、script、style组成，因为他们其实都是组件。
在counter.vue里输入我们基本的vue组件的格式

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

这样我们这个组件的基本代码已经完成了，组件的基本结构也就是这样的，大家要记住。
4）编写组件的代码
这个组件是一个计数器，它首先要有一个数据，来记录数值，开始时候是0

  data() {
    return {
      count: 0,
    }
  },

增加一个点击的回调事件，在点击后count加一

  methods: {
    onClick() {
      this.count++
    },
  },

最后我们需要在template中显示count，并且加上回调事件，这样我们这个简单的组件就完成了

<div @click="onClick">我现在的计数是：{{ count }}，点击增加</div>

完整代码是

<template>
  <div @click="onClick">我现在的计数是：{{ count }}，点击增加</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    onClick() {
      this.count++
    },
  },
}
</script>

<style></style>

5）在App.vue中使用计数组件
使用js原生的import把组件导入进来，在App.vue的script标签顶部，

import counter from './components/counter.vue'

import后面的counter表示我们的组件名称
from后面的 './components/counter.vue'表示我们的组件的路径
如果想对import语法有更多了解，可以学习一下es6 import语法

然后，在App.vue导出的对象中，声明我们要用这个组件

  components: {
    counter,
  },

最后就是使用，在template中写上这个组件就可以了，要使用尖括号的形式，把组件名称counter当做一个html标签来使用

<counter></counter>

App.vue的完整代码是

<template>
  <div>
    <counter></counter>
  </div>
</template>

<script>
import counter from './components/counter.vue'
// 组件基础
export default {
  name: 'App',
  components: {
    counter,
  },
}
</script>

<style></style>

使用的时候，简单来说就是分为三步

• 引入
• 声明
• 使用

现在我们第一个组件已经显示出来了，点击它发现计数也能变化了

6）添加样式
现在我们的counter组件就是一串单纯的文字，我们给它稍微添加一点样式
在组件的三大标签template、script、style我们一看就知道，style标签是写样式的
先给div增加一个class

  <div @click="onClick" class="counter-btn">我现在的计数是：{{ count }}，点击增加</div>

在style标签中写点样式

<style>
.counter-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ccc;
  border-radius: 5px;
  cursor: pointer;
}
</style>

完整的代码

<template>
  <div @click="onClick" class="counter-btn">
    我现在的计数是：{{ count }}，点击增加
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    onClick() {
      this.count++
    },
  },
}
</script>

<style>
.counter-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ccc;
  border-radius: 5px;
  cursor: pointer;
}
</style>

得到样式：

7）组件的复用
在使用时，只要在template模板里写组件的标签就可以了，比如我们给它来三个counter

  <div>
    <counter></counter>
    <counter></counter>
    <counter></counter>
  </div>

效果：

这节课我们写了第一个组件，内容虽然有点长，但是还是比较简单的，小伙伴可以自己动手写一下，点一点。