項(xiàng)目地址：vue-countTo
配套完整后臺demo地址：vue-element-admin
系類文章一：手摸手，帶你用vue擼后臺 系列一（基礎(chǔ)篇）
系類文章二：手摸手奋姿，帶你用vue擼后臺 系列二（登錄權(quán)限篇）
系類文章三：手摸手逸尖，帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇）
系類文章四：手摸手古沥，帶你用vue擼后臺 系列四(vueAdmin 一個極簡的后臺基礎(chǔ)模板)
系類文章：手摸手，帶你優(yōu)雅的使用 icon
為什么選擇自己封裝第三方庫
最近幾個月我司把之前兩三年的所有業(yè)務(wù)都用了 vue 重構(gòu)了一遍冷溶，前臺使用 vue+ssr渐白，后臺使用了 vue+element，在此過程中封裝和自己寫了很多 vue component逞频。其實(shí)vue 寫 component 相當(dāng)簡單和方便，github上有很多的 vue component 都只是簡單的包裝了一些 jquery 或者原生 js 的插件栋齿，但我個人是不太喜歡使用這些第三方封裝的苗胀。理由如下：
- 很多第三方封裝的組件參數(shù)配置項(xiàng)其實(shí)是有缺損的。如一些富文本或者圖表組件瓦堵，配置項(xiàng)遠(yuǎn)比你想想中的多得多基协，第三方封裝組件很難覆蓋全部所有配置。
- 第三方組件的更新頻率很難保證菇用。很多第三方封裝組件并不能一直和原始組件保持同步更新速度澜驮，萬一原始組件更新了某個你需要的功能，但第三方并沒有更新那豈不是很尷尬惋鸥，而且很多第三方組件維護(hù)一段時間之后就不維護(hù)了杂穷。
- 靈活性和針對性。還是那富文本來說卦绣，富文本在我司有很多定制化需求耐量，我們需要將圖片上傳七牛，需要將圖片打水印滤港，需要很多針對業(yè)務(wù)的特殊需求廊蜒，使用第三方包裝的組件是不合適的，一般基于第三方封裝的組件是很難拓展的溅漾。
所以我覺得大部分組件還是自己封裝來的更為方便和靈活一些山叮。
動手開干
接下來我們一起手摸手教改造包裝一個js插件，只要幾分鐘就可以封裝一個專屬于你的 vue component添履。封裝對象：countUp.js屁倔，改造后結(jié)果 vue-countTo。
首先我們用官方提供的 vue-cli 來構(gòu)建項(xiàng)目 這里選擇了 webpack-simple (組件相對而言比較簡單缝龄，不需要很多復(fù)雜的功能汰现，所以 webpack-simple 已經(jīng)滿足需求了)
$ 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
啟動項(xiàng)目之后按照 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 已經(jīng)生效了瞎饲。
接下來查看 countUp.js 的 github 發(fā)現(xiàn)它定義了如下可配置參數(shù)
對應(yīng) 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之前寫死的配置項(xiàng)替換為動態(tài)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 還有些不滿足你的需求，那你可以選擇自己來造輪子了驮捍。
造輪子篇
首先當(dāng)然是閱讀源碼了
其實(shí)源碼也就兩部分核心代碼
第一部分：主要是就是 requestAnimationFrame疟呐，在游覽器不支持requestAnimationFrame 的情況下使用 setTimeout來模擬，這段代碼值得仔細(xì)閱讀东且，自己在平時的項(xiàng)目中也能借鑒使用這段代碼启具。
第二部分：就是 count 函數(shù)
看懂這兩部分之后造輪子就相當(dāng)?shù)暮唵瘟? demo
造輪子過程中發(fā)現(xiàn) countUp,并沒有 autoplay 這個參數(shù)項(xiàng)可以讓組件自動開始count，沒關(guān)系珊泳。鲁冯。。我們可以自己來擼色查，我們首先定義 autoplay 這個props為布爾值薯演，默認(rèn)所有組件 autoplay 為 true
props:{
autoplay: {
type: Boolean,
required: false,
default: true
}
}
定義好 props 之后只要在 mounted 生命周期內(nèi)加一個判斷就完事了。
mounted() {
if (this.autoplay) {
this.start();
}
}
我們的 countUp 組件可以自動 count 了秧了！
上傳 npm
在不跨項(xiàng)目的情況下之前所做的已經(jīng)滿足需求了跨扮。但我們不能就此滿足，我想讓世界上更多的人來使用我的插件验毡，這時候就要上傳 npm了 demo 衡创。
首先我們新建一個index.js
import CountTo from './vue-countTo.vue'
// 導(dǎo)出模塊
export default CountTo
//global 情況下 自動安裝
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component('count-to', CountTo)
}
同時我們也要改造一下 webpack 的配置，因?yàn)椴皇撬惺褂媚憬M件的人都是通過 npm 安裝使用 import 引入組件的的米罚。
還有很多人是通過 <script> 標(biāo)簽的方式直接引入的钧汹，所以我們要將 libraryTarget改為 umd 格式
library: 'CountTo',
libraryTarget: 'umd',
umdNamedDefine: true
大功告成，現(xiàn)在只要將它發(fā)布到 npm 就可以了录择，首先注冊一個npm 賬號拔莱，
之后配置自己的 package.json (注意填寫 version，每次發(fā)布的 version 不能相同隘竭；main 為入口文件地址)塘秦。
之后只要一行命令 npm publish 你的項(xiàng)目就發(fā)到 npm 了，快讓小伙伴們一起來用你的vue component 吧动看！
總結(jié)
這里這是拿了一個很簡單的 countUp 組件舉了一個簡單例子尊剔，有的時候自己動手豐衣足食，很多插件的封裝比想象中簡單的多菱皆。產(chǎn)品經(jīng)理再也不會看到我因?yàn)檫@個fu**插件怎么不支持這個功能而愁眉苦臉了须误，我們可以更好地滿足產(chǎn)品了~~
完整項(xiàng)目地址：https://github.com/PanJiaChen/vue-countTo 歡迎 star
占坑
常規(guī)占坑挨稿，這里是手摸手，帶你用vue擼后臺系類
完整項(xiàng)目地址：vue-element-admin
系類文章一：手摸手京痢，帶你用vue擼后臺 系列一（基礎(chǔ)篇）
系類文章二：手摸手奶甘，帶你用vue擼后臺 系列二（登錄權(quán)限篇）
系類文章三：手摸手，帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇）
系類文章四：手摸手祭椰，帶你用vue擼后臺 系列四(vueAdmin 一個極簡的后臺基礎(chǔ)模板)
系類文章：手摸手臭家，帶你優(yōu)雅的使用 icon
樓主個人免費(fèi)圈子。
