一、准备工作

做前端音乐播放纪录功能之前要先搞定两个软件安装，就是Node.js和Vue CLI。前者让JavaScript跑起来，后者是Vue.js项目建设必备。这样我们就能安心开工！

首先得要网易云API的密码哈。这个API能告诉我们音乐啥特点，听多少遍等情况，这对于做个好听歌记录功能可太关键了。得到API的密码后，再调一调里面的东西，咱们就能知道你听过啥歌了。

二、创建Vue项目

搞定Vue项目首先得创建。用Vue CLI这个命令行神器，找个地方输入两下瞬间完成。随心所欲选择各种功能，美滋滋！搞定后，运行npm run serve启动项目，接着看看浏览器效果如何！

三、安装和配置Vue Router

vue create music-player
cd music-player

想要方便地切换网页？那就快给Vue Router装上！它是Vue.js专门的导航小助手！装了它，你就能随心所欲地在单页应用中快速换页，而且它还会帮你搞定每个页面的定位~

首先记住，安装Vue Router哟~然后，在项目里新建一个叫router的文件夹，弄个index.js文件在那儿配置路由哈。最后一步，在主文件里引入Vue Router，搞定路线设定大功告成！

四、创建页面和组件

npm install vue-router

搞定网页和组件的 Vue 项目，恭喜你完成了功能展示与互动部分。这个过程就像搭积木，只需要在视图文件夹中布置好所有页面零件，然后让它们自由发挥就可以！

我们就把音乐播放列表加到Home.vue这个部件里面！然后通过路由链接，设定好相关的位置。这样，当你到达指定地点时，对应的内容就会出来了。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  // 在这里配置各个页面的路由路径和组件
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

五、使用网易云API获取音乐播放记录

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

咱们要用网易云API查阅音乐播放记录，这个步骤很重要首先得给Vue项目装上Axios库。这个Axios就像个小助手，能帮咱们做浏览器和Node.js上的http操作，正合适！

接下来，我们得去views.vue这个页面里加个代码，把网易云API接口连接起来，弄明白用户的歌单记录是怎么回事儿。然后把它们存进新搞出来的tracks这个list里面，最后展示到网页上给大家看看他们最近听了啥好歌。

六、在其他页面存储音乐播放记录

  

    
音乐播放记录
    

      
{{ record.name }}
    
  


export default {
  data() {
    return {
      records: [] // 存放音乐播放记录信息的数组
    }
  },
  mounted() {
    // 在页面加载完成后，调用API获取音乐播放记录信息
    this.getMusicRecords()
  },
  methods: {
    getMusicRecords() {
      // 使用网易云API获取音乐播放记录信息
      // 这里省略了调用API的相关代码，可根据实际情况自行实现
      // 将获取到的音乐播放记录存入records数组中
    }
  }
}

别只看你听过啥歌，还有我们要存储这些信息，这才能算是全面的音乐播放器！这样不管是你播放过还是喜欢的歌，只要跑到那个专门的页面，我们就能通过API发送个请求，将这些歌的信息保存到咱们自己的服务器里去。

只要你给服务器发个消息留个脚印，每次听歌都不会被记下来了。另外，它还能给你自动加进最新的歌曲~

import Home from '../views/Home.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他页面的路由配置省略...
]

七、优化和扩展功能

搞定基本功能后，来点新鲜玩意儿。比如加入听歌识曲功能，找歌so easy；然后弄个收藏夹，把你爱的歌曲都放进去，下次直接就能找到！

升级和拓展各部分的功能会让你玩儿着更带劲，也可以让你的App变得更好玩，更加受大家喜欢！千万别忘了，时刻注意改进这些功能才是我们开发者真正的事情

八、总结与展望

npm install axios

搞定了！让我来教你怎么用Vue和网易云API搞出一个听歌记录小工具，对于热爱音乐又想纪念的你们来说这种东东绝对实用!

哎呀妈，这个功能还得再加把劲儿！加上新鲜玩意儿一起弄才完美。希望看了这篇文章你们做网站和搞音乐都能轻松搞定咯~

import axios from 'axios'
// ...
methods: {
  async getMusicRecords() {
    try {
      const response = await axios.get('http://api.example.com/records') // 将URL替换为实际的API地址
      this.records = response.data.records
    } catch (error) {
      console.error(error)
    }
  }
}