在 Vue 应用里，一个组件可以是一个单独的文件，这种组件叫 single file component ，单文件组件，简称 SFC。组件就是应用里的一块可以重复使用的界面，你可以定义组件的模板，样式，还有组件可以做的事情。下面我们会一步一步的了解怎么在 Vue 应用里创建跟使用组件。

在 src/app 的下面，新建一个组件文件，放在 components 目录的下面，文件的名字是 app-button.vue，组件文件名字的后缀一般就是这个 .vue。

在这个文件里，先添加一组 template ，在里面可以设计一下这个组件的模板，也就是这个组件的界面结构。用一组 button 标签。 按钮文字暂时设置成 按钮 。

使用

现在，在其它的组件里我们就可以使用这个组件了，比如在这个 app 组件里可以试一下，首先要在组件文件的 script 里面，导入要在这个组件里使用的组件，用 import 导入，导入进来的名字是 AppButton，来自当前目录下的 components 里 app-button.vue，导入的时候不加 .vue 后缀也可以。

导入进来以后，要在这个组件的对象里添加一个 components 属性，它的值是一个对象，里面是想在当前这个组件里使用的其它的组件，这里就是在上面导入的这个 AppButton。

现在我们就可以在这个组件的模板里使用 AppButton 这个组件了，组件的用法跟普通的 html 标签差不多。一组尖括号，里面是组件的名字，这里就是 AppButton。后面可以再加上一个组件的结束部分，在开始与结束部分中间可以包装一些东西，如果没有可以包装的东西，也可以用自关闭的方法使用组件，尖括号，组件的名字，空格，再加上一条斜线。

在浏览器上观察一下，你会发现，界面上会显示两个按钮，它们都来自 AppButton 组件。检查一下这个按钮元素，你会发现，其实它们就是一个普通的 button 标签，标签文字是 按钮 这两个字。这段 html 代码就来自 AppButton 组件的模板。

这里使用组件用的是 PascalCase 的写法，就是第一个词的首字母大写。vue 还支持一种 kebab-case 的写法使用组件，就是串串的写法，也就是组件名的词与词之间用小横线连接。

回到浏览器观察一下，页面上现在会显示四个按钮。