来，咱们先在Vue里搭建个音乐排行榜，再用上Axios（可以发HTTP请求的那货）。别忘了去网易云音乐弄个开发者账户，有了那把关键的API钥匙，你们就可以安心探索音乐天地！

搞定钥匙，开工！做个”音乐类别”的Vue组件来展示音乐栏目。这个组件需要有个数据属性存储所有分类列表，还要能从网易云API获取数据。

创建Vue组件：让音乐分类动起来

搞完了“音乐分类”，咱们来真的！记得先把网易云API的类别数据存到叫’stuctures’的地方。接下来，我们要做个叫做’getMusicCategories’的函数，用axios去抓取/playlist/catlist这个API，记得带好钥匙！

npm install axios

搞定数据了记住给每个类别加个小注解，一眼就知道是啥玩意儿。装好各种组件后，别忘记调用’getMusicCategories’这个接口来获取默认分类列表！

使用组件：把音乐分类列表带到你的应用里

搞定小部件后，咱们就可以丢到Vueapp里去。找到”App.vue“这种文件，直接把”音乐分类”这个小部件插进去，想放哪儿就往哪儿贴，soeasy！以后添歌可方便多喽！

  

    

      
{{ category.name }}
    
  


import axios from 'axios';
export default {
  data() {
    return {
      categories: []
    };
  },
  mounted() {
    this.getMusicCategories();
  },
  methods: {
    getMusicCategories() {
      const apiUrl = '网易云API的地址/playlist/catlist';
      const apiKey = '您的API访问密钥';
      axios.get(apiUrl, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': apiKey
        }
      })
        .then(response => {
          this.categories = response.data.categories;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};

运行应用：看看你的成果

搞定了！可以试试看跑你的Vue项目。简单地输入”npmrunserve”这条指令，就能让电脑自己动起来了，不过记得端口号是3000哟。然后打开你的浏览器，输入localhost:3000，看看你从网易云API得到的那份分类数据创建出的”音乐分类列表”页面。

调试与优化：让音乐分类列表更完美

咱们刚才更新了音乐分类表哈~记得常来看！但是，其实这有个小问题，你有没有想过该怎么载入这些数据？万一出了错怎么办？为了让大家用得顺手些，我建议给这个部件加个loading和error的状态，这样就能知道数据是在下载中还是出毛病了。你们用的时候应该会更加舒心快乐的！

扩展功能：让音乐分类列表更有趣

  

    
音乐分类列表
    
  


import MusicCategory from './components/MusicCategory.vue';
export default {
  components: {
    MusicCategory
  }
};

不仅仅是动感的音乐分类，我们还提供了超强大的搜歌神器和个性化推荐服务！搜歌神器让你简单几下就能找到喜欢的歌曲；接着看那些摇滚范儿满满的推荐，大数据帮你发掘更多音乐宝藏，酷不酷？很多人都已经跃跃欲试！

总结与展望：音乐分类列表的未来

哎呦，最近网易云APP新出的歌单分类真的不错！用Vue做出来的，感觉炫酷到爆！而且每周都会更新，每首歌都好有意思。好评度也很高！今后我们还要继续努力，加点实用又高大上的功能。分类歌单，让大家用了就离不开才对！

npm run serve

来聊聊天！如果我们能给音乐排行榜加点新鲜玩意儿，岂不是更有趣？快点儿在下面评论区说说你的点子，顺便帮我点个赞哈。