当前位置:首页 > 技术分析 > 正文内容

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

ruisui882个月前 (02-27)技术分析24

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

文档

文档预览

项目展示

登录

注册

主控台

监控台

工作台

用户管理

菜单管理

字典管理

查询列表

表格行编辑

弹窗扩展(拖拽)

图片裁剪

项目配置

黑暗主题

白色主题

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2325.html

标签: vue弹窗组件
分享给朋友:

“尝鲜 Naiveui 快速构建 Vue3 Ts Vite 中后台解决方案” 的相关文章

Vue3 中有哪些值得深究的知识点?

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,有很大的区别,具体对比如下://Vue 2 Vue.use({ router, store,...

10个实例小练习,快速入门熟练 Vue3 核心新特性(一)

作者:xuying 全栈修炼转发链接:https://mp.weixin.qq.com/s/_n2seDbbiO5hXQfuUGbUCQ前言Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了。本篇文章总共分两部分,望小伙伴们认真阅读。下一篇:10...

祸害阿里云宕机3小时的IO HANG究竟是什么?

本文来自微信公号“CSDN”(ID:CSDNnews),作者 | 王知无, 责编| 郭 芮。2019年3月3日凌晨,微博炸锅,有网友反映说阿里云疑似出现宕机,华北很多互联网公司受到暴击伤害,APP、网站全部瘫痪,我自己的朋友圈和微信群里也有好友反馈,刚刚从被窝被叫起来去修Bug,结果发现服务器登不上...

一次Java内存占用高的排查案例,解释了我对内存问题的所有疑问

问题现象7月25号,我们一服务的内存占用较高,约13G,容器总内存16G,占用约85%,触发了内存报警(阈值85%),而我们是按容器内存60%(9.6G)的比例配置的JVM堆内存。看了下其它服务,同样的堆内存配置,它们内存占用约70%~79%,此服务比其它服务内存占用稍大。那为什么此服务内存占用稍大...

摄影后期必看 | PS插件camera raw 16.4教程 | 范围蒙版

范围蒙版Camera Raw 【蒙版】模块中提供了三个范围蒙版工具,可以通过特定的范围来创建蒙版。此次新增的【范围蒙版】大大加强了acr插件对局部调整的能力。点击下拉小箭头可以看到【颜色范围】,可用于快速选择想要编辑的颜色。快捷键:Shift + C【明亮度范围】,可用于快速选择想要调整的明亮度。快...

Python中的11 种数组算法

1. 创建数组 创建数组意味着留出一个连续的内存块来存储相同类型的元素。在大多数语言中,您可以在创建数组时指定数组的大小。假设您正在书架上整理一组书籍,并且您需要为正好 10 本书预留空间。功能架上的每个空间都对应于数组中的一个索引。# Example in Python arr = [1, 2,...