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

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

ruisui884个月前 (02-27)技术分析31

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 中后台解决方案” 的相关文章

最古老的Linux发行版刚刚进行了重大更新

Slackware 15.0 带来了全新的 KDE Plasma 5 桌面体验。Slackware Linux(仍然维护的最古老的Linux发行版)的制造商刚刚发布了Linux发行版的15.0版本。Slackware Linux于1993年出现,创始人Patrick Volderding今天继续维护...

react hooks自定义组件居然能这样做

前言  这里写一下如何封装可复用组件。首先技术栈 react hooks + props-type + jsx封装纯函数组件。类组件和typeScript在这不做讨论,大家别白跑一趟。接下来会说一下封装可复用组件的思路,比如一个新手应该怎么去封装,都需要有哪些东西。  然后说一些复杂组件需要的功能,...

neovim 0.9在win下配置 python开发环境

初级的一些配置点击下面链接查看neovim安装插件管理器neovim常用快捷键neovim python开发环境简易配置方法 (需要手动键入命令行 运行python)安装neovim python的模块pip install pynvim pip install jedi pip install n...

别让“跑焦”毁所有!仅需这一项设置,即可显著改善镜头对焦精度

我常常会收到一些摄影爱好者的私信,也一直在努力的帮助大家解决更多摄影中常见问题。在我收到的所有问题中。有一个问题是最麻烦的,那就是“为什么我的图像看起来模糊?”。这个问题几乎每个人都遇到过,究其原因可以说是多种多样相对复杂。起初我一直认为是对焦问题所导致,也就有了我之前所写的“后按对焦”以及“对焦模...

最快清除数组空值?分享 1 段优质 JS 代码片段!

本内容首发于工粽号:程序员大澈,每日分享一段优质代码片段,欢迎关注和投稿!大家好,我是大澈!本文约 600+ 字,整篇阅读约需 1 分钟。今天分享一段优质 JS 代码片段,用最简洁的代码清除了数组中的空值。老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!const arr...

Vue页面传参详解

一、两种方式方法1:name跳转页面this.$router.push({name:'anotherPage',params:{id:1}})另一页面接收参数方式:this.$route.params.id示例:控制台展示:方法2:path跳转页面this.$router.push(...