vue开发的一些插件

1）vue-jsonp 跨域请求的插件

用法在 vue-cli webpack开发的项目中我们在main.js添加导入
cnpm i --save-dev vue-jsonp

//main.js
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

在需要使用的组件中加入

export default {
  name:'hello',
  methods:{
      sonimg(){
          this.$jsonp('/url', {  //方法调用
            请求的参数
          }).then(data=>{
            //得到的数据这是一个promise对象
          }).catch(error=>{
            错误捕获    
          })
        }
    }
}

2）vue-resource 类似jq中的ajax 请求

用法在 vue-cli webpack开发的项目中我们在main.js添加导入
cnpm i --save-dev vue-resource

在需要使用的组件中加入

import vueResole from '地址'
export default {
  name:'hello',
  methods:{
      sonimg(){
          //get
          this.$http.get('url',{
            params:{请求的参数},
            headers:{发送请求头信息 可选参数}
          }).then(item=>{
              结果是在item.data对象中
          },error=>{
            错误的信息
          })
          //post 基本一致
          ///jsonp 跨域请求
        }
    }
}

3）axios 推荐使用 类似jq中的ajax 请求

用法与vue-resource 基本一致
不在是使用this.$http方法 因为vue-resource是插件本身挂在到vue 的实例上了
而是直接使用
axios对象 axios.get() //axios.post()
npm官网

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

4）vue-lazyload 图片懒加载效果

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png', //加载出错的图片地址
  loading: 'dist/loading.gif', //懒加载的longding图片
  attempt: 1
})

//使用
<img v-lazy="真正的图片地址">

5）better-scroll滚动是一个插件

import BScroll from 'better-scroll';
// or with options
const scroll = new BScroll(dom元素,{
    click:true   //因为此插件默认阻止所有默认事件 这里开放点击事件
});

如果需要做无缝轮播
参数

scrollY:false,
scrollX:true,
momentum:false,
snap:{
loop:this.loop,
threshold: 0.3,
speed: 400
},
click:true

6）vue-infinite-scroll 流加载插件(下拉加载数据)

//html
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>

//js
var count = 0;
 
new Vue({
  el: '#app',
  data: {
    data: [],
    busy: false
  },
  methods: {
    loadMore: function() {
      this.busy = true;
 
      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
});

7）文件分块上传 vue webuploade 插件

场景当上传文件很大时，上传会导致服务器压力很大，需要用到分块上传