ElementUI之首页导航+左侧菜单

在使用ElementUI构建网站时，通常会涉及到顶部导航栏（Navbar）和左侧菜单栏（Aside）的布局。以下是一个基本的示例，展示了如何使用ElementUI的组件来创建这样的布局。

<template>
  <el-container style="height: 100vh;">
    <el-header>
      <!-- 顶部导航栏 -->
      <el-menu :router="true" mode="horizontal">
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>
        <!-- 更多导航项 -->
      </el-menu>
    </el-header>
    
    <el-container>
      <!-- 左侧菜单栏 -->
      <el-aside width="200px">
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-menu-item index="1" @click="$router.push('/dashboard')">
            <i class="el-icon-s-home"></i>
            <span slot="title">控制面板</span>
          </el-menu-item>
          <el-menu-item index="2" @click="$router.push('/users')">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <!-- 更多菜单项 -->
        </el-menu>
      </el-aside>
      
      <!-- 主要内容区 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
 
<script>
export default {
  name: 'App',
  // 组件逻辑...
};
</script>
 
<style>
/* 自定义样式 */
</style>

在这个例子中，我们使用了<el-container>组件来构建页面的布局。顶部通过<el-header>组件加入了一个水平导航栏，使用<el-menu>组件来创建菜单项。左侧使用<el-aside>组件来放置一个垂直菜单栏，同样使用<el-menu>组件。主要内容区通过<el-main>组件展示。

请确保你已经安装了ElementUI依赖，并在你的Vue项目中正确引入。

npm install element-ui --save

在你的main.js或相应的入口文件中：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

这样就可以在你的Vue组件中使用ElementUI的所有组件了。