当前位置：首页 > VUE

vue实现网易云

2026-02-19 13:49:56VUE

Vue 实现网易云音乐应用

使用 Vue 实现一个类似网易云音乐的应用需要结合前端框架、后端接口和音乐播放功能。以下是关键实现步骤和代码示例。

项目初始化

使用 Vue CLI 创建项目：

vue create netease-music
cd netease-music
npm install vue-router vuex axios --save

路由配置

在 src/router/index.js 中配置基本路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Discover from '@/views/Discover.vue'
import Playlist from '@/views/Playlist.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/discover', component: Discover },
    { path: '/playlist/:id', component: Playlist }
  ]
})

状态管理

创建 src/store/index.js 管理播放状态：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentSong: null,
    isPlaying: false,
    playlist: []
  },
  mutations: {
    setCurrentSong(state, song) {
      state.currentSong = song
    },
    togglePlay(state) {
      state.isPlaying = !state.isPlaying
    }
  }
})

音频播放组件

创建 src/components/AudioPlayer.vue：

<template>
  <div class="audio-player">
    <audio ref="audio" :src="currentSongUrl" @timeupdate="updateTime"></audio>
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['currentSong', 'isPlaying']),
    currentSongUrl() {
      return this.currentSong ? this.currentSong.url : ''
    }
  },
  methods: {
    ...mapMutations(['togglePlay']),
    updateTime(e) {
      this.currentTime = e.target.currentTime
    }
  }
}
</script>

接口调用

创建 src/api/music.js 封装音乐接口：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://netease-cloud-music-api.vercel.app'
})

export const getPlaylist = (id) => {
  return instance.get(`/playlist/detail?id=${id}`)
}

export const searchMusic = (keywords) => {
  return instance.get(`/search?keywords=${keywords}`)
}

页面组件示例

创建 src/views/Discover.vue 展示推荐歌单：

<template>
  <div class="discover">
    <h3>推荐歌单</h3>
    <div class="playlists">
      <div 
        v-for="playlist in playlists" 
        :key="playlist.id"
        @click="goPlaylist(playlist.id)"
      >
        <img :src="playlist.coverImgUrl" alt="">
        <p>{{ playlist.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getTopPlaylist } from '@/api/music'

export default {
  data() {
    return {
      playlists: []
    }
  },
  async created() {
    const res = await getTopPlaylist()
    this.playlists = res.data.playlists
  },
  methods: {
    goPlaylist(id) {
      this.$router.push(`/playlist/${id}`)
    }
  }
}
</script>

样式处理

在 src/App.vue 中添加全局样式：

vue实现网易云

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
}
.playlists {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.playlists img {
  width: 100%;
  border-radius: 5px;
}
</style>