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 外掛

場景當上傳檔案很大時，上傳會導致伺服器壓力很大，需要用到分塊上傳