# lux-admin-vuetify3

**Repository Path**: jaypro/lux-admin-vuetify3

## Basic Information

- **Project Name**: lux-admin-vuetify3
- **Description**: https://github.com/yangjiakai/lux-admin-vuetify3.git
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2023-09-28
- **Last Updated**: 2026-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<br><br>

<p align='center' >
  <img  src='/src/assets/logo_light.svg' alt='Vuetify3' width='300'/>
</p>
<br><br>

<p align="center">
  <a href="https://vuejs.org/">
    <img src="https://img.shields.io/badge/vue-v3.2.47-brightgreen.svg" alt="vue">
  </a>
  <a href="https://vuetifyjs.com/">
    <img src="https://img.shields.io/badge/vuetify-v3.1.13-blue.svg" alt="element-ui">
  </a>
    <a href="https://vitejs.dev/">
    <img src="https://img.shields.io/badge/vite-v4.2.1-blueviolet.svg" alt="element-ui">
  </a>
  
  <a href="https://github.com/yangjiakai/lux-admin-vuetify3/blob/main/LICENSE">
    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
  </a>
</p>

<h4 align='center'>
<a href="https://lux.vuetify3.com/">在线 Demo</a>
</h4>

<br>

<p align='center'>
<a href="https://github.com/yangjiakai/jk-vuetify3-lux-admin/blob/main/README.md">English</a> | <b>简体中文</b>| <a href="https://github.com/yangjiakai/jk-vuetify3-lux-admin/blob/main/README.jp.md">日本語</a>
</p>

## 📖 序文

> 目标创造最优秀的 vuetify3 的 Admin 开源模板

在 Vuetify 精美的主题基础上，我们构建了一个清晰且高效的项目逻辑架构，整合了最新的技术框架。本项目旨在实现各种常见的技术需求和功能，同时融合了 AI 助手，以提供更智能化的体验。此外，我们确保所有页面在多种设备上均能自适应展示，实现优雅的跨平台兼容性。

## 📖 其他版本

精简国际化模板: <a href="https://github.com/yangjiakai/vuetify3-lux-admin-template-i18n/tree/main">vuetify3-lux-admin-template-i18n</a>

精简中文模板: <a href="https://github.com/yangjiakai/vuetify3-lux-admin-template-zh/tree/main">vuetify3-lux-admin-template-zh</a>

Nuxt3 版本：制作中

## 文档

- 📖 [中文版文档 1.0 ](https://www.craft.me/s/tAMVv4hUxZIH6G)

## 📚 特性

- 📖 [Vue 3.2](https://github.com/vuejs/core)
- 📖 [Vite 4.x](https://github.com/vitejs/vite)
- 📖 UI Framework [Vuetify 3](https://next.vuetifyjs.com/en/)
- 📖 TypeScript
- 📦 组件自动导入
- 🍍 通过 [Pinia](https://pinia.vuejs.org/)进行状态管理
- 📔 使用新的 `<script setup>` 语法
- 📚 使用任意的图标集 [Iconify](https://icon-sets.iconify.design/)
- ☁️ 零配置部署在 Netlify
- 🔑 Firebase 授权
- 📈 Echarts, ApexChart
- 🧭 Openai, Chatgpt 支持
- 🌍 vue-i18n 多语言支持
- 📚 virtual-scroller , vuedraggable , perfect-scrollbar
- 📝 富文本编辑器
- 📇 响应式多平台自适应

## 📈 项目活跃度

![Alt](https://repobeats.axiom.co/api/embed/306361b2af1a8556f64a0a828e1726a94bff36f0.svg "Repobeats analytics image")

## 💬 联络我

- 邮箱 <a href="mailto:yjkbako@gmail.com">yjkbako@gmail.com</a>
- 推特 https://twitter.com/baibaixiang
- 微信 <img  src='/src/assets/wechat-qrcode.png'  alt='DashBoard' width='300' />

## 💌 预览

<img  src='/src/assets/previews/DashBoard.png'  alt='DashBoard' />
<img  src='/src/assets/previews/TaskBoard.png'  alt='ChatGPT' />
<img  src='/src/assets/previews/DataTable.png'  alt='DataTable' />
<img  src='/src/assets/previews/Todo.png'  alt='ChatGPT' />
<img  src='/src/assets/previews/ChatGPT.png'  alt='ChatGPT' />
<img  src='/src/assets/previews/Card.png'  alt='Card' />
<img  src='/src/assets/previews/Color.png'  alt='Color' />
<img  src='/src/assets/previews/Gradient.png'  alt='Gradient' />
<img  src='/src/assets/previews/Login.png'  alt='ChatGPT' />
<img  src='/src/assets/previews/Unsplash.png'  alt='ChatGPT' />
<img  src='/src/assets/previews/Unsplash2.png'  alt='ChatGPT' />

<br>

## 📦Pre-packed

### 🏷️UI 框架

- [Vuetify3](https://next.vuetifyjs.com/en/) - Vuetify 是一个不要求设计能力的 Vue 界面组件框架，自带了许多自行设计实现的 Vue 组件。

### 🏷️Icons

- [Iconify](https://iconify.design) - 使用任意的图标集 [🔍Icônes](https://icones.netlify.app/)
- [Pure CSS Icons via UnoCSS](https://github.com/antfu/unocss/tree/main/packages/preset-icons)

## 目标功能

- [x] 明暗主题切换 -- 完成
- [x] 主题色切换 -- 完成
- [x] 中日英三语言切换-- 完成
- [x] 整合 ChatGpt-- 完成

## 目标页面

### 认证相关

- [x] 登录 -- 完成
- [x] 注册 -- 完成
- [x] 验证邮件 -- 完成
- [ ] 密码重置 -- 施工中

### 公共页面

- [x] 404 -- 完成
- [x] 500 -- 施工中
- [x] 系统维护 -- 施工中
- [x] 常见问题 -- 施工中

### UI 相关

- [x] 瀑布流布局 -- 完成
- [x] 大数据虚拟列表 -- 完成
- [ ] 骨架屏 -- 施工中

### 功能页面

- [x] 任务版(拖拽功能) -- 完成
- [x] 任务列表() -- 施工中

### 站点仿写

- [ ] ......

### 🏷️ 插件

- [Vue Router4](https://router.vuejs.org/)
- [VueUse](https://github.com/antfu/vueuse) - 非常有用的组合式 API 合集
- [VuedDaggable](https://github.com/SortableJS/Vue.Draggable) - 允许进行与数组模型同步的拖拽放置操作
- [Vue-Masonry-Wall](https://github.com/DerYeger/yeger/tree/main/packages/vue-masonry-wall) - 是一种 Vue3 响应式,支持 SSR,且零依的的瀑布流布局方案
- [Vue-Virtual-Scroller](https://github.com/Akryum/vue-virtual-scroller) - 大数据快速虚拟滚动插件

## 👻 现在可以试试!

```
git clone https://github.com/yangjiakai/lux-admin-vuetify3.git

cd lux-admin-vuetify3

npm install

npm run dev
```

### 🔑 配置 ApiKey

找到根目录下的`.env.template`文件，去掉`.template`后缀
把`VITE_OPENAI_API_KEY`,`VITE_UNSPLASH_ACCESS_KEY`,`VITE_GITHUB_CLIENT_ID`,`VITE_TTS_KEY` , `VITE_TTS_REGION`分别替换成你自己的

> openai apikey： https://platform.openai.com/account/api-keys

> unsplash apikey： https://unsplash.com/oauth/applications

> github apikey： https://github.com/settings/tokens

> azure textToSpeech : https://speech.microsoft.com/