前言前一段时间，小编也收集了推荐36种免费React模板和主题「干货」，这次又收集了22种Vue的。希望小伙们喜欢。收集不易，希望点赞+关注。在Internet上搜索模板和主题时，很难找到免费的Vue资源。即使您不在乎质量，它们似乎也很难被发现，并出于好奇而感动，我花了数小时在Google和Github上四处挖掘，结果得到了收集22种开源Vue模板和主题框架集合。我不会对此打赌，但是它们也是高质量的资源。Bootstrap Vue现场演示：https://bootstrap-vue.org/github：https://github.com/bootstrap-vue/bootstrap-vueBootstrapVue 拥有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.designGithub: https://github.com/vueComponent/ant-design-vue这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。特性提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 Vue 组件。共享Ant Design of React设计工具体系。Vue后台UI框架 – vuetifyjs现场演示：官网:vuetifyjs.comGithub：https://github.com/vuetifyjs/vuetifyVuetify 是一个 Vue UI 库，包含手工制作的精美材料组件。不需要设计技能 – 创建令人惊叹的应用程序所需的一切都触手可及。vue后台UI框架 – iviewiview官网：https://www.iviewui.com/Github：https://github.com/iview/iview官方后台示例：iview-admin：https://github.com/iview/iview-adminiView Admin是一个前端管理后台集成解决方案。它基于Vue.js并使用UI Toolkit iView。饿了么出品的UI框架 – element-uiVue：http://element-cn.eleme.io/2.0/#/zh-CN/component/quickstartReact：https://eleme.github.io/element-react/#/zh-CN/quick-startAngular：https://element-angular.faas.ele.me/guide/start基于Vue2.0和bulma0.2的后台管理框架 – vue-adminGithub：https://github.com/vue-bulma/vue-admincd vue-adminnpm installnpm run dev人人开源 / renren-fast-vue现场演示：http://demo.open.renren.io/renren-fast (账号密码：admin/admin)Gitee：https://gitee.com/renrenio/renren-fast-vuerenren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案前后端分离，通过token进行数据交互，可独立部署主题定制，通过scss变量统一一站式定制动态菜单，通过菜单管理统一管理访问路由数据切换，通过mock配置对接口数据／mock模拟数据进行切换发布时，可动态配置CDN静态资源／切换新旧版本若依 / RuoYi-Vue演示地址：http://vue.ruoyi.vip文档地址：http://doc.ruoyi.vipRuoYi-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-CloudVue White Dashboard现场演示：https://demos.creative-tim.com/vue-white-dashboard/?ref=devto地址：https://www.creative-tim.com/product/vue-white-dashboard?ref=devtoVue White Dashboard 是一个免费的开源Bootstrap 4和Vue.js Admin仪表板，其中包含大量的组件，这些组件可以组合在一起并看起来非常漂亮。Vue White仪表板具有16个以上的独立组件，可让您自由选择和组合。这意味着有成千上万种可能的组合。所有组件的颜色都可能不同，您可以使用SASS文件轻松进行修改。Vue QRcode Reader现场演示：https://gruhn.github.io/vue-qrcode-reader/?rel=nofollowgithub：https://github.com/gruhn/vue-qrcode-reader?rel=nofollowVue QRcode Reader是一组用于检测和解码QR码的VueJS组件。它使您无需离开浏览器即可检测和解码QR码。所有组件都具有响应能力。除此之外，它接近零样式，因此您可以使它们适合您的布局。使用方法简单明了。VueJS Expo现场演示：https://vuejsexpo.com/?ref=devtoVueJS 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=devtoVue 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=nofollowGithub：https://github.com/xiaokaike/vue-color?rel=nofollowVue-Color 是来自Sketch，Photoshop，Chrome，Github，Twitter，Material Design等众多酷炫色彩选择器的集合。Vue-Koel现场演示：https://koel.dev/?rel=nofollowGithub：https://github.com/koel/koel?rel=nofollowKoel 是一种简单的基于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=devtoVue Argon Dashboard 是Bootstrap 4和Vue.js的仪表板。它是开源的，免费的，并且具有许多组件，可以帮助您创建出色的网站。Vue Argon仪表板内置了100多个单独的组件，因此您可以选择和组合。由于实现了所有元素，因此从原型制作到功能齐全的代码，您将节省大量时间。该仪表板附带了预先构建的示例，因此开发过程是无缝的，从我们的页面切换到真实的网站非常容易。Pagekit现场演示：https://pagekit.com/?rel=nofollowgithub：https://github.com/pagekit/pagekit?rel=nofollowPagekit 是使用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=devtoVue 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=devtoVue Material Kit 是基于Vue Material和VueJS构建的惊人的免费开源资源。这将帮助您立即开始开发UI Kit。Vue材料工具包是原始材料工具包的官方VueJS版本。使用UI Kit非常简单，但是需要Javascript，VueJS和Vue Router的基础知识。Retrospectify现场演示：http://pepf.nl/retrospective/?rel=nofollowgithub ：https://www.creative-tim.com/product/vue-material-kit?ref=devtoRetrospectify 是用Vue编写的出色工具，用于数字化敏捷团队回顾。当与远程团队进行回顾时，或者当您希望随时间跟踪回顾结果时，这将很有用。它具有三种注释类型，您可以在注释周围移动或将点添加到各个注释中。Code Notes现场演示：https://lauthieb.github.io/code-notes/?rel=nofollowgithub ：https://github.com/lauthieb/code-notes?rel=nofollow最后如果您尚未使用VueJS，则应该知道它在Github上拥有超过164k的星星和88.7k的星星。很多！同样，Vue是一种开源产品，这意味着任何人都可以为它做贡献或从贡献者那里学到新东西。我希望这个清单可以在您的下一个开发项目中为您提供帮助推荐Vue学习资料文章：《如何写出优秀后台管理系统？11个经典模版拿去不谢「干货」》《手把手教你实现一个Vue自定义指令懒加载》《基于 Vue 和高德地图实现地图组件「实践」》《一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》《是什么让我爱上了Vue.js》《1.1万字深入细品Vue3.0源码响应式系统笔记「上」》《1.1万字深入细品Vue3.0源码响应式系统笔记「下」》《「实践」Vue 数据更新7 种情况汇总及延伸解决总结》《尤大大细说Vue3 的诞生之路「译」》《提高10倍打包速度工具Snowpack 2.0正式发布，再也不需要打包器》《大厂Code Review总结Vue开发规范经验「值得学习」》《Vue3 插件开发详解尝鲜版「值得收藏」》《带你五步学会Vue SSR》《记一次Vue3.0技术干货分享会》《Vue 3.x 如何有惊无险地快速入门「进阶篇」》《「干货」微信支付前后端流程整理(Vue+Node)》《带你了解 vue-next（Vue 3.0）之 炉火纯青「实践」》《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》《「干货」Vue+Element前端导入导出Excel》《「实践」Deno bytes 模块全解析》《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》《基于vue + element的后台管理系统解决方案》《Vue仿蘑菇街商城项目（vue+koa+mongodb）》《基于 electron-vue 开发的音乐播放器「实践」》《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》《基于 Vue 技术栈的微前端方案实践》《消息队列助你成为高薪 Node.js 工程师》《Node.js 中的 stream 模块详解》《「干货」Deno TCP Echo Server 是怎么运行的？》《「干货」了不起的 Deno 实战教程》《「干货」通俗易懂的Deno 入门教程》《Deno 正式发布，彻底弄明白和 node 的区别》《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》《前端网红框架的插件机制全梳理（axios、koa、redux、vuex）》《深入Vue 必学高阶组件 HOC「进阶篇」》《深入学习Vue的data、computed、watch来实现最精简响应式系统》《10个实例小练习，快速入门熟练 Vue3 核心新特性（一）》《10个实例小练习，快速入门熟练 Vue3 核心新特性（二）》《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》《2020前端就业Vue框架篇「实践」》《详解Vue3中 router 带来了哪些变化？》《Vue项目部署及性能优化指导篇「实践」》《Vue高性能渲染大数据Tree组件「实践」》《尤大大细品VuePress搭建技术网站与个人博客「实践」》《10个Vue开发技巧「实践」》《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》《带你了解 vue-next（Vue 3.0）之 小试牛刀【实践】》《带你了解 vue-next（Vue 3.0）之 初入茅庐【实践】》《实践Vue 3.0做JSX(TSX)风格的组件开发》《一篇文章教你并列比较React.js和Vue.js的语法【实践】》《手拉手带你开启Vue3世界的鬼斧神工【实践】》《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》《怎样为你的 Vue.js 单页应用提速》《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》《Vue真是太好了 壹万多字的Vue知识点 超详细!》《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》《手把手教你深入浅出vue-cli3升级vue-cli4的方法》《Vue 3.0 Beta 和React 开发者分别杠上了》《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》《Vue3 尝鲜》《总结Vue组件的通信》《Vue 开源项目 TOP45》《2020 年，Vue 受欢迎程度是否会超过 React？》《尤雨溪：Vue 3.0的设计原则》《使用vue实现HTML页面生成图片》《实现全栈收银系统（Node+Vue）（上）》《实现全栈收银系统（Node+Vue）（下）》《vue引入原生高德地图》《Vue合理配置WebSocket并实现群聊》《多年vue项目实战经验汇总》《vue之将echart封装为组件》《基于 Vue 的两层吸顶踩坑总结》《Vue插件总结【前端开发必备】》《Vue 开发必须知道的 36 个技巧【近1W字】》《构建大型 Vue.js 项目的10条建议》《深入理解vue中的slot与slot-scope》《手把手教你Vue解析pdf(base64)转图片【实践】》《使用vue+node搭建前端异常监控系统》《推荐 8 个漂亮的 vue.js 进度条组件》《基于Vue实现拖拽升级（九宫格拖拽）》《手摸手，带你用vue撸后台 系列二(登录权限篇)》《手摸手，带你用vue撸后台 系列三(实战篇)》《前端框架用vue还是react？清晰对比两者差异》《Vue组件间通信几种方式，你用哪种？【实践】》《浅析 React / Vue 跨端渲染原理与实现》《10个Vue开发技巧助力成为更好的工程师》《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》《1W字长文+多图，带你了解vue的双向数据绑定源码实现》《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》《手把手教你D3.js 实现数据可视化极速上手到Vue应用》《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》《Vue3.0权限管理实现流程【实践】》《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》