音乐太棒了！每天都离不开它！现在有了手机和网络，找到喜欢的歌曲超容易，还可以随时保存。接下来就教你们用Vue框架和网易云API来做个高效的音乐收藏器小程序，让你更好地整理你最喜欢的曲子哦～

准备工作

首先，你得搞定两件事，把Vue和Vue CLI安装好。这俩哥们在搭建网站时特别给力，做起美观易用的网页来超级方便！

这里我就教给你咋用网易云API。其实挺随便的，你只要上他们网站的开放平台找个表格填好资料，马上你就能拿到一个开他们数据库门的钥匙(API密钥)。这样你就能轻易拿上网易云音乐的所有数据了，事半功倍！

搭建项目

vue create music-collector

建造实战来了！咱们先搭建个 Vue 项目，再在终端操作下架构。接着，别忘了安装所需的依赖，这样项目才能飞速运行起来！

搞定网易云API最给力的就是这个叫做`.env`的神奇文件。把它扔到你的项目中，里面填上网易云音乐的API密钥，立马就能享受音乐世界，是不是超级简单？

cd music-collector
npm install axios

首先，你要做的是把音乐应用搞定！那就得先弄个组件出来咯~在src/components那里新建个名叫“MusicCollector.vue”的文件，然后就可以开始写代码，这个组件不仅可以播放歌儿，还能显示歌曲相关信息！

别担心，如果要给App.vue新打扮怎么办？简单~直接点进你的项目里那个”src/”文件夹，看到那叫“App.vue”的吗？把旧的全换成新的，你的应用马上焕然一新又好用了！

VUE_APP_NETEASE_API_KEY=YOUR_API_KEY

运行应用

搞定了！记住要输个密码才能用得痛快。接着把端口号丢进浏览器地址栏里，就能看到我这儿所有的曲子。这么搞下来，编辑和整理歌曲就跟吃饭喝水似的简单！

结论

  

    
音乐收藏夹
    

      {{ song.name }} - {{ song.artist }}
    
  


import axios from 'axios';
export default {
  data() {
    return {
      songs: [],
    };
  },
  mounted() {
    this.fetchSongs();
  },
  methods: {
    fetchSongs() {
      axios.get('http://musicapi.leanapp.cn/user/playlist', {
        params: {
          uid: 'YOUR_USER_ID',
          csrf_token: '',
        },
      })
      .then(response => {
        this.songs = response.data.playlist.tracks;
      })
      .catch(error => {
        console.error(error);
      });
    },
  },
};


h1 {
  color: #333;
  font-size: 24px;
  text-align: center;
}
div {
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

看这儿！教你如何轻松get音乐神器！Vue+网易云API，轻松自制优质APP，实时更新音乐动态呦~努力点点，让你们随心所欲加点新元素~

大家现在都挺聪明滴，用“随便听”的歌已经不能满足他们！你们是不是特想有个特别牛的音乐盒？那就来聊聊呗，说一说你们心中想要的那个音乐盒应该是啥样子的！同时，我们也可以一起讨论一下智能音乐盒应用软件

  

    
  


import MusicCollector from './components/MusicCollector.vue';
export default {
  name: 'App',
  components: {
    MusicCollector,
  },
};

。