关于慕课网vue教程vue-music项目中所遇到的问题

在看慕课网的vue.js高级课程音乐app时，发现由于vue-cli已由2变为3，better-scroll也因为版本更新的原因，如果照着源代码，会出现很多小问题

1.框架搭建

搭项目框架时，因为vue-cli3如果自己选择了babel,stylus等，最后都是会构建好的，所以不需要跟着教学视频再安装相关loader或插件。

一定要根据自己的情况，视情况而定，不要盲目跟着老师安装东西

2.写slider组件时发现出现很多的小问题，比如不能轮播，currentPageIndex值不对，后来发现因为版本的更新很多小细节进行了修改

如：loop的初始化，轮询时pageIndex不需要+1，this.slider.goToPage()可以用this.slider.next()代替，click: false时，a标签反倒不能跳转等

以下为相关代码：

    _setSliderWidth(isResize) {
                this.children = this.$refs.sliderGroup.children

                let width = 0
                let sliderWidth = this.$refs.slider.clientWidth
                for (let i = 0; i < this.children.length; i++) {
                    let child = this.children[i]
                    addClass(child, 'slider-item')

                    child.style.width = sliderWidth + 'px'
                    width += sliderWidth
                }
                if (this.loop && !isResize) {
                    width += 2 * sliderWidth
                }
                this.$refs.sliderGroup.style.width = width + 'px'
            },
            _initDots() {
                this.dots = new Array(this.children.length)
            },
            _initSlider() {
                this.slider = new BScroll(this.$refs.slider, {
                    scrollX: true,
                    scrollY: false,
                    momentum: false,
                    snap: {
                        loop: this.loop,
                        threshold: 0.3
                    },
                    click: true
                })
                this.slider.on('scrollEnd', () => {
                    let pageIndex = this.slider.getCurrentPage().pageX
                    this.currentPageIndex = pageIndex

                    if(this.autoPlay) {
                        clearTimeout(this.timer)
                        this._play()
                    }
                })
            },
            _play() {
                this.timer = setTimeout(()=> {
                    this.slider.next();
                }, this.interval)
            }

3.在getDiscList接口获取数据时通过服务器代理进行referer伪造时，由于使用的是cli3所以并没有dev-serve.js

解决办法是在，vue.config.js中进行配置

代码如下

const path = require('path');
const express = require('express')
const axios = require('axios')
const app = express()
const apiRoutes = express.Router()

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                'common': path.join(__dirname, 'src/assets'),
                'components': path.join(__dirname, 'src/components'),
                'api': path.join(__dirname, 'src/api'),
                'base': path.join(__dirname, 'src/base'),
            },
        }
    },
    devServer: {
        before(apiRoutes){
            apiRoutes.get('/api/getDiscList',(req,res)=>{
                const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
                axios.get(url, {
                    headers: {
                        referer: 'https://c.y.qq.com/',
                        host: 'c.y.qq.com'
                    },
                    params: req.query
                }).then((response) => {
                    res.json(response.data)
                }).catch((e) => {
                    console.log(e)
                })
            });
        }
    }
}