本项目是本人2019年学习vue的练手项目，此文记录项目练习过程中的的一些细节和难点。（文章最后更新时间：2019/12/15）
本文目录
- 1.项目使用技术
- 2.架构搭建：vue-cli3.x版本
- 3.项目资源准备
- 4.后台服务启动
- 5.解决跨域问题
- 6.移动端适配
- 7.轮播图插件
- 8.使用Axios获取轮播图数据
- 9.添加图片懒加载
- 10.封装mheader组件
- 11.背景图片模糊
- 12.组件绑定数据的优化处理
- 13.better-scroll优化滚动
- 14.格式化歌曲数据
- 15.使用mixin快速开发
- 16.请求接口优化
- 17.添加转场动画
- 18.全屏播放器动画
- 19.配置vuex
- 20.歌曲的播放与模式转换
- 21.进度条
- 22.歌词的滚动效果
- 23.删除歌曲
1.项目使用技术
工具类：vue-cli、webpack、eslint、eruda（手机上的真机调试工具）
框架：vue.js
插件：vue-router、vuex、axios、better-scroll
2.架构搭建：vue-cli3.x版本
安装新版本
npm install -g @vue/cli
安装之后vue -V可以查看当前版本
命令行工具中输入vue ui 即可通过浏览器来管理我们的项目
创建项目
进入到想要创建项目的目录
vue create musicapp
接下来选择配置，选择安装更多配置之vuex，router，css
Use history mode for router？
不使用hsitory模式，因为history模式服务器需要做更多的配置才行
选择less预处理器
选择使用ESlint+Airbnb config
为了项目更加的直观，选择将所有的配置存放到专门的config文件中去
等等
所有配置选择之后，项目就开始自动下载和安装中。
安装之后npm run serve项目就可以启动运行了。
项目目录分析：
3.x版本的public文件夹对应的2.x版本的static文件夹，存放的是静态资源
src文件夹是我们主要写代码的地方
另外还有一些配置文件，因为我们在选择配置的时候选择的是把这些配置都单独划分出来，否则的话这些配置都会塞进package.json中
之前的vue-cli生产的项目文件，webpack配置信息都写在专门的build文件夹和config中，但是3.x版本中，却没有这些文件夹，如何把webpack的配置给输出出来呢？
vue inspect > out.js可以将项目的webpack配置输出出来
输出出来后我们可以很清晰的看到所有的webpack配置了，那么接下来如果我们想要添加一些自己的配置，该怎么做呢？
我们可以在项目根目录下新建一个vue.config.js文件，用来写一些我们的配置，代理服务器的配置代码就是写在这里面的。
3.项目资源准备
我们在开始一个项目的时候，通过会使用reset.css来进行样式的重置，一般还会引用一个common.css来添加一些公共样式，另外还可能会使用到字体图标iconfont.css，这些css肯定是要全局使用的，在vue中，我们只需要把这些文件在main.js进行引用就可以全局生效了
import 'swiper/dist/css/swiper.css'
import './assets/css/reset.css'
import './assets/css/common.css'
import './assets/fonts/iconfont.css'
4.后台服务启动
在github有热心同学用nodejs写了一个网易云音乐API，我们可以进行安装和使用。
步骤：git clone xxx 项目根目录中npm install
然后node app.js，项目就可以启动运行了。
5.解决跨域问题
因为项目是在webpack中搭建的，所以我们可以利用webpack提供的插件来解决。
在vue.config.js添加以下代码：
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: false,
pathRewrite: {
'/api': '/'
}
}
}
}
/api是为了让项目的代理服务去识别需要进行代理的标记
最终发起请求时，再去把/api的api去掉
6.移动端适配
在pc端只有一个视口，那就是视觉视口。
但是在移动端，跨域分为三个视口（viewport）
- 视觉视口：代表浏览器可视区域的大小
- 布局视口：网页布局的区域
- 理想视口：不需要用户缩放和横向滚动条就能正常的查看网站的所有内容。
通常在移动端我们会在页面代码中加入一个meta标签
本项目我们使用的解决方案是手淘的flexible
安装
npm install lib-flexible --save
在main.js中引入
import 'lib-flexible'
接下来把public文件夹中的index.html页面中的meta，name=viewport标签去掉，因为这个标签的作用flexible可以去自动完成。
flexible会动态的设置html的font-size，这点可以在页面的调试代码中看到。
安装专门用来自动计算rem的插件
npm install postcss-pxtorem --save
在项目目录下新建一个postcss.config.js添加配置代码
module.exports = {
plugins: {
autoprefixer: {},
'postcss-pxtorem':{
//设计稿对应的rem尺寸，此时是iPhone6对应的75px
rootValue:75,
//所有元素的px自动转化成rem
propList:['*']
}
},
};
大写的PX不会被转换成rem，适合边框使用
7.轮播图插件
衡量、选择插件/库的需要考量的几个方面
- 所提供的功能是否能满足我们的需求
- GitHub上面的star数量
- issue的提交量，存在量
- 大厂背景
- 文档写的如何（这点很重要）
这里，我们选择使用vue-awesome-swiper
安装：npm install vue-awesome-swiper
因为这个轮播图我们有可能在项目的多个地方都用到，所以我们选择全局引用。
全局引用：import vueAwesomeSwiper from 'vue-awesome-swiper'
挂载：Vue.use(vueAwesomeSwiper)
同时，我们还需要全局引用一下swiper的css文件
import 'swiper/dist/css/swiper.css'
vue-awesome-swiper就是对swiper做的封装，所以使用方式和demo代码都可以去swiper的文档中找
8.使用Axios获取轮播图数据
安装：npm install axios --save
然后在我们想要使用的页面中进行引用
import axios from 'axios'
然后再methods中写发请求的逻辑代码
async getNewSongs() {
//我们通过axios拿取到的数据，会经过axios的封装成一个包含
//headers、status等属性的对象，原始数据就是data属性，
//我们这里就是通过解构赋值去直接获取到对象中的data的属性值。
const { data } = await axios.get("/api/personalized/newsong");
if (data.code === 200) {
this.newSongsData = data.result;
}
},
拿到之后把数据渲染到html中
![]()
这时候我们会发现请求到的图片非常的大，这样会增加内存消耗，所以我们可以img标签请求图片资源的时候添加参数
:src="${item.song.album.blurPicUrl}?param=400y400"
这样请求到的图片大小会被压缩
9.添加图片懒加载
当页面比较大的时候，如果在进入的时候就默认把页面的全部图片都加载的话，会造成资源的浪费，我们可以使用懒加载技术来进行优化。
这里，我们选用vue-lazyload插件
安装：npm install vue-lazyload --save
全局引用：import vuelazyload from 'vue-lazyload'
挂载：
Vue.use(vuelazyload,{
//加载过渡图片
loading:'/load.gif',
//
error:'/user-bg.png'
})
这里需要注意一下，在views和components代码中引用图片，可以使用相对路径，url-loader等插件会自动帮我们把路径改成打包之后的路径。但是在main.js中的引用路径不会经过webpack的编译，所以我们在main.js引用图片最好要使用绝对路径。这样的话我们需要提前知道图片在打包之后所在的位置。public文件夹下的东西，webpack在打包编译的时候，会把里面的资源直接拷贝到编译后的文件根目录中。所以我们可以把要在main.js中引用的图片先拷贝到public文件夹中，然后引用的时候直接以“/”开头就行了。
接下来我们在项目中引用到图片的地方，把:src改成v-lazy就可以实现图片懒加载了。
更改加载过渡图片的样式：(这里把加载图片缩小为原来的0.3倍)
img[lazy=loading] {
transform: scale(0.3);
}
10.封装mheader组件
header在很多地方可以用到，但是在一些地方的背景色不同，所以封装的时候可以动态的传递一个背景色数据
首先需要新建一个组件文件，注意header已经是标签名了，所以不能做再命名为header，这里命名为mheader