黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统主页制作

黑马程序员视频_主页制作

目录

一.主页布局

1.整体布局：先上下划分，再左右划分

 2.主页header布局

 3.左侧菜单布局：菜单分为两级，并且可以折叠

二. 通过接口获取菜单数据

1.请求预处理

 2.发起请求获取左侧菜单数据

 3.左侧菜单UI绘制，通过双层for循环渲染绘制左侧菜单

 4.实现左侧菜单的折叠和展开功能

三.Welcome组件

1.创建Weclome组件

2.左侧菜单改造为路由链接

一.主页布局

1.整体布局：先上下划分，再左右划分

element组件

 在Home.vue中添加组件

在plugins/element.js中导入用到的组件，并且使用Vue,use（）将它们变成全局可用的组件

运行效果：

 2.主页header布局

 

 3.左侧菜单布局：菜单分为两级，并且可以折叠

导航菜单组件

 

 

梳理代码

 在plugins/element.js中按需导入组件,并注册

效果图

 将侧边栏背景颜色改一下

 

 效果：

 代码梳理：

梳理之前：

只需要一级和二级的项，其他不需要的删掉

梳理之后：