Vue3+Vite+Element-Plus打造网易云音乐，让音乐动起来！

前端

2023-12-02 11:51:21

网易云音乐克隆：使用 Vue3、Vite 和 Element-Plus

简介

网易云音乐是一个流行的音乐流媒体平台，以其庞大的曲库和推荐算法而闻名。作为一名前端开发人员，克隆网易云音乐可以让你深入了解现代前端技术的强大功能，如 Vue3、Vite 和 Element-Plus。

技术栈

我们将在本教程中使用以下技术栈：

Vue3： 一个现代且高效的 JavaScript 框架，用于构建用户界面。
Vite： 一个超快速的开发服务器和构建工具，可以大幅加快开发流程。
Element-Plus： 一个基于 Vue3 的组件库，提供了丰富的 UI 组件，如按钮、表单和图表。

步骤

第 1 步：安装和配置开发环境

首先，安装 Node.js 和 npm。然后使用 npm 安装 Vue3、Vite 和 Element-Plus。

npm install -g @vue/cli
npm install vue@next
npm install vite
npm install element-plus

第 2 步：创建项目结构

使用 Vue CLI 创建一个 Vue3 项目并安装 Element-Plus。

vue create vite-element-music
cd vite-element-music
npm install element-plus

第 3 步：添加音乐列表

在 src/components 目录中创建 MusicList.vue 文件，并添加以下代码：

<template>
  <ul>
    <li v-for="music in musicList" :key="music.id">
      {{ music.name }}
      <button @click="playMusic(music)">播放</button>
    </li>
  </ul>
</template>

<script>
import { ref } from 'vue'
import { playMusic } from '@/utils/music'

export default {
  setup() {
    const musicList = ref([
      { id: 1, name: '稻香' },
      { id: 2, name: '以父之名' },
      { id: 3, name: '七里香' }
    ])

    return {
      musicList,
      playMusic
    }
  }
}
</script>

第 4 步：添加音乐播放器

在 src/components 目录中创建 MusicPlayer.vue 文件，并添加以下代码：

<template>
  <div>
    <audio ref="audio" :src="music.url" @timeupdate="updateTime"></audio>
    <div class="controls">
      <button @click="playMusic">播放</button>
      <button @click="pauseMusic">暂停</button>
      <input type="range" min="0" :max="music.duration" :value="currentTime" @input="seekMusic">
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { playMusic, pauseMusic, seekMusic } from '@/utils/music'

export default {
  setup() {
    const audio = ref(null)
    const music = ref({})
    const currentTime = ref(0)

    const playMusic = () => {
      audio.value.play()
    }

    const pauseMusic = () => {
      audio.value.pause()
    }

    const seekMusic = (e) => {
      audio.value.currentTime = e.target.value
    }

    const updateTime = () => {
      currentTime.value = audio.value.currentTime
    }

    onMounted(() => {
      audio.value.addEventListener('loadedmetadata', () => {
        music.value = {
          duration: audio.value.duration
        }
      })
    })

    return {
      audio,
      music,
      currentTime,
      playMusic,
      pauseMusic,
      seekMusic
    }
  }
}
</script>

第 5 步：添加音乐播放页面

在 src/pages 目录中创建 Music.vue 文件，并添加以下代码：

<template>
  <div>
    <h1>音乐</h1>
    <MusicList />
    <MusicPlayer />
  </div>
</template>

<script>
import MusicList from '@/components/MusicList.vue'
import MusicPlayer from '@/components/MusicPlayer.vue'

export default {
  components: {
    MusicList,
    MusicPlayer
  }
}
</script>