9.后台管理系统主页面布局以及左侧导航栏设计

9.后台管理系统主页面布局以及左侧导航栏设计

1.首页布局

步骤:
views目录下新建Main.vue文件,作为登录之后的布局
参考:element-ui
9.后台管理系统主页面布局以及左侧导航栏设计_第1张图片
使用此模块的目的是,当中间内容部分有超出时,可以固定左侧以及头部不动,中间内容进行滚动

  • 代码






  • 效果

9.后台管理系统主页面布局以及左侧导航栏设计_第2张图片

2.导航栏的制作

  • components目录下新建common目录,在该目录下新建CommonAside.vue组件

内容为:







在views目录下的Main.vue 中导入组件
代码如下







3.效果图

9.后台管理系统主页面布局以及左侧导航栏设计_第3张图片

你可能感兴趣的:(前端)