資訊專(zhuān)欄INFORMATION COLUMN
摘要：靈活性和針對(duì)性。所以我覺(jué)得大部分組件還是自己封裝來(lái)的更為方便和靈活一些。動(dòng)手開(kāi)干接下來(lái)我們一起手摸手教改造包裝一個(gè)插件，只要幾分鐘就可以封裝一個(gè)專(zhuān)屬于你的。
項(xiàng)目地址：vue-countTo
配套完整后臺(tái)demo地址：vue-element-admin
系類(lèi)文章一：手摸手，帶你用vue擼后臺(tái) 系列一（基礎(chǔ)篇）
系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二（登錄權(quán)限篇）
系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）
系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列四(vueAdmin 一個(gè)極簡(jiǎn)的后臺(tái)基礎(chǔ)模板)
系類(lèi)文章：手摸手，帶你優(yōu)雅的使用 icon
最近幾個(gè)月我司把之前兩三年的所有業(yè)務(wù)都用了 vue 重構(gòu)了一遍，前臺(tái)使用 vue+ssr，后臺(tái)使用了 vue+element，在此過(guò)程中封裝和自己寫(xiě)了很多 vue component。其實(shí)vue 寫(xiě) component 相當(dāng)簡(jiǎn)單和方便，github上有很多的 vue component 都只是簡(jiǎn)單的包裝了一些 jquery 或者原生 js 的插件，但我個(gè)人是不太喜歡使用這些第三方封裝的。理由如下：
很多第三方封裝的組件參數(shù)配置項(xiàng)其實(shí)是有缺損的。如一些富文本或者圖表組件，配置項(xiàng)遠(yuǎn)比你想想中的多得多，第三方封裝組件很難覆蓋全部所有配置。
第三方組件的更新頻率很難保證。很多第三方封裝組件并不能一直和原始組件保持同步更新速度，萬(wàn)一原始組件更新了某個(gè)你需要的功能，但第三方并沒(méi)有更新那豈不是很尷尬，而且很多第三方組件維護(hù)一段時(shí)間之后就不維護(hù)了。
靈活性和針對(duì)性。還是那富文本來(lái)說(shuō)，富文本在我司有很多定制化需求，我們需要將圖片上傳七牛，需要將圖片打水印，需要很多針對(duì)業(yè)務(wù)的特殊需求，使用第三方包裝的組件是不合適的，一般基于第三方封裝的組件是很難拓展的。
所以我覺(jué)得大部分組件還是自己封裝來(lái)的更為方便和靈活一些。
動(dòng)手開(kāi)干接下來(lái)我們一起手摸手教改造包裝一個(gè)js插件，只要幾分鐘就可以封裝一個(gè)專(zhuān)屬于你的 vue component。封裝對(duì)象：countUp.js，改造后結(jié)果 vue-countTo。
首先我們用官方提供的 vue-cli 來(lái)構(gòu)建項(xiàng)目 這里選擇了 webpack-simple (組件相對(duì)而言比較簡(jiǎn)單，不需要很多復(fù)雜的功能，所以 webpack-simple 已經(jīng)滿(mǎn)足需求了)
$ 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
啟動(dòng)項(xiàng)目之后按照 countup.js 官方 demo 初始化插件
app.vue刷新頁(yè)面，就這么簡(jiǎn)單，countUp.js 已經(jīng)生效了。
接下來(lái)查看 countUp.js 的 github 發(fā)現(xiàn)它定義了如下可配置參數(shù)
對(duì)應(yīng) vue 就是 props，類(lèi)型和初始化一目了然。
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ě)死的配置項(xiàng)替換為動(dòng)態(tài)props就可以了
this.numAnim = new CountUp(this.$refs.countup,
this.start,
this.end,
this.decimal,
this.duration,
this.options)
使用組件
只要幾分鐘一個(gè)屬于自己的原生組件就包裝好了，就是這么簡(jiǎn)單。完整demo
這時(shí)候你如果覺(jué)得使用countUp.js 還有些不滿(mǎn)足你的需求，那你可以選擇自己來(lái)造輪子了。
首先當(dāng)然是閱讀源碼了
其實(shí)源碼也就兩部分核心代碼
第一部分：主要是就是 requestAnimationFrame，在游覽器不支持requestAnimationFrame 的情況下使用 setTimeout 來(lái)模擬，這段代碼值得仔細(xì)閱讀，自己在平時(shí)的項(xiàng)目中也能借鑒使用這段代碼。
第二部分：就是 count 函數(shù)
看懂這兩部分之后造輪子就相當(dāng)?shù)暮?jiǎn)單了, demo
造輪子過(guò)程中發(fā)現(xiàn) countUp,并沒(méi)有 autoplay 這個(gè)參數(shù)項(xiàng)可以讓組件自動(dòng)開(kāi)始count，沒(méi)關(guān)系。。。我們可以自己來(lái)擼，我們首先定義 autoplay 這個(gè)props為布爾值，默認(rèn)所有組件 autoplay 為 true
props:{
autoplay: {
type: Boolean,
required: false,
default: true
}
}
定義好 props 之后只要在 mounted 生命周期內(nèi)加一個(gè)判斷就完事了。
mounted() {
if (this.autoplay) {
this.start();
}
}
我們的 countUp 組件可以自動(dòng) count 了！
在不跨項(xiàng)目的情況下之前所做的已經(jīng)滿(mǎn)足需求了。但我們不能就此滿(mǎn)足，我想讓世界上更多的人來(lái)使用我的插件，這時(shí)候就要上傳 npm了 demo 。
首先我們新建一個(gè)index.js
import CountTo from "./vue-countTo.vue"
// 導(dǎo)出模塊
export default CountTo
//global 情況下 自動(dòng)安裝
if (typeof window !== "undefined" && window.Vue) {
window.Vue.component("count-to", CountTo)
}
同時(shí)我們也要改造一下 webpack 的配置，因?yàn)椴皇撬惺褂媚憬M件的人都是通過(guò) npm 安裝使用 import 引入組件的的。
還有很多人是通過(guò)
總結(jié)這里這是拿了一個(gè)很簡(jiǎn)單的 countUp 組件舉了一個(gè)簡(jiǎn)單例子，有的時(shí)候自己動(dòng)手豐衣足食，很多插件的封裝比想象中簡(jiǎn)單的多。產(chǎn)品經(jīng)理再也不會(huì)看到我因?yàn)檫@個(gè)fu**插件怎么不支持這個(gè)功能而愁眉苦臉了，我們可以更好地滿(mǎn)足產(chǎn)品了~~
完整項(xiàng)目地址：https://github.com/PanJiaChen... 歡迎 star
常規(guī)占坑，這里是手摸手，帶你用vue擼后臺(tái)系類(lèi)
完整項(xiàng)目地址：vue-element-admin
系類(lèi)文章一：手摸手，帶你用vue擼后臺(tái) 系列一（基礎(chǔ)篇）
系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二（登錄權(quán)限篇）
系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）
系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列四(vueAdmin 一個(gè)極簡(jiǎn)的后臺(tái)基礎(chǔ)模板)
系類(lèi)文章：手摸手，帶你優(yōu)雅的使用 icon
樓主個(gè)人免費(fèi)圈子。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/82502.html
摘要：詳細(xì)具體的使用可以見(jiàn)文章手摸手，帶你優(yōu)雅的使用。為了加速線(xiàn)上鏡像構(gòu)建的速度，我們利用源進(jìn)行加速并且將一些常見(jiàn)的依賴(lài)打入了基礎(chǔ)鏡像，避免每次都需要重新下載。 完整項(xiàng)目地址：vue-element-admin系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二（登錄權(quán)限篇）系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列四(vueAdmin 一...
摘要：我們將登錄按鈕上綁上事件，點(diǎn)擊登錄之后向服務(wù)端提交賬號(hào)和密碼進(jìn)行驗(yàn)證。所以前端和后端權(quán)限的劃分是不太一致。側(cè)邊欄最后一個(gè)涉及到權(quán)限的地方就是側(cè)邊欄，不過(guò)在前 完整項(xiàng)目地址：vue-element-admin 系列文章： 手摸手，帶你用vue擼后臺(tái) 系列一（基礎(chǔ)篇） 手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇) 手摸手，帶你用vue擼后臺(tái) 系列三 (實(shí)戰(zhàn)篇) 手摸手，帶你用vu...
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類(lèi)文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列...
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類(lèi)文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類(lèi)文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類(lèi)文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類(lèi)文章四：手摸手，帶你用vue擼后臺(tái) 系列...
摘要：同時(shí)增加了單元測(cè)試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁(yè)面更新路由等等功能。雖然它的初衷是為了單元測(cè)試的，但正好滿(mǎn)足了我們的需求。它會(huì)重寫(xiě)瀏覽器的對(duì)象，從而才能攔截所有請(qǐng)求，代理到本地。 前言 vue-element-admin 從 2017.04.17提交第一個(gè) commit 以來(lái)，維護(hù)至今已經(jīng)有兩年多的時(shí)間了了，發(fā)布了四十多個(gè)版本，...
閱讀 2646·2021-11-18 10:02
閱讀 2290·2021-09-30 09:47
閱讀 1808·2021-09-27 14:01
閱讀 3122·2021-08-16 11:00
閱讀 3174·2019-08-30 11:06
閱讀 2404·2019-08-29 17:29
閱讀 1544·2019-08-29 13:19
閱讀 454·2019-08-26 13:54
