Vue3+TS手写音乐播放器

 一、路由,配置

 main.ts

 App.vue

 

 index.vue初始化

 

 

一、

结构布局css:

 iconPark字体图标库    npm 下载

二、循环遍历左侧菜单列表

二级菜单:两层遍历

 简单举例:

 项目写法:****

项目中将ts抽离出来,专门放一个ts文件:

三、点击左侧菜单,右侧跳转相对路由:

 

四、点击左侧菜单时的样式:router里设置

五、轮播图   swiper

yarn add swiper -S

 六、axios 封装 .ts   

yarn  add axios  -S

七、发送请求   api.ts

八、点击轮播,音乐播放

九、Pinia 状态管理,数据持久化存储

 获取播放音乐,发送请求:

 

 

 组件导入pinia:

点击轮播图片发送请求  play

 最后,播放音乐   audio.play() 自带的api

十、点击播放,暂停按钮,切换状态

 

猜你喜欢

转载自blog.csdn.net/admin12345671/article/details/129599175