Vue高仿《one·一个》app

最近github好久没提交代码了,一个原因是期末考试复习很紧张,另外就是在学习vue,真的觉得vue是个不错的框架。目前项目很多细节没有完善,后期会进一步完善。
github地址:https://github.com/th720309/one-webapp(求star啊)


主要依赖

  1. 基于vue@2.0
  2. 使用vue-cli@2.0搭建项目框架
  3. 使用vue-router进行页面路由切换
  4. 使用vue-resource进行http请求获取数据
  5. 数据api由jokermonn提供
  6. 使用stylus编写样式
  7. 使用eslint进行js代码的规范
  8. webpack打包处理

在线预览

demo
(PC端建议开启chrome调试模式食用更佳,移动端直接在浏览器开启即可 )

GIF

这里写图片描述

Build Setup

# clone the repo into your disk.
$ git clone https://github.com/th720309/one-webapp.git

# install dependencies
$ npm install

# serve with hot reload at localhost:8088
$ npm run dev

# build for production with minification
$ npm run build
实现一个音乐App需要考虑到很多因素,例如音乐的播放、列表的展示、搜索功能、歌词显示等等。下面我将简单介绍如何使用Vue实现一个基础版的音乐App。 1. 准备工作 首先,我们需要准备好一些必要的资源,例如音乐文件、歌词文件、图片等等。这些资源可以放在静态资源目录中,例如public目录。 2. 创建Vue项目 使用Vue CLI创建一个新的项目: ``` vue create music-app ``` 创建完成后,进入项目目录并启动开发服务器: ``` cd music-app npm run serve ``` 3. 编写页面结构 创建一个音乐列表页面和一个歌曲详情页面,可以使用Vue Router进行路由管理。页面中需要展示音乐列表、歌曲封面、歌曲名称、歌手、歌词等信息。 4. 实现音乐播放 使用HTML5的audio标签进行音乐播放,同时使用Vue的生命周期钩子函数和watch监听音乐播放状态,实现播放、暂停、上一首、下一首等功能。 5. 实现搜索功能 使用Vue的computed属性和watch监听搜索关键词的变化,实现搜索功能。同时可以使用第三方API获取搜索结果。 6. 实现歌词显示 使用第三方库实现歌词解析和显示,例如lyric-parser和lyric-scroll。 7. 发布项目 完成开发后,使用npm run build命令进行打包,然后将打包后的文件部署到服务器上即可。 以上是实现一个音乐App的基本步骤,具体实现过程中还需要考虑到很多细节问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值