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

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

qiyuwang 2025-02-28 17:10 5 浏览 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根据角色动态设置菜单栏和路由

    相关推荐

    在Word中分栏设置页码一页两个页码的技巧!

    施老师:在正常情况下,Word文档中一页只会出现一个页码。但在某种情况下,比如说:用了分栏后,我们希望一页中出现两个页码,那应该如何实现呢?今天,就由宁双学好网施老师来为大家讲一下,利用域来实现一页两...

    如何在关键时刻向上自荐(如何在关键时刻做出正确选择)

    抓住机会,挺身而出有种时刻叫“关键时刻”,关键时刻,作为一个认为自己有能力的、训练有素的人,应该考虑挺身而出,甚至应该不考虑就挺身而出。...

    WPS Word:跨页的文档表格,快速调整为一页。#Excel

    如何快速将跨页的文档表格调整为一页?需要根据两种情况分别处理。如果表格所有行的行高相同,调整为一页的方法有两种。第一种方法是将光标移动到表格内,然后将鼠标移动到表格右下角的方框处,按住鼠标左键向上拖动...

    word文档插入下一页分节符(word下一页分页符)

    在word文档中,对文档页面进行分页是特别常见的操作,其中的下一页分节符也是用得比较多的,但是一些人不太清楚在哪里设置,也不知道它具体能实现的功能是什么。接下来看看如何在word文档中插入下一页分节符...

    word文档如何设置某一页纸张的方向

    word文档页面方向有横向和纵向,纵向是默认的纸张方向,有时我们需要将页面设置为横向,或只设置其中某一页方向,应该怎么操作呢?一起来看看下面的详细介绍第一步:...

    word怎么单独设置一页为横向(word2019怎样设置单独一页为横向)

    word里面其中一页可以改为横向的吗?经过实际操作发现是完全可以的。...

    Word如何设置分栏,如何一页内容同时显示一栏和两栏

    我们使用Word文档,有时需要用到两栏的排版,甚至一页内容同时包含一栏和两栏的排版,这种格式怎么设置呢?具体步骤如下:首先是两栏排版的设置,直接点击Word文件上方工具栏【布局】,选择【分栏】下面的【...

    Word怎么分页?这三个方法可以帮到你

    我们不仅可以利用Word编辑文档,还可以编辑文集呢。但是有时候会出现两个部分的文章长短不一,我们需要对文档进行分页处理。这样可以方便我们对文档进行其他操作。那么Word怎么分页呢?大家可以采用下面这...

    Word内容稍超一页,如何优化至单页打印?

    如何将两页纸的内容,缩到一页打印呢?有时候一页纸多一点内容,我们完全可以缩一下,放到一页来打印。...

    [word] word 表格如何跨行显示表头、标题

    word表格如何跨行显示表头、标题在Word中的表格如果过长的话,会跨行显示在另一页,如果想要在其它页面上也显示表头,更直观的查看数据。难道要一个个复制表头吗?当然不是,教你简单的方法操作设置Wo...

    Word表格跨页如何续上表?(word如何让表格跨页不断掉)

    长文档的表格跨页时,你会发现页末空白太多了,这时要怎么调整?选中整张表格,右击【表格属性】,点击【行】选项,之后勾选【允许跨页断行】,点击确定即可解决空白问题。...

    Word怎么连续自动生成页码,操作步骤来了!

    Word怎么连续自动生成页码,操作步骤来了!...

    word文档怎么把两页合并成一页内容?教你4种方法

    word怎么把两页合并成一页?word怎么把两页合并成一页?用四种方法演示一下。·方法一:把这一个文档合并成一页,按ctrl加a全选文档,然后右键点击段落,弹出的界面行距改成固定值,磅值可以改小一点,...

    如何将Word中的一页的纸张方向设置为横向?这里提供详细步骤

    默认情况下,MicrosoftWord将页面定向为纵向视图。虽然这在大多数情况下都很好,但你可能拥有在横向视图中看起来更好的页面或页面组。以下是实现这一目标的两种方法。无论使用哪种方法,请注意,如果...

    Word横竖混排你会玩吗?(word横排竖排混合)

    我们在用Word排版的时候,一般都是竖版格式,但偶尔会需要到一些特殊的版式要求,比如文档中插入的一个表格,横向的内容比较多,这时就需要用到横版,否则表格显示不全。这种横竖版混排的要求,在Word20...

    取消回复欢迎 发表评论: