快速上手Vue：如何透過網易雲API取得音樂專輯列表

快速上手Vue：如何透過網易雲API取得音樂專輯清單

引言：
Vue作為一種流行的JavaScript框架，已經被廣泛應用於前端開發中，它的易用性和靈活性使得開發者可以快速建立各種互動性的網頁應用程式。本文將介紹如何使用Vue框架來透過網易雲API取得音樂專輯列表，以便開發一個簡單的音樂播放器應用程式。

步驟一：建立Vue專案
首先，在命令列中執行以下命令來建立一個新的Vue專案：

vue create music-player

然後，在專案根目錄下安裝axios和jsonp模組，用於發起HTTP請求：

cd music-player
npm install axios jsonp --save

步驟二：取得網易雲API授權
在使用網易云API之前，我們需要先取得授權。造訪網易雲開發者平台（https://neteasecloudmusicapi.vercel.app/），點擊右上角的「立即使用」按鈕，然後在新彈出的視窗中點擊「手機登入」按鈕，使用手機號碼和驗證碼進行登入.

登入成功後，點選左側選單的“產生token”，然後複製產生的token值，該token將用於後續API請求的授權。

步驟三：建立Vue元件
在src目錄下建立一個名為AlbumList.vue的文件，用於顯示音樂專輯清單。在該檔案中，我們要引入axios和jsonp模組，並定義一個albums陣列來保存專輯資料。具體程式碼如下所示：

<template>
  <div>
    <ul>
      <li v-for="album in albums" :key="album.id">{{ album.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import jsonp from 'jsonp';

export default {
  data() {
    return {
      albums: [],
    };
  },
  mounted() {
    this.getAlbums();
  },
  methods: {
    getAlbums() {
      const url = 'https://neteasecloudmusicapi.vercel.app/album/newest';

      axios.get(url).then((response) => {
        this.albums = response.data.albums;
      });
    },
  },
};
</script>

<style>
</style>

步驟四：在App.vue中引入AlbumList元件
開啟App.vue文件，在