elemenetui 布局_2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）主页布局开发-Go语言中文社区...

1、引言

寒假是用来反超的！一起来学习Vue把，这篇博客是关于项目主页布局，请多指教~

2、整体布局

3 、主页

3.1 实现基本的主页布局

3.2 美化主页的header区域

3.3 实现导航菜单的基本结构

左侧菜单布局

菜单分为二级，并且可以折叠。

一级菜单

二级菜单

3.4 通过axios拦截器添加token验证

需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌

通过 axios 请求拦截器添加 token，保证拥有获取数据的权限。

// axios请求拦截 axios.interceptors.request.use(config => {

// 为请求头对象，添加 Token 验证的 Authorization 字段

config.headers.Authorization = window.sessionStorage.getItem('token')

return config

})

因为测试的是登录 Authorization 所以返回null 如果是登录之后，调用其他接口就会有一个token值了

3.5 获取左侧菜单数据

3.6 通过双层for循环渲染左侧菜单

3.7 对左侧菜单栏设置字体颜色并添加分类图标

3.8 解决每次只能打开一个菜单项和边框问题

这里边框问题没有对齐，需要解决

解决办法：

通过检察元素，发现是一个el-menu样式里有一个border-right值不为0 我们将它重置为none就可以解决问题了

3.9 实现侧边栏的折叠和展开效果

3.10 实现首页路由的重定向

3.11 实现侧边栏路由链接的改造

4、主页布局

5、结束语

至此，我们的主页布局就完成了

Vue全家桶开发电商管理系统码云地址，欢迎一起来学习~

https://gitee.com/Chocolate666/vue_shop

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

学如逆水行舟，不进则退

elemenetui 布局_2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）主页布局开发-Go语言中文社区...相关推荐

2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）商品分类篇
文章目录 1.引言 2.商品分类篇 2.1 通过路由加载商品分类组件 2. 2 绘制商品分类组件的基本页面布局 2.3 调用API获取商品分类列表数据 2.4 初步使用vue-table-with-t ...
前端开发Vue项目实战：电商后台管理系统（二）-- 登录退出功能 --主页界面
目录 1. 登录/退出功能 1.1 登录概述 1.2 token 原理分析 1.3 登录功能实现 1.3.1 Git 创建分支 1.3.2 渲染Login组件并实现路由重定向 1.3.3 设置背景颜色 ...
前端开发Vue项目实战：电商后台管理系统（一）前后端搭建
目录 1. 项目概述 2. 前端项目初始化步骤 3. 后台项目的环境安装配置下载安装phpStudy,添加数据库 Postman测试工具验证 1. 项目概述电商项目基本业务概述: 根据不同的应用 ...
前端开发Vue项目实战：电商后台管理系统（八）------ 订单管理模块
git checkout -b order git push -u origin order 目录 1. 挂载组件及基本布局 2. 获取订单数据 3. 表格渲染 4. 分页功能 5. 实现省市区县数据 ...
SAP 电商云 Spartacus UI 页面布局的设计原理
Spartacus 每个 UI 划分成不同的区域 section,每个区域由若干个 slots 组成.每个 slot 可以包含一个或多个 CMS Component. 我曾经写过一篇文章详细介绍过 ...
零基础编程入门python视频-Python编程零基础小白快速入门完整全系列精品课
1. 课程咨询加老师助理微信:助理1微信: chenjinglei88 ,助理2微信: omf6757 2. 决定购买并想得到陈敬雷老师亲自指导(课程或自己项目难题均可)加老师微信: chenjing ...
Android零基础入门第31节：几乎不用但要了解的AbsoluteLayout绝对布局
原文:Android零基础入门第31节:几乎不用但要了解的AbsoluteLayout绝对布局前面几期基本学习了Android开发中常用的四种布局,之所以把AbsoluteLayout放在后面来学习 ...
想成为淘宝美工需要学什么？零基础怎么快速入门？
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享想成为淘宝美工需要学什么?零基础怎么快速入门?最近就有不少小伙伴私信小编,大多是问淘宝美工需要掌握哪些知识?新手要如 ...
零基础，快速安装dedeCMS 搭建网站 - 总结大全
零基础,快速安装dedeCMS 搭建网站 - 总结大全 dedeCMS,又称为织梦CMS 快速安装dedeCMS官方模板,极速搭建内容管理网站,零基础也能分分钟搞定. 安装流程: 准备工作: 下载wa ...

elemenetui 布局_2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）主页布局开发-Go语言中文社区...

elemenetui 布局_2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）主页布局开发-Go语言中文社区...相关推荐

最新文章

热门文章