Vue+网易云API：搭建音乐天堂，让歌单焕发新生

咱聊聊怎么用Vue和网易云的API来疯玩更新的歌曲分类！谁让音乐就是我们生活的快乐圣水？没了它，日子还有啥劲儿。

概念解析

Vue和网易云API到底是啥东东？听我慢慢告诉你。首先说说Vue，这是个牛逼的JavaScript框架，可以把网页变漂亮。使用这个框架，就像给网页换新衣裳。再来说说网易云API，这玩意儿就是打开网易云音乐的钥匙，可以获取很多歌单和其他有用的数据。

搭建开发环境

学 Vue 之前，得先弄清楚 Node.js 和 npm。然后就可以下载 Vue 的npm包了。别着急慢慢来，你肯定行的！

“`

npm install -g @vue/cli

搞定这些命令之后，记得点击那个新建Vue项目的按钮

vue create music-app

然后进入项目目录，启动开发服务器：

cd music-app
npm run serve

这样就算是把Vue的环境给搭起来了。

创建音乐分类列表组件

少废话，快点搞定正经事！就在src文件夹里建一个叫components的新文件夹，然后把MusicCategoryList.vue放进去。这么一装扮，你那个老套的音乐分类就变得潮爆！

  

    

      
{{ category.name }}
    
  


export default {
  data() {
    return {
      categories: []
    };
  },
  mounted() {
    this.fetchCategories();
  },
  methods: {
    fetchCategories() {
      // 使用网易云API获取音乐分类列表
      fetch('https://netease-api.music.glaciergears.com/playlist/categories')
        .then(response => response.json())
        .then(data => {
          this.categories = data.categories;
        });
    }
  }
};


.music-category-list {
  /* 样式 */
}

首先得让category数组跟模板的信息对上号，这就是我们经常讲的“绑定”！接下来，得用mounted这个方法来叫出fetch函数，然后拉取歌单列表的数据，别忘了把这些东西丢进category数组。这么搞好了，以后每次打开这个组件都会有新鲜的音乐类别~

添加组件到App.vue

哈喽，在App.vue里记得加个”音乐分类列表”的部分！直接转到src/App.vue然后操作完事儿就行~

搞定！赶紧去，在我们主文件main.js（里面有源码呢）里找App.vue这东西，直接扔到网页上去就得了。

搞定！用Vue和网易云接口，轻松做出了个音乐分类列表，而且还能马上更新~

  

    
  


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


/* 样式 */

总结

赶紧搞定一个音乐分类列表的小程序，安好以后，用 fetch 函数读取数据并绑定在组件上。这样的话，只要连上网，音乐类别就能随时更新~

import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount('#app');