Layout 布局文件

1.先创建一个Layout文件夹
    有Sidebar、CloudHeader还有footer
2.使用element-ui插件来做侧边菜单栏(Sidebar)
    功能：
        1.点击选中的背景需要高亮
            遇到的问题：
                在使用NavMenu 导航菜单时，用v-for去遍历出侧边菜单栏的菜单选项，因为默认被点击的属性：default-active = index 是根据index来实现的，并且要实现点击就让当前的li高亮，而其他的去除高亮，通过v-for的id就可以得出当前所点击的是哪个选项，:index="id.toString()"，由于v-for给出的id是数字，但是default-active要的是字符串，所以需要调用toString()
        2.点击之后需要进行路由跳转
            使用vue的内置组件
                currentTabComponent: 已注册组件的名字，或 一个组件的选项对象
                <component :is="currentTabComponent"></component>

使用less自定义变量

• 需要安装的npm npm install less less-loader --sav-dev npm i style-resources-loader --save npm i vue-cli-plugin-style-resources-loader --save
• 在vue.config.js配置less

      const path = require('path');
      module.exports = {
          pluginOptions:{
              'style-resources-loader':{
                  preProcessor:'less',
                  patterns:[
                  // 全局变量路径
                      path.resolve(__dirname,'./src/assets/css/base.less')
                  ]
              }
          }
      }
  

discover 组件

1.使用vuex来存储组件状态，使用模块化开发，如果使用了namespaced命名空间，则需要在方法之前加上模块名称
    this.$store.dispatch('discover/getInfo')

2.子组件
    Recommend,Customize,MusicList,Rank,Singer,NewMusic

滚动到顶部

滚动的盒子必须有个固定的高度，其子元素超出它，且滚动盒子设有 overflow-y:scroll; 否则会出现scrollTop=0的情况
注：一般只要能显示出scrollTop的值都是可以滚动的

图片懒加载

什么是懒加载？
    当需要图片的时候再去加载
    好处：减少服务器的压力，在网速比较慢的情况下，可以提前给张图片添加一个占位图片，提高用户的体验

安装：
    npm install vue-lazyload --save

全局引入和注册
    引入插件
        import VueLazyload from 'vue-lazyload'
    
    注册插件
        Vue.use(VueLazyload,{
            loading:'' // 懒加载默认图片
        })

​

当前页面跳转至当前页面，页面不刷新新

1.在显示该路由出口的文件下，来控制路由的显示
    <router-view v-if="showRouter"></router-view>
2.通过[provide,inject]来实现,在父组件中定义：
    ```
provide() {
return {
  reload: this.reload,
    };
},
methods: {
    reload() {
    this.showRouter = false;
    this.$nextTick(() => {
    this.showRouter = true;
    });
},
},
    ```
3.在需要刷新的组件中，引入``inject:['reload']``，然后在你需要刷新的时候，调用``this.reload()``即可

块级元素

当设置display为inline-block之后，默认对齐方式为vertical-align:baseline;设置为vertical-align:top即可