一.话不多，先看效果：
视频B站效果演示地址~
（大佬勿入，大佬勿入，大佬勿入）这是个单页面音乐播放器，只用到了 html+css 与很基础的vue语法，所以适合初学者，看一看10分钟就会了~
这个思路是借鉴黑马的~
二.详细制作步骤（完整代码在最后）：
1.第一步当然是定义标签，对于每一个标签的作用注释都写得清清楚楚啦~：
标签里的vue语法解释（先看后面的js部分再看这里更好理解）：
给这个标签 v-model='query’双向绑定数据query，@keyup.enter="searchMusic"绑定键盘回车事件，触发searMusic函数。
{
{item.name}}
放内容，写在{
{}}里。item相对于变量。
v-for="" 根据 musicList这个数组里元素的数量，动态生成多少个 li 。
@click="playMusic(item.id)点击事件，触发playMusic(item.id)函数，并传参数。
:class="{playing:isPlay}，若isPlay值为真，playing这个选择器生效。
:src="poster"地址的值为自己定义的变量poster。
后面都是相似的了，以此类推~
2.定义css部分，对一些不常见的属性都会解释~：
1.整体区域：
/* 整体 */
.container{
width: 800px;
height: 500px;
background-color: rgba(248, 250, 252,0.3);
border-radius: 10px;
position: relative;
overflow: hidden;
}
border-radius: 10px; 角弧度 overflow: hidden;溢出隐藏
2.头部区域：
/* 头部 */
.top{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
border-radius: 10px 10px 0 0;
background-image: linear-gradient(45deg,rgb(99, 202, 243),rgb(9, 253, 180),rgb(40, 106, 230));
z-index: 11;
}
{
{item.user.nickname}}
{
{item.content}}