Vue前端项目-主页布局-左侧导航菜单（静态）

目录

1、修改侧边栏组件

2、滚动条样式

3、导入并使用组件

---

实现效果：

NavMenu 的详细用法：

https://element.eleme.cn/#/zh-CN/component/menu

1、修改侧边栏组件

为侧边栏组件，添加导航菜单

侧边栏组件： src / layout / components / Sidebar / index.vue 

2、滚动条样式

在上一步我们已经使用了滚动条样式，

 接下来我们将 定义滚动条样式

在 src / assets / styles / sidebar.scss 中新增滚动条样式

位置在 .sidebar-container 里边定义

    .scrollbar-wrapper {
      height: 100%;
      overflow-x: hidden !important;
    }

3、导入并使用组件

import { Scrollbar, Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui'

Vue.use(Scrollbar)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)