Vue.js打造的音乐播放器
npm install -----安装依赖
npm run dev -----运行
npm run build -----打包
node prod.server.js -----打包后运行vue学习项目，基于qq音乐API，完成音乐播放和搜索等。
具体API接口查看 ccchangkong/article#23
- 音乐播放
- 音乐控制和自动循环播放
- 音乐搜索
- 播放详情页
- 音乐进度拖拽
- 个人中心模版
在线预览地址 👉 http://music.qirenji.com/
- Vue2.0：前端页面展示。
- Vue-cli：vue手脚架工具。
- vue-router：页面路由切换。
- axios：向后端发起请求。
- Vuex：实现不同组件间的状态共享。
- ES6：箭头函数等语法很好用。
- localStorage：本地存储，保存歌单和个性化设置。
- Express：后端调用qq音乐API，返回数据。
- Webpack：vue-cli自带Webpack，添加sass相关loader，其他vue-cli已经配置好了webpack，你只需要安装依赖就可以，使用的时候只需要<style lang="scss"></style>。
- SASS(SCSS)：用SCSS做CSS预处理语言。
- flex：flex弹性布局，简单适配手机、PC端。
- CSS3：CSS3过渡动画及样式。
项目使用vue-cli手脚架工具搭建，大部分源文件放在src目录下，所有这里只列出src目录结构，其他请参考vue-cli手脚架工具
|-- src // 源码目录
| |-- components // 公共组件
| |-- about // 关于页
| |-- find // 搜索页
| |-- footer // mini播放器
| |-- header // 页面头部
| |-- musiclist // 歌曲列表页
| |-- play // 播放详情页
| |-- social // 个人中心页
| |-- common // 公用资源
| |-- style // 公用sass样式（默认样式）
| |-- router // 配置页面路由
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
-
深入学习vue.js全家桶，使用Vuex管理组件状态很方便。
-
事先要先想好整个页面结构和组件划分，方便快速开发。
-
继续完成歌词同步播放。
关于我: http://www.qirenji.info/about
GitHub: https://github.com/qirenji/
E-mail: [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent