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

前言

在Internet上搜索模板和主題時，很難找到免費的Vue資源。

即使您不在乎質量，它們似乎也很難被發現，並出於好奇而感動，我花了數小時在Google和Github上四處挖掘，結果得到了收集22種開源Vue模板和主題框架集合。我不會對此打賭，但是它們也是高質量的資源。

Bootstrap Vue

 

現場演示：https://bootstrap-vue.org/

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

BootstrapVue 擁有85個以上的組件，45個以上的可用插件，多個指令和670+個圖標， 它提供了可用於Vue.js v2.6的Bootstrap v4.5組件和網格系統的最全面的實現之一 ，並具有廣泛的功能和自動 WAI-ARIA 可訪問性標記。

vue & nuxt 博客網站

 

現場演示：https://surmon.me/
Github: https://github.com/surmon-china/surmon.me

使用vue & nuxt 搭建建立的非常有風味獨特的博客網站。

Vue后台UI框架 - Buefy

 

現場演示：https://buefy.org/

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

Buefy 是基於Bulma框架和設計的Vue.js響應式UI組件的輕量級庫

特征

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

vue后台UI框架 - ant-design-vue

 

現場演示：https://vue.ant.design
Github: https://github.com/vueComponent/ant-design-vue

這里是 Ant Design 的 Vue 實現，開發和服務於企業級后台產品。

特性

• 提煉自企業級中后台產品的交互語言和視覺風格。
• 開箱即用的高質量 Vue 組件。
• 共享Ant Design of React設計工具體系。

Vue后台UI框架 - vuetifyjs

 

現場演示：官網:vuetifyjs.com
Github：https://github.com/vuetifyjs/vuetify

Vuetify 是一個 Vue UI 庫，包含手工制作的精美材料組件。不需要設計技能 - 創建令人驚嘆的應用程序所需的一切都觸手可及。

vue后台UI框架 - iview

 

iview官網：https://www.iviewui.com/
Github：https://github.com/iview/iview
官方后台示例：iview-admin：https://github.com/iview/iview-admin

iView Admin是一個前端管理后台集成解決方案。它基於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的后台管理框架 - vue-admin

 

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

cd vue-admin
npm install
npm run dev

人人開源 / renren-fast-vue

 

現場演示：http://demo.open.renren.io/renren-fast (賬號密碼：admin/admin)

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

renren-fast-vue基於vue、element-ui構建開發，實現renren-fast后台管理前端功能，提供一套更優的前端解決方案

• 前后端分離，通過token進行數據交互，可獨立部署
• 主題定制，通過scss變量統一一站式定制
• 動態菜單，通過菜單管理統一管理訪問路由
• 數據切換，通過mock配置對接口數據／mock模擬數據進行切換
• 發布時，可動態配置CDN靜態資源／切換新舊版本

若依 / RuoYi-Vue

 

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

RuoYi-Vue 基於SpringBoot，Spring Security，JWT，Vue & Element 的前后端分離權限管理系統

• 前端采用Vue、Element UI。
• 后端采用Spring Boot、Spring Security、Redis & Jwt。
• 權限認證使用Jwt，支持多終端認證系統。
• 支持加載動態權限菜單，多方式輕松權限控制。
• 高效率開發，使用代碼生成器可以一鍵生成前后端代碼。
• 提供了一個Oracle版本RuoYi-Vue-Oracle，保持同步更新。
• 感謝Vue-Element-Admin，eladmin-web。
• 不分離版本，請移步RuoYi，微服務版本，請移步RuoYi-Cloud

Vue White Dashboard

 

現場演示：https://demos.creative-tim.com/vue-white-dashboard/?ref=devto

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

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

Vue QRcode Reader

 

現場演示：https://gruhn.github.io/vue-qrcode-reader/?rel=nofollow

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

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

VueJS Expo

 

現場演示：https://vuejsexpo.com/?ref=devto

VueJS Expo 使用Vue.js框架收集了許多精美的網站，應用程序和實驗。如果您是VueJS框架的粉絲，那么這里可能是受到啟發的地方。展示包括基於VueJS的主題，元素，儀表板等。

Vue Paper Dashboard PRO

 

現場演示：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之上的漂亮資源。它將幫助您立即開始開發儀表板。Vue Paper Dashboard Pro是 Original Paper Dashboard Pro的VueJS移植版本。使用儀表板非常簡單，但是需要具備Javascript，Vue和Vue-Router的基礎知識。

Vue-Color

 

現場演示：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

 

現場演示：https://koel.dev/?rel=nofollow

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

Koel 是一種簡單的基於Web的個人音頻流服務，在客戶端用Vue編寫，在服務器端用Laravel編寫。針對Web開發人員，Koel采用了一些更現代的Web技術-CSS網格，音頻和拖放API等來完成其工作。

Vue Argon Dashboard

 

現場演示：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的儀表板。它是開源的，免費的，並且具有許多組件，可以幫助您創建出色的網站。Vue Argon儀表板內置了100多個單獨的組件，因此您可以選擇和組合。由於實現了所有元素，因此從原型制作到功能齊全的代碼，您將節省大量時間。該儀表板附帶了預先構建的示例，因此開發過程是無縫的，從我們的頁面切換到真實的網站非常容易。

Pagekit

 

現場演示：https://pagekit.com/?rel=nofollow

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

Pagekit 是使用Symfony組件和VueJS構建的模塊化，輕量級CMS。不管是個人博客還是公司網站，使用Pagekit都可以為Web創建功能強大的內容，使其在每種設備上都能完美運行。它具有干凈直觀的界面。它也有一個很棒的內置市場。

Vue Material Dashboard PRO

 

現場演示：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構建的超棒高級管理模板。它是通過考慮您在儀表板中實際需要的東西而創建的。Vue Material Dashboard PRO包含精選和優化的VueJS插件。一切都旨在相互配合。使用儀表板非常簡單，但是需要具備Javascript，VueJS和Vue Router的基礎知識。

Vue Material Kit

 

現場演示：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構建的驚人的免費開源資源。這將幫助您立即開始開發UI Kit。Vue材料工具包是原始材料工具包的官方VueJS版本。使用UI Kit非常簡單，但是需要Javascript，VueJS和Vue Router的基礎知識。

Retrospectify

 

現場演示：http://pepf.nl/retrospective/?rel=nofollow

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

Retrospectify 是用Vue編寫的出色工具，用於數字化敏捷團隊回顧。當與遠程團隊進行回顧時，或者當您希望隨時間跟蹤回顧結果時，這將很有用。它具有三種注釋類型，您可以在注釋周圍移動或將點添加到各個注釋中。

Code Notes

 

現場演示：https://lauthieb.github.io/code-notes/?rel=nofollow

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

 

文章就分享到這，歡迎關注“前端大神之路”