当前位置：首页 > VUE

vue实现网易云音乐

2026-02-20 16:39:46VUE

Vue实现网易云音乐项目

使用Vue框架实现网易云音乐功能可以分解为多个模块，包括音乐播放、歌单展示、搜索功能等。以下是实现方案：

项目初始化

使用Vue CLI创建项目：

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

安装UI组件库（如Element UI或Vant）：

npm install element-ui --save

项目结构设计

典型的项目目录结构：

src/
├── assets/
├── components/
├── views/
├── router/
├── store/
├── api/
├── utils/
└── App.vue

路由配置

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

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

Vue.use(Router)

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

状态管理

在store/index.js中配置Vuex：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentSong: null,
    playList: [],
    isPlaying: false
  },
  mutations: {
    setCurrentSong(state, song) {
      state.currentSong = song
    },
    setPlayList(state, list) {
      state.playList = list
    },
    setPlaying(state, status) {
      state.isPlaying = status
    }
  },
  actions: {
    playSong({ commit }, song) {
      commit('setCurrentSong', song)
      commit('setPlaying', true)
    }
  }
})

音乐播放器组件

创建播放器组件Player.vue：

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

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

export default {
  computed: {
    ...mapState(['currentSong', 'isPlaying'])
  },
  methods: {
    ...mapMutations(['setPlaying']),
    togglePlay() {
      if (this.isPlaying) {
        this.$refs.audio.pause()
      } else {
        this.$refs.audio.play()
      }
      this.setPlaying(!this.isPlaying)
    },
    updateTime(e) {
      // 更新播放进度
    }
  }
}
</script>

歌单列表组件

创建歌单组件Playlist.vue：

<template>
  <div class="playlist">
    <div v-for="song in songs" :key="song.id" @click="playSong(song)">
      {{ song.name }} - {{ song.artist }}
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      songs: []
    }
  },
  created() {
    this.fetchSongs()
  },
  methods: {
    ...mapActions(['playSong']),
    async fetchSongs() {
      // 调用API获取歌单数据
      const response = await this.$http.get('/playlist/detail?id=123')
      this.songs = response.data.songs
    }
  }
}
</script>

API接口封装

在api/music.js中封装网易云音乐API：

import axios from 'axios'

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

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

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

搜索功能实现

创建搜索组件Search.vue：

<template>
  <div class="search">
    <input v-model="keywords" @keyup.enter="search" />
    <button @click="search">搜索</button>
    <div v-for="result in results" :key="result.id">
      {{ result.name }}
    </div>
  </div>
</template>

<script>
import { search } from '../api/music'

export default {
  data() {
    return {
      keywords: '',
      results: []
    }
  },
  methods: {
    async search() {
      const response = await search(this.keywords)
      this.results = response.data.result.songs
    }
  }
}
</script>

样式处理

使用CSS预处理器（如SCSS）处理样式：

.player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 10px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.playlist {
  padding: 20px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}