现在网上唱歌跳舞的MTV可火了！不光好看，用起来也舒服。今儿咱就来说说用啥软件和网易云API来整一个自己的Music MV播放工具。首先，咱们先学习下准备工作，接着我会逐步教你怎么接入网易云API、制作播放器组件，然后叫你如何在网页上调用。最后我们还要聊聊怎样设置路由，这样你就能完全学会这个技巧，以后也能捣鼓出相似的功能~

一、准备工作

vue create music-mv-app

想要试试音乐MV播片儿功能的话，你得先做好点儿准备首先咱得搞一个Vue项目，然后安装一些必须要用到的依赖，弄好了这些基本的东西，接下来的事情就水到渠成。咋弄？很简单，开个命令行工具，敲几个命令，就能跳进工程文件夹里去，接着赶紧把Axios和Vue Router装上去，有这俩蓝牙腻儿在身边，咱们后面做事儿才顺手呀。

二、引入网易云API

cd music-mv-app

现在咱要给项目加点料，把网易云API也加上去！先在main.js里塞些代码，用Axios发个HTTP请求。把API地址设为Vue的初始值就完事儿，这样无论是谁都可以随手调用这个API，简单不？

npm install axios vue-router

三、创建MV播放组件

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.prototype.$API = "https://api.imjad.cn/cloudmusic/"

首先，我们赶紧来做一个MV播放器！很简单，就在components文件夹里新建一个名为MVPlayer.vue的文件就好了，然后你就能用这个播放器来听歌看MV！而且，它还有MV封面和歌词展示功能。主要就是先用Vue组件搭建起框架，接着设定好mv相关参数就OK。最后只要把MV数据拷贝下来，放在网页上看就大功告成！

四、在页面中使用MV播放组件

搞定MV播放器组件之后，终于能派上用场了！首先在views目录里建个叫MVPage.vue的文件，然后把之前调好的MVPlayer组件嵌进去，音乐MV播放页面瞬间出现哟。

  

    
    
    

      
{{ line }}
    
  


export default {
  data() {
    return {
      mv: {
        url: "",
        cover: "",
        lyrics: []
      }
    }
  },
  methods: {
    loadMV() {
      // 发送GET请求获取MV数据
      this.$API.get("/mv?id=123456")
          .then(response => {
            this.mv.url = response.data.url
            this.mv.cover = response.data.cover
            this.mv.lyrics = response.data.lyrics
          })
          .catch(error => {
            console.error(error)
          })
    }
  },
  mounted() {
    this.loadMV()
  }
}


.mv-player {
  text-align: center;
  margin-top: 20px;
}
.mv-video {
  width: 100%;
}
.mv-cover {
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.mv-lyrics {
  margin-top: 20px;
}

五、配置路由

想要网页流畅切换？那你得先搞清楚路由！快去项目的index.js文件里面设置路径规则，同时也别忘了将那个好看的MVPage组件设成默认页~这样用户们无论何时何地都能浏览顺畅啦～

六、运行项目

  

    
音乐MV播放
    
  


import MVPlayer from "../components/MVPlayer.vue"
export default {
  components: {
    MVPlayer
  }
}


.mv-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

搞定喽！做完了这些，应用就可以运行了。只需要敲下命令，再打开浏览器输入刚才那个网址，你就会看到一个播歌 MV 的页面。真得赞叹Vue和网易云API 的神奇力量呢!

看完这篇文章，咱就能做出一个能顺畅播MV的Vue项目！不仅好用，还能提升用户体验，让网站变得好玩有趣！快来试一试，没准儿对你有好处

import VueRouter from 'vue-router'
import MVPage from '../views/MVPage.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'MVPage',
    component: MVPage
  },
]
const router = new VueRouter({
  routes
})
export default router

。