简介
Naive Ui Admin 是一个免费开源的中后台模版,使用了最新的vue3
,vite2
,TypeScript
等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考。
特性
- 最新技术栈:使用 Vue3/vite2 等前端前沿技术开发
- TypeScript: 应用程序级 JavaScript 的语言
- 主题:可配置的主题
- Mock 数据 内置 Mock 数据方案
- 权限 内置完善的动态路由权限生成方案
- 组件 二次封装了多个常用的组件
页面功能
-
Features
-
菜单模式(左侧/顶部)
-
权限(固定角色/动态路由菜单)
-
主题(深色/浅色)引用 naiveui 特性,黑暗主题/自定义组件,暗黑主题信手捏来
-
系统主题(十种安全色,可切换预览,可自定义)
-
导航风格(三种,可自由搭配,暗色侧边/白色侧边和通栏/暗色侧边和顶部通栏)
-
多页签,持久化,拖拽,关闭,固定
-
面包屑,图标,子菜单下拉联动展示
-
漂亮的锁屏界面
-
在线配置抽屉(布局预览功能)
-
主控台,简单写了一下,能看了
-
工作台随意撸了一下(不想写style)用 tailwindcss大开杀戒了
-
echarts,官网例子很全了,没啥好撸的,偷懒再次引用vben作者的代码,再感谢一次,哈哈
-
主控台,工作台,自适应支持
-
左侧菜单屏幕可视宽度<=950 自动收起
-
页脚是否显示,可配置
-
新增页面缓存,演示页面在>工作台>动态卡片>输入框
系统看板
- 主控台
- 监控页
- 工作台
效果展示
预览
账号:admin,密码:123456
文档
文档地址 - 待完善
准备
- node 和 git -项目开发环境
- Vite - 熟悉 vite 特性
- Vue3 - 熟悉 Vue 基础语法
- TypeScript - 熟悉
TypeScript
基本语法 - Es6+ - 熟悉 es6 基本语法
- Vue-Router-Next - 熟悉 vue-router 基本使用
- Naive-ui-admin - ui 基本使用
- Mock.js - mockjs 基本语法
安装使用
-
获取项目代码
git clone https://github.com/jekip/naive-ui-admin.git
-
安装依赖
cd naive-ui-admin
yarn install
-
运行
yarn dev
-
打包
yarn build
更新日志
浏览器支持
本地开发推荐使用Chrome 80+
浏览器
支持现代浏览器, 不支持 IE
[这里是图片009]Edge
[这里是图片010]Firefox
[这里是图片011]Chrome
[这里是图片012]Safari
not support
last 2 versions
last 2 versions
last 2 versions
last 2 versions