第2章 项目初始化和推荐页面开发

2-1

查看vue-cli版本 利用vue-cli创建项目

2-2

使用npm run serve启动本地服务

报错：Newline required at end of file but not found

JS-CS-HTML Formatter插件卸载或禁用，然后重启vscode就可以了。

报错：除非提供了‘–jsx‘标志，否则无法使用JSX

快速生成vue页面模板 vue回车

import Header from ‘@/xxx’路径前面的“@”符号表示什么意思？

”@”符号是一种别名的写法，这里代表”src”路径。

报错：Unexpected trailing comma 逗号问题

prettier 配置文件 解决自动添加逗号的问题

打开VScode摁住 Ctrl + Shift + p 搜索setting.json可进入编辑

2-3

main.js全局导入index.css

报错，识别不了变量 配置vue.config.js，全局引入变量和 mixin

也就是通过这个文件对webpack规则进行修改

css选择器[class^="icon-"]、[class$="icon-"]是什么意思

【Vue】组件命名报错 “Component name “XXX“ should always be multi-word”的解决方法 "vue/multi-word-component-names":"off"

router-link的router-link-active类【配置好路由规则后才会高亮】

然后在view目录下定义四个组件

配置好路由规则后，为什么点击后不显示对应页面呢，因为你没有把路由视图组件使用上

2-5 轮播图开发

前端请求封装

配置

2-7 BetterScroll 2.0

setup函数

vue3里获取dom元素可以用ref

1. options API就是用this.$refs.XXX获取
2. composition API则是以ref API方式获取：

use-slider.js抽离逻辑

flex学习

Three values: flex-grow | flex-shrink | flex-basis
flex: 0 0 60px; 这三个属性都是在子元素上设置的

1. 第一个属性：flex-grow
   该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。
2. 第二个属性：flex-basis
   该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。
3. 第三个属性：flex-shrink
   该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。

2-9 移动端遇到需要滚动的时候，推荐Better Scroll，支持回弹什么的

封装 scroll 组件，用一下ObserveDOM

2-10 图片懒加载

vue2.0是使用vue-lazyload

而vue3.0则不能直接使用vue-lazyload，所以这里使用 vue3-lazy ，并全局注册

使用v-lazy指令

2-11

loading居中样式

position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);

自定义指令 v-loading

• el:指令所在的标签对象
• binding:包含指令相关信息数据的对象
  
  
  

第3章 歌手页面开发

3-3 Vue.nextTick() 如果不加回调函数会怎样？

Vue.nextTick( [callback, context] )在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

• 如果没有提供回调且在支持 Promise 的环境中 则会返回一个 Promise！！！
• 所以 await Vue.nextTick() 相当于在 await 后面加了一个 Promise。
• 我们可以知道，await 后面必须跟 Promise，否则会报错；如果跟了 Promise，那么当执行到这里的时候，会先返回，等 Promise 返回后，再继续执行下面的代码（保证任务一个一个执行）

3-4 怎么获取实时滚动的滚动值

首先初始化scroll的时候，设置 probeTypew为3

3-5 获得固定标题是啥

{width=68%}

3-6 实现接近固定标题时，下一个标题把它顶上去的效果

当distance足够小，比标题高度还要小时。否则固定标题不需要挪，即diff=0

3-7 歌手列表快速导航入口实现

快速导航高亮 渲染

{width=61%}

点击导航跳到对应区间

{width=81%}

onShortcutTouchStart 点击时导航 onShortcutTouchMove 手指拖动时导航

3-10 易错BUG

第4章 歌手详情页开发

4-1 在singer页面定义二级路由

4-5 歌手页面的歌曲列表样式根据歌手图片高度动态调整

实现歌曲列表往上拉滚动时，遮盖歌手图片的效果

但仅仅是这样是不够的，当滚动到一定位置修改层级，以致遮不到上面的歌手名字部分

且需实现歌曲列表在顶部往下拉，歌手图片回弹的效果

{width=43%}

4-6 歌曲列表往上推的时候，歌手图片模糊效果

每次执行this.xxx的时候，Vue其实会执行依赖收集过程，频繁时不好，所以用个稳定的局部变量缓存一下比较好（性能优化）

4-7 刷新页面依然能正常显示数据（歌手详情页）

利用浏览器的本地存储能力，这里我们用sessionStorage

有传props的话优先用，如果没有的话根据路径上的mid判断sessionStorage存的匹配得上吗（说明是否是当前页面刷新）再渲染显示

这里的storge我们用第三方库 进行封装再使用,这样就方便我们存储对象了(key,对象)（原始的API只能存储字符串）

首先从歌手列表跳转到某个歌手详情前

{width=81%}

然后歌手详情页面，弄一个计算属性computedData处理渲染问题

{width=81%}

4-8 路由切换的过渡动画 【过渡动画 】

路由嵌套知识点

点击歌手详情时，从右进入。（进入过程中：slide-enter-active，slide-enter-to）

从歌手详情返回时，离开去到右。（退出过程中：slide-leave-active，slide-leave-to）

4-9 没有数据时的反馈 参考2-10/11的v-loading自定义指令

看看el是什么 原生DOM元素

create-loading-like-directive.js可以返回loading或者no-result的自定义指令对象

你要用什么组件创造自定义指令对象，就把什么组件传进createLoadingLikeDirective函数中返回

注意：自定义指令核心是拿到对应的自定义指令对象，而不是组件本身

v-no-result类似

易错BUG：el[name].instance = instance中的el[name]有必要，便于分别装住loading组件实例或者no-result组件实例而不起冲突

4-10 Vuex

补充知识：命名视图

为什么有的路由跳转是在当前页面局部区域切换组件，有的点击是覆盖当前页面切换组件？【路由组件样式的问题】

播放器在任何路由视图中都能点击出现，所以是一个全局组件，它的状态也适合放在全局管理中

4-11 随机播放按钮

第5章 播放器内核组件开发

5-1 播放器组件player

播放逻辑

播放器收起

5-2 播放器播放按钮的暂停与播放

5-3 播放器歌曲前进与后退逻辑开发

5-4 播放器 DOM 异常错误处理

保证歌曲准备好后再允许播放（error下也设true是为了能够前进或后退）

交互UI效果 快速切歌的时候中间状态还没准备好按钮就是disabled的

5-5 播放器 歌曲播放模式相关逻辑开发

缓存当前播放歌曲id，保证切换为随机播放模式的时候，还是播放当前歌

播放模式钩子函数

5-6 5-7 播放器 歌曲收藏功能相关逻辑开发

{width=66%}
{width=81%}

一旦浏览器刷新，Vuex会重新初始化。所以要从本地存储初始化状态到内存中

5-8 5-9 播放器 进度条相关逻辑开发

5-10 播放器 cd 唱片旋转相关逻辑开发

播放歌曲时，中间图片旋转 利用animation

播放时转，暂停时停并同步旋转角度【自理解：靠外层容器同步旋转角度】

里面的图片正常class只有image，播放时class有image和playing，暂停瞬间把图片的旋转角度给外层容器，那这样外部容器就会帮助同步旋转角度

5-11 5-12 5-13 播放器 歌词相关逻辑开发

{width=81%}

5-14 5-15 播放器 中间视图层手指交互相关逻辑开发

use-middle-interactive.js

触摸事件

• touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
• touchmove事件：当手指在屏幕上滑动的时候连续地触发。
• touchend事件：当手指从屏幕上离开的时候触发。

5-16 5-19 播放器 mini 播放器开发

过渡效果，透明度从0到1，1到0。从下上来，从现到下

{width=43%}{width=43%}

进度圈 SVG <circle>

小大播放器的进度同步

小播放器左右滑动切歌功能

每首歌生成一个对应slide page

也写一个对应的的钩子函数use-mini-slider.js

5-20 5-21 播放器 全屏切换过渡效果实现

大小cd动画use-animation.js 后面再看叭

利用第三方库用js写animation

5-22 5-26 播放器 播放列表组件实现

5-27 播放器 滚动列表高度自适应

5-28 播放器 高阶 Scroll 组件的实现

利用 render 函数,wrap-scroll

第6章 歌单详情页与排行榜页面开发

easy

第7章 搜索页面开发

7-1 搜索框防抖 第三方库throttle-debounce

7-3 搜索页面 Suggest 组件开发

ok

第8章 添加歌曲与用户中心页面开发

8-1 8-5 添加歌曲到列表功能开发

8-6 8-8 用户中心页面开发

ok

第9章 性能优化与项目部署

9-1 keep-alive 组件应用

9-2 路由组件异步加载

添加插件

异步加载组件，后面的注释是为了设置调试时在network面板看到加载文件的名字

执行npm run build

9-3 项目部署

第10章 课程总结