Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案

Overview

简介

Naive Ui Admin 是一个基于 Vue3.0ViteNaive UITypeScript 的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务模型,页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能,它可以帮助你快速搭建企业级中后台项目,相信不管是从新技术使用还是其他方面,都能帮助到你。

特性

  • 最新技术栈:使用 Vue3/vite2 等前端前沿技术开发
  • TypeScript: 应用程序级 JavaScript 的语言
  • 主题:可配置的主题
  • Mock 数据 内置 Mock 数据方案
  • 权限 内置完善的动态路由权限生成方案
  • 组件 二次封装了多个常用的组件

在线预览

账号:admin,密码:123456(随意)

文档

文档地址

准备

安装使用

  • 获取项目代码
git clone https://github.com/jekip/naive-ui-admin.git
  • 安装依赖
cd naive-ui-admin

yarn install
  • 运行
yarn dev
  • 打包
yarn build

更新日志

CHANGELOG

感谢

@Vben 借鉴 vue-vben-admin 实现的骨架,同时也使用作者开发的 vite 插件,再次感谢作者。

如何贡献

非常欢迎你的加入!提一个 Issue 或者提交一个 Pull Request。

Pull Request:

  1. Fork 代码!
  2. 创建自己的分支: git checkout -b feat/xxxx
  3. 提交你的修改: git commit -am 'feat(function): add xxxxx'
  4. 推送您的分支: git push origin feat/xxxx
  5. 提交pull request

Git 贡献提交规范

  • 参考 vue 规范 (Angular)

    • feat 增加新功能
    • fix 修复问题/BUG
    • style 代码风格相关无影响运行结果的
    • perf 优化/性能提升
    • refactor 重构
    • revert 撤销修改
    • test 测试相关
    • docs 文档/注释
    • chore 依赖更新/脚手架配置修改等
    • workflow 工作流改进
    • ci 持续集成
    • types 类型定义文件更改
    • wip 开发中

浏览器支持

本地开发推荐使用Chrome 80+ 浏览器

支持现代浏览器, 不支持 IE

 Edge
IE
 Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
not support last 2 versions last 2 versions last 2 versions last 2 versions

维护者

@Ah jung

交流

Naive Ui Admin 是完全开源免费的项目,在帮助开发者更方便地进行中大型管理系统开发,同时也提供 QQ 交流群使用问题欢迎在群内提问。

  • QQ 群 328347666
You might also like...
Vue3 admin,ant design vue pro,vue admin,vue vite admin,ant design pro
Vue3 admin,ant design vue pro,vue admin,vue vite admin,ant design pro

Ant Design Vue Pro An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue 基于 Vite2 Vue3 Ant-Design-of-

An open source admin template kit using vite2
An open source admin template kit using vite2

ABT:admin base template English | 中文 Introduction admin-base-template is a free and open source admin template kit. using vite2. Technology stack is V

Star Admin Vue Admin Template is a free admin template based on Bootstrap 4 and Vue.js.
Star Admin Vue Admin Template is a free admin template based on Bootstrap 4 and Vue.js.

Star Admin Vue Admin is a free admin template based on Bootstrap 4 and Vue.js.

Vite2 + Vue3.0 + ant-design 2.x
Vite2 + Vue3.0 + ant-design 2.x

vite2-vue3-admin Vite2 + Vue3.0 + ant-design 2.x 线上地址 tips:可注册成功后登入 目录树 ├─public └─src ├─api ├─assets │ ├─font │ ├─icon │ ├─img

vue3.0 + vite2.0 + element-plus + Vuex4.0 + Vue-router4.0 + axios + node-server(前后端分离)

Explain Vite2.0, Vue3.0, ElementPlus, Vuex4.0, Vue-router4.0, Axios Development Explain 路由,api,vuex,模块所用图片 请根据模块进行划分,添加方式请参考当前目录结构 Project setup npm

vue3.0 + vite2.0 + element-plus + Vuex4.0 + Vue-router4.0 + axios + node-server(前后端分离)

Explain Vite2.0, Vue3.0, ElementPlus, Vuex4.0, Vue-router4.0, Axios Development Explain 路由,api,vuex,模块所用图片 请根据模块进行划分,添加方式请参考当前目录结构 Project setup npm

vite2-vue3-TypeScript4-elementPlus做成的一个简易后台管理系统

vite2-vue3-TypeScript4-elementPlus 做成的一个简易后台管理系统 开发 # 克隆项目 git clone https://github.com/wuguanfei/vite2-vue3-TypeScript4 # 进入项目目录 cd vite2-vue3-TypeS

FastAPI项目实战,仿HelloFlask项目,采用前后端分离 FastAPI + Vue3 +Vite2
FastAPI项目实战,仿HelloFlask项目,采用前后端分离 FastAPI + Vue3 +Vite2

介绍 仿 HelloFlask 一书中的项目 点击查看对应视频 前端使用(JavaScript):Vue3(Setup 语法糖) + Vuex + VueRouter + Axios + ElementPlus + Vite2 后端使用(Python): FastAPI + Tortoise ORM

🚀A new generation Cross-desktop framework using electron13+vue3(setup-script)+vite2+element-plus
🚀A new generation Cross-desktop framework using electron13+vue3(setup-script)+vite2+element-plus

vue3-admin-electron English | 中文 This is a basic vue3 admin electron desktop platform. Contains the most basic electron development and construction s

Comments
  • 路由无法注册

    路由无法注册

    在「src/store/modules/user.ts」下

    // 获取用户信息
        GetInfo() {
          const that = this;
          return new Promise((resolve, reject) => {
            getUserInfo(that.getToken)
              .then((res) => {
                const result = res;
                if(result.status === 200){
                  const permissionsList =[
                      {
                          "label": "主控台",
                          "value": "dashboard_console"
                      },
                      {
                          "label": "工作台",
                          "value": "dashboard_workplace"
                      },
                  ]
                  that.setPermissions(permissionsList);
                  that.setUserInfo(result);
                }else{
                  reject(new Error('getInfo: permissionsList must be a non-null array !'));
                }
                that.setAvatar(result.data.name)
                resolve(res)
                /**
                if (result.permissions && result.permissions.length) {
                  const permissionsList = result.permissions;
                  that.setPermissions(permissionsList);
                  that.setUserInfo(result);
                } else {
                  reject(new Error('getInfo: permissionsList must be a non-null array !'));
                }
                that.setAvatar(result.avatar);
                resolve(res);
                 */
              })
              .catch((error) => {
                reject(error);
              });
          });
        },
    

    但是动态路由注册时,依旧不能注册「dashboard」的菜单和页面。

    opened by elonehoo 10
  • 建议:全局Message和Dialog的实现方式

    建议:全局Message和Dialog的实现方式

    我注意到一个辅助的appProvider用于在程序初始化时将$message和$dialog注意到window对象中,便于供Axios使用。 但其实有更为方便的实现方式:使用mitt(实际已经引入未用到)。 mitt引入的对象同样是全局对象,并且listener可以延迟定义,定义在任何位置。

    方法如下:首先定义一个全局bus对象(eventbus.ts)

    import mitt from 'mitt';
    export const bus = mitt();
    

    在http中引入并使用该对象

    import { bus } from '@/utils/eventbus';
    ...
    bus.emit('error', 'error message');
    bus.emit('modal', { 
        msg: 'anything to show',
        ...
    });
    

    在引入NMessageProvider和NDialogProvider后的任何地方(例如MessageContent.vue中)监听事件:

    import { bus } from '@/utils/eventbus';
    ...
    const Message = useMessage();
    bus.on('error', (msg: string) => Message.error(msg));
    bus.on('modal', (e: any) => ...);
    

    这样就可以去掉window注入、appProvider等附加机制,逻辑上更为清晰。 以上思路供参考。

    opened by whitemay 9
  • Message的先后顺序

    Message的先后顺序

    在axios中,作者使用了 const { $dialog: Modal, $message: Message } = window; 但是window的Message赋值,是在Application组件中使用,Application组件又是在App.vue中才调用,导致Message对象,在没有进入到App.vue时候(也就比如在登录界面中就触发调用)就不生效。

    opened by Garens 4
  • Refresh error - blank page when click the reload button

    Refresh error - blank page when click the reload button

    On each page, when reloading the page with the Reload button on Top Bar or on each tab, the result is the same:

    Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
        at insert (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:8191:16)
        at move (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:5123:9)
        at move (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:5096:7)
        at activeBranch.transition.afterLeave (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:2338:15)
        at performRemove (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:5210:20)
        at el._leaveCb (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:2850:9)
        at finishLeave (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:7792:13)
        at resolve2 (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:7822:30)
        at whenTransitionEnds (http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:7903:12)
        at http://localhost:8001/naive/node_modules/.vite/deps/chunk-V6FUCMFK.js?v=ae91ebc1:7830:11
    

    Only when click CTRL+F5 the page will display.

    opened by clabnet 1
Releases(v1.8.1)
  • v1.8.1(May 11, 2022)

    1.8.1

    • ✨ Features

    • 新增 clean:cache 删除缓存命令
    • 新增 clean:lib 删除 node_modules 命令
    • 依赖升级

    🐛 Bug Fixes

    • 修复 开发环境 运行控制台错误提示
    Source code(tar.gz)
    Source code(zip)
  • 1.8.0(Apr 1, 2022)

    1.8.0 (2022-04-01)

    • ✨ Features

    • 新增 多页签 支持配置 affix 固定属性
    • 新增 usePage Hooks
    • 表格列支持 draggable 配置拖拽 合并 #114
    • 依赖升级

    🐛 Bug Fixes

    • 修复 多页签 关闭全部缺陷
    • 修复 多页签 跳转缺陷(记得清空多页签缓存)
    Source code(tar.gz)
    Source code(zip)
  • v1.7.0(Feb 14, 2022)

    1.7.0 (2022-02-14)

    🐛 Bug Fixes

    • 移除 登录页面 滑动验证组件

    • 修复 BasicUpload 组件,回显问题

    • 修复 ts类型 配置缺陷

    • 修复 登录页面 message 交互缺陷

    • 修复 表格编辑 时间格式化异常 #92

    • ✨ Features

    • 依赖升级

    Source code(tar.gz)
    Source code(zip)
  • v1.6.1(Jan 6, 2022)

  • v1.6.0(Dec 24, 2021)

    2021-12-24

    🐛 Bug Fixes

    • 修复 低版本浏览器 报 globalThis 未定义

    • 修复 Axios api地址拼接异常

    • 修复 createStorage存在prefixKey 会出bug

    • ✨ Features

    • 破坏 Axios 取消默认导出 http 可支持多个请求导出

    • 搜索 import http from '@/utils/http/axios' 替换为 import { http } from '@/utils/http/axios

    • 新增 Axios 多项配置 urlPrefixjoinTimeignoreCancelTokenwithTokenuploadFile方法

    • 依赖升级

    Source code(tar.gz)
    Source code(zip)
  • v1.5.5(Aug 14, 2021)

    2021-08-14

    🐛 Bug Fixes

    • 修复路由只存在一个子路由,图标不显示问题

    • UI样式美化

    • ✨ Features

    • 支持 Vue 3.2.x

    • 代码全部按 script setup 语法重写(完成80%)

    • 新增 回到顶部 功能

    • 新增 拖拽 示例页面

    • 新增 富文本 组件

    • 新增 路由切换动画 可在项目设置切换

    • 依赖升级

    Source code(tar.gz)
    Source code(zip)
  • 1.5.4(Aug 10, 2021)

    2021-08-10

    🐛 Bug Fixes

    • 暗色模式下多页签背景问题 合并 #23 感谢 @Dishone

    • 表格设置列,重复添加action列样式错乱问题 合并 #24 感谢 @CasbaL

    • ✨ Features

    -(破坏性更新)

    • 优化 动态路由配置 取消constantRouterComponents.ts,中组件映射配置,更名为 router-icons.ts
    • 优化 admin_info接口结构,roles 更名为:permissions,roles.roleName,更名为:label
    • 优化 多级路由,当没有配置redirect 时,默认为第一个子路由,配置则优先按配置
    • 依赖升级
    Source code(tar.gz)
    Source code(zip)
  • v1.5.3(Aug 9, 2021)

    2021-08-09

    🐛 Bug Fixes

    • 修复顶部菜单,选中联动

    • 修复混合菜单模式,切换其他模式菜单未重置

    • 实例基础列表,和表格组件实例,开启横向滚动特性

    • naiveui 升级成最新版

    • ✨ Features

    • table组件,默认开启 ellipsis 特性

    Source code(tar.gz)
    Source code(zip)
  • v1.5.2(Aug 6, 2021)

  • 1.5.1(Aug 5, 2021)

  • v1.5.0(Jul 30, 2021)

  • v1.4(Jul 21, 2021)

  • v1.3(Jul 19, 2021)

  • v1.2(Jul 16, 2021)

  • v0.1.1-beta(Jul 7, 2021)

  • v0.1.0-beta(Jul 7, 2021)

Owner
Ah jung
Ah jung
🚀🚀🚀Vue3,Vue3.0,Vue,Vue3.x,Vuex,Typescript,TSX,ts,vue后台管理,admin,vue-admin,vue3-admin,vue-element-admin,iooc-admin,iooc-vue-admin主线版本基于element-plus、Typescript开发维护.集成CRUD,JsonSchema、大量节省业务代码.

iooc-admin(element-plus) 演示地址(数据库五分钟重置一次) ⚡️ vue3.x + element-plus + TypeScript ⚡️ vue3.x + element-plus + TypeScript (视频) 项目地址 ⚡️ vue3.x + element-pl

Jacking 51 Jun 20, 2021
soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript.

soybean admin - a beautiful vue admin template, based on Vue3、Vite、Naive UI、TypeScript.

Soybean 1.7k Nov 23, 2022
Brisk-Admin 是一个基于 Vue3.0、Vite、 element-plus、JavaScript的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务页面,包括二次封装组件、动态路由菜单、国际化、动态换肤等功能,它可以帮助你快速搭建中后台项目,该项目使用最新的前端技术栈,使用javascript语法保留了对不熟悉typescript语法用户的友好,同时框架很适合轻松上手使用,希望给你带来帮助。

简介 Brisk-Admin 是一个基于 Vue3.0、Vite、 element-plus、JavaScript的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务页面,包括二次封装组件、动态路由菜单、国际化、动态换肤等功能,它可以帮助你快速搭建中后台项目,该项目使用最新的前端技术栈,使

yunmiao 22 Nov 21, 2022
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

Vben 15.1k Nov 30, 2022
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus + typescript

vue3-admin-ts English | 中文 A basic vue3 admin template with vite2 & Element-Plus UI & axios & svg-icon& permission control & lint A new generation adm

kuanghua 191 Nov 16, 2022
vue3+vite+typescript+naive-ui

Vue 3 + Typescript + Vite This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setu

duofan 0 Dec 24, 2021
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus

?? A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus

kuanghua 226 Nov 29, 2022
👏A magical vue3 admin using vue3(script-setup) + vite2 + element-plus

vue3-admin-plus English | 中文 vue3 admin plus provides enterprise-level development demo A new generation admin construct using vue3(setup-script)+vite

kuanghua 603 Nov 28, 2022
wt-vite-vue3-element-ruoyi-ts 若以 若依 typescript ts vue3 vue vite vite2.0 模版

wt-vite-vue3-element-ruoyi-ts ?? 全网首发 ?? 基于 Vite 2.0 + Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统 Project setup npm i -g

superDragon 5 May 5, 2022
Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture

null 19 Nov 8, 2022