百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

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

toyiye 2024-05-09 18:41 19 浏览 0 评论


前言

前一段时间,小编也收集了推荐36种免费React模板和主题「干货」,这次又收集了22种Vue的。希望小伙们喜欢。收集不易,希望点赞+关注。

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

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

Bootstrap Vue



现场演示:https://bootstrap-vue.org/

githubhttps://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

    最后

    如果您尚未使用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根据角色动态设置菜单栏和路由

    相关推荐

    为何越来越多的编程语言使用JSON(为什么编程)

    JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

    何时在数据库中使用 JSON(数据库用json格式存储)

    在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

    MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

    前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

    JSON对象花样进阶(json格式对象)

    一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

    深入理解 JSON 和 Form-data(json和formdata提交区别)

    在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

    JSON 语法(json 语法 priority)

    JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

    JSON语法详解(json的语法规则)

    JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

    MySQL JSON数据类型操作(mysql的json)

    概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

    JSON的数据模式(json数据格式示例)

    像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

    前端学习——JSON格式详解(后端json格式)

    JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

    什么是 JSON:详解 JSON 及其优势(什么叫json)

    现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

    PostgreSQL JSON 类型:处理结构化数据

    PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

    JavaScript:JSON、三种包装类(javascript 包)

    JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

    Python数据分析 只要1分钟 教你玩转JSON 全程干货

    Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

    比较一下JSON与XML两种数据格式?(json和xml哪个好)

    JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

    取消回复欢迎 发表评论:

    请填写验证码