Vue項目中經常使用的一些第三方庫

stylus

一種css預處理器，能夠更加直觀的編寫css代碼，減小沒必要要的格式

下載：

npm install stylus
複製代碼

使用：

• 在style標籤中加上 lang="stylus"來使用stylus
• 樣式再也不須要大括號，而是用縮進來代替
• 能夠省略冒號，用空格代替
• 再也不須要分號來結尾
• 在style標籤中添加scope屬性後，樣式只會修飾當前組件。

better-scroll

一個用於提升滑動體驗的庫，可讓移動端的滑動體驗更接近於原生APP

下載：仍然是npm下載或script標籤引入，沒什麼好說的

使用也很是簡單：

• 首先 import BScroll from 'better-scroll'
• this.scroll=new Bscroll(this.$refs.wrapper)//wrapper是被選擇的元素，也就是進行滾動的元素，完成綁定即成功使用
• 綁定成功後，要進行元素跳轉時，能夠用this.scroll.scrollToElement()的方法，括號內的參數是要跳轉到的目標

swipper

用於實現輪播圖的插件，相似於這樣的：

下載：npm install swiper，或是去官網下載壓縮包後引入對應的js文件和css文件

使用：經過一段示例demo來看,這是swipper.vue：

<template  style="touch-action:none;">
    <swiper :options="swiperOption" class=wrapper>
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" v-bind:src="item.imgUrl">
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-scrollbar"   slot="scrollbar"></div>
    </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    props:['swiperList'],
    data () {
      return {
        swiperOption: {
            loop:true,
            pagination:{
                el:'.swiper-pagination',
                clickable:true,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            scrollbar: {
              el: '.swiper-scrollbar',
            },
        }
      }
    }
  }
</script>
複製代碼

• swiper標籤是整個輪播圖的外層父標籤，其上綁定了一個配置項swipperOption，在data中定義
• swiper-slide標籤內部是輪播的圖片。能夠經過多個swiper-slide標籤來定義已知個輪播圖片，但仍建議使用v-for的方法進行列表渲染
• 下面的四個div標籤都是可選項，從上到下分別是：分頁器（就是圖中的小圓點）、上一張按鈕、下一張按鈕、進度條。
• swiperOption的配置方法上面已經給出了示例。注意，這個配置方法隨着swiper版本的不一樣而改變，例如一些老教程中swiperOption的配置方法就已經行不通了。因此若是出現了什麼錯誤，去官網查api便可
• 以上是最基礎的結構，能夠給各個組件添加class定製本身想要的樣式，或是綁定事件

axios

一個vue官方推薦的基於promise的http庫，用於進行數據請求

最多見的使用場景以下：

import axios from 'axios' //首先引入

//發送get請求
axios
      .get('URL')//能夠直接在URL中添加參數
      .then(response => (this.info = response))//請求成功
      .catch(function (error) { // 請求失敗處理
        console.log(error);
      });

axios
  .get('/user', {// 也能夠經過 params 設置參數：
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//發送post請求
axios.post('/user', {
    firstName: 'Fred',        // 參數 firstName
    lastName: 'Flintstone'    // 參數 lastName
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//發送多個併發請求
function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 兩個請求如今都執行完成
  }));

//經過向axios傳遞參數來進行請求

// 發送 POST 請求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

//  GET 請求遠程圖片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

//能夠只傳入url，發送 GET 請求（默認的方法）
axios('/user/12345');

//相應函數中接收的response對象含有的信息：
{
  // `data` 由服務器提供的響應
  data: {},

  // `status`  HTTP 狀態碼
  status: 200,

  // `statusText` 來自服務器響應的 HTTP 狀態信息
  statusText: "OK",

  // `headers` 服務器響應的頭
  headers: {},

  // `config` 是爲請求提供的配置信息
  config: {}
}
複製代碼

Vuex

解決非父子組件傳值的問題。多用於大型單頁應用之中，對於小型項目多是一種多餘的存在

使用：下載並引入Vuex，用Vue.use(Vuex)方法來使用Vuex，並export一個Store實例，實例中有存放數據的state，actions，mutations和getters

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        city:"bj"
    },
    actions:{
        changeCity(ctx,city){
            ctx.commit('changeCityShowing',city)
        }
    }
    mutations:{
        changeCityShowing(state,city){
            state.city=city;
            try {
                localStorage.city=city;
            } catch (error) {};
        }
    }
    getters:{
        reverse(){
            return state.city.split('').reverse().join("");
        }
    }
})
複製代碼

1. 在須要向外傳值的組建中用 this.$store.dispatch('事件名',數據); 的方式將數據傳給actions
2. 在actions中定義相同的事件，接收兩個參數，在其中將事件繼續傳遞給mutations
3. 在mutations中修改state中的數據，達到修改全局狀態的目的
4. 在傳遞的數據較少較簡單時，能夠直接從組件中this.$store.commit('事件名',數據);將數據提交到mutations
5. 當要對state中的變量加工後使用時，能夠將之映射到計算屬性（映射至data中的變量則沒法加工），或在getters中定義相關的函數
6. getters至關於store中的計算屬性。能夠用mapGetters函數將之映射到局部計算屬性

computed:{
    ...mapGetters(['name1'，‘name2’])
    //...
}複製代碼