UI庫(kù)和框架

UI 組件庫(kù)是一組（通常）可靠的現(xiàn)成 UI 組件，如按鈕、輸入、對(duì)話框等。它們用作布局的構(gòu)建基塊。由于其模塊化特性，我們可以以許多不同的方式排列組件，以實(shí)現(xiàn)獨(dú)特的效果。

BootstrapVue

Bootstrap vue 將 Bootstrap 組件與Vue結(jié)合使用。它可以幫助你構(gòu)建響應(yīng)迅速、移動(dòng)優(yōu)先的項(xiàng)目。它是Vue.js和世界上最受歡迎的前端CSS庫(kù)Bootstrap的組合。BootstrapVue將 Bootstrap的強(qiáng)大功能帶到了Vue。它使所有Bootstrap 元素（如行、列和卡）都可以用作Vue 組件。

此外，它還提供了適用于Vue .js v2.6 的Bootstrap v4 組件和網(wǎng)格系統(tǒng)的最全面的實(shí)現(xiàn)之一，并帶有廣泛且自動(dòng)化的WAI-ARIA 輔助功能標(biāo)記。

特征：

• 易于主題化

• 開箱即用的 ARIA 輔助功能

• 未綁定到 jQuery

你還可以查看Vuexy VueJS管理模板以獲取更好的想法。它基于bootstrapVue。此外，它是一個(gè)可高度定制，高級(jí)，最受客戶喜愛的多用途管理模板。

Vuexy提供了一些非常驚人且引人注目的功能：

• 多語言

• 支持RTL

• 添加了 Figma 和 Sketch文件

Vuetify

Vuetify是一個(gè)VueUI庫(kù)，其中包含使用MaterialDesign規(guī)范的精美手工制作的組件。它由形狀、卡片、交互、深度效果（如陰影和燈光等）的UI 指南組成。

它可以幫助你使用成功所需的所有工具來加快開發(fā)過程。此外，它支持所有現(xiàn)代瀏覽器，并與VueCLI-3兼容。它還為Simple HTML，Webpack，NUXT，PWA，Electron，ALa Carte，ApacheCordova提供了基本模板。

產(chǎn)品特點(diǎn)：

• WCAG可訪問性（a11y） / WCAG / Section 508 / RTL 支持

• 30 多種支持的語言

• 更小的捆綁尺寸，具有自動(dòng)搖樹功能

• 一個(gè)龐大的Discord社區(qū)

• 對(duì)主要版本的長(zhǎng)達(dá)18 個(gè)月的支持

你可以查看MaterioVuetify VueJS AdminTemplate以獲得更好的想法。Materio還提供了寶貴的功能，旨在幫助創(chuàng)建完全符合你想象的優(yōu)質(zhì)單頁應(yīng)用程序。

此外，MaterioVuetify VueJS AdminTemplate還附帶了獨(dú)特而有用的工具，例如模糊搜索，Dark，Semi-Dark和Bordered布局選項(xiàng)，AdvancedCards和Chart。此外，它還提供了以下驚人功能。

特征：

• Pure Vue JS， 無jQuery依賴性

• 使用 Vue CLI 創(chuàng)建

• 利用 Vuex、Vue Router、Webpack

• 代碼拆分，延遲加載

• JWT身份認(rèn)證

• 訪問控制 （ACL）

• 支持RTL

Quasar

Quasar是一個(gè)高性能的MaterialDesign組件套件，具有SPA，SSR，PWA，Mobile（Cordova和Compacter），Desktop（Electron）和瀏覽器擴(kuò)展的構(gòu)建器。這使你作為Web開發(fā)人員可以快速創(chuàng)建多種風(fēng)格的響應(yīng)式網(wǎng)站/應(yīng)用程序。它專注于遵循材料2.0。

Quasar提供了一個(gè)UMD（統(tǒng)一模塊定義）版本，你可以將其作為CSS和JSHTML標(biāo)簽添加到現(xiàn)有項(xiàng)目中，然后就可以使用它了。

特征：

• 以性能為中心的框架

• 提供內(nèi)置 SSR（服務(wù)器端渲染應(yīng)用）支持

• PWA（漸進(jìn)式 Web 應(yīng)用程序）

• BEX（瀏覽器擴(kuò)展）

• 通過Cordova或Compacter的移動(dòng)應(yīng)用程序（Android，iOS等）

• 多平臺(tái)桌面應(yīng)用程序（使用 Electron）

Vuesax

Vuesax是一個(gè)基于Vuejs的組件框架，它是一個(gè)從頭開始設(shè)計(jì)為可增量采用的框架。它提供了獨(dú)特且可重用的UI組件。該框架的重點(diǎn)是促進(jìn)應(yīng)用程序的開發(fā)，在不刪除必要功能的情況下改進(jìn)其設(shè)計(jì)。此外，所有組件都具有獨(dú)特的顏色，形狀和設(shè)計(jì)，因此你可以自由使用它們而不會(huì)失去創(chuàng)建和生產(chǎn)的速度。

特征：

• 獨(dú)特而美麗的設(shè)計(jì)

• 新穎的設(shè)計(jì)與眾所周知的材料設(shè)計(jì)相比

• 可重復(fù)使用的組件，易于實(shí)施

• 響應(yīng)式支持

Nuxt.js

Nuxt是一個(gè)基于Vue的漸進(jìn)式框架.js來創(chuàng)建現(xiàn)代Web應(yīng)用程序。它基于Vue.js官方庫(kù)（vue，vue-router和Vuex）和強(qiáng)大的開發(fā)工具（Webpack，Babel和PostCSS）。

特征

• 自動(dòng)轉(zhuǎn)譯和捆綁（使用 Webpack 和 babel）

• 熱代碼重新加載

• 服務(wù)器端呈現(xiàn)或單頁應(yīng)用程序或靜態(tài)生成，你可以根據(jù)自身選擇

Ream

Ream是一個(gè)用于在Vue3中構(gòu)建服務(wù)器渲染或靜態(tài)生成的Web應(yīng)用程序的框架，它受到Next.js和SvelteKit的啟發(fā)。

開源項(xiàng)目

Pagekit

模塊化輕量級(jí)CMS由Symfony組件和Vue.js構(gòu)建而成。無論是個(gè)人博客還是公司的網(wǎng)站。使用Pagekit，可以為網(wǎng)絡(luò)創(chuàng)建功能強(qiáng)大的內(nèi)容，這些內(nèi)容可以在每臺(tái)設(shè)備上完美運(yùn)行。Pagekit干凈直觀的界面使您可以專注于最重要的事情，管理你的內(nèi)容。

Koel

Koel是一個(gè)簡(jiǎn)單的基于Web的個(gè)人音頻流媒體服務(wù)，在客戶端用Vue編寫，在服務(wù)器端用Laravel編寫。針對(duì)Web開發(fā)人員，Koel采用了一些更現(xiàn)代的Web技術(shù)- CSS網(wǎng)格，音頻和拖放API等來完成它的工作。

Flox

Flox是一個(gè)自托管的電影，系列和Amines觀看列表。它建立在Laravel和Vue之上.js并使用電影數(shù)據(jù)庫(kù)API。該評(píng)級(jí)基于3分制：goodmedium bad

特征

• 用于Plex的API - 將Plex的電影，節(jié)目和觀看的劇集從Plex同步到Flox。

• 劇集跟蹤。

• 建議。

• 監(jiān)視列表。

• 熱門電影和節(jié)目，即將上映和當(dāng)前電影（每日更新）。

Vuegg

VueJS項(xiàng)目通過將組件直接拖放到可視化編輯器中，并移動(dòng)、調(diào)整它們的大小到你的選擇。Vuegg利用應(yīng)用程序/網(wǎng)站的頁面和路由的創(chuàng)建，簡(jiǎn)化了樣式設(shè)計(jì)工作，并有助于實(shí)現(xiàn)快速原型制作工作流程。

該項(xiàng)目的目的是將設(shè)計(jì)和原型設(shè)計(jì)合并到一個(gè)單一的流程中。每當(dāng)你對(duì)屏幕上看到的內(nèi)容感到滿意時(shí)，只需獲取代碼即可。

特征：

• 通過拖放組件進(jìn)行模型/原型制作，并移動(dòng)/調(diào)整它們的大小

• 支持標(biāo)準(zhǔn)鼠標(biāo)和鍵盤組合

• 響應(yīng)式預(yù)覽（手機(jī)、平板電腦、網(wǎng)絡(luò)）

• HTML5 元素的基本集合

VUE CRUD

VueCRUD允許創(chuàng)建用于管理單個(gè)表的機(jī)制，以及具有登錄系統(tǒng)和模塊的CMS或擴(kuò)展CRM。VueCRUD使用vue及其生態(tài)系統(tǒng)（Vuex，Vuetify等）。享受世界上最流行的JS框架的好處。

商業(yè)項(xiàng)目

Materio– Vuetify VueJS Laravel Admin Template 

MaterioVuetify VueJS Laravel Admin Template –是開發(fā)人員最友好且高度可定制的管理儀表板模板，基于流行的前端框架VueJS和后端Laravel。

如果你是一個(gè)開發(fā)人員，正在尋找最好的VueJS Laravel管理模板，那么這就是一個(gè)。此外，我們遵循最高的行業(yè)標(biāo)準(zhǔn)，為你帶來最好的laravel管理模板之一。此外，它不僅快速且易于使用，而且具有高度可擴(kuò)展性。此外，提供極致的便利性和靈活性，你將能夠毫不費(fèi)力地構(gòu)建所需的任何應(yīng)用程序。

此外，你可以使用此Vuejs laravel管理模板輕松構(gòu)建高質(zhì)量的單頁應(yīng)用程序。因此，請(qǐng)使用我們的創(chuàng)新管理模板創(chuàng)建引人注目，高質(zhì)量和高性能的單頁應(yīng)用程序。

特征：

• 純Vuejs，無jQuery依賴性

• 使用 Vue CLI 創(chuàng)建

• 利用 Vuex、Vue Router、Webpack

• 3 儀表板，RTL 支持

• 代碼拆分，延遲加載

• API 就緒 JWT 身份驗(yàn)證流程

• 訪問控制（即使在 CRUD 操作上）

• Laravel passport

• Laravel sanctum等等

Vuexy - VueJS 管理模板

Vuexy -Vuejs Admin DashboardTemplate在所有bootstrapVue管理模板中都是高級(jí)的。此外，此模板響應(yīng)速度快，干凈且結(jié)構(gòu)合理。

Vuexybootstrap vue admin模板包含Vuejs、HTML（bootstrap4）、PHP（laravel 8）和 React （reactstrap）、Angular11。此外，這個(gè)圖形豐富的引導(dǎo)模板因其用戶友好的體驗(yàn)和速度而受到全球開發(fā)人員的強(qiáng)烈推薦。此外，它是開發(fā)人員最友好的Vuejs+ HTML儀表板。其中包括100+卡，50+組件等等。

特征：

• 基于 BootstrapVue

• Vue 3 就緒 （組合API）

• bookstrap 4.5.3

• laravel8

• 添加了Sketch和Figma文件

• JWT身份驗(yàn)證，ACL

• Internationalization/i18n & RTL Ready

Wjimo

Wjimo有100多個(gè)用于企業(yè)應(yīng)用程序的動(dòng)態(tài)JavaScript UI組件。在Wjimo的幫助下，你可以將開發(fā)時(shí)間縮短一半。此外，你還可以快速構(gòu)建輕量級(jí)，高性能的HTML/ JavaScript UI應(yīng)用程序。

• FlexGrid 提供虛擬化渲染和無限的單元格模板

• 與所有 JavaScript 框架深度集成，包括 Angular、React、Vue、Ionic 和 Web Components

• 使用 80 多種圖表類型可視化數(shù)據(jù)

• 使用 OLAP 數(shù)據(jù)透視網(wǎng)格、數(shù)據(jù)透視圖和切片器分析數(shù)據(jù)

• FlexMap（測(cè)試版）我們最新的可視化地圖控件

• Cloropleth maps

• 散點(diǎn)圖

• 氣泡圖

Vuejs laravel管理模板

此管理模板是使用Vuejs2、Laravel5.4 和 Bootstrap4構(gòu)建的。VueJS專為從頭開始開發(fā)任何項(xiàng)目而設(shè)計(jì)，也可以與任何其他開發(fā)項(xiàng)目集成。vue的核心庫(kù)主要與表示層相關(guān)聯(lián)，很容易與其他庫(kù)或現(xiàn)有項(xiàng)目一起使用。

特征：

• 完全基于 VueJS

• 未使用 jQuery

• 提供 7 種布局選項(xiàng)

• 多種面包屑設(shè)計(jì)

• 添加了多個(gè)配色方案

Coloban

具有聊天，看板，通話，屏幕共享等功能的一體化項(xiàng)目管理工具。

Commander

它是在本地和云中管理無服務(wù)器和容器基礎(chǔ)結(jié)構(gòu)的最佳開發(fā)人員IDE 之一。支持30 多種最佳云服務(wù)。借助10 多個(gè)部署和測(cè)試運(yùn)行程序，你可以配置一次，然后一遍又一遍地重復(fù)。配置Ansible 和無服務(wù)器環(huán)境變量。直接調(diào)用lambda，或使用我們的測(cè)試運(yùn)行程序測(cè)試S3、SQS、SNS、DynamoDB流 Lambda 調(diào)用。

它可以幫助你：

• 可視化你的系統(tǒng)

• 提高團(tuán)隊(duì)速度

• 更快的提升時(shí)間

• 提高生產(chǎn)力

Moonitor

Moonitor可以實(shí)時(shí)為你提供加密貨幣資產(chǎn)的清晰概覽。

LaravelVue 管理模板（免費(fèi)）

Laravel+ VueJS是交付響應(yīng)式Web應(yīng)用程序和項(xiàng)目的最佳組合。此列表包括最好的免費(fèi)和高級(jí)LaravelVuejs管理模板，以節(jié)省你的寶貴的時(shí)間。在這里，你將看到一些基于前端框架Vue.js和Laravel作為后端框架而構(gòu)建的出色管理模板。

Vuelibs

Vuelib是Vue.js庫(kù)，框架，實(shí)用程序和組件的列表。

Vue文章

在這里，你可以找到有關(guān)vue2 和vue3 的詳細(xì)文章。它還提供帶有示例的教程。

Madewithvuejs：使用Vue.js制作的一系列項(xiàng)目

使用Vuejs制作是網(wǎng)站，管理模板，應(yīng)用程序，實(shí)用程序，UI組件，庫(kù)等的豐富集合;這是用VueJS制作的。你還將獲得書籍，插件，圖表等。

Vuejs examples

VueJS示例，顧名思義，它是使用VueJS制作的簡(jiǎn)單且可自定義的步驟進(jìn)度指示器，Vue自動(dòng)貸款計(jì)算器，通知/Toast組件等示例的集合。不僅如此，它還提供了使用VueJS制作的UI，游戲，元素，媒體等組件。

用戶界面組件：

組件是使用具有更好一致性的較小、可重用部分來設(shè)計(jì)和開發(fā)UI的好方法。組件在設(shè)計(jì)和開發(fā)之間提供更好的協(xié)作，使你的設(shè)計(jì)語言隨著時(shí)間的推移而發(fā)展。

表格

以下是Vue的一些表組件和ag-grid組件。

• Vue Materialize Data table - 一個(gè)花哨的Materialize CSS 數(shù)據(jù)表VueJS組件。

• Vue Tables-2 - Vue.js 2 個(gè)網(wǎng)格組件。

• 獵豹網(wǎng)格 - 最快的網(wǎng)絡(luò)開源數(shù)據(jù)表。

• vue-datasource - 一個(gè) vue.js服務(wù)器端組件來創(chuàng)建動(dòng)態(tài)表。

• ag-grid-vue – 適用于ag-Grid的vue適配器.

• vue-data-tables

• vue-teible - 用于 Web 的輕量級(jí)和靈活的表格組件

• vuejs-smart-table - 使用 vanilla HTML Table結(jié)構(gòu)的直線表組件

• fancy-grid-vue -適用于 FancyGrid的vue適配器

通知

使用無模式臨時(shí)小彈出窗口通知用戶

• Vue Toasted - 適用于 VueJS 2+ 的響應(yīng)式觸摸兼容 Toast 插件

• Vuex Flash - Vuex 中的 VueJs Flash Message Component

• Vue Notification Bell - 用于顯示通知的 Vue UI 組件。

• Vue Notification – 具有被動(dòng)方法的vue.js3的加載器管理器。

• Vue Toast Notification - 又一個(gè) Vue.js Toast 通知插件

• VueToastify - 一個(gè)大驚小怪的免費(fèi)通知組件。

• vue-toaster - Vue.js Vue 3 的 toast notification plugin

加載

加載程序/微調(diào)器/進(jìn)度條— 讓用戶知道正在加載某些內(nèi)容

• Vue 徑向進(jìn)度 - Vue 的徑向進(jìn)度條組件.js。

• Vue wait - 用于 Vue/Vuex 和 Nuxt 應(yīng)用程序的復(fù)雜加載程序管理。

• Vue-ultimate-skeleton-cards - 用于 Vue的終極、完全可定制的 Skeleton Card 插件

• Vue-wait-for - Vue.js 3 的加載程序管理器，帶有反應(yīng)式方法

• Vue-content-loader - SVG組件，用于創(chuàng)建占位符加載，如Facebook卡片加載

• vue-element-loading - 在容器內(nèi)加載或全屏加載 Vue.

• tb-skeleton - 用于 Vue 的骨架屏幕加載.js

• vue-spinners - 用于 Vuejs 的加載微調(diào)器組件的集合

圖標(biāo)

• Vue ionicons - 來自 Ionic Team 的組件。

• Vue awesome -使用內(nèi)聯(lián)SVG為vue.js子體更改組件

• Mdi vue - Vuejs 的 材料設(shè)計(jì)圖標(biāo)組件

• vue-zondicons -美麗的 Zondicon svg 圖標(biāo)的Vue 組件

• vue-eva-icons – 簡(jiǎn)單的開源eva圖標(biāo)作為Vue組件。

• vue-unicons - 1000+ 像素完美的 svg unicons，用于你的下一個(gè)項(xiàng)目作為 Vue 組件。

菜單

• VueJS 下拉列表 - Vue.js 2 下拉菜單組件。重量輕，使用方便，擴(kuò)展方便，無需外部設(shè)備。

• Vue 簡(jiǎn)單菜單 - 具有一組基本功能的簡(jiǎn)單菜單組件。

• Vue 樹導(dǎo)航 - Vue.js 2 樹導(dǎo)航，支持 vue 路由器

• bp VueJS 下拉列表 - Vuejs => 2 下拉列表。易于使用，無需外部，可選。

• Vue Bulma 手風(fēng)琴 - 簡(jiǎn)單、易于配置的手風(fēng)琴或可折疊樣式，提供 Bulma 自定義或內(nèi)置圖標(biāo)

• Vue-stripe-menu - 創(chuàng)建一個(gè)帶有動(dòng)畫的導(dǎo)航菜單，就像在Stripe上一樣

圖表

• Flowchart-vue - Vue 的 Flowchart & Flowchart designer component for Vue.js。

• Vue-d3-barchart - 使用 d3 繪制圖表的小組件。

• Vue3-highcharts -Vue 3 的 Highcharts.JS包裝器組件

• Echarts-for-vue - Vue 3 and 2的包裝組件

• Vue3-chart-v2 - 基于 Vue 3 的 Chart.JS 的 Vue 包裝器組件

• vue-apexcharts - ApexCharts 的Vue.js組件

• vue-doughnut-chart - 用于 Vue 的 Doughnut 圖表組件.js。

• v-charts - 基于 Vue2.x 和 Echarts 的圖表組件。

日歷

• Vue datepicker ui - Vue的日期選擇器組件

• Vue 日期工具 - 最輕量級(jí)的 VueJS 日期選取器和日期范圍選取器，使用 date-fns 且沒有其他依賴項(xiàng)

• Vue 春季日歷 - 它是一個(gè)基于 Vue 的組件，提供顯示每日事件的完整日歷的功能。

• Vue jquery calendar - 適用于jquery ui

• Vue 日程安排板 - 一個(gè)易于使用的組件，用于顯示某人的日程安排列表，以幫助安排面試或訪問安排。

• Vue 陰歷 pro - 陰歷的 vue 組件。使用日歷.js進(jìn)行日期操作。

播客

• DNE 138 - Vale a pena VueJS？(01-05-2018)

• 憤世嫉俗的開發(fā)人員 #99 （10-15-2018）

• 語法 #130 （03-27-2019）

• 享受 Vue：新的 Vue.js播客

求職：

• Vue.js Jobs - VueJobs - 一個(gè)Vue.js工作門戶，用于雇用或被雇用所有Vue.js工作。

• Vue.js面試問題 - 300個(gè)VueJS面試問題和答案列表

• Prokarman簡(jiǎn)歷生成器 - 一個(gè)免費(fèi)的簡(jiǎn)歷生成器，用于為您夢(mèng)想的工作制作簡(jiǎn)歷。

服務(wù)器端呈現(xiàn)

• 通用 vue

• 因子平臺(tái) - 擴(kuò)展驅(qū)動(dòng)的 VueJS 平臺(tái) （Factor.dev → 文檔)

• Vapper - 基于 Vue 的服務(wù)器端渲染框架。

靜態(tài)網(wǎng)站生成器

• VuePress - 極簡(jiǎn)主義的Vue供電的靜態(tài)站點(diǎn)生成器。

• Peco - 人類的靜態(tài)網(wǎng)站生成器。未維護(hù)

• Saber - 一個(gè)靜態(tài)網(wǎng)站生成器，用于使用Vue.js構(gòu)建超快的網(wǎng)站。

• Gridsome - 使用 Vue 構(gòu)建超快速、現(xiàn)代的網(wǎng)站.js

• Servue - 服務(wù)器端渲染引擎，將 vue 文件渲染為 HTML 字符串。

社區(qū)

• 推特

• 官方論壇

• vueslack - 全球2300 +注冊(cè)用戶

• Vue Land - Discord chat server

結(jié)論：

在這里，我們提到了一些非常有用的VueJS資源。當(dāng)你使用VueJS項(xiàng)目時(shí)，你肯定需要一些工具，UI組件庫(kù)，管理模板等。因此，為了幫助節(jié)省時(shí)間，我們?cè)谶@里收集了一些驚人的資源，這樣你就不必在這里和那里搜索。你可以查看下一個(gè)項(xiàng)目。

希望你發(fā)現(xiàn)此集合有用。

轉(zhuǎn)載自Duing（ID：duyi-duing）

原文鏈接：https://dev.to/theme_selection/ultimate-vuejs-resources-for-developers-3bbk