YuxiangWang_0525的博客
·
原生APlayer在Vue 3中的使用方法
原文中文，约1100字，阅读约需3分钟。
📝
内容提要
这篇文章介绍了Vue-APlayer项目停止更新的情况，并提供了新的解决方案。文章详细介绍了安装和引入APlayer，并解决了在Vue3中使用onMounted初始化APlayer的问题。最后，文章总结了教程的内容。
🎯
关键要点
-
Vue-APlayer项目三年前停止更新，且只支持Vue2，不兼容Vue3。
-
安装APlayer的命令为npm install aplayer --save，yarn add aplayer或pnpm install aplayer。
-
引入APlayer时需要注意官方文档中的css路径错误，正确路径为'import 'aplayer/dist/APlayer.min.css'。
-
在Vue3中，使用onMounted初始化APlayer会导致不显示，应该在mounted()方法中初始化。
-
提供了初始化APlayer的代码示例，包括音频信息和封面图链接。
❓
延伸问答
为什么Vue-APlayer项目不再更新？
Vue-APlayer项目三年前停止更新，且只支持Vue2，不兼容Vue3。
如何在Vue 3中安装APlayer？
可以使用命令npm install aplayer --save，yarn add aplayer或pnpm install aplayer来安装APlayer。
引入APlayer时需要注意什么？
引入时需要注意官方文档中的css路径错误，正确路径为'import 'aplayer/dist/APlayer.min.css'。
在Vue 3中如何初始化APlayer？
在Vue 3中，应该在mounted()方法中初始化APlayer，而不是onMounted。
APlayer的初始化代码示例是什么？
初始化代码示例包括音频信息和封面图链接，具体代码见文章内容。
为什么在onMounted中初始化APlayer不显示？
因为onMounted这个hook无法访问到模板或页面数据，所以APlayer不会显示。
🏷️
