花了一天时间, 搜刮的个人觉得不错的16套vue3后台管理模版

武昌库里写JAVA

于 2024-10-09 19:00:01 发布

阅读量1.4k

点赞数 3

分类专栏：面试题汇总与解析文章标签： spring log4j java 开发语言算法

本文链接：https://blog.csdn.net/qq_24428851/article/details/142793968

版权

面试题汇总与解析专栏收录该内容

448 篇文章 3 订阅

订阅专栏

搭建一个后台管理，从零开始开发，其实并不容易，在众多开源管理后台中，Vue3是一个备受瞩目的选择。它是一个现代化的前端框架，具有高效、灵活、易用等特点，今天，要为大家介绍几款开源免费vue3开源管理后台，可以帮助你快速搭建企业级中后台产品原型。

1. Vue vben admin：

是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。

掌握这个项目需要一定前端基础知识以及掌握 Vue 的基础知识，以便能处理一些常见的问题。建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助:

image.png

项目功能：

最新技术栈：基于Vue3、Vite、TypeScript等最新技术栈开发.
轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热重载（HMR）
丰富的示例：常见的Web端插件示例实现.

image.png

组件封装：对日常使用频率较高的组件二次封装,满足基础工作需求.

image.png

主题配置：丰富的主题配置及黑暗主题适配.

关于黑暗主题：项目已经内置了黑暗主题切换，只需配置自己需要的颜色变量，即可在项目中使用。
原理：通过 vite-plugin-theme 插件，将所有的颜色变量抽取到独立的 css 文件，并且全部在 html 上面加上 css 选择器。通过改变 html 标签的 data-theme 属性来进行黑暗主题切换。

6.权限管理：完善的前后端权限管理方案

注意的是：本地开发推荐使用Chrome 最新版浏览器，不支持Chrome 80以下版本。生产环境支持现代浏览器，不支持IE。

2. Naive Ui Admin

基于 vue3,vite2,TypeScript,搭配使用 [Naive Ui](Naive UI) 组件库形成一套开箱即用的中后台前端解决方案.

Naive Ui Admin 遵守 Naive Ui 组件设计和开发约定,风格统一,它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目。

它的特点:

开箱即用的中后台框架/让你少写一些代码.
提供开箱即用的企业级前后端产品，可节约大量时间直接开发业务.
多生态支持:为企业产品提供多 UI 生态支持，新老项目开发或重构，均可以最优开发成本，快速上线.
从框架层面，业务层面，页面扩展性/组合性，真正开箱即用，小白也能轻松上手.
实用模板:从众多系统以及业务中，摘取实用性较高且通用的页面设计，轻松构建规范且美观的系统.

image.png

常见问题：

1、如果页面语法是 script setup 那么需要在上面在写一个 export default { name: 'pageName' }

2、如果不是，那就在 defineComponent 中定义 name 就好了

3、可以借助
vite-plugin-vue-setup-extend 插件

提示：目前框架只支持到，二级菜单，无法支持二级以上的菜单，Plus 版本已支持

3. SCUI Admin

一款功能强大的 admin 框架，很多复杂的业务组件、页面模板都有，专业程度堪比付费的产品。

SCUI Admin基于 Vue3、elementPlus 持续性的提供独家组件和丰富的业务模板帮助你快速搭建企业级中后台前端任务。不仅免费开源，还有很多现成的业务组件、页面模板。

image.png

项目特点：

简洁至上：凭借VUE组件化开发，以最小的代码量和最少的时间帮助你专注于业务。
可用性：在超高可用性和视觉信息上做了个平衡，一切以用户体验为第一标准。
高性能：在提高前端算力、减少带宽请求和代码执行力上多次优化，并且持续着。

构建与部署:

当项目编写完成后，只需要一行命令就会打包你的应用。
等待打包完成后在根目录生成dist文件夹。里面就是打包构建好的文件。接着可以把这个文件夹发给部署人员啦。

框架核心：

image.png

4. vue-pure-admin

vue-pure-admin是一个免费开源的中后台模版。使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。

image.png

保持稳定的同时采用最新技术栈

基于Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss等最新技术栈开发

⚡️ 轻快热重载完善的打包优化方案

无论应用程序大小如何，都始终极快的模块热重载（HMR），内置完善的打包优化方案

简易上手内置丰富组件工具函数

使用单文件组件语法，提供了很多丰富的开箱即用的组件和工具库

高度可配置主题和三种菜单布局

高度可配置的主题以及暗黑主题适配，并且提供左侧、顶部、综合这三种菜单布局模式

image.png

5. Admin Work Pro

Admin Work X，漂亮、强大、完善。采用 Vue3 Webpack Typescript ElementPlus编写的中后台框架。全面的系统配置，优质模板，常用组件，真正一站式开箱即用。

image.png

项目特性：

最新技术栈：基于Vue3、Vite、TypeScript、NaiveUI、Vuex等最新技术栈开发
轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热重载（HMR）
丰富的示例：常见的Web端插件示例实现
组件封装：对日常使用频率较高的组件二次封装,满足基础工作需求

image.png

主题配置：丰富的主题配置及黑暗主题适配
权限管理：完善的前后端权限管理方案
常用模板：内置常用模板，无需考虑交互排版，助你高效开发预设样式
样式美观大方，无缝对接 Naive Ui，随意组合页面，随心所欲布局方案
丰富的布局模式，具有高可配性，满足您的各类布局需求

image.png

6. Naive UI

Naive UI是一个完全使用 TypeScript 编写的 Vue 3 组件库

特性:比较完整有超过70个组件，可以帮助你少写点代码。它们全都可以 treeshaking.

image.png

主题可调我们提供了一个使用 TypeScript 构建的先进的类型安全主题系统。你只需要提供一个样式覆盖的对象，剩下的都交给我们。

顺便一提，不用 less、sass、css 变量，也不用 webpack 的 loaders。以及你可以试试右下角的主题编辑器。

使用 TypeScript Naive UI 全量使用 TypeScript 编写，和你的TypeScript项目无缝衔接。你不需要导入任何 CSS 就能让组件正常工作。

image.png

创建适配主题的组件: 你可能觉得只用内置的组件不够，想自己也写适配主题的组件。 Naive UI 提供一些工具帮助开发者简单的创建支持主题的组件。

安装注意:naive-ui 仅支持 Vue3。

7. Soybean Admin ：

Soybean Admin 是一个基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新优雅的中后台模版，它使用了最新流行的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于文件的路由系统以及基于 Mock 的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。