效果图：

代码实现：

1.首先引入 vue-aplayer 包

npm install @moefe/vue-aplayer --save

 2.然后在 main.js 中进行配置

import APlayer from '@moefe/vue-aplayer'
Vue.use(APlayer);

3.在代码中进行使用

<template>
    <aplayer :audio="audio" :lrcType="3" ref="aplayer"/>
</template>

上面一点要注意：ref="aplayer" 是为了方便 vue.js 去找到这个标签元素

this.$refs.aplayer 则代表上面所创建的标签元素，可以对这个元素进行一些 api 的调用

4.进行配置

audio: {
                    name: '东西（Cover：林俊呈）',
                    artist: '纳豆',
                    url: '/api/project/getPlayResource/24',
                    cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
                    lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
                },

5.API 调用及其他内容配置

https://aplayer.netlify.com/docs/guide/api.html

这里强调一点哦，对上面的标签对象进行操作，使用 this.$refs.aplayer 方式获取定义的标签对象