Bagaimana untuk menggunakan Vue untuk melaksanakan reka bentuk halaman yang meniru Gudong FM?

Vue.js ialah rangka kerja JavaScript yang popular Jika anda ingin mengetahui cara menggunakan Vue untuk melaksanakan reka bentuk halaman seperti Gudong FM, berikut ialah beberapa langkah dan teknik asas.

Langkah 1: Fahami reka bentuk halaman dan fungsi Gudong FM

Sebelum mula menggunakan Vue.js, anda perlu memahami reka bentuk halaman dan fungsi Gudong FM.

Gudong FM ialah apl muzik, yang terbahagi terutamanya kepada tiga halaman: pusat peribadi, senarai muzik dan halaman main balik. Halaman pusat peribadi memaparkan maklumat pengguna, halaman senarai muzik memaparkan senarai lagu, dan halaman main balik memaparkan muzik yang sedang dimainkan dan butang kawalan yang sepadan.

Langkah 2: Bina projek Vue

Untuk menggunakan Vue.js untuk membina halaman Gudong FM, anda perlu memasang Node.js dan menggunakan alat npm yang disediakan oleh Node.js untuk memasang Vue CLI.

Buka terminal baris arahan dan gunakan arahan berikut untuk memasang Vue CLI:

npm install -g vue-cli

Selepas pemasangan selesai, anda boleh menggunakan arahan berikut dalam tetingkap baris arahan untuk mencipta projek Vue.js baharu:

vue init webpack my-project

Di mana , my-project ialah nama projek , anda boleh mengubah suai mengikut keperluan anda.

Langkah 3: Laksanakan reka bentuk halaman

1. Mula-mula, buat tiga komponen dalam fail App.vue: Peribadi, MusicList dan Pemain.

<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>

2. Buat komponen Peribadi untuk memaparkan maklumat peribadi.

<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>

3. Buat komponen MusicList untuk memaparkan senarai lagu.

<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>

4. Buat komponen Pemain untuk memaparkan pemain dan butang kawalan.

<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>

Langkah 4: Laksanakan interaksi halaman

1. Ikat acara klik pada senarai lagu dalam komponen MusicList.

<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>

2. Laksanakan fungsi kawalan main balik dalam komponen Pemain.

<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>

Langkah 5: Jalankan projek

Laksanakan arahan berikut dalam direktori akar projek:

npm install
npm run dev

Dengan cara ini, anda boleh melihat halaman Fake Gudong FM dalam pelayar. Apabila anda mengklik pada lagu dalam senarai lagu, pemain akan bertukar secara automatik kepada lagu itu dan mula bermain.

Ringkasan:

Menggunakan Vue.js untuk membina halaman meniru Gudong FM memerlukan penguasaan kemahiran asas berikut:

• Pasang Vue CLI dan buat projek Vue.js
• melaksanakan keperluan halaman., termasuk tiga komponen: , Senarai Muzik dan Pemain;
• melaksanakan interaksi halaman, termasuk acara klik senarai lagu dan fungsi kawalan main balik pemain.

Selepas mempelajari artikel ini, anda sepatutnya sudah memahami kemahiran asas ini dan boleh mula mencuba menggunakan Vue.js untuk membina halaman Gudong FM tiruan anda sendiri.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan reka bentuk halaman yang meniru Gudong FM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!