10：vue3 组件注册方式（全局注册和局部注册）

 1 import { createApp } from 'vue'
 2 import App from './App.vue'
 3 
 4 import Header from './pages/Header.vue'
 5 
 6 const app=createApp(App)
 7 
 8 //在这中间写全局组件的注册
 9 app.component("Header",Header)
10 
11 app.mount('#app')

 1 <template>
 2 
 3 <!-- 第三步：显示组件 -->
 4 <!-- <Header></Header> -->
 5 <!-- 使用通过main.js的全局组件注册，显示组件 -->
 6 <Header></Header>
 7 <Main></Main>
 8 <Aside></Aside>
 9 </template>
10 
11 <script>
12 //第一步：引入组件
13 //局部注册方式
14 // import Header from "./pages/Header.vue";
15 import Main from "./pages/Main.vue";
16 import Aside from "./pages/Aside.vue";
17 
18 //第二步：注入组件
19 export default{
20   components:{
21     //局部注册方式
22     // Header,
23     Main,
24     Aside
25   }
26 }
27 
28 </script>

 1 <template>
 2 <!-- 第三步：显示组件 -->
 3 <Header></Header>
 4 </template>
 5 
 6 <script>
 7 //第一步：引入组件
 8 import Header from "./pages/Header.vue";
 9 
10 //第二步：注入组件
11 export default{
12   components:{
13     Header
14   }
15 }
16 </script>