手摸手，帶你封裝一個vue component

項目地址：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

佔坑

常規佔坑，這裏是手摸手，帶你用vue擼後臺系類
完整項目地址：vue-element-admin
系類文章一：手摸手，帶你用vue擼後臺 系列一（基礎篇）
系類文章二：手摸手，帶你用vue擼後臺 系列二（登陸權限篇）
系類文章三：手摸手，帶你用vue擼後臺 系列三(實戰篇）
系類文章四：手摸手，帶你用vue擼後臺 系列四(vueAdmin 一個極簡的後臺基礎模板)
系類文章：手摸手，帶你優雅的使用 icon
樓主我的免費圈子。