摘要：
用户个人中心分为两个部分：用户个人收藏的歌曲列表和用户播放历史列表。 先创建user-center.vue，基本代码如下 <template> <transition name="slide"> <div class="user-center"> <div class="back"> <i clas 阅读全文
摘要：
实现点击垃圾桶，清除所有歌曲列表功能 和之前清除所有搜索历史列表一样，引用confirm组件拦截提示用户的操作 <confirm ref="confirm" text="是否清空播放列表" confirmBtnText="清空"></confirm> 给垃圾桶图标添加点击事件showConfirm 阅读全文
摘要：
点击迷你播放器的列表按钮就会弹出一个当前播放的歌曲列表层，这个列表也有一些功能，比如播放模式的控制，点击歌曲播放，收藏歌曲以及从列表中删除歌曲，点击垃圾桶把歌曲列表清空，甚至还可以添加歌曲到队列。 首先是对首页进行开发，基本代码如下： <template> <transition name="lis 阅读全文
摘要：
搜索历史模块不仅在搜索模块出现，还在后续的添加歌曲模块中出现，多个组件多个模块共用了它，这个数据应该保存在全局的vuex中。 在state.js中添加searchHistory // 搜索历史 searchHistory: [], 有了state就设置它的mutation-types、mutatio 阅读全文
摘要：
当搜索内容时会出现搜索结果列表，将这个结果列表封装成一个组件。这个组件就可以根据搜索的关键词请求服务端数据来检索不同的结果。 其基本的dom结构代码如下： <template> <div class="suggest"> <ul class="suggest-list"> <li class="su 阅读全文
摘要：
通过api获取热门搜索关键词 设置api //search.js import axios from 'axios'; export function getHotKey() { return axios.get('/api/search/hot'); } 在search.vue中使用api获取数据 阅读全文
摘要：
搜索框组件是个基础组件，其结构如下： <template> <div class="search"> <div class="search-box-wrapper"></div> </div> </template> <script> export default { name: 'search', 阅读全文
摘要：
排行榜详情页和之前的歌手详情页、歌单详情页布局类似，除了数据不同之外还多了排行榜排名的样式，整体上还是可以复用之前的组件。 初始化代码： <template> <transition name="slide"> <music-list></music-list> </transition> </te 阅读全文
摘要：
前面的推荐和歌手页面已经开发完了，接下来就是排行榜首页开发 排行榜首页的基础样式如下： <template> <div class="rank"> <div class="toplist"> <ul> <li class="item"> <div class="icon"> <img width=" 阅读全文
摘要：
歌单详情页基础开发 歌单详情页和歌曲列表页面是非常类似的，只是数据上的不同。以下是这个组件的基本结构：可以看到和我们的singer-detail一样都有transition动画以及使用了music-list组件,接下来就是想办法把music-list数据传进去。 <template> <transi 阅读全文