重磅推薦：六個讓前端開發既高效又有趣的工具

我最近已經大約應該有快一年的時間沒有再開發 Android 了，自歷來到二線城市，作 Android 開發也是斷斷續續，一會 Android ，一會小程序開發，一會又用 Vue 作前端開發，中間也穿插着各類技術管理和團隊管理的工做。

在非一線城市作開發工做，給我最大的感覺就是須要工程師什麼都會，最好是全棧，你懂得越多越有價值，而不是你懂得越精，越深越有價值。

因爲最近半年一直在作 Vue 的開發工做，今天我就整理了 6 個 Vue 相關的工具和開源庫，都很是有價值，但願可以幫助到大家作前端開發同窗。

1

適用於 Vue 的原型工具

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

官方網址：https://www.overvue.io

這個工具能幫你生成 Vue 組件，設置 routes , 也能夠幫你顯像 Component Parent-Child 組件樹。你只要作一些小配置而後能夠下載 code boilerplate. 這樣你就能夠很方便簡潔地生成 Vue 前臺 APP 了！

該工具具備以下功能特色：

1. 上傳前端模型圖像

2. 可視化可拖動和可調整大小的組件

3. 建立組件的父子層次結構

4. 將 html 元素添加到組件

5. 建立 Vue Router 使用的路由

6. 每一個組件的實時生成的可預覽代碼段

7. 實時生成的樹視圖，以幫助可視化父子層次結構

8. 保存項目並打開之前的項目

9. 導出工做前端的完整樣板代碼

開源項目地址：https://github.com/TeamOverVue/OverVue

2

3D 效果輪播圖組件

這個開源庫是：vue-carousel-3d，它是一個帶有 3D 效果的輪播圖 vue 組件，很是好用。

就像是圖中那樣的 3D 效果，能夠左右切換，效果很是不錯哦！

開源項目地址：https://github.com/wlada/vue-carousel-3d

3

一個優雅的上傳組件

這個組件庫是：vue-filepond，它是 FilePond 的一個方便的適配器組件，它是一個 JavaScript 庫，能夠上傳你投入的任何內容，優化圖像以加快上傳速度，並提供出色的，可訪問的，如絲般順暢的用戶體驗。

並且搭配 Doka.js 還能夠進行圖片的編輯處理。以下：

開源項目地址：https://github.com/pqina/vue-filepond

4

圖片預覽組件

這個圖片預覽的組件功能超級強大，很是的好用。它就是：v-viewer。

Vue 圖片瀏覽組件 v-viewer，支持旋轉、縮放、翻轉等操做，基於 viewer.js。以下圖：

開源項目地址：https://github.com/mirari/v-viewer

5

可視化表單設計工具

vue-ele-form-generator 是專爲 vue-ele-form 開發的可視化表單設計工具，讓表單開發的效率更上一層樓。

它的特性以下：

• 可視化配置頁面

• 提供基礎組件 和 高級組件

• 一鍵生成配置 json 數據

• 一鍵生成.vue 格式內容

真心強烈推薦，很是好用，看一下演示圖片：

開源項目地址：https://github.com/dream2023/vue-ele-form-generator

6

事件訂閱 / 發佈組件

vue-happy-bus 是一款基於 vue 實現的訂閱/發佈插件。

咱們一般在使用非父子組件間通訊時，採用 new Bus() 的方式來作一個事件廣播。但一個弊端就是，這種方式並不會自動銷燬，因此爲了不回調函數重複執行，還要在 destroyed 週期中去作 Bus.$off('event name', fn) 的操做。

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

1. $ 的回調函數必須是具名函數。不能簡單的 on 的回調函數必須是具名函數。不能簡單的 Bus.$on('event name', () => {}) 使用匿名函數做爲回調了，因此須要將回調函數放到 metheds 中進行額外的聲明

2. 在 destroyed 生命週期中去銷燬事件的監聽。

我只是想在某個路由中監聽下 header 中一個按鈕的點擊事件而已，居然要這麼麻煩？？？

因此此輪子被造出來了 🤘。

它主要解決在非父子組件間通訊時，解決重複綁定事件、沒法自動銷燬的而致使回調函數被執行屢次的問題。

強烈推薦給你們，真實使用，很是好用。

開源項目地址：github.com/tangdaohai/…

更多程序員賺錢案例分享，盡在公衆號：非著名程序員，若是想第一時間瞭解案例，趕忙來關注我吧！關注公衆號，回覆關鍵字：1024 ，免費領取獨立開發者賺錢實操教程。