vue3设置左侧菜单和头部

在Vue 3中，可以使用组合式API（Composition API）来创建左侧菜单和头部。以下是一个简单的示例：

<template>
  <div class="app-container">
    <div class="side-menu">
      <!-- 左侧菜单内容 -->
    </div>
    <div class="main-content">
      <!-- 主要内容 -->
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    // 头部数据和方法
    const headerData = ref({
      title: '应用标题',
      userInfo: {
        name: '用户名',
        avatar: '用户头像'
      }
    });
 
    // 左侧菜单数据和方法
    const menuData = ref([
      { title: '菜单项1', icon: 'icon1' },
      { title: '菜单项2', icon: 'icon2' }
    ]);
 
    return {
      headerData,
      menuData
    };
  }
};
</script>
 
<style>
.app-container {
  display: flex;
}
 
.side-menu {
  width: 200px; /* 左侧菜单宽度 */
  background-color: #30445e;
}
 
.main-content {
  flex-grow: 1;
  padding: 20px;
}
</style>

在这个例子中，我们定义了一个带有头部和左侧菜单的容器，并通过setup函数中的ref来管理它们的响应式状态。左侧菜单和头部可以根据menuData和headerData的内容进行渲染，并可以包含相关的逻辑（如菜单项点击事件处理）。样式部分定义了基本的布局和颜色，可以根据实际需求进行调整。