Vue3组件（SFC）拼接页面

编辑Head.vue

编辑Navigator.vue

编辑content.vue

<script setup>

</script>

<template>

<div>
    
    欢迎：xxx <a href="#">退出登录</a>
    
    
</div>

</template>

<style scoped>

</style>

<script setup>
</script>
<template>
<div>
    <ul>
        <li>学院管理</li>
        <li>图书管理</li>
        <li>请假管理</li>
        <li>考试管理</li>
        <li>班级管理</li>
        <li>教师管理</li>
    </ul>
</div>

</template>

<style scoped>

</style>

<script setup>

</script>

<template>

<div>
    这里是主要内容
</div>
</template>

<style scoped>

</style>

App.vue中引入这三个组件

<script setup>
import Header from './components/Head.vue'
import Navigator from './components/Navigator.vue'
import Content from './components/content.vue'
</script>
<template>
<div>
<Header id="header"></Header>
<Navigator class="navigator"></Navigator>
<Content id="content"></Content>
</div>
</template>
<style scoped>
    #header{
        height: 80px;
        border: 1px solid red;
    }
    .navigator{
        width: 15%;
        height: 800px;
        border: 1px solid green;
        float: left;
    }
    #content{
        width: 83%;
        height: 800px;
        border: 1px solid blue;
        float: right;
    }
</style>