用vue做一个音乐app

Vue.js是一个构建用户界面的渐进式框架，具有轻量级、简洁易懂、易于开发和学习的特点。在本篇文章中，我们将使用Vue.js来构建一个音乐播放器应用程序，涵盖了一些常见的业务逻辑和功能。

### 音乐播放器的基础功能

在任何应用程序中，核心的业务逻辑都是最重要的。下面是本应用程序的核心需求：

- 能够从API获取音乐数据

- 能够将获取到的音乐列表展示在页面上

- 能够通过点击音乐列表，播放对应的音乐

- 能够在播放音乐时，展示音乐的基本信息和歌词

### 项目初始配置

在创建Vue.js项目之前，需要先下载安装Vue.js CLI工具。可以使用以下命令下载和安装：

```

npm install -g @vue/cli

```

安装完成后，可以使用以下命令创建Vue.js项目：

```

vue create music-app

```

这将创建一个名为music-app的Vue.js项目。创建完成后，进入项目根目录并使用以下命令运行项目：

```

cd music-app

npm run serve

```

此时应该可以在浏览器中查看Vue.js项目，并确认开发环境准备就绪。

### 音乐数据

接下来，我们需要处理音乐数据。在本应用程序中，我们将使用QQ音乐提供的API，获取音乐数据。具体的步骤包括：先在QQ音乐官网上找到API链接，调用API，并解析 API返回的JSON数据。

在应用程序中，所有需要调用API的代码都应该放在Vue.js组件的方法中。以下是从API获取音乐数据的方法及其代码：

```javascript

import axios from "axios"

export default {

methods: {

async getMusicData() {

const response = await axios.get(

"https://c.y.qq.com/soso/fcgi-bin/client_search_cp",

{

params: {

ct: 24,

qqmusic_ver: 1298,

new_json: 1,

remoteplace: "txt.yqq.song",

searchid: "68294365134742331",

t: 0,

aggr: 1,

cr: 1,

catZhida: 1,

lossless: 0,

flag_qc: 0,

p: 1,

n: 20,

w: "周杰伦",

},

headers: {

referer: "https://y.qq.com/portal/player.html",

},

}

)

// 处理API返回的数据

},

},

}

```

### 展示音乐列表

当我们已经获取到音乐数据并将其处理为Vue.js组件可以接受的格式后，接下来的任务就是展示音乐列表。在Vue.js中展示数据有多种方式。以下是使用v-for指令、v-bind指令和模板字符串的例子。

```html