Vue を使用して Gudong FM を模倣したページ デザインを実装するにはどうすればよいですか?

Vue.js は人気のある JavaScript フレームワークです。Vue を使用して Gudong FM のようなページ デザインを実装する方法を知りたい場合は、ここにいくつかの基本的な手順とテクニックを示します。

ステップ 1: Gudong FM のページ デザインと機能を理解する

Vue.js を使い始める前に、まず Gudong FM のページ デザインと機能を理解する必要があります。

Gudong FM は音楽アプリで、主にパーソナル センター、音楽リスト、再生ページの 3 つのページに分かれています。個人センター ページにはユーザー情報が表示され、音楽リスト ページには曲リストが表示され、再生ページには現在再生中の音楽と対応するコントロール ボタンが表示されます。

ステップ 2: Vue プロジェクトを構築する

Vue.js を使用して Gudong のような FM ページを構築するには、Node.js をインストールし、Node.js によって提供される npm ツールを使用する必要があります。 Vue CLI をインストールします。

コマンド ライン ターミナルを開き、次のコマンドを使用して Vue CLI をインストールします:

npm install -g vue-cli

インストールが完了したら、コマンド ライン ウィンドウで次のコマンドを使用して新しい Vue を作成できます。 .js プロジェクト:

vue init webpack my-project

このうち、my-project はプロジェクトの名前で、必要に応じて変更できます。

ステップ 3: ページ デザインの実装

1. まず、App.vue ファイルに Personal、MusicList、Player の 3 つのコンポーネントを作成します。

<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. 個人情報を表示する個人コンポーネントを作成します。

<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. 曲リストを表示する MusicList コンポーネントを作成します。

<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. プレーヤー コンポーネントを作成して、プレーヤーとコントロール ボタンを表示します。

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

ステップ 4: ページ インタラクションを実装する

1. クリック イベントを 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. Player コンポーネントに再生制御機能を実装します。

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

ステップ 5: プロジェクトを実行します

プロジェクトのルート ディレクトリで次のコマンドを実行します:

npm install
npm run dev

このようにして、模倣 Gudong FM が表示されます。ブラウザページ内。曲リスト内の曲をクリックすると、プレーヤーは自動的にその曲に切り替わって再生を開始します。

概要:

Vue.js を使用して Gudong FM を模倣したページを構築するには、次の基本的なスキルを習得する必要があります:

• Vue CLI をインストールし、Vue.js を作成するproject;
• 3 つのコンポーネントを含むページ要件を実装します: Personal、MusicList、Player;
• 曲リストのクリック イベントやプレーヤーの再生制御機能を含むページ インタラクションを実装します。 。

この記事の学習を通じて、これらの基本的なスキルをすでに理解しているはずです。また、Vue.js を使用して独自の模倣 Gudong FM ページを構築してみることができます。

以上がVue を使用して Gudong FM を模倣したページ デザインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。