vue+element-ui实现后台管理可伸缩导航栏布局

先看一下效果吧

这个是伸

vue+element-ui实现后台管理可伸缩导航栏布局_第1张图片

 这个是缩

vue+element-ui实现后台管理可伸缩导航栏布局_第2张图片

要想实现效果,当然首先是搭建项目啦

搭建vue脚手架

首先是我的页面结构

vue+element-ui实现后台管理可伸缩导航栏布局_第3张图片

Content.vue是我的右侧内容布局

Mymenu.vue是我的左侧导航布局

zongNav.vue则是整合Content.vue和Mymenu.vue组件

Mymenu.vue(左侧导航)





index是自己在router.js中配的路径哦

Content.vue(右侧内容)





zongNav.vue(整合组件)





在整合组件的时候用到了less,如果这方面出错了,可以放弃这种写法,用原生css也可,

如果你非要用less预处理那可以参考一下我这篇解决我引用less遇到问题文章

解决less引入错误

然后即可实现效果!!!

 

 

你可能感兴趣的:(vue,element-ui,elementui,前端,vue)