概述音乐分享平台构建

  

    
最新音乐分享
    

      

        {{ song.name }}
      
    
  


export default {
  data() {
    return {
      songs: []
    };
  },
  mounted() {
    // 在这里通过网易云API获取最新的音乐
  }
};

首先，咱们得在components文件夹里新建一个名叫Home.vue的文件，就让它做咱们网站的首页！一进网站就能看到最新的音乐分享啦～而且这个页面还会在mounted 事件里偷偷绑定网易云API，帮你轻松获取最近的歌单。接下来，回到App.vue文件，将做好的Home.vue拖进去设为主页即可。这样以后每次打开网站都可以听到新出炉的推荐歌曲！

创建播放页面组件

  

    
  


export default {
  name: 'App',
};

别忘了咱这儿还有个神器叫Play.vue！这就是你懂音乐的帮手，帮你领略各种音乐美妙。如果你想深入了解歌曲的话，用这个就没错！下一步，咱就在src文件夹里面建个新的router.js文件，搞定页面的跳转。接着把这个文件引入到主文件main.js里边，让Vue实例好好学习熟悉一下，大功告成！

获取音乐数据

  

    
{{ song.name }}
    
  


export default {
  data() {
    return {
      song: {}
    };
  },
  mounted() {
    // 在这里通过网易云API获取音乐的详细信息
  }
};

我们可以用网易云API来获取最新的音乐新闻还有一些好玩的动态。首先在Home.vue里挂上事件，做个API请求，把新歌状态弄过来。接着，用同样的办法在Play.vue中获取歌曲的更多详情。这个fetch操作能确保我们的数据又快又准！

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/components/Home.vue';
import Play from '@/components/Play.vue';
Vue.use(VueRouter);
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/play/:id',
    name: 'Play',
    component: Play
  }
];
const router = new VueRouter({
  mode: 'history',
  routes
});
export default router;

添加导航链接

亲爱滴同学们，想要在家找歌快如闪电？快来试试我们这新功能！每个歌儿都有详细链接，一点就快速播放或了解更多歌曲相关信息！这样找歌更迅速，还能让大家在这儿玩得更过瘾！

import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

构建和运行

想做个音乐分享网站？用命令行简单搞定！首先登录账户，接着复制几段代码，注意看看端口号对不对，通常是8080这种。完工后，你自己的音乐分享站就亮相这个步骤很重要，直接关系到最终的效果。

mounted() {
  fetch('https://music-api.example.com/new-songs')
    .then(response => response.json())
    .then(data => {
      this.songs = data.songs;
    });
}

总结与展望

mounted() {
  const songId = this.$route.params.id;
  fetch(`https://music-api.example.com/songs/${songId}`)
    .then(response => response.json())
    .then(data => {
      this.song = data.song;
    });
}

搞定音乐网站就是这么轻松！用Vue搭个网页，再连上网易云API，首页和播放页也就搞定，只有搞清楚路由就行。反正这个API里面啥信息都给得齐全，超新超热门的歌曲还有大牌明星的情况，更新速度更是飞快，保证你的音乐网站永远不掉队！希望这些小窍门能帮到大家，以后做出比现在更好看的音乐分享网站也完全没问题！

你也在找好听的歌么？告诉我你心目中的好音乐共享平台应该具备哪些功能？

  

    
最新音乐分享
    

      

        {{ song.name }}
      
    
  

。