這些超火的Vue組件你還沒有用過嗎?

2020-12-08 51CTO

這些超火的Vue組件你還沒有用過嗎？

本文這些 Vue 組件，不論對於 Vue 初學者還是使用 Vue 的熟練工，都是具有很高使用價值的組件，對你的 Vue 之路一定很有幫助。

作者：佚名來源：Gitee官方|2020-04-22 15:27

此前 Vue 發布了 3.0 的 beta 版本，昨晚的直播中項目核心開發者尤雨溪公開分享了關於該版本的相關信息。

首先，beta 階段意味著：

  • 已合併所有計劃內的 RFC
  • 已實現所有被合併的 RFC
  • Vue CLI 現在通過 vue-cli-plugin-vue-next 提供了實驗性支持
  • 此外還提供了一個用於 Vue 3 的最小化 webpack 配置，支持單文件組件

其中有一個主要的 RFC 是關於新引入的 Composition API（組件聲明式），有人認為這是語法上的大變化，但實際上這不是直接替換掉原有的 Option API（選項聲明式），而是引入了一種更好的選擇，項目中可以自行選擇使用，Vue 3 在語法上基本沒有什麼變化。

下面這些 Vue 組件，不論對於 Vue 初學者還是使用 Vue 的熟練工，都是具有很高使用價值的組件，對你的 Vue 之路一定很有幫助。

1.vue-form-making

基於 vue 和 element-ui 實現的表單設計器，使用了最新的前端技術棧，內置了 i18n 國際化解決方案，可以讓表單開發簡單而高效。

項目地址：https://gitee.com/gavinzhulei/vue-form-making

2.viewUI

ViewUI 是一套基於 Vue.js 的 UI 組件庫，主要服務於 PC 界面的中後臺產品。

項目地址：https://gitee.com/icarusion/iview

3.vue-cron

基於Vue的Cron表達式組件。

項目地址：https://gitee.com/lindeyi/vue-cron

4.xdh-map

基於Openlayers的地圖應用Vue組件。內置了百度、高德、天地圖、離線Google、方正PGIS、超圖PGIS 、航天精一PGIS 瓦片圖層。 包含文本、圖形、html、熱力圖、軌跡回放等20個組件，支持與ECharts結合實現散點、飛行遷徙等基於地理位置的圖表，滿足項目常見需求。 使用者不需要有地圖相關專業知識，甚至不需要寫任何JS代碼就能實現通用功能。

項目地址：https://gitee.com/newgateway/xdh-map

5.vxe-table

一個基於 vue 的 PC 端表格組件，支持增刪改查、虛擬滾動、懶加載、快捷菜單、數據校驗、樹形結構、列印導出、表單渲染、數據分頁、模態窗口、自定義模板、渲染器、賊靈活的配置項、擴展接口等。

項目地址：https://gitee.com/xuliangzhan_admin/vxe-table

 6.Vehicle-Keyboard-js

VehicleKeyboard是停車王品牌的各端產品線的基礎組件，專為提高中國車牌號碼輸入速度而定製開發的專用鍵盤組件。

項目地址：https://gitee.com/iRainIoT/vehicle-keyboard-js

如果你喜歡上面這些項目，記得去項目頁面給它們一個 Star 哦，如果你還想看更多的 Vue 組件項目，點擊這裡：https://gitee.com/explore/vue-extensions

【編輯推薦】

【責任編輯：

張燕妮

TEL：（010）68476606】

點讚 0

相關焦點

  • Vue-使用vue-video-player組件
    在實際開發過程中會有添加視頻的需求在vue項目中添加視頻可以使用vue-video-player組件來實現實現步驟:1.安裝在控制臺輸入: npm install vue-video-player –s
  • vue中組件的使用(下)
    如果我們需要添加多個標籤，或者為了查看方便，我們需要換行時候，我們可以採用反引號來包裹這些內容。;div>這樣的容器標籤，因為vue規定每個組件必須只有一個根元素。vue中的slot插槽怎麼用？：上述的效果可以用組件的一個特殊屬性「is」來實現，它的值是已註冊組件的名字。
  • 如何寫一個vue組件專題及常見問題 - CSDN
    />其實可以在父組件上直接使用v-bind={子組件props集合}傳入一個對象比如當一個組件有諸多配置項，且當沒有傳入配置項取用組件內部默認項的時候，為了方便覆寫子組件的內部配置項，不妨使用一個對象將配置收集到一起，但是這種做法有兩個缺點，謹慎使用不能利用 props 驗證對象裡面每個的值類型如果你子組件修改了父組件傳入的對象A，父組件的對象A也會發生修改
  • Vue組件通信的葵花寶典
    vue作為大前端的後起之秀，如今已是前端開發的必備技能，幾乎所有的公司在面試的時候，都默契的增加了一條，有vue開發經驗者優先，可見vue的魅力。vue學習門檻低，易上手，而且生態圈也比較豐富，完全滿足中小企業的需求，作為一名前端開發者，我們必須掌握基本的生存技能，才能在日益變化的前端開發中不被淘汰。
  • Vue Loader 篇(下):編寫一個單文件 Vue 組件
    編寫 ModalExample 組件我們將 vue_learning/component/slot.html 中的 modal-example 組件拆分出來，在 vue_learning/demo-project/src/components 目錄下新建一個單文件組件 ModalExample.vue，將 modal-example 組件代碼按照 Vue Loader 指定的格式填充到對應位置
  • vue2.0 子組件和父組件之間的傳值
    環境搭建步驟：打開git ，運行 npm install --global vue-cli 這是安裝vue的命令行vue init webpack vue-demo這是vue基於webpack的模板項目cd vue-demo 進入vue-demo文件夾npm install 安裝package.json中依賴的node_modulesnpm run dev 運行該項目
  • Vue組件的通信--eventBus
    但是對於具有簡單體系結構的應用程式來說，使用事件在組件之間進行通信就足夠了。為此，我們可以創建一個快速的解決方案並實現EventBus，也稱作vue的中央事件總線，適用於跨級或兄弟組件。EventBus允許我們在一個組件中發出一個事件，而在另一個組件中偵聽該事件。本示例將說明如何在Vue.js應用程式中執行此操作。
  • 【Vue.js入門到實戰教程】11-Vue Loader(下)| 編寫一個單文件 Vue 組件
    /App.vue'import 'bootstrap'import 'bootstrap/dist/css/bootstrap.min.css'...接下來，就可以正式編寫單文件組件了。編寫 ModalExample 組件我們將 vue_learning/component/slot.html 中的 modal-example 組件拆分出來，在 vue_learning/demo-project/src/components 目錄下新建一個單文件組件 ModalExample.vue，將 modal-example 組件代碼按照 Vue Loader 指定的格式填充到對應位置
  • Vue.js 父子組件通信的十種方式
    面試官：Vue 中父子組件通信有哪些方式？自己先想一分鐘。無可否認，現在無論大廠還是小廠都已經用上了 Vue.js 框架，簡單易上手不說，教程詳盡，社區活躍，第三方套件還多。真的是前端開發人員必備技能。而且在面試當中也往往會問到關於 Vue 方面的各種問題，其中大部分面試官會問到如上這種問題。
  • vue高級進階系列——用typescript玩轉vue和vuex
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫用過vue的朋友大概對vuex也不陌生，vuex的官方解釋是專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
  • Vue最重要的知識點:組件化開發
    感謝你的觀看，謝謝你。學習計劃安排如下：首先補充兩個知識點：計算屬性和監控。再學一下vue中的組件化開發，包括全局、局部組件以及父子組件之間的通信。因為組件不會與頁面的元素綁定，否則就無法復用了，因此沒有el屬性。template：其和el屬性的作用是類似的，對應視圖模板。data()：定義方式比較特殊，必須是一個函數，作用就對應vue實例中的data屬性。
  • Vue隱藏技能:運行時渲染用戶寫入的組件代碼!
    這部分的處理需要通過在容器組件上添加 `errorCaptured`這個官方鉤子[7]，來捕獲子組件的錯誤，因為並沒有一個途徑可以獲取組件自身運行時錯誤的鉤子。，導致掛載 vm($mount('#id'))時，DOM 可能還沒有渲染到文檔流上，因此在首次渲染時需要一定的延遲後再掛載 vm。
  • Vue2.0父子組件間通信
    介紹SRC文件流程及根組件App腳手架搭建完成後，project裡面各個文件夾及文件，如下圖：腳手架各個文件和文件夾src文件流程介紹index.html(入口文件)=>main.js=>App.vue（根組件），根組件中模板內容就直接插入到入口文件中#app處，然後再將頁面呈現出來。
  • Vue.js——60分鐘組件快速入門(上篇)
    如果不需要全局註冊，或者是讓組件使用在其它組件內，可以用選項對象的components屬性實現局部註冊。上面的示例可以改為局部註冊的方式：<!'    });</script>如果你這樣做了，瀏覽器會提示一個錯誤：
  • 什麼是vue?在項目開發中為什麼要用vue?
    在近兩年的web及項目開發中，vue技術的使用越來越普遍，其各種資料、介紹以及使用攻略內容資料非常多，那麼vue到底什麼？在項目開發中，vue起到什麼作用？它與傳統的html+css+js+lamp開發網站項目又有什麼區別呢？
  • 推薦8 個漂亮實用的 vue.js 進度條組件
    為大家精心挑選了 8 個漂亮的 Progress Bars 組件，並附上 GitHub 連結和 vue.js 代碼示例，以及Vue3 快速深入全攻略。1.easy-circular-progress一個簡單的循環進度組件，帶有計數效果。
  • 2020年5個最佳Vue移動端組件庫|UI框架
    小夥伴們平時開發vue，react或是angular項目，都喜歡使用的什麼UI組件庫呢？今天，就來盤點下，幾個熱門優質的Vue.js移動端UI組件庫。可以只加載聲明過的組件及其樣式文件，無需再糾結文件體積過大採用 CSS3 處理各種動效，避免瀏覽器進行不必要重繪和重排，使用戶獲得流暢順滑的體驗Mint UI 做到了輕量化。
  • 手把手教你實現一個簡易的Vue組件在線編輯器
    vue-cli使用過vue的我想大家都知道，那麼xxx.vue組件是怎麼運行的呢?怎麼把template,script,style渲染到頁面上的呢?今天我們手動寫了個簡易的Vue組件在線編輯器玩一玩。/node_modules/vue/dist/vue.js"></script> textarea 元素為vue組件代碼的編寫部分,button為按鈕區域textarea {
  • Vue.Draggable - 基於 Vue.js 絲般柔滑的拖拽排序組件
    在 jQuery 的時代，有很多動效非常流暢絲滑的拖拽排序插件，但在國內 Vue.js 起來後，卻比較難找到一款像 Sortable.js 那樣的組件，而 Vue.Draggable 就是一款基於 Sortable.js 開發的 Vue 增強組件。
  • 【Vue.js 入門到實戰教程】09-Vue 組件插槽 | 父子組件間的內容分發和插槽作用域
    說到這裡，我們可以引用一張 Vue 官網提供的組件架構圖，實際上，一個 Vue.js 應用就是基於下面這樣的一個組件樹來組織和管理頁面元素的：我們可以把全局 Vue 實例看作一個最頂層的隱式組件，其他組件都是通過 Vue.component 在此基礎上註冊，並且這些組件之間可以相互嵌套、內容分發、數據傳遞以及事件通知來建立聯繫，從而通過一個個小組件自下而上層層疊加，最終構建出複雜的頁面布局和功能模塊