為什麼選擇自己封裝第三方庫

github地址
最近幾個月來我司把公司之前兩三年的所以業務都用了vue重構了一遍，前臺使用了vue+ssr，後臺使用了vue+element，在此過程中包裝和自己寫了很多的vue component。其實vue 寫component相當方便和簡單的，github上有很多的vue component都只是簡單的包裝了一些jquery或者原生js的外掛，但我個人是不太喜歡使用這些第三方封裝的。理由如下：

1. 很多第三方封裝元件的時候引數配置項其實是有缺損的。如一些富文字元件，配置項遠比你想想中的多得多。
2. 第三方元件的更新頻率。很多第三方封裝元件並不能一直和原始元件保持同步，萬一原始元件更新了某個你需要的功能，但第三方並沒有更新那豈不是很尷尬。
3. 靈活性和針對性。還是那富文字來說，我司有很多專門的編輯，所以富文字成了重中之重，我們需要圖片上傳七牛，需要打水印，需要很多針對業務的特殊需求，使用第三方包裝的元件都是不合適的，基於第三方封裝的元件是很難拓展的。

所以我覺得大部分元件還是自己封裝來的更方便和靈活一些。

動手開幹

接下來就來手把手教你如何改造包裝一個js外掛，只要幾分鐘就可以封裝一個屬於你的vue component。封裝物件：countUp.js，改造後結果vue-countTo

首先我們用官方提供的vue-cli 來構建專案 這裡選擇了webpack-simple(元件比較簡單，webpack-simple已經滿足需求了)

$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install

安裝countup.js

$ npm install countup.js
$ npm run dev

啟動專案之後按照countup.js官方demo初始化外掛

app.vue

<template>
  <span ref='countup'></span>
</template>

<script>
import CountUp from 'countup.js'
 

export default {
  name: 'countup-demo',
  data () {
    return {
      numAnim:null
    }
  },
  mounted(){
    this.initCountUp()
  },
  methods:{
    initCountUp(){
      this.numAnim = new CountUp(this.$refs.countup,0, 2017)
      this.numAnim.start();
    }
  }
}
</script>

重新整理頁面，就這麼簡單，countUp.js已經生效了。

接下來檢視countUp.js github發現它定義瞭如下可配置專案

對應vue就是props，型別和初始化一目瞭然。

    props: {
                start: {
                    type: Number,
                    default: 0
                },
                end: {
                    type: Number,
                    default: 2017
                },
                decimal: {
                    type: Number,
                    default: 0
                },
                duration: {
                    type: Number,
                    default: 2.5
                },
                options: {
                    type: Object
                }
            }

之後再將countup之前寫死的引數項替換為動態props就可以了

    this.numAnim = new CountUp(this.$refs.countup, this.start,
                            this.end,
                            this.decimal,
                            this.duration,
                            this.options
                    );

使用元件

<vuecountup class="myCounter" :end="2500" :duration="2.5" :options="{useEasing : true,
            useGrouping : true,
            separator : ',',
            decimal : '.',
            prefix : '',
            suffix : ''}"></vuecountup>

只要幾分鐘一個屬於自己的原生元件就包裝好了，就是這麼簡單。完整demo
這時候你如果覺得使用countUp.js 還有些不滿足你的需求，那你可以選擇自己來造輪子了。

造輪子篇

首先當然是閱讀原始碼原始碼了
其實原始碼也就兩部分核心程式碼
第一部分主要是就是requestAnimationFrame，在遊覽器不支援requestAnimationFrame的情況下使用setTimeout來模擬，這段程式碼指的仔細閱讀，自己平時的一些專案中也能借鑑使用。
第二部分就是count函式
看懂這兩部分之後造輪子就相當的簡單了,demo

造輪子過程中發現countUp,並沒有autoplayt這個引數項可以自動count，沒事。。。我們可以自己來擼，我們首先定義autoplay這個props為布林值，預設所有元件autoplay為true

 props:{
            autoplay: {
              type: Boolean,
              required: false,
              default: true
            }
       }

定義好props之後在mounted生命週期內加一個判斷就完事。

mounted() {
    if (this.autoplay) {
      this.start();
    }
  }

我們的countUp元件可以自動count了！

上傳NPM

在不跨專案的情況下之前說的已經滿足需求了。這時候我說不，我想讓世界上更多的人來使用我的東西，這時候就要上傳NPM了。我們這裡就要開始改一些配置項了。demo
我們新建一個index.js

    import CountTo from './vue-countTo.vue';
    // 匯出模組
    export default CountTo;
    //global 情況下 自動安裝
    if (typeof window !== 'undefined' && window.Vue) {
      window.Vue.component('count-to', CountTo);

我們也要改造一下webpack，因為不是所有使用你元件的人都是通過npm按住和import的
很多人是通過

        library: 'CountTo',
        libraryTarget: 'umd',
        umdNamedDefine: true

大功告成，現在只要釋出到npm就可以了，首先註冊一個npm
之後配置自己的package.json(注意填寫version，每次釋出的version不能相同；main為入口檔案地址)
之後只要一個npm publish 你的專案就發到npm了，快讓小夥伴們一起來用你的vue component吧！

總結

這裡這是拿了一個很簡單的countUp元件舉了一個例子，有時候自己動手豐衣足食，很多專案自己封裝比想象中簡單的多。產品經理再也不會看到我因為這個fuc咳外掛怎麼不支援這個功能而愁眉苦臉了，我們可以更好地滿足產品了~~
完整專案地址： https://github.com/PanJiaChen/vue-countTo 歡迎star

最後打個廣告

本人在公司也用vue寫了一個幾十個頁面，十幾種許可權，各不同功能的後臺專案，準備開源有兩步登入，許可權驗證，錯誤上報，線上換膚，拖拽排序，富文字，markdown，jsonEditor,dropzone，七牛直傳（打水印）,圖表，dashboard,splitPan,StickyHeader,個人中心，頭像上傳。。。等等只有想不到沒有沒做到的業務場景。（vue+element+社群外掛，一個人擼毫無壓力）
佔坑專案地址