我最近已經(jīng)大約應(yīng)該有快一年的時(shí)間沒有再開發(fā) Android 了，自從來到二線城市，做 Android 開發(fā)也是斷斷續(xù)續(xù)，一會(huì) Android ，一會(huì)小程序開發(fā)，一會(huì)又用 Vue 做前端開發(fā)，中間也穿插著各種技術(shù)管理和團(tuán)隊(duì)管理的工作。

在非一線城市做開發(fā)工作，給我最大的感受就是需要工程師什么都會(huì)，最好是全棧，你懂得越多越有價(jià)值，而不是你懂得越精，越深越有價(jià)值。

由于最近半年一直在做 Vue 的開發(fā)工作，今天我就整理了 6 個(gè) Vue 相關(guān)的工具和開源庫(kù)，都非常有價(jià)值，希望能夠幫助到你們做前端開發(fā)同學(xué)。

1.適用于Vue的原型工具

今天推薦的這個(gè)開源工具就是：OverVue，Prototyping Tool For Vue Devs 適用于 Vue 的原型工具。

官方網(wǎng)址：https://www.overvue.io

這個(gè)工具能幫你生成 Vue 組件，設(shè)置 routes , 也可以幫你顯像 Component Parent-Child 組件樹。你只要做一些小配置然后可以下載 code boilerplate. 這樣你就可以很方便簡(jiǎn)潔地生成 Vue 前臺(tái) APP 了!

該工具具有如下功能特點(diǎn)：

• 上傳前端模型圖像
• 可視化可拖動(dòng)和可調(diào)整大小的組件
• 創(chuàng)建組件的父子層次結(jié)構(gòu)
• 將html元素添加到組件
• 創(chuàng)建Vue Router使用的路由
• 每個(gè)組件的實(shí)時(shí)生成的可預(yù)覽代碼段
• 實(shí)時(shí)生成的樹視圖，以幫助可視化父子層次結(jié)構(gòu)
• 保存項(xiàng)目并打開以前的項(xiàng)目
• 導(dǎo)出工作前端的完整樣板代碼

開源項(xiàng)目地址：

https://github.com/TeamOverVue/OverVue

2.3D 效果輪播圖組件

這個(gè)開源庫(kù)是：vue-carousel-3d，它是一個(gè)帶有 3D 效果的輪播圖 vue 組件，非常好用。

就像是圖中那樣的 3D 效果，可以左右切換，效果非常不錯(cuò)哦!

開源項(xiàng)目地址：

https://github.com/wlada/vue-carousel-3d

3.一個(gè)優(yōu)雅的上傳組件

這個(gè)組件庫(kù)是：vue-filepond，它是 FilePond 的一個(gè)方便的適配器組件，它是一個(gè) JavaScript 庫(kù)，可以上傳你投入的任何內(nèi)容，優(yōu)化圖像以加快上傳速度，并提供出色的，可訪問的，如絲般順暢的用戶體驗(yàn)。

而且搭配 Doka.js 還可以進(jìn)行圖片的編輯處理。如下：

開源項(xiàng)目地址：

https://github.com/pqina/vue-filepond

4.圖片預(yù)覽組件

這個(gè)圖片預(yù)覽的組件功能超級(jí)強(qiáng)大，非常的好用。它就是：v-viewer。

Vue 圖片瀏覽組件 v-viewer，支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作，基于 viewer.js。如下圖：

[[273836]]

開源項(xiàng)目地址：

https://github.com/mirari/v-viewer

5.可視化表單設(shè)計(jì)工具

vue-ele-form-generator 是專為 vue-ele-form 開發(fā)的可視化表單設(shè)計(jì)工具，讓表單開發(fā)的效率更上一層樓。

它的特性如下：

• 可視化配置頁(yè)面
• 提供基礎(chǔ)組件 和 高級(jí)組件
• 一鍵生成配置 json 數(shù)據(jù)
• 一鍵生成.vue 格式內(nèi)容

真心強(qiáng)烈推薦，非常好用，看一下演示圖片：

開源項(xiàng)目地址：

https://github.com/dream2023/vue-ele-form-generator

6.事件訂閱/發(fā)布組件

vue-happy-bus 是一款基于 vue 實(shí)現(xiàn)的訂閱/發(fā)布插件。

我們通常在使用非父子組件間通信時(shí)，采用 new Bus() 的方式來做一個(gè)事件廣播。但一個(gè)弊端就是，這種方式并不會(huì)自動(dòng)銷毀，所以為了避免回調(diào)函數(shù)重復(fù)執(zhí)行，還要在 destroyed 周期中去做 Bus.$off('event name', fn) 的操作。

這樣帶來的冗余代碼就是:

• $的回調(diào)函數(shù)必須是具名函數(shù)。不能簡(jiǎn)單的on 的回調(diào)函數(shù)必須是具名函數(shù)。不能簡(jiǎn)單的 Bus.$on('event name', () => {}) 使用匿名函數(shù)作為回調(diào)了，所以需要將回調(diào)函數(shù)放到 metheds 中進(jìn)行額外的聲明
• 在 destroyed 生命周期中去銷毀事件的監(jiān)聽。

我只是想在某個(gè)路由中監(jiān)聽下 header 中一個(gè)按鈕的點(diǎn)擊事件而已，竟然要這么麻煩???

所以此輪子被造出來了 。

它主要解決在非父子組件間通信時(shí)，解決重復(fù)綁定事件、無法自動(dòng)銷毀的而導(dǎo)致回調(diào)函數(shù)被執(zhí)行多次的問題。