网易云音乐项目实现步骤
1、项目后端创建
（1）.下载项目所需后端文件:
项目源码01-NeteaseCloudMusicApi-master(后端api源代码)
（2）.将其解压并通过终端指令 node app.js 运行所需后端文件
- 项目创建：
（1）.通过vue3-cli 来创建项目：vue create music003
（2）.选取并下载所需依赖包文件
（3）.选取vue版本
（4）.通过终端命令npm run serve 运行项目
- 发现有些创建发现页面，后在页面中分别以组件形式引入：导航栏，轮播图，发现歌单列表
前置：引入文件控制文本大小方法通侦测设备屏幕宽度依靠特定函数动态调整
（1）.导航栏
将导航栏以组件形式添加到页面上，以此优化项目结构方便后期的开发工作
具体实现步骤：
- 在components创建组件 topNav.vue
2.将组件 topNav.vue引入初始显示页面view文件夹下的HomeView.vue文件并注册，使用
- 页面编写
- 在特定地方使用阿里巴巴矢量图标以实现特定图标的渲染
文件引入：
特定图标的渲染：
（2）轮播图
- 下载并使用依赖包 swiper vue-awesome-swiper与swiper@5 以快速简洁的创建组件
- 引入swiper.css 与 swiper 文件
- 通过swiper.css 与 less 文件快速创建组件css样式
- 通过Swiper对象函数 绑定操纵对象并对对象下元素进行轮播
具体实现方法：
先下swiper vue-awesome-swiper再下swiper@5
其中loop为循环模式
autoplay为是否切换
speed为切换所需时间，单位为毫秒
5.设置分页器
1.通过pagination对象绑定对象并进行点击设置
el为绑定元素 clickable为是否允许点击
6.数据替换
将页面中的初始数据替换为从后端获取的数据
实现方法：
1.
2.
（3）icon图标
1.先完成整体框架
2.从阿里矢量图标库引入图片
（4）歌单列表
具体实现方式与swiper轮播图类似，省略。
（5）歌单详情与歌曲列表
实现步骤 1.在views创建组件 listView.vue，在components里创建listViewTop.vue与playList.vue
2.在listView.vue中绑定listViewTop.vue与playList.vue的路由信息
3.向子组件中发送所需数据
（6）播放歌曲
- 定义一个函数，修改state中的playlist音乐播放列表数据
- 通过audio标签播放歌曲
（1）
获取歌曲id通过id 将 https://music.163.com/song/media/outer/url?id=id.mp3 以 src 赋予 Audio 即可播放
（2）播放与暂停的切换
（7）歌单详情页面
- 整体框架
2.进入歌单详情页面与返回
3.显示唱片内容
4.显示歌词内容
我们使用comit触发mutations中定义的函数（修改state中同步数据）
使用dispatch触发actions中定义的函数（修改state中异步数据）
6.歌曲的上下首切换
给上下首图标引入一个函数goplay（），用于歌曲下标加减
然后引入下标值，此时要进行判断，当歌曲下标小于零的时候回到最后一首，
下标值大于歌单长度回到第一首，这样就能实现歌曲的上下首切换
（8）搜索页面
- 新建Search.vue项目用于展示搜索页面
- 新建searchTop.vue页面用于呈现搜索
- 在Search.vue中引入searchTop.vue页面
- 给主页面的搜索图标加一个路由
在router文件夹下的index加一个
给topNav.vue下，添加点击事件，通过路由触发页面出现
- 编辑searchTop.vue页面
页面的样式CSS排版群里有，主要是api端口的增加
在api下的index，增加一个端口，用于搜索歌曲
在vue页面引入端口
定义一个data（）来获取用户输出框要搜索的数据和储存搜索到的数据
搜索栏进行传输数值给data（）
然后methods方法里增加一个方法，将后端搜索到的数据传输给data（）
然后页面中进行循环展示
（9）搜索页面播放歌曲
思路：
1.将当前点击歌曲追加到播放列表末尾
2.修改当前播放歌曲下标为播放列表数组最后一位下标
步骤：
定义一个函数，搜索歌曲点击切换时，将点击的这首歌曲添加到state的播放列表末尾
点击搜索页面歌曲触发事件
（10）登录页面
- 先新建两个vue，一个Login.vue一个Me.vue并新建路由
