收集22种开源Vue模板和主题框架「干货」

叁歲伎倆 2022-11-11 05:51 285阅读 0赞

在Internet上搜索模板和主题时，很难找到免费的Vue资源。

即使您不在乎质量，它们似乎也很难被发现，并出于好奇而感动，我花了数小时在Google和Github上四处挖掘，结果得到了收集22种开源Vue模板和主题框架集合。我不会对此打赌，但是它们也是高质量的资源。

# Bootstrap Vue #

![收集22种开源Vue模板和主题框架「干货」][22_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 博客网站 #

![4afbdb44144e55a68873934da99dab63.png][]

**现场演示**：https://surmon.me/  
Github:  
https://github.com/surmon-china/surmon.me

**使用**vue & nuxt 搭建**建立的非常有风味独特的**博客网站\*\*。\*\*

# Vue后台UI框架 - Buefy #

![7ea2c974c992fe3dcc401b34f937fadb.png][]

**现场演示**：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 #

![33e08fa4ad2d30c4eb6db3ffbcfb9630.png][]

**现场演示**：https://vue.ant.design  
Github:  
https://github.com/vueComponent/ant-design-vue

这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

**特性**

*  提炼自企业级中后台产品的交互语言和视觉风格。
 *  开箱即用的高质量 Vue 组件。
 *  共享Ant Design of React设计工具体系。

# Vue后台UI框架 - vuetifyjs #

![5e83852a7146cc0d9be7825e8392233d.png][]

**现场演示**：官网:vuetifyjs.com  
Github：  
https://github.com/vuetifyjs/vuetify

**Vuetify** 是一个 Vue UI 库，包含手工制作的精美材料组件。不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及。

# vue后台UI框架 - iview #

![2c586469f20a27cc88f25df095c7897b.png][]

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 #

![bbcde28f09d7530ae3a9ab8b95675b86.png][]

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 #

![204eb4f1d2683e311dc765b3e8ceafb6.png][]

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

cd vue-admin  
npm install  
npm run dev

# 人人开源 / renren-fast-vue #

![449d751adafd584e3658b2a9da401561.png][]

**现场演示**：  
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 #

![927e802de3bf67af804523a094fb8213.png][]

演示地址：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 #

![5fe8a80cbf40a68053161b0105d9d27c.png][]

**现场演示：** 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 #

![f349aa3430c7a1b1fa761882994b3732.png][]

**现场演示：** 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 #

![ddeaefe76beddcca7eab7a6fcb6bbf3e.png][]

\*\*现场演示：\*\*https://vuejsexpo.com/?ref=devto

VueJS Expo 使用Vue.js框架收集了许多精美的网站，应用程序和实验。如果您是VueJS框架的粉丝，那么这里可能是受到启发的地方。展示包括基于VueJS的主题，元素，仪表板等。

# Vue Paper Dashboard PRO #

![59dd9cc2ddca5ea0f137b952616b9b56.png][]

**现场演示：** 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 #

![dfd1a116e6d26db27f126389799917d3.png][]

**现场演示：** 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 #

![87db8d541cb865f892d58afb96619a51.png][]

\*\*现场演示：\*\*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 #

![8bc418d02ca4949033a0d2a6162f755f.png][]

**现场演示：** 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 #

![caab4a421cdcaf5fbec091c23df0fd67.gif][]

\*\*现场演示：\*\*https://pagekit.com/?rel=nofollow

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

\*\*Pagekit \*\*是使用Symfony组件和VueJS构建的模块化，轻量级CMS。不管是个人博客还是公司网站，使用Pagekit都可以为Web创建功能强大的内容，使其在每种设备上都能完美运行。它具有干净直观的界面。它也有一个很棒的内置市场。

# Vue Material Dashboard PRO #

![6f018a092f139b40735cc1cff57bff5a.png][]

**现场演示：** 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 #

![0caf1b5fd2375a0f14a0906272f68d37.png][]

**现场演示：** 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 #

![230ba3f1b1b6c6ce6e313434722e3836.gif][]

**现场演示：** http://pepf.nl/retrospective/?rel=nofollow

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

**Retrospectify** 是用Vue编写的出色工具，用于数字化敏捷团队回顾。当与远程团队进行回顾时，或者当您希望随时间跟踪回顾结果时，这将很有用。它具有三种注释类型，您可以在注释周围移动或将点添加到各个注释中。

# **Code Notes** #

![07d96a2ac05a4c70fa78a5d6662bd71d.png][]

**现场演示：** https://lauthieb.github.io/code-notes/?rel=nofollow

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

# 最后 #

如果您尚未使用VueJS，则应该知道它在Github上拥有超过164k的星星和88.7k的星星。很多！同样，Vue是一种开源产品，这意味着任何人都可以为它做贡献或从贡献者那里学到新东西。

[22_Vue]: /images/20221022/97ad74a0de324dc99cdb512aa33ccd76.png
[4afbdb44144e55a68873934da99dab63.png]: /images/20221022/6d8c995e9414446e8fddf55df045e53b.png
[7ea2c974c992fe3dcc401b34f937fadb.png]: https://img-blog.csdnimg.cn/img_convert/7ea2c974c992fe3dcc401b34f937fadb.png
[33e08fa4ad2d30c4eb6db3ffbcfb9630.png]: https://img-blog.csdnimg.cn/img_convert/33e08fa4ad2d30c4eb6db3ffbcfb9630.png
[5e83852a7146cc0d9be7825e8392233d.png]: https://img-blog.csdnimg.cn/img_convert/5e83852a7146cc0d9be7825e8392233d.png
[2c586469f20a27cc88f25df095c7897b.png]: https://img-blog.csdnimg.cn/img_convert/2c586469f20a27cc88f25df095c7897b.png
[bbcde28f09d7530ae3a9ab8b95675b86.png]: https://img-blog.csdnimg.cn/img_convert/bbcde28f09d7530ae3a9ab8b95675b86.png
[204eb4f1d2683e311dc765b3e8ceafb6.png]: https://img-blog.csdnimg.cn/img_convert/204eb4f1d2683e311dc765b3e8ceafb6.png
[449d751adafd584e3658b2a9da401561.png]: https://img-blog.csdnimg.cn/img_convert/449d751adafd584e3658b2a9da401561.png
[927e802de3bf67af804523a094fb8213.png]: https://img-blog.csdnimg.cn/img_convert/927e802de3bf67af804523a094fb8213.png
[5fe8a80cbf40a68053161b0105d9d27c.png]: https://img-blog.csdnimg.cn/img_convert/5fe8a80cbf40a68053161b0105d9d27c.png
[f349aa3430c7a1b1fa761882994b3732.png]: https://img-blog.csdnimg.cn/img_convert/f349aa3430c7a1b1fa761882994b3732.png
[ddeaefe76beddcca7eab7a6fcb6bbf3e.png]: https://img-blog.csdnimg.cn/img_convert/ddeaefe76beddcca7eab7a6fcb6bbf3e.png
[59dd9cc2ddca5ea0f137b952616b9b56.png]: https://img-blog.csdnimg.cn/img_convert/59dd9cc2ddca5ea0f137b952616b9b56.png
[dfd1a116e6d26db27f126389799917d3.png]: https://img-blog.csdnimg.cn/img_convert/dfd1a116e6d26db27f126389799917d3.png
[87db8d541cb865f892d58afb96619a51.png]: https://img-blog.csdnimg.cn/img_convert/87db8d541cb865f892d58afb96619a51.png
[8bc418d02ca4949033a0d2a6162f755f.png]: https://img-blog.csdnimg.cn/img_convert/8bc418d02ca4949033a0d2a6162f755f.png
[caab4a421cdcaf5fbec091c23df0fd67.gif]: https://img-blog.csdnimg.cn/img_convert/caab4a421cdcaf5fbec091c23df0fd67.gif
[6f018a092f139b40735cc1cff57bff5a.png]: https://img-blog.csdnimg.cn/img_convert/6f018a092f139b40735cc1cff57bff5a.png
[0caf1b5fd2375a0f14a0906272f68d37.png]: https://img-blog.csdnimg.cn/img_convert/0caf1b5fd2375a0f14a0906272f68d37.png
[230ba3f1b1b6c6ce6e313434722e3836.gif]: https://img-blog.csdnimg.cn/img_convert/230ba3f1b1b6c6ce6e313434722e3836.gif
[07d96a2ac05a4c70fa78a5d6662bd71d.png]: https://img-blog.csdnimg.cn/img_convert/07d96a2ac05a4c70fa78a5d6662bd71d.png