前言
前一段时间,小编也收集了推荐36种免费React模板和主题「干货」,这次又收集了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后台管理前端功能,提供一套更优的前端解决方案
若依 / RuoYi-Vue
演示地址:http://vue.ruoyi.vip
文档地址:http://doc.ruoyi.vip
RuoYi-Vue 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统
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
最后
如果您尚未使用VueJS,则应该知道它在Github上拥有超过164k的星星和88.7k的星星。很多!同样,Vue是一种开源产品,这意味着任何人都可以为它做贡献或从贡献者那里学到新东西。
我希望这个清单可以在您的下一个开发项目中为您提供帮助
推荐Vue学习资料文章:
《如何写出优秀后台管理系统?11个经典模版拿去不谢「干货」》
《一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》
《提高10倍打包速度工具Snowpack 2.0正式发布,再也不需要打包器》
《大厂Code Review总结Vue开发规范经验「值得学习」》
《带你了解 vue-next(Vue 3.0)之 炉火纯青「实践」》
《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》
《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》
《Vue仿蘑菇街商城项目(vue+koa+mongodb)》
《基于 electron-vue 开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《「干货」Deno TCP Echo Server 是怎么运行的?》
《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》
《前端网红框架的插件机制全梳理(axios、koa、redux、vuex)》
《深入学习Vue的data、computed、watch来实现最精简响应式系统》
《10个实例小练习,快速入门熟练 Vue3 核心新特性(一)》
《10个实例小练习,快速入门熟练 Vue3 核心新特性(二)》
《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《是什么导致尤大大选择放弃Webpack?【vite 原理解析】》
《带你了解 vue-next(Vue 3.0)之 小试牛刀【实践】》
《带你了解 vue-next(Vue 3.0)之 初入茅庐【实践】》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布,你还学的动么?》
《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《2020 年,Vue 受欢迎程度是否会超过 React?》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《深入浅出Vue3 的响应式和以前的区别到底在哪里?【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【中】》