專案地址：vue-countTo
配套完整後臺demo地址：vue-element-admin
系類文章一：手摸手，帶你用vue擼後臺 系列一（基礎篇）
系類文章二：手摸手，帶你用vue擼後臺 系列二（登入許可權篇）
系類文章三：手摸手，帶你用vue擼後臺 系列三(實戰篇）
系類文章四：手摸手，帶你用vue擼後臺 系列四(vueAdmin 一個極簡的後臺基礎模板)
系類文章：手摸手，帶你優雅的使用 icon

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

最近幾個月我司把之前兩三年的所有業務都用了 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)

使用元件

<vue-count-up:end="2500":duration="2.5"></vue-count-up>

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

造輪子篇

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

造輪子過程中發現 countUp,並沒有 autoplay 這個引數項可以讓元件自動開始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 引入元件的的。

還有很多人是通過<script>標籤的方式直接引入的，所以我們要將libraryTarget改為umd格式

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

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

總結

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