关于如何在nuxt.js上使用vue-aplayer，笔记记录。

vue-aplayer官方文档

安装

npm install @moefe/vue-aplayer --save

nuxt.js引入插件

在plugins文件夹下新建文件vue-aplayer.js，添加如下代码

import Vue from 'vue'
import APlayer from '@moefe/vue-aplayer'

Vue.use(APlayer, {
  defaultCover: 'https://github.com/u3u.png',
  productionTip: true
})

打开nuxtconfig.js,添加插件

plugins: [
    { src: '@/plugins/element-ui' },
    { src: '@/plugins/font-awesome' },
    { src: '~/plugins/vue-aplayer', mode: 'client' }
  ]

保存后重新运行项目

使用

在需要用到的vue文件（这里以左下角沉浸式播放为例）

<aplayer v-if="flag" :audio="audio" :lrcType="3" fixed />

data() {
    return {
      flag: false,
      audio: []
    }
  },
  mounted() {
    this.getMusicList()
  },
  methods: {
    async getMusicList() {
      let self = this
      let { status, data: audio } = await self.$axios.get(
        'https://api.i-meto.com/meting/api',
        {
          params: {
            server: 'netease',
            type: 'playlist',
            id: '540205411'
          }
        }
      )
      if (status === 200 && audio) {
        self.audio = audio.map(item => {
          return {
            name: item.title,
            artist: item.author,
            url: item.url,
            cover: item.pic,
            lrc: item.lrc
          }
        })
        self.flag = true
      } else {
        console.log(`请求失败`)
      }
    }
  }

使用axios获取网易云音乐歌单数据，map格式化数据，flag控制显示，确保在数据获取到在播放。

运行效果

运行效果