.el-menu-vertical-demo:not(.el-menu--collapse) {

Vue3第十一篇:后台管理系统-菜单、头部导航、Tab

1.新建菜单组件NavMenu.vue,从element-plus官网复制一个菜单模板如下:

Vue3第十一篇:后台管理系统-菜单、头部导航、Tab

?






2.新建导航组件NavHeader.vue,从element-plus官网复制一份模板如下:

Vue3第十一篇:后台管理系统-菜单、头部导航、Tab






?3.新建Tab组件NavTab.vue,从vue.draggable的github上复制了一份模板,改造成setup语法糖版本,文档连接如下:vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。Vue3第十一篇:后台管理系统-菜单、头部导航、Tabhttps://www.itxst.com/vue-draggable/tutorial.html

GitHub - SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.jsVue drag-and-drop component based on Sortable.js. Contribute to SortableJS/Vue.Draggable development by creating an account on GitHub.Vue3第十一篇:后台管理系统-菜单、头部导航、Tabhttps://github.com/SortableJS/Vue.Draggable?


  

  

4.views文件夹下新建home文件夹,再新建一个Home.vue组件,内容如下:





5.将各个功能组件,放到布局组件中:修改LayoutMain.vue如下:


 

 

6.预览,开始有点样子了

Vue3第十一篇:后台管理系统-菜单、头部导航、Tab

?

上一篇:SpringMvc请求
下一篇:銆婁粠闆跺紑濮嬪仛鎶栭煶銆?绋嬬劧