# vue-material-admin

**Repository Path**: netlife/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**: 0
- **Forks**: 9
- **Created**: 2024-03-23
- **Last Updated**: 2024-03-23

## 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/Vite-4.x-green.svg)
[![license](https://img.shields.io/github/license/kailong321200875/vue-element-plus-admin.svg)](LICENSE)
![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`、`PWA`等案例技术栈，在 [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/babylonjs.png">
  <img width="49%" src="https://github.com/armomu/vue-material-admin/raw/master/src/assets/edit_layer.png">
</p>

## 预览地址
-   [https://chenhuajie.gitee.io/vue-material-admin](https://chenhuajie.gitee.io/vue-material-admin/)

> ⚠️如果你是第二次打开左下角弹出更新提示的时候按f12清除一下缓存硬性重新加载一下吧！那个PWA缓存搞不定，代码已经删了但是还是会有缓存

## TODO
1. 特斯拉仪表盘
    - ✅ 高德地图轨迹回放
    - ❌ 轨迹播放速度修复
2. 智能家居控制中心组件
    - ✅ Apexcharts
    - ✅ 滑块控制器
    - ✅ 滑块控制器增加鼠标滑动
    - ✅ 音乐播放器UI
    - ❌ 播放音频
    - ✅ 360度全景图预览
4. [Three.js](https://chenhuajie.gitee.io/vue-material-admin/#/graphics/three-js)
    - ✅ 360度全景图预览
    - ✅ 动态导入glb、gltf三维模型
    - ❌ 全景图陀螺仪重力感应(不搞，直接用Babylonjs XR相机即可)
5. [Babylon.js](https://github.com/armomu/ergoudan) 
    - ✅ 物理引擎
    - ✅ 角色控制器
    - ✅ 上下楼梯
    - ✅ 上下坡
6. [Pixi.js](https://chenhuajie.gitee.io/vue-material-admin/#/graphics/pixijs) 
    - ✅ 小鱼自动移动算法
    - ❌ 小鱼获取新位置后旋转对应角度方向
    - ✅ 射击撒网
7. 页面拖拽编辑
    - ✅ 元素大小调整、组件拖拽、顺序拖拽、显示删除
    - ✅ 右键菜单
    - ❌ 属性、事件编辑
    - ❌ 标尺
    - ❌ 缩放
8. 高德地图
    - ✅ 高德地图轨迹回放
    - ✅ 镜头跟踪动画
    - ❌ GeoJSON
9. 权限
    - ❌ 角色权限
    - ❌ 按钮权限
10. 适配
    - ✅ 夜间模式
    - ❌ 主题颜色动态修改
    - ❌ 适配移动设备

## 本地开发

> ⚠️本地开发需要 `nodejs` 14.18+以上版本，

```
# 克隆项目
git clone https://github.com/armomu/vue-material-admin.git

# 打开文件目录
cd vue-material-admin

# 安装依赖
npm install

# 本地运行
npm run dev

```