vue开源的大屏模板(收集22种开源Vue模板和主题框架)
vue开源的大屏模板(收集22种开源Vue模板和主题框架)现场演示:https://buefy.org/使用vue & nuxt 搭建建立的非常有风味独特的博客网站。github:https://github.com/bootstrap-vue/bootstrap-vueBootstrapVue 拥有85个以上的组件,45个以上的可用插件,多个指令和670 个图标, 它提供了可用于Vue.js v2.6的Bootstrap v4.5组件和网格系统的最全面的实现之一 ,并具有广泛的功能和自动 WAI-ARIA 可访问性标记。现场演示:https://surmon.me/Github: https://github.com/surmon-china/surmon.me
前一段时间,小编也收集了推荐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
- 专注于可用性和性能,而无需过度动画的东西
现场演示:https://vue.ant.design
Github: https://github.com/vueComponent/ant-design-vue
这里是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。
特性
- 提炼自企业级中后台产品的交互语言和视觉风格。
- 开箱即用的高质量 Vue 组件。
- 共享Ant Design of React设计工具体系。
现场演示:官网:vuetifyjs.com
Github:https://github.com/vuetifyjs/vuetify
Vuetify 是一个 Vue UI 库,包含手工制作的精美材料组件。不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及。
vue后台UI框架 - iviewiview官网: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-uiVue: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
Github:https://github.com/vue-bulma/vue-admin
cd vue-admin
npm install
npm run dev
现场演示: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后台管理前端功能,提供一套更优的前端解决方案
演示地址:http://vue.ruoyi.vip
文档地址:http://doc.ruoyi.vip
RuoYi-Vue 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统
现场演示: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自定义指令懒加载》
《基于 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根据角色动态设置菜单栏和路由》