luckin-coffee

Vue Study - luckin Coffee

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

安装axios

npm安装

  npm install --save axios

在入口main.js中导入axios 并将axios写入vue的原型，这样就能更简单的使用。

import axios from 'axios'
import Qs from 'qs'
//QS是axios库中带的，不需要我们再npm安装一个

Vue.prototype.axios = axios;
Vue.prototype.qs = Qs;

使用Demo

this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming'}),{
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(res => {
  //控制台打印请求成功时返回的数据
  console.log(res.data)
}).catch(err => {
  if(err.response) {
    //控制台打印错误返回的内容
    console.log(err.response)
  }
})

# bind(this) 异步绑定 改变this指向

this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming'}),{
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(function (res) {
  //控制台打印请求成功时返回的数据
  console.log(res.data)
}.bind(this)).catch(function (err) {
  if(err.response) {
    //控制台打印错误返回的内容
    console.log(err.response)
  }
}.bind(this))

安装 Vuex

npm安装

  npm install vuex --save

---

安装Element-UI

npm安装

  npm i element-ui -S

在main.js中引入

import Vue from 'vue';
// 引入 ElementUI
import ElementUI from 'element-ui';
// 引入主题CSS
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

// 全局注册
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

参考

http://element.eleme.io/#/zh-CN/component/quickstart

---

Vue install less

Step1：在项目中安装Less

  $ npm install less less-loader --save

Step2：配置Less解析器

在webpack.base.conf.js中，modules结节下的rules节点中添加Less的解析器，如下所示：

  module: {
    rules: [
       {
        test: /\.scss$/,
        loaders: ["style", "css", "sass","style-loader!css-loader!less-loader"]
      },

Step3: 书写Less

  <style lang="less">
      ···
  </style>

参考文档

http://lesscss.cn/

http://less.bootcss.com/#

http://www.bootcss.com/p/lesscss/

https://www.cnblogs.com/lin-dong/p/6711224.html

https://www.zhihu.com/question/50135522

---

vue-seamless-scroll

Vue 列表滚动

https://github.com/chenxuan0000/vue-seamless-scroll

npm 安装

  npm install vue-seamless-scroll --save

模版引入

  <seamlessScroll :data="newsList" class="SeamlessScroll" :class-option="classOption" @ScrollEnd="end">
    ··· ···
    </seamlessScroll>

import vueSeamless from 'vue-seamless-scroll'
export default {
  data() {
    return {
      newsList: Index.infoList, // 数据源
      liHeight: 35, // 单条记录高度
      options: {
        // step: 1, //步长 越大滚动速度越快
        limitMoveNum: 0, //启动无缝滚动最小数据量 this.dataList.length
        // hoverStop: true, //是否启用鼠标hover控制
        // direction: 0, //1 往上 0 往下
        // openWatch: true, //开启data实时监听
        // singleHeight: 0, //单条数据高度有值hoverStop关闭
        // waitTime: 3000 //单步停止等待时间
      }
    };
  },
  components: {
    vueSeamless
  },
  omputed: {
    classOption() {
      const _this = this;
      return _this.options;
    }
  },
    mounted() {
    const _this = this;
    // 获取模块高度
    const elHeight = _this.$refs.PopularityTop.offsetHeight;
    const et = parseInt(elHeight / _this.liHeight);
    // 单页显示数据总数 / 是否滚动
    _this.options.limitMoveNum =
      elHeight % _this.liHeight > 0 ? et + 1 : et;
  },
  methods: {
    end() {
      // console.log("ScrollEnd");
    }
  }
}

key	description	default	val
step	the faster the rolling speed is faster	1	Number
limitMoveNum	start seamless scrolling minimum data length	5	Number
hoverStop	mouse hover control is enabled	true	Boolean
direction	0 down、 1 up 、 2 left 、 3 right	1	Number
openTouch	open mobile touch	true	Boolean
singleHeight	one single stop height(default zero is seamless) => direction 0/1	0	Number
singleWidth	one single stop width(default zero is seamless) => direction 2/3	0	Number
waitTime	one single data stop wait time(ms)	1000	Number
switchOffset	the left and right buttons distance from the left and right sides (px)	30	Number
autoPlay	whether or not to automatically play the switch needs to be set to false	true	Boolean
switchSingleStep	the size of a single step switch (px)	134	Number
switchDelay	the animation time of a single step switch(ms)	400	Number
switchDisabledClass	the className of the switch parent element that cannot be clicked	disabled	String
isSingleRemUnit	singleHeight and singleWidth Whether to enable the rem metric	false	Boolean

---

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

---