vue左侧导航栏用什么组件

在Vue.js中，左侧导航栏通常使用Element UI或Vuetify这些流行的UI组件库提供的导航组件来实现。1、Element UI 提供了 el-menu 组件，而 2、Vuetify 提供了 v-navigation-drawer 组件。这些组件不仅易于使用，还提供丰富的功能和样式选项，帮助开发者快速构建美观且功能强大的导航栏。

一、ELEMENT UI 的 el-menu 组件

Element UI 是一个基于 Vue 2.0 的桌面端组件库，提供了丰富的组件，包括导航栏组件 el-menu。以下是使用 el-menu 组件构建左侧导航栏的详细步骤：

安装 Element UI:
```
npm install element-ui
```

引入 Element UI:

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

使用 el-menu 组件:

<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical-demo"
    mode="vertical"
    @select="handleSelect"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template slot="title">导航一</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">导航二</el-menu-item>
  </el-menu>
</template>
<script>
export default {
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

样式自定义:

可以通过覆盖默认样式或使用内联样式来自定义导航栏的样式。

.el-menu-vertical-demo {
  width: 200px;
  min-height: 100vh;
  background-color: #333;
  color: #fff;
}

二、VUETIFY 的 v-navigation-drawer 组件

Vuetify 是一个基于 Material Design 风格的 Vue.js UI 库，提供了 v-navigation-drawer 组件用于创建导航抽屉。以下是使用 v-navigation-drawer 组件构建左侧导航栏的详细步骤：

安装 Vuetify:
```
npm install vuetify
```

引入 Vuetify:

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
const opts = {};
export default new Vuetify(opts);

使用 v-navigation-drawer 组件:

<template>
  <v-app>
    <v-navigation-drawer app>
      <v-list>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="title">首页</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-group>
          <template v-slot:activator>
            <v-list-item-title>导航一</v-list-item-title>
          </template>
          <v-list-item v-for="item in items" :key="item.title">
            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>
    <v-main>
      <v-container>
        <v-btn @click="drawer = !drawer">Toggle Drawer</v-btn>
      </v-container>
    </v-main>
  </v-app>
</template>
<script>
export default {
  data() {
    return {
      drawer: false,
      items: [
        { title: '选项1' },
        { title: '选项2' }
      ]
    }
  }
}
</script>

样式自定义:

可以通过覆盖 Vuetify 的样式类或自定义 CSS 来调整导航栏的外观。
```
.v-navigation-drawer {
  background-color: #333;
  color: #fff;
}
```

三、对比与选择

为了帮助开发者更好地选择适合的组件库，这里对 Element UI 和 Vuetify 的导航栏组件进行对比：

特性	Element UI (`el-menu`)	Vuetify (`v-navigation-drawer`)
安装与使用	简单，适合快速上手	复杂，适合大型项目
默认样式	简洁，适合企业级应用	丰富，符合 Material Design 风格
自定义难度	较低，容易覆盖默认样式	较高，需要了解 Material Design 规范
社区支持	活跃，有大量现成解决方案	活跃，拥有丰富的文档和示例

四、实例与应用

为了更具体地展示如何在项目中应用这些组件，以下是两个实际项目的案例：

Element UI 项目实例:

在一个企业内部管理系统中，使用 el-menu 组件构建导航栏，方便用户在多个模块之间快速切换。通过自定义样式，使导航栏与整体 UI 风格保持一致。

<el-menu
  default-active="dashboard"
  class="el-menu-vertical-demo"
  mode="vertical"
  @select="handleSelect"
>
  <el-menu-item index="dashboard">仪表盘</el-menu-item>
  <el-submenu index="settings">
    <template slot="title">设置</template>
    <el-menu-item index="profile">个人设置</el-menu-item>
    <el-menu-item index="security">安全设置</el-menu-item>
  </el-submenu>
  <el-menu-item index="help">帮助</el-menu-item>
</el-menu>

Vuetify 项目实例:

在一个电商平台管理后台中，使用 v-navigation-drawer 组件构建导航栏，利用 Vuetify 提供的丰富组件，实现功能齐全且美观的界面。

<v-navigation-drawer app>
  <v-list>
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title class="title">首页</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
    <v-list-group>
      <template v-slot:activator>
        <v-list-item-title>产品管理</v-list-item-title>
      </template>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title>添加产品</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title>产品列表</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list-group>
  </v-list>
</v-navigation-drawer>

五、总结与建议

在选择 Vue.js 左侧导航栏组件时，Element UI 和 Vuetify 都是优秀的选择。Element UI 适合需要快速上手、简洁风格的项目，尤其是企业内部系统。而 Vuetify 则适合大型项目和需要符合 Material Design 风格的应用。

建议开发者根据项目需求和团队熟悉的技术栈进行选择。同时，结合实际开发中遇到的问题和需求，不断调整和优化导航栏的实现，以提供最佳的用户体验。