- 项目预览
- 为了更好的体验,请用开发者工具模拟移动端体验
- 扫描二维码在手机上体验
Vue
:用于构建用户界面的 MVVM 框架。它的核心是响应的数据绑定和组系统件vue-router
:为单页面应用提供的路由系统,项目上线前使用 Lazy Loading Routes 来实现异步加载优化性能vuex
:Vue 的集中状态管理,在多个组件共享某些状态时非常便捷,适用于中大型项目ES6
:项目中用到的模块化、解构赋值、Promise、Class 等方法非常好用axios
:基于 promise 的 HTTP 库,请求数据简洁,易用
vue-cli
:Vue 脚手架工具,快速初始化项目代码,以及 webpack 的配置
Node.js
:服务端通讯,抓取网易云音乐数据
Binaryify/NeteaseCloudMusicApi
- 音乐播放
- 歌词滚动展示
- 推荐页面
- 歌单信息页
- 歌手信息页
- 排行页
- 搜索页
|-- src
|-- App.vue
|-- main.js 入口页面
|-- router.js 路由
|-- store.js vuex
|-- components 组件
| |-- Audio.vue 播放器组件
| |-- Banner.vue 轮播组件
| |-- Header.vue 顶部导航栏
| |-- Playlist.vue 歌单列表
|-- utils 常用工具
| |-- model.js 处理数据
| |-- tool.js 工具函数
|-- views 页面
|-- AlbumInfo.vue 专辑页面
|-- Home.vue 首页
|-- Player.vue 播放器页面
|-- PlayList.vue 歌单页面
|-- PlayListInfo.vue 歌单信息页面
|-- Search.vue 搜索页面
|-- SingerInfo.vue 歌手信息页面
|-- SongInfo.vue 歌曲信息页面
|-- Top.vue 排行榜页面
# Clone
git clone https://github.com/BuiltCat/moggy.git
# Install
npm install
# Serve
npm run serve
# Build
npm run build