# vue-material-admin

**Repository Path**: chenhuajie/vue-material-admin

## Basic Information

- **Project Name**: vue-material-admin
- **Description**: Vue Material 风格 仪表盘后台管理系统模板
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 41
- **Forks**: 10
- **Created**: 2019-05-10
- **Last Updated**: 2025-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <img width="200" src="https://gitee.com/chenhuajie/vue-material-admin/raw/master/src/assets/admin-logo.png">
</p>

<h1 align="center">
    Vue Material Admin
<div align="center">

![version](https://img.shields.io/badge/Vue-3.x-blue.svg)
![version](https://img.shields.io/badge/Vuetify-3.5.x-red.svg)
![version](https://img.shields.io/badge/Vite-5.x-green.svg)
![stars](https://img.shields.io/github/stars/armomu/vue-material-admin.svg?style=social&label=Stars)

</div>

</h1>


Vue Material Admin 是一个基于 `Vuetify` 组件免费开源的纯前端中后台模版，使用了`Vue3`、`Vite`、`Pinia`、`TypeScript`、`Pixi.js`、`Babylon.js`、`Three.js` 等案例技术栈，在 [Material Design](https://m3.material.io/) 的设计规范和 [Vuetify](https://vuetifyjs.com/zh-Hans/) 基础组件上，继续向上构建开发，该项目主要以用于学习、功能展示和测试一些开发用例所以尽量保持轻量化，当然也可用来作为项目的启动模版，会持续保持更新～🔥🔥🔥


## 🌻 页面截图

<p align="center">
  <img width="49%" src="https://github.com/armomu/vue-material-admin/raw/master/src/assets/tesla.png">
  <img width="49%" src="https://github.com/armomu/vue-material-admin/raw/master/src/assets/smart_house.png">
  <img width="49%" src="https://github.com/armomu/vue-material-admin/raw/master/src/assets/edit_layer.png">
  <img width="49%" src="https://github.com/armomu/vue-material-admin/raw/master/src/assets/babylonjs.png">
</p>

## 🍭 PreView

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

- 🌍 Vercel [https://vue-material-admin.vercel.app/](https://vue-material-admin-alpha.vercel.app/)


## 👊 TODO

1. 🍳 Vuetify 组件
    - ✅ Table
    - ✅ Calendar
    - ✅ DictSelect(自动注册可枚举字典下拉框)
2. 🏡 智能家居控制组件
    - ✅ 环形控制器(支持鼠标拖动进度)
    - ✅ 360度全景图预览(其实是Babylon.js的一个API而已)
3. 🔥 [Pixi.js捕鱼DEMO](https://chenhuajie.gitee.io/vue-material-admin/#/graphics/pixijs) 
    - ✅ 小鱼自动移动
    - ✅ 射击撒网
    - ❌ 小鱼获取新位置后旋转对应角度方向
    - ❌ 击落效果获取金币
    - ❌ 音频
4. 🐝 适配
    - ✅ 夜间模式
    - ✅ 适配移动设备(大部分适配)
    - ✅ 主题颜色修改
5. 💻 后端
    - ❌ Nest.js

## 📑 本地开发

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

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

cd vue-material-admin

pnpm install

pnpm run dev

```

## 推荐项目 🔥 🔥

- [Babylonjs Web3D物理角色控制器，已经获得`Babylonjs`官方库推荐 🔥 🔥 👍](https://github.com/armomu/ergoudan) 
- [Babylonjs 马里奥3D场景](https://daisy-kaliman.vercel.app/#/index)
- [Vue3 通用可视化编辑器，支持可拖拽、CSS样式编辑等功能，可输出原型图H5页面，类似于`磨刀`](https://github.com/armomu/oreo-editor)