vue实现移动端音乐APP

项目基于vue2.6,使用vue-cli搭建项目

项目部分功能预览
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

目前实现的功能
发现音乐首页,侧边栏弹窗,歌单推荐,歌单详情,最新歌曲,歌曲播放,获取排行榜单、歌词同步滚动,手机号登录、手机号注册。
后续还会继续完善登录与主页面的链接,验证码验证,我的音乐,视频,云村等功能。
技术栈

  • vue-cli搭建项目

  • vue:构建用户界面框架

  • vue-router:路由的实现

  • axios:简化异步操作

  • ES6:ECMAScript 新一代语法,用到了解构赋值,模块化,还有一些方法

  • element-ui:提供组件

  • better-scroll:用来实现移动端页面的滑动

  • vue-lazyload:图片懒加载

  • iconfont:阿里字体图标

  • Node.js:搭建本地测试服务器

数据接口NeteaseCloudMusicApi
我的项目地址:https://github.com/sweet-donut/myMusic
欢迎来交流学习,我也在不断改进完善中

  • 0
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue开发移动端App时,可以使用一些工具和组件来进行适配和开发。首先,在main.js中引入`vue-awesome-mui`并使用`Vue.use(Mui)`来引入MUI组件库。注意,MUI只能在手机上使用,所以在浏览器运行时可能无法看到效果。\[1\] 为了适配移动端设备的屏幕大小和比例差异,可以使用`flexible.js`进行适配。在main.js中引入`flexible.js`文件,并将其作为静态文件放在最外层的static文件夹中引入。这样可以实现移动端项目的适配。\[2\] 在开发移动端App时,可以使用一些常见的组件和标签,如`router-link`用于导航跳转,`keep-alive`用于缓存不活动的组件实例,以提高性能。此外,还可以使用一些UI组件库,如`mint-ui`和`vant-ui`来快速构建界面。\[2\] 除此之外,还可以使用Axios进行网络请求的封装,使用iconfont图标库,连接真机进行调试,打包APK并发布应用。在开发过程中,可以不断学习并更新项目,逐步完善项目结构和功能。\[3\] 总结来说,开发Vue移动端App需要引入相应的组件库和工具,进行适配和开发,并不断学习和更新项目。 #### 引用[.reference_title] - *1* *2* *3* [vue开发移动端app-学习记录](https://blog.csdn.net/weixin_44736005/article/details/113406120)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值