关于如何在nuxt.js
上使用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
控制显示,确保在数据获取到在播放。