发现空白边距，直接在浏览器调整，
调整为0之后
main.js和App.vue的作用：
css属性名称涉及到两个单词的，中间就是横杠
一般图标数据或者其他数据显示不出来，就是没加冒号绑定，data中的数据传不到页面中
computed和method都是：{}的书写形式，couputed对现有的数据进行计算然后返回，实际上也是函数，两者可以统一书写形式，方便记忆
el-menu中的index不是没有作用的，组件内部会根据index的值知道你鼠标点击了哪一行菜单
对于dom的理解
&& !(this.$route.path == '/home' && item.path == '/')
首先我们这个函数是为了解决相同路由跳转问题：如果/home跳转到/home，这就会导致报错
加入点击路由跳转函数时候，当前页面是home，目标页面是/, 点击跳转就会重定向到home,实际上还是同样页面跳转到同样页面，这就会导致相同页面跳转问题
需要取非排除掉，&& 加上！就是排除这种情况
以下是样式部分学习：
两个菜单有两个对应代码但是自定义颜色部分加了这几行，就有了背景
分别是背景颜色，文本颜色，点击选中文本展示的颜色
侧边栏没有占满整个页面部分 ，需要调整高度（使用less可以进行嵌套，不需要大费周章的获取某一个class）
el-menu设置行高为100vh
可以看到左侧和上方都有一部分边距空白，这是html，body默认样式，需要在app。vue中清除，加了.html,body{margin:0}之后样式就变为
可以看到字体没有居中，使用less样式
，效果为
header左右不分都有边距，网页查看元素的到
，有padding，这个padding的意思是上下padding为0，左右边距为20px，那么搜索可以得到el-header在main。app中。可以设置paddin
，得到
flex可以让元素垂直居中（align-items），水平方向显示在两侧就用justify-content：sapce-around
元素顶在最左边不好看，可以往中间挪动一下，这就可以设置padding：0 20px 这就是上下没有padding 左右都有20px，实际效果如图，往中间靠了靠
这个效果是个下拉框，用一个图片代替下拉的i标签，i标签定义文本