Vue2.x仿网易云音乐项目问题记录（1）

近期在做仿网易云音乐的项目，api用到GitHub上
NeteaseCloudMusicApi项目。
技术栈：Vue2.x，elementUI，Vuex，Vue Router
其中遇到部分问题特记录下：

1.elementUI中修改样式问题

如果想要修改elementUI，可以使用全局css。并在main.js中import。这样自定义的样式会作用的到对应的组件上例如

/* 自定义menu样式 */
.el-menu-item {
    height: 40px;
    line-height: 40px;
    margin-bottom: 3px;
}

.el-menu-item.is-active {
    color: #313131;
    background-color: #f6f6f7;
    font-weight: bold;
    font-size: 15px;
}

特别注意，class的名字一定要与elementUI的组件名一致，具体原因看下组件源码样式class就是组件名称。如果不想全局引用。可以在vue文件中，添加/deep/：

/deep/
.el-menu-item {
    height: 40px;
    line-height: 40px;
    margin-bottom: 3px;
}
/deep/
.el-menu-item.is-active {
    color: #313131;
    background-color: #f6f6f7;
    font-weight: bold;
    font-size: 15px;
}

这样就可以在vue文件更改对应样式。

2.基础布局问题使用position：absolute

absolute和relative的区别
absoleute绝对定位的意思是说，它的定位不受父元素中其他元素的影响
relative相对定位，就是会受到父元素中其他元素影响
其中又left，right，top，bottom等控制元素所在位置。
对于absolute状况下：
left是，子控件，距离包含他的父控件的左侧的位置多少。类似padding-left。
right，top，bottom同上
其中，如果想做动态的布局，元素块随着窗口的大小改变而改变，可以这样用。
不设置width，设置父，子块元素的left，right，top， bottom即可。如果父级设置，子元素也要设置，不然对应效果不会显示的。

.main {
  position: absolute;
  width: auto;
  height: auto;
  bottom: 80px;
  top: 60px;
  left: 0;
  right: 0;
}

/* 位置absolute，搭配bottom可以标注，此元素 位置固定，
left，right，top，bottom因该都是距离父容器左右，上下多少px
对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。
对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。 */
.aside {
  position: absolute;
  width: 200px;
  height: 100%;
  left: 0;
  bottom: 0;
}

.main-right {
  left: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto;
  height: 100%;

  .view-main {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
  }

}

具体效果自行脑补。

3.js使用if语句判断数据类型或值是否相等时候，一定注意数据类行时候相同！是否需要强制转换！

ps：
会不定期的更新vue项目开发中遇到的部分坑吧。