|
1 | | -# vue-music |
| 1 | +## 说明 |
| 2 | +接近原生体验的移动端音乐app(之前一直可以播放某🐧音乐网站大部分音乐,部分会员也行,最近打开发现都播放不了了)。 |
| 3 | +但是,不影响代码阅读学习,项目还是能跑起来,只是没声音。 |
2 | 4 |
|
3 | | -> vue全家桶移动音乐app |
| 5 | +> 如果对您对此项目有兴趣,可以点 "Star" 支持一下 谢谢!🙏 |
4 | 6 |
|
5 | | -## Build Setup |
| 7 | +> 或者您可以 "follow" 一下,我会不断开源更多的有趣的项目 👻 |
6 | 8 |
|
7 | | -``` bash |
8 | | -# install dependencies |
9 | | -npm install |
| 9 | +> 如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR 💯 |
| 10 | +
|
| 11 | +> 开发环境: window10专业版; nodejs v10.16.3; vsCode |
| 12 | +
|
| 13 | +> 更多探索:[低仿去哪儿移动app](https://github.com/lumengxin/Travel.git) [包含前后端的低仿亚马逊购物](https://github.com/lumengxin/vue-pc-shop.git) |
| 14 | +
|
| 15 | +> 推荐指数:⭐⭐⭐⭐ |
| 16 | +
|
| 17 | +### 技术栈 |
10 | 18 |
|
11 | | -# serve with hot reload at localhost:8080 |
12 | | -npm run dev |
| 19 | +vue全家桶 + better-scroll + good-storage + js-base64 + jsonp + vue-lazyload |
13 | 20 |
|
14 | | -# build for production with minification |
15 | | -npm run build |
| 21 | +### 项目运行 |
16 | 22 |
|
17 | | -# build for production and view the bundle analyzer report |
18 | | -npm run build --report |
19 | 23 | ``` |
| 24 | +git clone https://github.com/lumengxin/vue-music.git |
| 25 | +npm install |
| 26 | +npm start // 运行 |
| 27 | +npm run lint // 格式化代码 |
| 28 | +npm run build // 打包上线 |
| 29 | +``` |
| 30 | + |
| 31 | +### 更多阅读 |
| 32 | + |
| 33 | +- [笔记](./docs/笔记.md) |
| 34 | +- [需求](./docs/需求.md) |
| 35 | + |
| 36 | +## 项目预览: |
| 37 | + |
| 38 | +[在线演示](http://www.byooka.com/v19/vue-music) |
| 39 | + |
| 40 | +**效果展示:** |
| 41 | + |
| 42 | +<div style="display:flex;flex-wrap:wrap;"> |
| 43 | + <img src="./docs/images/shot/rank.png" /> |
| 44 | + <img src="./docs/images/shot/reco.png" /> |
| 45 | + <img src="./docs/images/shot/reco-26-01.png" /> |
| 46 | + <img src="./docs/images/shot/reco-58-40.png" /> |
| 47 | + <img src="./docs/images/shot/reco26.png" /> |
| 48 | + <img src="./docs/images/shot/search.png" /> |
| 49 | + <img src="./docs/images/shot/user.png" /> |
| 50 | + <img src="./docs/images/shot/singer.png" /> |
| 51 | +</div> |
| 52 | + |
| 53 | + |
| 54 | + |
| 55 | +## 项目总结: |
| 56 | + |
| 57 | +### 要点归纳 |
20 | 58 |
|
21 | | -For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). |
| 59 | +- 使用vue全家桶,vuex管理大中型数据状态 |
| 60 | +- vuex 结合good-storge 实现数据持久化 |
| 61 | +- stylus预处理器的使用 |
| 62 | +- better-scroll,fastclick等移动端开发必用的库 |
0 commit comments