Home > Article > Web Front-end > How to use Vue to implement a page design imitating Gudong FM?
Vue.js is a popular JavaScript framework. If you want to know how to use Vue to implement a Gudong FM-like page design, here are some basic steps and techniques.
Step 1: Understand the page design and functions of Gudong FM
Before you start using Vue.js, you need to first understand the page design and functions of Gudong FM.
Gudong FM is a music app, which is mainly divided into three pages: personal center, music list and playback page. The personal center page displays user information, the music list page displays the song list, and the playback page displays the currently playing music and corresponding control buttons.
Step 2: Build a Vue project
To use Vue.js to build a Gudong-like FM page, you need to install Node.js and use the npm tool provided by Node.js to install the Vue CLI.
Open the command line terminal and use the following command to install Vue CLI:
npm install -g vue-cli
After the installation is complete, you can use the following command in the command line window to create a new Vue.js project:
vue init webpack my-project
Among them, my-project is the name of the project, you can modify it according to your needs.
Step 3: Implement page design
<template> <div> <Personal /> <MusicList /> <Player /> </div> </template> <script> import Personal from './components/Personal.vue' import MusicList from './components/MusicList.vue' import Player from './components/Player.vue' export default { name: 'app', components: { Personal, MusicList, Player } } </script>
<template> <div class="personal"> <div class="avatar-box"> <img class="avatar" src="./assets/avatar.png" alt="头像"> </div> <div class="user-info"> <div class="username">{{ username }}</div> <div class="user-email">{{ email }}</div> </div> </div> </template> <script> export default { name: 'Personal', data () { return { username: '张三', email: 'zhangsan@example.com' } } } </script>
<template> <div class="music-list"> <div class="music-item" v-for="(item, index) in musicList" :key="index"> <div class="music-thumbnail"> <img :src="item.thumbnail" alt="歌曲封面"> </div> <div class="music-info"> <div class="music-name">{{ item.name }}</div> <div class="music-artist">{{ item.artist }}</div> </div> </div> </div> </template> <script> export default { name: 'MusicList', data () { return { musicList: [ { name: '浪子回头', artist: '刘德华', thumbnail: './assets/album1.jpg' }, { name: '夏天的风', artist: '周杰伦', thumbnail: './assets/album2.jpg' }, { name: '告白气球', artist: '周杰伦', thumbnail: './assets/album3.jpg' } ] } } } </script>
<template> <div class="player"> <div class="music-info"> <div class="music-name">{{ currentMusic.name }}</div> <div class="music-artist">{{ currentMusic.artist }}</div> </div> <div class="player-controls"> <button class="prev-btn" @click="prev">上一首</button> <button class="play-btn" @click="play">{{ playing ? '暂停' : '播放' }}</button> <button class="next-btn" @click="next">下一首</button> </div> </div> </template> <script> export default { name: 'Player', data () { return { currentMusic: {}, playing: false, musicList: [ { name: '浪子回头', artist: '刘德华', url: './assets/songs/song1.mp3', thumbnail: './assets/album1.jpg' }, { name: '夏天的风', artist: '周杰伦', url: './assets/songs/song2.mp3', thumbnail: './assets/album2.jpg' }, { name: '告白气球', artist: '周杰伦', url: './assets/songs/song3.mp3', thumbnail: './assets/album3.jpg' } ] } }, methods: { play () { this.playing = !this.playing }, prev () { // 上一首 }, next () { // 下一首 } } } </script>
Step 4: Implement page interaction
<template> <div class="music-item" v-for="(item, index) in musicList" :key="index" @click="playMusic(index)"> ... </div> </template> <script> export default { name: 'MusicList', methods: { playMusic (index) { this.$parent.$refs.player.currentMusic = this.musicList[index] } } } </script>
<template> <div class="player"> ... </div> </template> <script> export default { name: 'Player', data () { return { // 省略 } }, methods: { play () { if (this.currentMusic.url) { const audio = this.$refs.audio if (this.playing) { audio.pause() } else { audio.play() } this.playing = !this.playing } }, prev () { const index = this.musicList.indexOf(this.currentMusic) let prevIndex = index - 1 if (prevIndex < 0) { prevIndex = this.musicList.length - 1 } this.currentMusic = this.musicList[prevIndex] }, next () { const index = this.musicList.indexOf(this.currentMusic) let nextIndex = index + 1 if (nextIndex >= this.musicList.length) { nextIndex = 0 } this.currentMusic = this.musicList[nextIndex] } } } </script>
Step 5: Run the project
Execute the following command in the project root directory:
npm install npm run dev
In this way, you can see the imitation Gudong FM in the browser page. When you click on a song in the song list, the player will automatically switch to that song and start playing.
Summary:
Using Vue.js to build a page imitating Gudong FM requires mastering the following basic skills:
Through the study of this article, you should already understand these basic skills, and you can start trying to use Vue.js to build your own imitation Gudong FM page.
The above is the detailed content of How to use Vue to implement a page design imitating Gudong FM?. For more information, please follow other related articles on the PHP Chinese website!