收集22種開源Vue模板和主題框架「干貨」

時(shí)間：2023-06-12 16:51:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-12 16:51:02 來源：網(wǎng)站運(yùn)營(yíng)

收集22種開源Vue模板和主題框架「干貨」：在Internet上搜索模板和主題時(shí)，很難找到免費(fèi)的Vue資源。

即使您不在乎質(zhì)量，它們似乎也很難被發(fā)現(xiàn)，并出于好奇而感動(dòng)，我花了數(shù)小時(shí)在Google和Github上四處挖掘，結(jié)果得到了收集22種開源Vue模板和主題框架集合。我不會(huì)對(duì)此打賭，但是它們也是高質(zhì)量的資源。

Bootstrap Vue

收集22種開源Vue模板和主題框架「干貨」

現(xiàn)場(chǎng)演示： https://bootstrap-vue.org/

github：https://github.com/bootstrap-vue/bootstrap-vue

BootstrapVue 擁有85個(gè)以上的組件，45個(gè)以上的可用插件，多個(gè)指令和670+個(gè)圖標(biāo)， 它提供了可用于Vue.js v2.6的Bootstrap v4.5組件和網(wǎng)格系統(tǒng)的最全面的實(shí)現(xiàn)之一 ，并具有廣泛的功能和自動(dòng) WAI-ARIA 可訪問性標(biāo)記。

vue & nuxt 博客網(wǎng)站

現(xiàn)場(chǎng)演示：https://surmon.me/
Github:
https://github.com/surmon-china/surmon.me

使用vue & nuxt 搭建建立的非常有風(fēng)味獨(dú)特的博客網(wǎng)站。

Vue后臺(tái)UI框架 - Buefy

現(xiàn)場(chǎng)演示：https://buefy.org/

Github: https://github.com/buefy/buefy/

**Buefy **是基于Bulma框架和設(shè)計(jì)的Vue.js響應(yīng)式UI組件的輕量級(jí)庫

特征

• 輕松保留當(dāng)前的布爾瑪主題/變量
• 支持Material Design圖標(biāo)和FontAwesome
• 非常輕巧，除了Vue＆Bulma之外沒有任何內(nèi)部依賴性
• 大約88KB min + gzip（包括布爾瑪）
• 語義代碼輸出
• 遵循布爾瑪設(shè)計(jì)和一些Material Design UX
• 專注于可用性和性能，而無需過度動(dòng)畫的東西

vue后臺(tái)UI框架 - ant-design-vue

現(xiàn)場(chǎng)演示：https://vue.ant.design
Github:
https://github.com/vueComponent/ant-design-vue

這里是 Ant Design 的 Vue 實(shí)現(xiàn)，開發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品。

特性

• 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語言和視覺風(fēng)格。
• 開箱即用的高質(zhì)量 Vue 組件。
• 共享Ant Design of React設(shè)計(jì)工具體系。

Vue后臺(tái)UI框架 - vuetifyjs

現(xiàn)場(chǎng)演示：官網(wǎng):http://vuetifyjs.com
Github：
https://github.com/vuetifyjs/vuetify

Vuetify 是一個(gè) Vue UI 庫，包含手工制作的精美材料組件。不需要設(shè)計(jì)技能 - 創(chuàng)建令人驚嘆的應(yīng)用程序所需的一切都觸手可及。

vue后臺(tái)UI框架 - iview

iview官網(wǎng)：https://www.iviewui.com/
Github：
https://github.com/iview/iview
官方后臺(tái)示例：iview-admin：
https://github.com/iview/iview-admin

iView Admin是一個(gè)前端管理后臺(tái)集成解決方案。它基于Vue.js并使用UI Toolkit iView。

餓了么出品的UI框架 - element-ui

Vue：http://element-cn.eleme.io/2.0/#/zh-CN/component/quickstart
React：https://eleme.github.io/element-react/#/zh-CN/quick-start
Angular：https://element-angular.faas.ele.me/guide/start

基于Vue2.0和bulma0.2的后臺(tái)管理框架 - vue-admin

Github：https://github.com/vue-bulma/vue-admin

cd vue-admin
npm install
npm run dev

人人開源 / renren-fast-vue

現(xiàn)場(chǎng)演示：
http://demo.open.renren.io/renren-fast (賬號(hào)密碼：admin/admin)

Gitee：https://gitee.com/renrenio/renren-fast-vue

renren-fast-vue基于vue、element-ui構(gòu)建開發(fā)，實(shí)現(xiàn)renren-fast后臺(tái)管理前端功能，提供一套更優(yōu)的前端解決方案

• 前后端分離，通過token進(jìn)行數(shù)據(jù)交互，可獨(dú)立部署* 主題定制，通過scss變量統(tǒng)一一站式定制* 動(dòng)態(tài)菜單，通過菜單管理統(tǒng)一管理訪問路由* 數(shù)據(jù)切換，通過mock配置對(duì)接口數(shù)據(jù)／mock模擬數(shù)據(jù)進(jìn)行切換* 發(fā)布時(shí)，可動(dòng)態(tài)配置CDN靜態(tài)資源／切換新舊版本

若依 / RuoYi-Vue

演示地址：http://vue.ruoyi.vip
文檔地址：http://doc.ruoyi.vip

RuoYi-Vue 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分離權(quán)限管理系統(tǒng)

• 前端采用Vue、Element UI。* 后端采用Spring Boot、Spring Security、Redis & Jwt。* 權(quán)限認(rèn)證使用Jwt，支持多終端認(rèn)證系統(tǒng)。* 支持加載動(dòng)態(tài)權(quán)限菜單，多方式輕松權(quán)限控制。* 高效率開發(fā)，使用代碼生成器可以一鍵生成前后端代碼。* 提供了一個(gè)Oracle版本RuoYi-Vue-Oracle，保持同步更新。* 感謝Vue-Element-Admin，eladmin-web。* 不分離版本，請(qǐng)移步RuoYi，微服務(wù)版本，請(qǐng)移步RuoYi-Cloud

Vue White Dashboard

現(xiàn)場(chǎng)演示： https://demos.creative-tim.com/vue-white-dashboard/?ref=devto

地址：
https://www.creative-tim.com/product/vue-white-dashboard?ref=devto

Vue White Dashboard 是一個(gè)免費(fèi)的開源Bootstrap 4和Vue.js Admin儀表板，其中包含大量的組件，這些組件可以組合在一起并看起來非常漂亮。Vue White儀表板具有16個(gè)以上的獨(dú)立組件，可讓您自由選擇和組合。這意味著有成千上萬種可能的組合。所有組件的顏色都可能不同，您可以使用SASS文件輕松進(jìn)行修改。

Vue QRcode Reader

現(xiàn)場(chǎng)演示： https://gruhn.github.io/vue-qrcode-reader/?rel=nofollow

github：https://github.com/gruhn/vue-qrcode-reader?rel=nofollow

Vue QRcode Reader是一組用于檢測(cè)和解碼QR碼的VueJS組件。它使您無需離開瀏覽器即可檢測(cè)和解碼QR碼。所有組件都具有響應(yīng)能力。除此之外，它接近零樣式，因此您可以使它們適合您的布局。使用方法簡(jiǎn)單明了。

VueJS Expo

現(xiàn)場(chǎng)演示：https://vuejsexpo.com/?ref=devto

VueJS Expo 使用Vue.js框架收集了許多精美的網(wǎng)站，應(yīng)用程序和實(shí)驗(yàn)。如果您是VueJS框架的粉絲，那么這里可能是受到啟發(fā)的地方。展示包括基于VueJS的主題，元素，儀表板等。

Vue Paper Dashboard PRO

現(xiàn)場(chǎng)演示： https://demos.creative-tim.com/bs3/vue-paper-dashboard-pro/#/admin/overview?ref=devto

地址：
https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=devto

Vue Paper Dashboard PRO 是建立在Bootstrap和Vue之上的漂亮資源。它將幫助您立即開始開發(fā)儀表板。Vue Paper Dashboard Pro是 Original Paper Dashboard Pro的VueJS移植版本。使用儀表板非常簡(jiǎn)單，但是需要具備Javascript，Vue和Vue-Router的基礎(chǔ)知識(shí)。

Vue-Color

現(xiàn)場(chǎng)演示： http://vue-color.surge.sh/?rel=nofollow

Github：https://github.com/xiaokaike/vue-color?rel=nofollow

**Vue-Color **是來自Sketch，Photoshop，Chrome，Github，Twitter，Material Design等眾多酷炫色彩選擇器的集合。

Vue-Koel

現(xiàn)場(chǎng)演示：https://koel.dev/?rel=nofollow

Github：https://github.com/koel/koel?rel=nofollow

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

Vue Argon Dashboard

現(xiàn)場(chǎng)演示： https://demos.creative-tim.com/vue-argon-dashboard/?ref=devto

地址：
https://www.creative-tim.com/product/vue-argon-dashboard?ref=devto

**Vue Argon Dashboard **是Bootstrap 4和Vue.js的儀表板。它是開源的，免費(fèi)的，并且具有許多組件，可以幫助您創(chuàng)建出色的網(wǎng)站。Vue Argon儀表板內(nèi)置了100多個(gè)單獨(dú)的組件，因此您可以選擇和組合。由于實(shí)現(xiàn)了所有元素，因此從原型制作到功能齊全的代碼，您將節(jié)省大量時(shí)間。該儀表板附帶了預(yù)先構(gòu)建的示例，因此開發(fā)過程是無縫的，從我們的頁面切換到真實(shí)的網(wǎng)站非常容易。

Pagekit

現(xiàn)場(chǎng)演示：https://pagekit.com/?rel=nofollow

github：https://github.com/pagekit/pagekit?rel=nofollow

**Pagekit **是使用Symfony組件和VueJS構(gòu)建的模塊化，輕量級(jí)CMS。不管是個(gè)人博客還是公司網(wǎng)站，使用Pagekit都可以為Web創(chuàng)建功能強(qiáng)大的內(nèi)容，使其在每種設(shè)備上都能完美運(yùn)行。它具有干凈直觀的界面。它也有一個(gè)很棒的內(nèi)置市場(chǎng)。

Vue Material Dashboard PRO

現(xiàn)場(chǎng)演示： https://demos.creative-tim.com/vue-material-dashboard-pro/?ref=devto#/dashboard

地址：
https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=devto

Vue Material Dashboard PRO 是基于Vue Material和VueJS構(gòu)建的超棒高級(jí)管理模板。它是通過考慮您在儀表板中實(shí)際需要的東西而創(chuàng)建的。Vue Material Dashboard PRO包含精選和優(yōu)化的VueJS插件。一切都旨在相互配合。使用儀表板非常簡(jiǎn)單，但是需要具備Javascript，VueJS和Vue Router的基礎(chǔ)知識(shí)。

Vue Material Kit

現(xiàn)場(chǎng)演示： https://demos.creative-tim.com/vue-material-kit/?ref=devto#/

地址：
https://www.creative-tim.com/product/vue-material-kit?ref=devto

**Vue Material Kit **是基于Vue Material和VueJS構(gòu)建的驚人的免費(fèi)開源資源。這將幫助您立即開始開發(fā)UI Kit。Vue材料工具包是原始材料工具包的官方VueJS版本。使用UI Kit非常簡(jiǎn)單，但是需要Javascript，VueJS和Vue Router的基礎(chǔ)知識(shí)。

Retrospectify

現(xiàn)場(chǎng)演示： http://pepf.nl/retrospective/?rel=nofollow

github ：https://www.creative-tim.com/product/vue-material-kit?ref=devto

Retrospectify 是用Vue編寫的出色工具，用于數(shù)字化敏捷團(tuán)隊(duì)回顧。當(dāng)與遠(yuǎn)程團(tuán)隊(duì)進(jìn)行回顧時(shí)，或者當(dāng)您希望隨時(shí)間跟蹤回顧結(jié)果時(shí)，這將很有用。它具有三種注釋類型，您可以在注釋周圍移動(dòng)或?qū)Ⅻc(diǎn)添加到各個(gè)注釋中。

Code Notes

現(xiàn)場(chǎng)演示： https://lauthieb.github.io/code-notes/?rel=nofollow

github ：https://github.com/lauthieb/code-notes?rel=nofollow

最后

如果您尚未使用VueJS，則應(yīng)該知道它在Github上擁有超過164k的星星和88.7k的星星。很多！同樣，Vue是一種開源產(chǎn)品，這意味著任何人都可以為它做貢獻(xiàn)或從貢獻(xiàn)者那里學(xué)到新東西。