1.新建菜单组件NavMenu.vue,从element-plus官网复制一个菜单模板如下:
?
expand
collapse
Navigator One
Group One
item one
item two
item three
item four
item one
Navigator Two
Navigator Three
Navigator Four
2.新建导航组件NavHeader.vue,从element-plus官网复制一份模板如下:
LOGO
Processing Center
Workspace
item one
item two
item three
item four
item one
item two
item three
?3.新建Tab组件NavTab.vue,从vue.draggable的github上复制了一份模板,改造成setup语法糖版本,文档连接如下:vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。https://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.https://github.com/SortableJS/Vue.Draggable?
{{ element }}
4.views文件夹下新建home文件夹,再新建一个Home.vue组件,内容如下:
欢迎回来!
5.将各个功能组件,放到布局组件中:修改LayoutMain.vue如下:
6.预览,开始有点样子了
?