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

尝鲜 Naiveui 快速构建 Vue3 Ts Vite 中后台解决方案

toyiye 2024-04-05 10:51 30 浏览 0 评论

Naive Admin Pro 2.0

介绍

Naive Ui Admin 是一个基于 Naiveui, vue3, vite, TypeScript 中后台解决方案,全面的系统配置,优质模板,常用组件,真正一站式开箱即用。

该项目中功能,页面交互,以及常用组件封装,均来自工作中实际需求摘取,尽可能地帮你少些代码,项目有大量常用功能页面和示例,基本上能满足一个中后台需求,同时我们团队还在不断丰富中。

新品

Naive Admin Antd 基于Ant Design of Vue @3.x 版本也在陆续完善中,感兴趣的小伙伴可以关注

产品特点

响应式、多主题,多配置,快速集成,开箱即用

最新技术栈,使用 Vue3、Typescript、Pinia、Vite 等前端前沿技术

强大的鉴权系统,对路由、菜单、功能点等支持 3 种鉴权模式,满足不同的业务鉴权需求

持续更新,实用性页面模板功能和交互,随意搭配组合,让构建页面变得简单化

最新的前端技术栈,并提炼了典型的业务模型,页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能,它可以帮助你快速搭建企业级中后台项目

产品概要

  • 功能清单
    • 一键锁屏
    • 支持内嵌页面
    • 黑暗模式一键切换
    • 支持多级路由嵌套
    • 系统主题:内置24种,主流色
    • 路由菜单智能生成,只需创建路由文件即可
    • 页面切换动画:渐变 / 闪现 / 滚动 / 消退 / 底部消失 / 底部消退
    • 含有大量典型的业务示例,持续更新中,之后可免费升级获取
  • 布局清单
    • 登录 / 注册
    • 固定顶栏(可开关)
    • 固定主体(可开关)
    • 页面重新刷新(可开关)
    • 面包屑导航(可开关)
    • 面包屑图标(可开关)
    • 多页签(可开关)
    • 拖拽调整多页签顺序
    • 页面动画(可开关)
    • 导航栏模式:左侧菜单 / 顶部菜单 / 顶部菜单混合
    • 导航栏风格:暗色侧边栏 / 白色侧边栏 / 暗色顶栏
    • 更多布局可在线体验(右上角菜单项可动态预览各种配置)
  • 布局清单
    • 路由级别鉴权
    • 侧边栏菜单鉴权
    • 功能块鉴权
    • 功能点鉴权
    • 鉴权指令
  • 组件封装
    • Qrcode二维码(自定义LOGO,大小,样式,下载二维码)
    • 富文本(增加文本,增加图片,获取html,渲染HTML内容)
    • BasicModal弹窗(美化弹窗,可拖拽移动,确认按钮可定制)
    • BasicForm表单(只需配置一个FormSchema数组,即可生成一个完整表单)
    • Cropper图片裁剪(可裁剪圆形,方形,适用于头像上传,商品图片上传,前端裁剪)
    • BasicUpload图片上传(帮助文本,大小限制,内置图片预览,上传图片统一标准封装)
    • BasicTable表格(自动分页,编辑单元格/行,自适应高度,操作列深度封装,列设置,密度设置,列顺序可拖动)
    • Region地区组件(省市区选择,数据动态加载方式,只需配置好相应接口即可,此组件灵活在于,可单独选择省,或者,省,市
    • Password密码强度(内置多种校验规则,长度,复杂度,强度等级,文案全部可自定义,给系统设置一个相对安全的密码,就用他准没错)
    • BasicSelect选择器(扩展选择器组件,用于各种表单选择器,简化使用,内置缓存,可对相同的数据减少http请求,也可手动刷新数据源)
  • 页面布局
    • 主控台
    • 监控台
    • 工作台
    • 用户管理
    • 个人设置
    • 系统设置
    • 修改密码
    • 菜单权限管理
    • 角色权限管理
    • 查询列表(表格组件示例)
    • 更多页面可在线查看

预览地址

Naive Admin Pro

文档

文档预览

项目展示

登录

注册

主控台

监控台

工作台

用户管理

菜单管理

字典管理

查询列表

表格行编辑

弹窗扩展(拖拽)

图片裁剪

项目配置

黑暗主题

白色主题

更多页面,和组件请看预览吧

相关推荐

为何越来越多的编程语言使用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)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码