记录一次vue练习的填坑记录

前段时间练习了vue，写了个简单的demo，是模仿网易音乐h5页面效果，内容比较简单只实现了基本的功能，使用了vue脚手架、vue-router、vuex以及vant  ui库。在此简单记录下遇到的坑以及简单的填坑记录。

1、动态路由

通常我们写的路由都是静态路由，就是写死路由的名字，但是有时候我们的路由不能写死，比如涉及到文章详情，获取不同的文章内容，此时我们就需要用动态路由，也就是路由的path属性不能写死。举个栗子~

//页面路由
<route-link :to="'/detail/' + id"></route-link>
//路由配置页面
new Router({
  routes: [
    path: "/detail/:id",
    components: Details
  ]
})复制代码

2、路由组件懒加载

普通单页应用中，路由组件是一次性加载的，会对性能有所影响。因此可以通过路由组件懒加载技术实现按需加载功能。这里只简单写下两个基本的方案：

一、require.ensure()
   const Home = r => {require.ensure([], ()=>{r(require('./home.vue')), 'home'})}
   {
     path: '/home',
     components: Home
   }

二、import webpackChunksName
   const Home = () => import(/*webpackChunkName: 'Home'*/ './home')
   {复制代码

path: '/home',
     components: Home
   }
   同时在webpack里添加
   output: {
    chunkFilename: '[name].js'
  }复制代码

3、网络请求相关

首先就是关于跨域代理的问题，因为用的vue脚手架，可以直接设置proxyTable，网上教程也很多，不多介绍；

其次就是请求添加loading效果。请求数据使用的是axios，可以再请求前和相应后添加拦截器，统一添加loading效果。

//请求拦截器
Axios.interceptors.request.use((config)=>{
    //请求前需要做的事情
    return config
}, (err)=>{
    return Promise.reject(err)
})

//响应拦截器
Axios.interceptors.response.use((response)=>{
    //请求响应做的事情
    return response
}, (err)=>{
    return Promise.reject(err)
})复制代码

4、全局过滤器

通常我们再用vue的时候会涉及到一些数据的处理，比如将较大的数字转换成“xxx万”格式，时间日期的格式化等等，这时候我们可以使用过滤器转化，但是如果很多组件都用到一个过滤器，我们每个组件都写一遍过滤器就不太好了，此时可以添加一个全局过滤器，在需要使用的时候直接调用即可。

//定义一个filters.js文件
const myFilters = {
    changeNums: (nums)=>{
        //对数值进行处理
    }
}

//在index.js里引入过滤器，对其进行遍历，绑定每个过滤器
import myFilter from './filters.js'
for(let item in myFilter){
    Vue.filter(item, myFilter[key])
}

这样在需要使用过滤器的地方直接调用相对应的过滤器就可以了，比如：<i>{{item.song.album.publishTime | timeFilter}}</i>复制代码

5、vue-router的keep-alive

关于这个我在之前文章里已经写过基本的使用，可以点击链接直接查看

vue keep-alive组件的使用

6、css模糊图片效果

原图是清晰的图片，我们需要用css进行模糊处理，需要用到样式的filter:blur()属性。

//html
<div class="box">
  <div class="box-img">
    <img src="a.jpg" />
  </div>
  <div class="box-bg"></div>
</div>

//css
.box{
  width: 100%;
  height: 200px;
  position: relative;
}
.box-img{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-filter: blur(12px);
  filter: blur(12px);
}
.box-bg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  backgroung: #333;
  opacity: .5;
}复制代码

7、关于audio音频时长获取

这个内容对于没有处理过音视频的伙伴来说是比较陌生的了，我也是第一次遇到。使用的场景是，在点击歌曲的时候会出现一个简单的播放器，包括开始/暂停，下一曲以及歌曲播放进度条。前两个功能都比较简单，播放进度条需要获取播放进度及总时长，直接放代码：

//音频播放器
<audio ref="audioMusic" :src="songNowGet" @timeupdate="updateTime" @canplay="durationTime" autoplay></audio>
//播放进度条
<div class="audioLine"> 
  <span ref="line" :style="{width: lineWidth}"></span>
</div>
//获取播放时间
updateTime(){  
  this.musicCurrentTime = this.$refs.audioMusic.currentTime
}
//获取音频总时长
durationTime(){  
  this.musicDurationTime = this.$refs.audioMusic.duration
}
//对于音频播放，时间是时刻变化的，我们需要通过watch进行监控
watch: {  
//监听音乐播放时间的变化，更新宽度值并赋值给进度条    'musicCurrentTime': function(newVal){    
    let winWidth = document.documentElement.clientWidth;    
    if(newVal){      
      this.lineWidth = parseInt((newVal * winWidth)/this.musicDurationTime)      
      this.$refs.line.style.width = this.lineWidth/50 + 'rem'    
     }  
    }
 }复制代码

其中 

timeupdate和canplay都是audio的钩子函数，timeupdate表示播放位置发生改变时触发事件；canplay表示开始播放音频时触发事件。

currentTime和duration是audio属性，currentTime表示当前播放时间；duration表示媒体总时长。

这里我只是简单的用到了几个api，关于音频的相关属性和方法钩子，已经有小伙伴做了总结，详情可以查看大佬的文章，传送门： 记一次vue中获取audio媒体总时长duration遇到的问题

以上就是在这个小练习项目中遇到的小坑及填坑记录，记录下来避免再次入坑，同时希望能给同样采坑的小伙伴一点启发，更快的解决问题。

最后附上练习github传送门： music播放器小练习demo