Vue3 在主页中加入其它模板页template

模板页

在components目录下 新建 HeaderComponent.vue 文件

 HeaderComponent.vue 

<template>
        <div >
              元素  
        </div>
</template>

<script>
export default {
  // 组件名称
  name: 'HeaderComponent'
}
</script>

<style scoped>
/* 在这里添加组件的样式 */
</style>      

主页引用

html 引入

<header-component> </header-component>

<script>
    /* 引入头部 */
    import HeaderComponent from '@/components/HeaderComponent.vue'

  export default {
    name: 'MainIndex',
    components: {
        HeaderComponent
    },
    props: {
        msg: String
    },
.....

重点是这两句