• Stars
    star
    214
  • Rank 184,678 (Top 4 %)
  • Language Vue
  • Created over 7 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

仿网易云音乐(webapp)

项目地址 (project address)

api来源 感谢binaryify让我能用喜欢的东西做一个属于自己的播放器!

源码地址 不要脸的求star 哈哈哈!!!

项目预览 1mhere.cn (pc端按F12切换手机调试模式效果更佳!)

二维码 (移动端可直接扫码)

技术栈 (technology)

vue2.0 + vuex + vue-router2.0 + es6 + axios + vux

文件结构 (File structure)

├── build                       构建服务和webpack配置
├── config                      项目不同环境的配置
├── dist                        项目build目录
├── index.html                  项目入口文件
├── package.json                项目配置文件
├── static       	            静态资源
├── src                         生产目录
    |—— api                     api列表和数据处理
    |——|—— apiList.js           api列表
    |——|—— getData.js           数据处理(封装一个axios请求)    
    |—— assets                  静态资源(img,less)
    |——|—— img                  静态图片
    |——|—— style                样式文件  
    |—— components              公用组件
    |——|—— bottomSongList       播放器播放列表组件  
    |——|—— headerNav            头部导航组件
    |——|—— music                音乐组件
    |—— page                    页面组件
    |——|—— albumsListDetails    专辑内容组件 
    |——|—— recommend            个性推荐组件
    |——|—— searchList           搜索列表组件
    |——|—— singer               歌手组件
    |——|—— songDetails          歌曲详情组件
    |——|——|—— player            播放器组件
    |——|—— songList             歌单组件
    |——|—— songListDetails      歌单详情组件
    |——|—— topList              排行榜组件
    |—— router                  路由组件
    |—— store                   数据状态管理组件
    |—— util                    公用方法

项目功能 (Project Function)

完成功能(finish function)

  • 个性推荐,歌单,排行榜页面
  • 滑动功能(左右滑动切换菜单)
  • 播放功能(快进,快退,上一曲,下一曲,歌词同步等)
  • 搜索功能(热门搜索,单曲,歌手,专辑,歌单,用户)
  • 歌单功能(最新,最热,精品歌单及详情展示)
  • 歌手专辑功能(介绍及详情展示)
  • 排行榜功能(云音乐官方版)

效果图 (effect picture)

菜单

搜索

播放

歌单

项目运行(Probject running)

1.克隆项目到本地 : git clone https://github.com/webfansplz/xcMusic.git

2.安装依赖环境 : npm install

3.启动项目 : npm run dev

4.打包项目 : npm run build

总结(summary)

本项目始于本人兴趣,还有许多不足大家轻喷,欢迎大家一起交流讨论学习,喜欢的点个star呗,哈哈哈!

须知(notice)

*** 怎么歌单打不开,音乐播放不了,作者耍我呢 ???(黑人问号)

老铁们见谅,由于网易云api部分接口有限制,频繁访问会导致功能失效,请稍后再试!!!

More Repositories

1

vuejs-challenges

Collection of Vue.js challenges
TypeScript
2,695
star
2

vite-plugin-vue-devtools

Vite + Vue DevTools = DX 🔥
TypeScript
1,625
star
3

temir

Vue for interactive command-line apps
TypeScript
1,009
star
4

article

record and share
JavaScript
704
star
5

vite-plugin-vue-inspector

jump to editor source code while click the element of browser automatically.
Vue
669
star
6

volute

Raspberry Pi + Nodejs = Speech Robot
JavaScript
264
star
7

vtui-npm

Interactive CLI for npm - search and install JavaScript package.
TypeScript
207
star
8

vue-c2c

Transforming Vue components to composable functions
TypeScript
131
star
9

temir-snake-game

Terminal-based Snake game. Powered by Temir.
Vue
111
star
10

null-cli

🛠️ A command makes you more efficient
HTML
87
star
11

vtui-repl

Node.js REPL Terminal.
Vue
83
star
12

giao-js

Mini Javascript Interpreter
TypeScript
66
star
13

xc-cli

a simple spa vue-cli
JavaScript
37
star
14

vue-ssd1306

📺 A Vue Renderer for SSD1306 OLED chip on Raspberry Pi.
JavaScript
35
star
15

Daliy-hot

https://webfansplz.github.io/Daliy-hot
JavaScript
17
star
16

vue-reclick

a directive of vue.js
HTML
13
star
17

mulXc-cli

webpack Multiple page scaffold!
JavaScript
12
star
18

vue-note

vue笔记!
9
star
19

talks

Vue
6
star
20

giao-hooks

🔫 Vue3 Composition-API toolkit
4
star
21

webfansplz

4
star
22

react-ts-music

react-redux-react-router4.0-typescript-webpack4.0
JavaScript
3
star
23

eslint-config

ESLint config preset
JavaScript
2
star
24

xcutils

myFn utils
JavaScript
2
star
25

meet-flutter

records something about flutter
Dart
1
star
26

vue-express-mongodb-blog

my-blog
JavaScript
1
star
27

esho

TS/JS Node powered by swc
JavaScript
1
star