vue 圆形百分比进度条_一个月能干点啥？我写完 VUE 音乐播放器

本文链接：https://blog.csdn.net/weixin_39928686/article/details/112159802

本文记录了一位开发者一个月内学习并实现Vue音乐播放器的过程，涉及的技术栈包括vue2、vuex、vue-router等。项目使用了真实API接口，详细介绍了数据获取和接口代理方法，并展示了部分页面效果。作者强调面对困难时要坚持不放弃，通过实践提升技能。

摘要由CSDN通过智能技术生成

作者 | 一像素的执着

责编 | 王晓曼

出品 | CSDN博客

前言

我觉得每一段自己努力的时光都需要被自己记录下来，所以就有了想法记录我这一个月看视频的所得。在这个过程中自己没有像之前一样，遇到自己解决不了的问题就逃避。虽然说解决一个问题的速度还是有点慢，大概是自己有点轴，这个方面行不通不知道去换一个方向。

还有就是在这个过程中，自己体验到一个比较完整的开发历程。为什么说是比较完整的项目开发历程，因为自己没有经历切图画界面这一块，自己甚至没有怎么去写UI界面。我的想法是趁着写着文档的同时，把写UI这一块也过一遍。不然明年走出去，只会写业务逻辑的前端程序员，什么玩意吗。碎碎念念这么多，接下来就是写一下自己在这一个月学的一些东西。

如果觉得你看了觉得有点用可以点个赞，如果你也想跟着视频学一遍，你可以点击这个链接进行学习。放心就算你购买这个课程我也没啥佣金，只是单纯地觉得这个课程很好，课程的价值大于购买的价格。

项目总览

1.技术栈

vue2+ vuex + vue-router + webpack + ES6/7 + better-scroll + stylus

2.关于数据接口

写在前面有很多接口都需要后端代理,后端代理怎么做可以看这篇博客,还有所有接口的使用都是用于学习。虽然说接口都给你们贴上去了，但是我还是希望你们可以学会扒别人接口。可能后面接口失效了，自己也可以解决这个问题。

banner图API
推荐歌单API (rnd的参数是使用Math.random生成的)
歌单详情API
歌手API
歌手详情API (singermid 是从歌手API中返回的数据中得到的)
排行榜API
排行榜详情API (topid是从排行榜API得到的)
搜索API (我直接用老师的线上的API了，不过还是要做代理)
热门搜索API
歌词API (pcachetime 是使用 +new Date生成的)
播放地址API (songmid 里面的参数是歌曲的songmid)

3.说明

开源这个项目没这个想法，主要是这个项目老师也没有开源，要尊重老师的劳动成果。

6月份会开始写一个音频类的小程序，比较还是要自己手撸一个项目，面试更加有优势。

4.效果演示推荐页面

歌手页面

排行页面

搜索页面

用户页面

6.项目布局

├── README.md

├── build

│ ├── build.js

│ ├── check-versions.js

│ ├── utils.js

│ ├── vue-loader.conf.js

│ ├── webpack.base.conf.js // alias在这里配置

│ ├── webpack.dev.conf.js // favicon可以在这里配置

│ └── webpack.prod.conf.js

├── config

│ ├── dev.env.js

│ ├── index.js

│ └── prod.env.js

├── index.html // 入口html文件

├── package-lock.json

├── package.json

├── prod.server.js

├── src // 源码目录

│ ├── App.vue

│ ├── api // 接口

│ │ ├── config.js // 公共配置

│ │ ├── rank.js

│ │ ├── recommend.js

│ │ ├── search.js

│ │ ├── singer.js

│ │ └── song.js

│ ├── base // 公共组件

│ │ ├── confirm // 确认组件

│ │ │ └── confirm.vue

│ │ ├── dialog // 弹出组件

│ │ │ ├── dialog.vue

│ │ │ └── vip.png

│ │ ├── listview // 歌手列表组件

│ │ │ └── listview.vue

│ │ ├── loading // 加载组件

│ │ │ ├── loading.gif

│ │ │ └── loading.vue

│ │ ├── no-result // 无结果组件

│ │ │ ├── no-result.vue

│ │ │ ├── no-result@2x.png

│ │ │ └── no-result@3x.png

│ │ ├── progress-bar // 进度条组件

│ │ │ └── progress-bar.vue

│ │ ├── progress-circle // 圆形进度条组件

│ │ │ └── progress-circle.vue

│ │ ├── scroll // 滚动组件(较核心组件)

│ │ │ └── scroll.vue

│ │ ├── search-box // 搜索框组件

│ │ │ └── search-box.vue

│ │ ├── search-list // 用于搜索历史

│ │ │ └── search-list.vue

│ │ ├── slider // 轮播图组件

│ │ │ └── slider.vue

│ │ ├── song-list // 歌曲组件(用于music-list组件)

│ │ │ ├── first@2x.png

│ │ │ ├── first@3x.png

│ │ │ ├── second@2x.png

│ │ │ ├── second@3x.png

│ │ │ ├── song-list.vue

│ │ │ ├── third@2x.png

│ │ │ └── third@3x.png

│ │ ├── switches // 切换组件(user-center组件有用)

│ │ │ └── switches.vue

│ │ └── top-tip // 顶部提示组件

│ │ └── top-tip.vue

│ ├── common // 存放js、stylus、图片、小图标

│ │ ├── fonts // 小图标文件存放所在地

│ │ │ ├── music-icon.eot

│ │ │ ├── music-icon.svg

│ │ │ ├── music-icon.ttf

│ │ │ └── music-icon.woff

│ │ ├── image // 存放logo和favicon

│ │ │ ├── default.png

│ │ │ └── favicon.ico

│ │ ├── js // js库

│ │ │ ├── cache.js // 处理localStorage

│ │ │ ├── config.js

│ │ │ ├── dom.js // 处理dom

│ │ │ ├── jsonp.js // jsonp的封装

│ │ │ ├── mixin.js // mixin

│ │ │ ├── singer.js

│ │ │ ├── song.js

│ │ │ └── utill.js // 节流函数，生成随机数

│ │ └── stylus // 公共样式

│ │ ├── base.styl

│ │ ├── icon.styl

│ │ ├── index.styl

│ │ ├── mixin.styl

│ │ ├── reset.styl

│ │ └── variable.styl

│ ├── components // 组件

│ │ ├── add-song // 组件

│ │ │ └── add-song.vue

│ │ ├── disc // 组件

│ │ │ └── disc.vue

│ │ ├── m-header // 头部组件

│ │ │ ├── logo@2x.png

│ │ │ ├── logo@3x.png

│ │ │ └── m-header.vue

│ │ ├── music-list // 歌曲列表组件(使用比较多)

│ │ │ └── music-list.vue

│ │ ├── player // 播放组件(核心组件)

│ │ │ └── player.vue

│ │ ├── playlist // 播放列表组件

│ │ │ └── playlist.vue

│ │ ├── rank // 排行组件

│ │ │ └── rank.vue

│ │ ├── recommend // 推荐组件

│ │ │ └── recommend.vue

│ │ ├── search // 搜索组件

│ │ │ └── search.vue

│ │ ├── singer // 歌手组件

│ │ │ └── singer.vue

│ │ ├── singer-detail // 歌手详情组件

│ │ │ └── singer-detail.vue

│ │ ├── suggest // 输入搜索内容出现的列表

│ │ │ └── suggest.vue

│ │ ├── tab // 路由切换组件

│ │ │ └── tab.vue

│ │ ├── top-list // 排行详情组件

│ │ │ └── top-list.vue

│ │ └── user-center // 用户中心组件

│ │ └── user-center.vue

│ ├── main.js // 程序入口文件，加载各种公共组件

│ ├── router

│ │ └── index.js // 路由配置

│ └── store // vuex的状态管理

│ ├── actions.js // 配置actions

│ ├── getters.js // 配置getters

│ ├── index.js // 引用vuex，创建store

│ ├── mutation-types.js // 定义常量muations名

│ ├── mutations.js // 配置mutations

│ └── state.js // state状态

└── static

└── logo.png

结束语

其实到最后自己也没有想到竟然把这个项目跟完，以前可能把目标定的太高了。坚持这件事，一定要一个自己可以完成的目标去执行。打个比分我同学叫我一个月学完VUE，但是我的学习能力不足以学完，这个目标是自己完不成的。那么你应该换一个目标，比如说一个半月自己可以学完VUE。你自己要看的是自己什么样的目标自己可以完成，而不给自己一个根本完成不了的目标，在这个过程中你觉得自己完成不了很容易放弃。

放弃很简单，但是坚持下去很难。还有就是你决定要做的一件事情，不要一遇到困难就放弃。逃避很简单，解决它则是很勇敢的行为。你逃避困难的次数越多，你将来就越不可能把这件事情做好。想想自己为啥什么事情都不怎么做的好，是因为自己从小到遇到难一点事情都扛不下来，所以到了成年，基本上干啥都不行。(这句话来自冯大)。

未来希望自己可以直面遇到的困难，菜鸡也有雄鹰梦。

原文链接：https://blog.csdn.net/eagle_zcl/article/details/105946673