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

快来打我* 2023-08-17 16:27 98阅读 0赞

在看慕课网的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中进行配置

代码如下

转载于:https://www.cnblogs.com/Anne3/p/11207234.html