首页 > 其他分享 >5个好看的vue3后台管理模板

5个好看的vue3后台管理模板

时间:2024-08-03 19:39:13浏览次数:9  
标签:vue pure admin vue3 TypeScript https Vue3 后台 模板

-

1.SoybeanAdmin  https://soybeanjs.cn

简介

SoybeanAdmin 是一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。

  • 采用 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS 等最新流行的技术栈。
  • 采用 pnpm monorepo 架构,结构清晰,优雅易懂。
  • 遵循 SoybeanJS 规范,集成了eslint, prettier 和 simple-git-hooks,保证代码的规范性。
  • 支持严格的类型检查,提高代码的可维护性。
  • 内置多样的主题配置,与 UnoCSS 完美结合。

 

2.vue-admin-better    https://vuejs-core.cn/shop-vite/#/index

  • 简介

    国内首个纯净的 vue3 admin框架,同时支持电脑,手机,平板。

  • 40+高质量单页
  • RBAC 模型 + JWT 权限控制
  • 10 万+ 项目实际应用
  • 良好的类型定义
  • 开源版本支持免费商用
  • 跨平台 PC、手机端、平板
  • 后端路由动态渲染

 

3.vue-pure-admin  https://pure-admin.github.io/vue-pure-admin/#/welcome

  • 简介

    vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。

  • 稳定中求创新,技术中见未来
  • 提供 Tauri 和 Electron 版本
  • 移动端适配
  • 完全采用ECMAScript 模块(ESM)规范来编写和组织代码
  • 使用了最新的 Vue3、 Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技术开发

 

4.Gin-Vue-Admin  https://www.gin-vue-admin.com

  • 简介

    Vite+Vue3+Gin的开发基础平台,支持TS和JS混用。

  • 基于 vue 和 gin 开发的全栈前后端分离的开发基础平台,集成jwt鉴权,动态路由,动态菜单。
  • 集成表单生成器,代码生成器【可AI辅助】等功能,提供多种示例文件,让您把更多时间专注在业务开发上。
  • 预制多种系统管理功能,方便直接上手。

 

大家好,我是徐徐。今天给大家推荐 5 个 Vue3 管理后台模版,希望大家喜欢。

1.SoybeanAdmin

image.png

简介

SoybeanAdmin 是一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。

  • 采用 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS 等最新流行的技术栈。
  • 采用 pnpm monorepo 架构,结构清晰,优雅易懂。
  • 遵循 SoybeanJS 规范,集成了eslint, prettier 和 simple-git-hooks,保证代码的规范性。
  • 支持严格的类型检查,提高代码的可维护性。
  • 内置多样的主题配置,与 UnoCSS 完美结合。

    地址

    https://soybeanjs.cn

    2.vue-admin-better

    image.png

    简介

    国内首个纯净的 vue3 admin框架,同时支持电脑,手机,平板。

  • 40+高质量单页
  • RBAC 模型 + JWT 权限控制
  • 10 万+ 项目实际应用
  • 良好的类型定义
  • 开源版本支持免费商用
  • 跨平台 PC、手机端、平板
  • 后端路由动态渲染

    地址

    https://vuejs-core.cn/shop-vite/#/index

    3.vue-pure-admin

    image.png

    简介

    vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。

  • 稳定中求创新,技术中见未来
  • 提供 Tauri 和 Electron 版本
  • 移动端适配
  • 完全采用ECMAScript 模块(ESM)规范来编写和组织代码
  • 使用了最新的 Vue3、 Vite、Element-Plus、TypeScript、Pinia、Tailwindcss 等主流技术开发

    地址

    https://pure-admin.github.io/vue-pure-admin

    4.Gin-Vue-Admin

    image.png

    简介

    Vite+Vue3+Gin的开发基础平台,支持TS和JS混用。

  • 基于 vue 和 gin 开发的全栈前后端分离的开发基础平台,集成jwt鉴权,动态路由,动态菜单。
  • 集成表单生成器,代码生成器【可AI辅助】等功能,提供多种示例文件,让您把更多时间专注在业务开发上。
  • 预制多种系统管理功能,方便直接上手。

  • 简介

    Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的vue3、vite5、TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考。

  • 可配置的主题
  • 内置完善的国际化方案
  • 内置 Mock 数据方案
  • 内置完善的动态路由权限生成方案
  • 二次封装了多个常用的组件

 

 

 

-

标签:vue,pure,admin,vue3,TypeScript,https,Vue3,后台,模板
From: https://www.cnblogs.com/fqh123/p/18340943

相关文章

  • [vue3] patchFlags与位运算
    Vue3在编译template的过程中会分析模板中的动态部分和静态部分,并标记相应的flag,用于在运行时优化虚拟DOM的更新。Parse:将模板字符串解析成AST;Transform:对AST进行转换和优化,包括识别动态节点和静态节点;CodeGeneration:将转换后的AST生成渲染函数,这个阶段会生成patchFlags。在d......
  • 57_2设置Servlet模板、Servlet线程安全问题、跳转
    设置Servlet模板再创建类就有了模板代码#if(${PACKAGE_NAME}&&${PACKAGE_NAME}!="")package${PACKAGE_NAME};#end#parse("FileHeader.java")importjavax.servlet.ServletException;importjavax.servlet.http.HttpServlet;importjavax.servl......
  • VUE3学习路线
    以下是一份详细的Vue3学习路线,涵盖从基础到进阶的各个方面,以帮助你系统掌握Vue3开发。第一阶段:基础知识理解前端基础HTML:了解文档结构,常用标签,语义化HTML。CSS:学习选择器、布局、Flexbox和Grid,基本的样式应用。JavaScript:理解基本语法、DOM操作、事件处......
  • ssm+vue的校园后台报修管理系统设计与实现【开题+程序+论文】-计算机毕业设计
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着教育信息化的不断推进,校园内各类设施设备的数量与复杂度日益增长,如何高效管理这些设备的维护与报修工作成为了学校管理的一大挑战。传统的报修方......
  • P3376 【模板】网络最大流
    原题链接题解优秀博客朴素贪心:每次找一条路,易得一条路的最大流量为路径上的最小权值,因此多次bfs遍历找合法路径,然后dfs更新路径上的权值缺点请看上面的优秀博客因此建立反向边的作用,有点类似于二分匹配:这条路径的部分流量由我负责,现在你去负责其他路径第一次学,还是有很多地......
  • 基于Vue的实时单号采集与校验系统开发:扫码枪自动输入与后台验证
    要在Vue中实现一个单号采集功能,使用扫码枪扫描单号并填充到文本框,同时检查后台接口以验证单号的存在性,可以按照以下步骤来实现:1.创建Vue项目首先,如果还没有Vue项目,可以使用VueCLI创建一个新项目:vuecreatetracking-number-appcdtracking-number-app2.设......
  • 易优CMS模板标签links友情链接控制友情链接的打开方式
    【基础用法】标签:links描述:用于获取友情链接列表。用法:{eyou:linkstype='text'loop='30'titlelen='15'}<ahref='{$field.url}'{$field.target}{$field.nofollow}>{$field.title}</a>{/eyou:links}属性:type=''链接类型,text为文......
  • 易优CMS模板标签beafter上下篇获取下一篇内容
    【基础用法】标签:beafter描述:获取当前文档上一篇、下一篇内容。用法:{eyou:beafterget='pre'}<ahref="{$field.arcurl}"title="{$field.title}">上一篇:{$field.title}</a>{eyou:else/}上一篇:暂无{/eyou:beafter}{eyou:beafterget='next&......
  • 易优CMS模板标签if条件判断多层次判断
    【基础用法】标签:if描述:条件判断,比switch判断标签更灵活些,视个人习惯而用。用法:{eyou:ifcondition='($eyou.field.has_children>0)'}当前栏目列表有下级栏目{eyou:else/}当前栏目列表没有下级栏目{/eyou:if}文件:无属性:condition=''原生php语法条件判断涉及表字段:无......
  • 易优CMS模板标签videoplay视频播放
    [基础用法]标签:videoplay描述:视频播放标签,用于视频模型的内容页,调用后台上传的视频。提示:如果后台上传的视频有多个选集,可以使用【videolist视频列表】标签,进行视频切换播放。用法:{eyou:videoplayaid='文档ID'autoplay='on'id='video'}<video{$video.id}width="100%"......