如何利用Vue和网易云API开发一款个性化音乐

如何利用Vue和网易云API开发一款个性化音乐app插件，下面编程教程网小编给大家简单介绍一下具体实现方法！

1、安装脚手架

vue create music-app

2、引入网易云API封装api.js

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.netease.com',
  headers: {
 'Content-Type': 'application/json',
  },
});
 
export default apiClient;

3、实现音乐推荐功能

<template>
  <div>
 <h1>音乐推荐</h1>
 <ul>
   <li v-for="song in songs" :key="song.id">
     {{ song.name }} - {{ song.artist }}
   </li>
 </ul>
  </div>
</template>

<script>
import apiClient from './api';

export default {
  data() {
 return {
   songs: [],
 };
  },
  mounted() {
 this.getRecommendations();
  },
  methods: {
 async getRecommendations() {
   try {
     const response = await apiClient.get('/recommendations');
     this.songs = response.data;
   } catch (error) {
     console.error(error);
   }
 },
  },
};
</script>