摘要:播放器基础样式 player.vue <template> <div class="player" v-show="playlist.length>0"> <div class="normal-player" v-show="fullScreen"> <div class="background"> 阅读全文
posted @ 2021-04-08 23:27 小风车吱呀转 阅读(12) 评论(0) 推荐(0) 编辑
摘要:在components目录下创建player=>player.vue组件 <template> <div class="player"> <div class="normal-player"> 播放器 </div> <div class="mini-player"></div> </div> </t 阅读全文
posted @ 2021-04-06 14:57 小风车吱呀转 阅读(10) 评论(0) 推荐(0) 编辑
摘要:播放器可以通过歌手详情列表,歌单的详情列表,排行榜甚至是搜索结果去打开,即多个组件都可以操作这个播放器,当这个播放器一旦打开以后,缩小播放器,它仍然可以在后台播放运行。所以控制播放器的数据一定是全局的,那么就需要通过vuex来管理这些数据。 在state.js里 vuex需要管理以下数据: 播放器的 阅读全文
posted @ 2021-04-05 19:53 小风车吱呀转 阅读(11) 评论(0) 推荐(0) 编辑
摘要:子路由配置 创建singer-detail.vue组件 <template> <div class="singer-detail"></div> </template> <script> export default { name: 'singer-detail', }; </script> <st 阅读全文
posted @ 2021-04-04 22:25 小风车吱呀转 阅读(18) 评论(0) 推荐(0) 编辑
摘要:歌手列表数据获取 歌手列表数据接口依旧使用前面的API,使用axios获取歌手列表数据 singer.js: import axios from 'axios'; export function getSingerList() { return axios.get('/api/getSingerLi 阅读全文
posted @ 2021-03-29 12:27 小风车吱呀转 阅读(13) 评论(0) 推荐(0) 编辑
摘要:scroll组件 制作scroll 组件,然后嵌套一个 DOM 节点,使得该节点就能够滚动。该组件中需要引入 BetterScroll 插件。 scroll.vue: <template> <div ref="wrapper"> <slot></slot> </div> </template> <s 阅读全文
posted @ 2021-03-15 13:29 小风车吱呀转 阅读(71) 评论(0) 推荐(0) 编辑
摘要:数据抓取 在推荐页会展示轮播图,以及热门歌单列表,这些数据都来自QQ音乐的真实数据。在项目过程中发现一些接口失效,可以从QQ音乐API koa2版本获取最新的API。 在本地进行请求: 在vue.config.js中添加: devServer: { hot: true, proxy: { '/api 阅读全文
posted @ 2021-03-12 22:17 小风车吱呀转 阅读(21) 评论(0) 推荐(0) 编辑
摘要:页面骨架 页面的骨架分为三块区域: header(头部标题)、tab(切换按钮)、router-view(路由切换的容器) 在app.vue中: <template> <div id="app"> <m-header></m-header> <tab></tab> <router-view></ro 阅读全文
posted @ 2021-03-08 19:44 小风车吱呀转 阅读(32) 评论(0) 推荐(0) 编辑
摘要:项目学习视频 Vue 2.0 高级实战-开发移动端音乐WebApp (可点击进行观看) 检查环境 在搭建之前检查一下vue-cli的版本(vue --version)和node是否安装(node --version) 使用vue-cli脚手架搭建 输入命令:vue create music 选择Ma 阅读全文
posted @ 2021-03-08 15:07 小风车吱呀转 阅读(19) 评论(0) 推荐(0) 编辑
摘要:在项目学习中所遇到的知识点总结 使用到的一系列Git指令 查看git状态:git status 提交项目到git上: git add . 将项目添加到缓存 git commit -m 'xxxx' 将暂存区内容添加到本地仓库 git push 将本地分支的更新,推送到远程主机 分支的创建/切换/合并 阅读全文
posted @ 2021-02-26 14:16 小风车吱呀转 阅读(15) 评论(0) 推荐(0) 编辑