vue material admin

Vue Material 风格 仪表盘后台管理系统模板

Groundhog-Chen
121
24
Vue

Vue Material Admin

version
version
version
version
stars

Vue Material Admin 是一个基于 Vuetify 组件的开源中后台系统模板，采用了 Nesjs + Vue3 + TypeScript 全栈开发，项目遵循 Material Design 的设计规范，并在 Vuetify 基础组件继续向上构建开发，对其进行了扩展和优化，旨在实现一个简洁、轻量化的中后台解决方案，项目目前阶段主要用于学习、功能展示和开发用例测试，同时也适合作为生产环境项目的启动模板，项目会持续更新，增加更多的功能和优化，欢迎大家来Issue 💭💭💭 聊天交流 ➡️ ➡️ ➡️

⛲ 技术栈

前端

  • 框架: Vue3
  • 状态管理: Pinia
  • 🌈 UI: Vuetify

服务器

  • 框架: Nest.js
  • 数据库: MySQL+TypeORM
  • 缓存: Redis

🌻 页面截图

🍭 PreView

Vercel需要🪜子！打不开的同学自行下载项目在本地开发环境预览

👊 TODO

  1. 🍳 Vuetify 组件
    • ✅ Table
    • ✅ Calendar
    • ✅ DictSelect(自动注册可枚举字典下拉框)
    • ❌ 日期选择器
    • ❌ 全局加载效果Api
  2. 🏡 智能家居控制组件
    • ✅ 环形控制器(支持鼠标拖动进度)
    • ✅ 360度全景图预览(其实是Babylon.js的一个API而已)
  3. 🔥 Pixi.js捕鱼DEMO
    • ✅ 小鱼自动移动
    • ✅ 射击撒网
    • ❌ 小鱼获取新位置后旋转对应角度方向
    • ❌ 击落效果获取金币
    • ❌ 音频
  4. 🐝 适配
    • ✅ 夜间模式
    • ✅ 适配移动设备(大部分适配)
    • ✅ 主题颜色修改
  5. 💻 后端 Node.js
    • ✅ Nest.js
    • ✅ MySQL + TypeORM
    • ✅ JWT + RBAC 权限控制

📑 本地开发

前端

由于已经是配套了 Nodejs 服务端，本地开发环境接口使用了 apifoxmock模拟了服务器全部都接口，所以 .env.development 文件需要配置接口服务器地址 VITE_API = https://apifoxmock.com/m1/5061937-4723200-default

如果想和服务端一起开发预览，请切换到 Serve 分支查看启动服务端教程，然后把 .env.development 文件服务器地址改为 VITE_API = http://localhost:8085

git clone https://github.com/armomu/vue-material-admin.git

cd vue-material-admin

pnpm install

pnpm run dev

⚠️ 本地开发需要 nodejs 18/20 vite5不支持更低的nodejs版本

Nodejs 服务端

接口文档 https://nliq7vrniv.apifox.cn

非常感谢 zclzone大佬提供的Nestjs服务项目，让我快速搭建了这个模版的后台服务，也从vue-naive-admin项目中学习到了一些新的封装思路

后端服务启动请切换到 Serve 分支查看教程