Vue3.0 助阵，打造你的音乐 Web 天地

2023-10-04 22:51:48

使用 Vue3.0 构建音乐 Web 应用

1. 创建项目

首先，我们需要使用脚手架工具创建一个新的 Vue3.0 项目。推荐使用 Vue CLI，它是一个官方提供的命令行工具，可以快速创建项目并初始化所需的依赖项。

vue create music-app

2. 安装依赖项

项目创建完成后，我们需要安装一些必需的依赖项。

cd music-app
npm install vue-router vuex axios

3. 配置项目

接下来，我们需要在 src/main.js 文件中配置 Vue Router 和 Vuex。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

Vue.use(VueRouter)
Vue.use(Vuex)

const router = new VueRouter({
  // 路由配置
})

const store = new Vuex.Store({
  // 状态管理配置
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4. 创建组件

接下来，我们需要创建一些组件，包括音乐播放器组件、音乐列表组件等。

// MusicPlayer.vue
<template>
  <div>
    <audio :src="music.url"></audio>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>

<script>
export default {
  props: ['music'],
  methods: {
    play() {
      this.$refs.audio.play()
    },
    pause() {
      this.$refs.audio.pause()
    }
  }
}
</script>

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

<script>
export default {
  props: ['musicList'],
  methods: {
    play(music) {
      this.$emit('play', music)
    }
  }
}
</script>

5. 开发功能

接下来，我们需要开发音乐播放、上传、创建播放列表等功能。

// store/index.js
const state = {
  musicList: [],
  currentMusic: null
}

const mutations = {
  setMusicList(state, musicList) {
    state.musicList = musicList
  },
  setCurrentMusic(state, music) {
    state.currentMusic = music
  }
}

const actions = {
  getMusicList({ commit }) {
    axios.get('/api/music').then(res => {
      commit('setMusicList', res.data)
    })
  },
  playMusic({ commit }, music) {
    commit('setCurrentMusic', music)
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

// App.vue
<template>
  <div>
    <MusicPlayer :music="currentMusic"></MusicPlayer>
    <MusicList :musicList="musicList" @play="playMusic"></MusicList>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['musicList', 'currentMusic'])
  },
  methods: {
    ...mapActions(['getMusicList', 'playMusic'])
  },
  mounted() {
    this.getMusicList()
  }
}
</script>