用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

```

代码中使用了v-for指令遍历了一个musicList数组，并通过v-bind指令将item.id绑定到key属性上，从而确保DOM元素之间的唯一性。

### 播放音乐

在点击音乐列表后，我们需要将已选择的音乐播放出来。Vue.js中使用事件处理程序来实现对事件的监听。以下是一种基本的事件处理程序例子。

```html

```

在这个例子中，我们使用@click指令在组件上绑定一个方法。当某个元素被单击时，该方法将被调用，并将对应的item对象传递给它。

### 音乐与歌词展示

当音乐播放时，我们需要展示一些额外的信息，比如音乐的封面、歌手、歌名等等。此外，我们需要能够展示音乐的歌词。Vue.js中使用计算属性和模板字符串来处理这些信息。以下是一个例子：

```html

```

在这个例子中，我们使用了模板字符串来动态生成歌词内容，计算属性lyric接受currentMusic的值作为依赖项，该值在每次播放不同的歌曲时都会变化。

### 结论

在本篇文章中，我们介绍了使用Vue.js构建音乐播放器应用程序的基础知识。从获取音乐数据，展示音乐列表，播放音乐，到展示音乐与歌词，我们概述了如何使用Vue.js来实现这些基础功能。当选择的API变化后，这些代码实现可能还需要进行相应的调整。