慕课网vue音乐项目手记

脚手架安装 vue-cli

  • vue init webpack vue-music
  • 连续回车
  • runtime+compeiler 和 runtime-only 选择runtion-only
  • ver-router需要安装
  • ESLint 是es6的代码风格检查器,可以选或者不选

项目公用字体和公用样式

  • variable.styl 是字体和颜色定义的规范(通过变量的方式引入)
  • mixin.styl 是顶底的css的函数
  • base.styl 是基础的样式
  • icon.styl 是字体图标
  • reset.styl 就是重置样式
  • index.styl 就是把reset.styl,base.styl,icon.styl引入进来

在main.js 中把index.styl引入进来就可以公用

安装对应的stylus和stylus.loader依赖

在webpack.base.conf.js中给路径配置别名

resolve: {

extensions: ['.js', '.vue', '.json'],
//配置别名
alias: {
  '@': resolve('src'),
  'common':resolve('src/common'),
  'components':resolve('src/components'),
  'base':resolve('src/base'),
  'api':resolve('src/api')
}

}

页面入口

安装依赖

  • babel-runtime 和fastclick
  • 在main.js中引入
  • 在main.js 中写上 fastclick.attach(document.body)

jsonp公用方法封装

暴露给外部的jsonp方法

export default function jsonp(url, data, option) {

url += (url.indexOf('?') < 0 ? '?' : '&') + param(data);

return new Promise((resolve, reject) => {
    originJSONP(url, option, (err, data) => {
        if (!err) {
            resolve(data)
        } else {
            reject(err)
        }
    })
})

}

把data对象转换成参数字符串的工具方法

function param(data) {

let url = '';
for (var k in data) {
    let value = data[k] !== undefined ? data[k] : '';
    url += `&${k}=${encodeURIComponent(value)}`;
}

return url ? url.substring(1) : '';

}

better-scroll插件的使用

methods:{

//初始化长度
_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";

},

//初始化dot
_initDots() {
  this.dots = new Array(this.children.length);
},


//初始话Slider
_initSlider() {

  this.slider = new BScroll(this.$refs.slider, {
    scrollX: true,
    scrollY: false,
    momentum: false,
    snap: {
      loop: this.loop,
      threshold: 0.3,
      snapSpeed: 400
    }
  });

  //滚动完毕后会派发这个scrollEnd事件
  this.slider.on("scrollEnd", () => {
    //getCurrentPage()获取当前页面的信息
    let pageIndex = this.slider.getCurrentPage().pageX;
    if (this.loop) {
      pageIndex;
    }
    this.currentPageIndex = pageIndex;

    if (this.autoPlay) {
      clearTimeout(this.timer);
      this._play();
    }
  });

},

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

}

笔记
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。