组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树
全局注册
在 src 文件夹中新建 utils 文件夹，在 utils 文件夹中新建 components.js 文件
在 components.js 文件引入所有要注册的全局组件
在 main.js 中引入 components.js 文件并使用 Vue.use() 全局注册
举例：
组件 diyHeader.vue
<template>
<div>
<div id="header" @click="fun"></div>
</div>
</template>
<script>
export default {
methods:{
fun(){
alert(1);
}
}
}
</script>
<style>
#header{
height: 100px;
background: red;
}
</style>
util下components.js
import DiyHeader from "../components/diyHeader.vue"
export default (Vue)=>{
Vue.component("DiyHeader", DiyHeader)
}
main.js
import components from "./util/components"
Vue.use(components);
之后就可以直接在项目中使用 DiyHeader 这个组件
局部注册
在页面里导入组件然后放到components中就可以使用了
import DiyHeader from "../components/diyHeader.vue"
export default {
name: "App",
components: { DiyHeader },
}