轻量级音乐播放器搭建 2
下面就正式开始播放器的编写，首先输入以下指令（需要node，npm，vue-cli等环境）初始化一个VueJs应用：
vue init webpack gakki-fm
然后一路回车，注意安装VueRouter。之后：
cd gakki-fm
npm install
npm run dev
Vue应用就初始化好了，现在要做的就是对项目src目录中的文件进行修改。首先vue应用的入口是mainjs文件，一般情况下（Vue版本为2.x，安装了VueRouter），main.js文件会是以下的样子：
其中创建了一个Vue的实例，el属性表示这个实例挂载到id为app的元素上。router是router: router的简写，表示使用VueRouter进行路由。对外暴露的组件就是App这个根组件。所以说我们只需要修改App根组件就可以了。那么再来看App.vue这个根组件：
首先他的模板就是template中的内容，这里提一下：组件会替换他的父组件中的标签为子组件名（模板中只允许小写，如有大写字符则以小写字幕加'-'符号代替）模板。也就是说这里的id为app的div会替换为Vue实例（其父组件）中的'<app>'标签，注意是替换，而不是在标签之内（这是当然啦，模板标签只是一个自定义的名称，如果保留这个标签到html中，vue怎么进行解析呢？）。
所以现在就是对这个app.vue文件进行修改。使用vue、react等MVVM框架开发与直接写html有一个很大的不同就是MVVM框架中对组件进行开发，组件的好处之一是可以将整个应用模块化，另一个好处是组件可以复用。所以在写到要准备修改原有app组件的时候，我想先对应用进行组件的划分：
在三个页面的最上位置，分别有两个按钮，可以对另外的两个页面进行跳转。这里应当作为一个组件，然后跳转的不同的位置通过slot插槽来进行控制；然后下面的歌曲播放控制可以做一个组件，因为不论什么歌曲控制内容都是通用的。歌词的显示可以作为一个组件，方便管理等。这是第一页的大体情况。
对于移动端的布局，使用flex布局比较简便灵活。flex布局可以子元素的均匀或者居中分布，并且可以自适应窗口。如果要使用flex布局需要在父元素中设定display为flex，然后再设置 justify-content: center就可以实现子元素水平居中，最后设置 align-items: center 可以实现子元素垂直居中。flex的核心概念是容器与轴，包括外层的父容器内层的子容器，主轴与交叉轴。flex布局的css设置可以由父元素统一设置，子元素也可以单独进行设置。父容器有两个属性可以设置：justify-content 属性用于定义子元素如何在主轴方向进行分配间距，可以设定的值有五个，flex-start / flex-end / center / space-around / space-between。align-items 属性用于定义在交叉轴方向上如何分配子容器间距，可以设定的值有五种：flex-start / flex-end / center / baseline / stretch。
首先写第一个组件，即切换显示页的组件，在src组员目录中新建一个components目录，用于储存各个组件，然后创建head-bar组件；
<template>
<div id="head-bar">
新垣结衣
</div>
</template>
<script>
export default {}
</script>
<style scoped>
</style>
这样就是一个最最基本的组件，然后我们将app.vue中的img元素进行去除。这个时候app.vue中就只剩下了router-view这个元素了。这个元素是VueRouter的一个内置组件，表示当前路径下的子路由。什么意思呢？比如说当前的路由地址为parent-path，那么在router中定义的parent-path下面的子组件的路径为children-path，当路径请求到这个children-path的时候，就会在这个router-view进行显示。所以说我们这里要对router目录下的index文件进行修改：
可以看到，routes数组就是所有路由的集合，现在默认的是当路径为根路径的时候，显示Hello这个组件，我们不要这个组件了，我们需要新定义一个播放器组件，在默认的情况下显示。所以对index.js文件进行修改：
import Vue from 'vue'
import Router from 'vue-router'
import MusicPlayer from '@/components/music-player/music-player'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: MusicPlayer
}
]
})
这样就是在默认情况下显示播放器组件。然后需要编辑播放器组件，播放器组件的最上方就是刚刚编写的head-bar组件。不过在编写的过程中遇到了一个情况，还是要说一下，就是关于import引入模块时候的路径的问题，在最原始的时候，我们都是写相对路径与绝对路径。但是现在由于有webpack，他可以将代码进行打包，所以就不需要再关注路径的问题了，只需要进行如下的配置：再项目第一级目录的build目录中，找到webpack.base.conf.js，这个文件中暴露一个对象，其中有个resolve属性，再其中有一个alias属性，这个alias英文意思为别名，就是说我们可以把常用的目录在这里定义一下别名。比如说：
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
}
},
好了不罗嗦了，回到刚才的话题，music-player.vue现在如下：
<template>
<div>
<header-bar></header-bar>
</div>
</template>
<script>
import HeaderBar from 'components/header-bar/header-bar'
export default {
components: {
HeaderBar
}
}
</script>
可以看到，首先需要在MusicPlayer中进行引入所要用到的子组件HeaderBar，引入之后需要在这个组件中进行注册，此处使用了ES6的简写语法，可以只写一个HeaderBar。然后就是在模板当中进行使用。在使用组件的时候，标签名不能够有大写字母，所以这里的标签名为header-bar。然后在浏览器中就可以看到效果了。当然这只是一个最简短的示例，下面对MusicPlayer这个页面进行编写：
参考网易云音乐与豆瓣FM（很久之前的，说实话现在版本的UI设计真的很难看）的样式，除了之前写的有个header-bar，中间部分就是显示歌曲专辑封面的，这里其实可以做成一个组件，也可以不做。但是如果做成豆瓣FM这样的，豆瓣的设计的挺有意思，他让滚动条把图片包围起来了，这样显得非常简洁。我想做成这个样子的，但是这个看起来并不好做。可能有这样的插件或者CSS3，但是现在我也不好说。（时间过了十分钟后）好像找到了一个。然后就是下边的播放控制，这里当然是要制作一个组件。
所以目前的播放器页面大体上分为三个部分：
<template>
<div class="music-player">
<header-bar></header-bar>
<div class="mid">
<img src="../../assets/logo.png">
</div>
<music-controller></music-controller>
</div>
</template>
<script>
import HeaderBar from 'components/header-bar/header-bar'
import MusicController from 'components/music-controller/music-controller'
export default {
components: {
HeaderBar,
MusicController
}
}
</script>
其中中间的div用于显示专辑封面与圆圈型的进度条。这里有一点要提醒，虽然之前已经配好了webpack的resolve的alias，但是在模板中的资源等路径是不能使用这个alias代替的。alias只能简化模块引入时的路径。
为了‘节约资源’，除非特殊情况，我就不对css进行解释了。
到此为止，就要考虑以下怎么来播放歌曲了。首先，当用户来到music-player这个组件的时候，也就是组件created的时候，要向后端服务器发送请求，此时用户没有登陆，所以应当播放默认或者是随机推荐的频道。这时就有个问题，发送请求是获得一个歌单列表呢还是或者一首歌的信息呢？这里我本来想着自己搭后端来进行请求，但是太懒了，于是还是使用网易云音乐的API。虽然有了API，找到个合适的借口也不容易，最终我看着推荐新音乐这里感觉不错，接口url为/personalized/newsong。但是有个问题是网易云音乐没有无限制的在未登录的情况下这样不断的获取歌单。像是私人FM什么的都是需要登陆的，所以刚才的问题有答案了，默认播放一下获取一个列表。
参考链接：
