注释很详细，直接上代码

上一篇

新增内容
scoped解决样式冲突的用法

源码

MyHeader.vue

<!-- 用于测试全局注册组件 -->
<template><div id="myHeader"><h1>又可以愉快的学习啦</h1></div>
</template><script>javascript">export default {}
</script>
<!-- 我们可以发现加上scoped属性，组件的样式是独立出来的而不会影响其他组件具体原因是vue会给组件添加一个唯一的属性，并且在该组件的所有样式中标注，这样就可以避免样式污染 -->
<style lang="less" scoped>
h1{color: blue;
}
</style>

MyMain.vue

<!-- 用于测试局部注册组件 -->
<template><div id="mymain"><h1>啊对对对</h1></div>
</template><script>javascript">export default {}
</script>
<style lang="less" scoped>
h1{color: red;
}
</style>

App.vue

<template><div id="app"><MyHeader></MyHeader><MyMain></MyMain></div>
</template><script>javascript">
// 导入局部注册组件
import MyMain from './components/MyMain.vue';export default {name: 'App',components: {//注册局部注册组件MyMain:MyMain,}
}
</script>
<style>
*{margin: 0;padding: 0;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false//全局导入组件
import MyHeader from './components/MyHeader.vue'//全局注册组件
Vue.component('MyHeader',MyHeader)new Vue({render: h => h(App),
}).$mount('#app')

效果演示