技术指南：Vue 全家桶打造自适应 web 音乐播放器

在音乐流媒体时代，拥有一个可靠且美观的 web 音乐播放器至关重要。本文将指导你使用 Vue 全家桶（Vue.js、Vuex 和 Vue Router）一步一步打造一个自适应 web 音乐播放器。

设置项目

1. 安装 Vue.js CLI：npm install -g @vue/cli
2. 创建新项目：vue create music-player
3. 进入项目目录：cd music-player

创建音乐数据存储

使用 Vuex 管理音乐数据：

// store.js
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    songs: [],
    currentSong: null,
    isPlaying: false
  },
  mutations: {
    setSongs(state, songs) {
      state.songs = songs
    },
    setCurrentSong(state, song) {
      state.currentSong = song
    },
    setIsPlaying(state, isPlaying) {
      state.isPlaying = isPlaying
    }
  }
})

定义路由

使用 Vue Router 管理导航：

// router.js
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('./views/PlayerView.vue')
    }
  ]
})

创建播放器视图

PlayerView.vue 负责显示播放器：

<template>
  <div>
    <div class="player-controls">
      <button @click="play">播放</button>
      <button @click="pause">暂停</button>
    </div>
    <audio ref="audioPlayer" :src="currentSong.url"></audio>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['currentSong', 'isPlaying']),
  },
  methods: {
    ...mapMutations(['setIsPlaying']),
    play() {
      this.$refs.audioPlayer.play()
      this.setIsPlaying(true)
    },
    pause() {
      this.$refs.audioPlayer.pause()
      this.setIsPlaying(false)
    }
  }
}
</script>

实现自适应布局

使用 CSS Media Queries 创建自适应布局：

@media (max-width: 768px) {
  .player-controls {
    flex-direction: column;
  }
}

部署应用程序

使用 Vue CLI 构建并部署应用程序：

npm run build
npm run serve

结论

遵循本指南，你可以使用 Vue 全家桶创建一个功能齐全、自适应的 web 音乐播放器。该播放器将为用户提供出色、身临其境的音乐聆听体验，无论是在 PC 端还是移动设备上。