原生APlayer在Vue 3中的使用方法
内容提要
这篇文章介绍了Vue-APlayer项目停止更新的情况，并提供了新的解决方案。文章详细介绍了安装和引入APlayer，并解决了在Vue3中使用onMounted初始化APlayer的问题。最后，文章总结了教程的内容。
延伸解读
Vue-APlayer 停更带来的迁移必要性
文章指出 Vue-APlayer 已停止更新三年，且仅支持 Vue2，对 Vue3 兼容性极差。这意味着在 Vue3 项目中继续使用该封装库会面临功能缺失和兼容风险。因此，直接使用原生 APlayer 成为更可控的选择，但需要自行处理初始化时机和样式引入等细节。
引入 APlayer 时的路径与大小写陷阱
安装包名为 aplayer，但引入组件时需使用大写 APlayer，且官方文档中的 CSS 路径有误。正确写法是 import 'aplayer/dist/APlayer.min.css'，注意目录为小写。这些不一致容易导致样式丢失或模块找不到，开发者需特别留意。
Vue3 中初始化时机的关键差异
在 Vue3 的 onMounted 钩子中初始化 APlayer 不会报错但无法显示，因为该钩子可能访问不到模板或页面数据。文章建议改用选项式 API 的 mounted 方法，并通过 methods 调用初始化函数。这提醒开发者注意组合式 API 与选项式 API 在生命周期行为上的差异。
Q&A
为什么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不会显示。
