前言

Vue应用的一大特色就是组件化开发，可重用的组件使代码的编写和阅读变得更为便利。
很多中小规模的项目中，我们使用app.component('组件名', {组件对象})来定义全局组件，紧接着用app.mount('#app')进行组件加载。
在实际的vue项目中，更多的是使用单文件组件进行开发。

一、什么是单文件组件？

（single-file components）单文件组件是一种扩展名为.vue 的文件，一个单文件组件可以是一个单独的页面组件，如home.vue ，也可以是页面中的一个基础组件，如nav.vue ,my-botton.vue 。

二、单文件组件的结构

单文件组件由三部分组成：模板template；脚本script；样式style。
<template> 里面放置html 标签代码；
<script> 里面放js/ts 代码；
<style> 放css/less/sass 代码

三、如何引入并使用单文件组件

假设有两个单文件组件A.vue 和B.vue 。在A 中需要使用B ，则以下两个步骤是必须的。

1. B组件中需导出（export）

exportdefault{
	name:'ComponentB'}

2. A组件中需导入并局部注册B（import）

import ComponentBfrom"./B.vue"// 导入exportdefault{// 注册挂载
	components:{//ComponentB:ComponentB   es6规定json对象中键=值的可以只写一个
		ComponentB}}