Vue.js大法好！咕咚FM页面设计全揭秘

了解咕咚 FM 页面设计和功能

咱们先聊聊咕咚FM这个东西是用来干啥子的哈？其实就相当于是个超级大伞，又分成三块，即我的中心、我的歌单和我现在在听啥。首先我的中心就是你的个人信息，跟百度贴吧差不多，包括你的头像啊、昵称之类的；然后歌单里当然就是你最爱的那几首歌啦；最后在听歌那一页，就能看到你正在播放的曲目，以及可以控制哪些功能，譬如说暂停呀、切歌啥的。

搭建Vue项目

想玩好Vue.js？那么你对Node.js肯定不陌生。我们只需要在终端里输几个命令，一个叫做Vue CLI的神奇小火箭脚本就出现！命名你可以随便选，反正最后都是属于你的独家项目！

npm install -g vue-cli

实现页面设计

vue init webpack my-project

那我们就把App.vue分成个人信息，音乐列表还有播放器这几个板块！

你了解如何使用 Vue.js 的单个“.vue”文件组建吗？这种方式将所有模板、代码还有样式都压缩到这个小巧的文件里！简约又高级，管理起来超容易~

实现页面交互

  

    
    
    
  


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

试下MusicList里的歌曲，轻轻一点就可以播放了！还有很棒的Player组件，可以自由控制播放暂停和切换歌曲！有了Vue.js这个大侠帮忙，解决这些问题就像喝汤那么简单！

  

    

      
    
    

      
{{ username }}
      
{{ email }}
    
  


export default {
  name: 'Personal',
  data () {
    return {
      username: '张三',
      email: 'zhangsan@example.com'
    }
  }
}

运行项目

超级容易，先在工程文件里照着几个提示来，再找个电脑自带的浏览器一搜就能找到露脸的咕咚FM音符劲舞了。要是有人点歌的话，那儿的播放器马上就能唱出声儿来，可爱的咕咚FM音符劲舞界面就这么轻松搞定

  

    

      

        
      
      

        
{{ item.name }}
        
{{ item.artist }}
      
    
  


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'
        }
      ]
    }
  }
}

基本技能与进阶应用

要学咕咚FM那样炫酷的Vue.js网站制作，首先得学会组件编程，把网页分成小块儿；其次要用数据驱动视图来让界面看起来更加生动；还要明白怎么快速响应式数据绑定，这都是必须的基础步骤。学会这些后，接下来就是加快速度，别忘了网页路径和存档状态，这些都非常重要。要做好这事儿，就得多花时间琢磨和实践，用学到的Vue.js技术做更复杂的项目，提升自己的编程水平。

  

    

      
{{ currentMusic.name }}
      
{{ currentMusic.artist }}
    
    

      上一首
      {{ playing ? '暂停' : '播放' }}
      下一首
    
  


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 () {
      // 下一首
    }
  }
}

总结与展望

搞定了！搞定了！我们也用Vue.js做出来咕咚FM那种炫酷的网页。从一点不懂编程到代码实现再到炫酷页面出现，都是自己琢磨出来的真本事。希望这篇文章对想要学习或试水Vue.js的朋友有所帮助！

  

    ...
  


export default {
  name: 'MusicList',
  methods: {
    playMusic (index) {
      this.$parent.$refs.player.currentMusic = this.musicList[index]
    }
  }
}

学会Vue.js这种牛逼框架，再把Vuex和Vue Router巧妙运用起来，你就可以轻松应付各种难搞的项目！要华丽变身为编程达人，一定要多尝试新事物，不断累积实际操作经验。只有这样，咱们才能稳扎稳打，发挥出自己的实力，在行业里闪耀发光

  

    ...
  


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 = this.musicList.length) {
        nextIndex = 0
      }
      this.currentMusic = this.musicList[nextIndex]
    }
  }
}

。