准备工作环境和文件

首先要有Node.js才行，哎呀这俩可是好伙伴呢～可别忘了运行完命令终端看看有没装好捏。OK，接下来就是建Vue项目的时间，轻轻一点，搞定！这个新项目可得用得溜溜滴赶快动工！

安装axios和获取Token

node -v

首先，你得装个AXIOS软件，这样就能跟网易云API打交道。项目文件夹里搞搞就好！用API可得有好使的Token哟。怎么办？快去网上注册个网易云开发者账号，弄个App Key和秘密，这就是我们的通行证了。

vue create music-app

获取热门音乐列表接口信息

cd music-app
npm install axios --save

逛下网易云开发者平台呗，那上面有个”热辣新歌排行榜”的板块儿，直接戳就看得到！啥都有，连咋连都告诉你。学会这个，热门歌曲链接也就手到擒来了！

创建Vue组件实现功能

第一步，在咱的项目里创建一个叫“组件”的文件夹，然后把“音乐列表.vue”塞进里面去。这个小程序主要做啥？就是抓取歌单数据用的！怎么弄？使用axios这个模块，设好data和methods这两个基本参数后，就能轻松地和网易云API搭上线喽！

引入组件到App.vue并运行项目

别急赶紧把新做的MusicList组件加进App.vue文件吧；然后，去命令行输入Vue项目名，记得开浏览器瞧一眼，热榜是不是已经出现了捏？啦啦！太棒了！用Vue.js和网易云API弄个热歌排行就是这么容易！

总结与展望

想要用Vue.js听热门歌吗？超简单的！跟着这个指南走，就像下厨房一样简单！首先装个小插件，了解一下怎么用密钥；然后调用下API接口，找到你最喜欢的那首歌；最后把它展示在Vue组件里。图文并茂，码字清晰易懂，就算是小白也能快速上手~相信学完之后，你会更懂得如何让Vue.js和外头的API打成一片了～

  

    
热门音乐列表
    

      {{ music.name }}
    
  


import axios from 'axios';
export default {
  data() {
    return {
      musics: []
    };
  },
  methods: {
    getMusicList() {
      const url = 'https://api.music.163.com/top/list';
      const params = {
        idx: 1,
        limit: 10,
        format: 'json'
      };
      axios.get(url, {params})
        .then(response => {
          this.musics = response.data.playlist.tracks;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.getMusicList();
  }
};

程序出个小差错也很正常，像是密码失效或读取错误之类的。解决这种问题不是很容易吗？找原因，修复代码或者检查下网络连接，这不就妥妥的了？提升性能和改善用户体验还挺有意思的！

小伙伴们！我就是来告诉大家，赶紧学学Vue.js跟网络API！会了这俩就能开始搞一些小项目了~期待每个人都变成超级厉害的Vue.js开发大神，在前端圈儿里尽情大显身手给力！

  

 
  


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

。