✨ 开头随意点
本文本身也是充当该开源模板的中文文档，如果只是想简单了解一下该模板，可以直接看这两篇简短的软文:
一个基于 Vue3 + TS + Element-Plus + Pinia 的低成本后台管理模板
一个项目让你熟悉 Vue3 以及相关生态
如果你是新手，那你可以选择阅读针对新手编写的：V3 Admin Vite 手摸手教程
⚡ 简介
V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术.
❓ 伴随着 vite 2.9.x 版本的发布，我也决定将基于 vue-cli 5.x 的 v3-admin 迁移到 vite，所以说 v3-admin-vite，并不算一个全新的模板项目，而是有一定用户基础，并可以用上生产环境的！
1️⃣ 特性
- Vue3：采用 Vue3 + script setup 最新的 Vue3 组合式 API
- Element Plus：Element UI 的 Vue3 版本
- Pinia: 传说中的 Vuex5
- Vite：真的很快
- Vue Router：路由路由
- TypeScript：JavaScript 语言的超集
- PNPM：更快速的，节省磁盘空间的包管理工具
- Scss：和 Element Plus 保持一致
- CSS 变量：主要控制项目的布局和颜色
- ESlint：代码校验
- Prettier：代码格式化
- Axios：发送网络请求（已封装好）
- UnoCSS：具有高性能且极具灵活性的即时原子化 CSS 引擎
- 注释：各个配置项都写有尽可能详细的注释
- 兼容移动端: 布局兼容移动端页面分辨率
2️⃣ 功能
- 用户管理：登录、登出演示
- 权限管理：内置页面权限（动态路由）、指令权限、权限函数、路由守卫
- 多环境：开发环境（development）、预发布环境（staging）、正式环境（production）
- 多主题：内置普通、黑暗、深蓝三种主题模式
- 错误页面: 403、404
- Dashboard：根据不同用户显示不同的 Dashboard 页面
- 其他内置功能：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏
3️⃣ 目录
# v3-admin-vite
├─ .husky # 用户提交代码时格式化代码
├─ .vscode # 本项目推荐的 vscode 配置和拓展
├─ public
│ ├─ favicon.ico
│ ├─ app-loading.css # 首屏加载 loading
├─ src
│ ├─ api # api 接口
│ ├─ assets # 静态资源
│ ├─ components # 全局组件
│ ├─ config # 全局配置
│ ├─ constant # 常量/枚举
│ ├─ directives # 全局指令
│ ├─ hooks # 全局 hook
│ ├─ icons # svg icon
│ ├─ layout # 布局
│ ├─ plugins # 全局插件
│ ├─ router # 路由
│ ├─ store # pinia store
│ ├─ styles # 全局样式
│ ├─ utils # 全局公共方法
│ └─ views # 所有页面
│ ├─ App.vue # 入口页面
│ └─ main.ts # 入口文件
├─ tests # 单元测试
├─ types # ts 声明
├─ .env.development # 开发环境
├─ .env.production # 正式环境
├─ .env.staging # 预发布环境
├─ .eslintrc.js # eslint 配置
├─ .prettier.config.js # prettier 配置
├─ tsconfig.json # ts 编译配置
├─ unocss.config.ts # unocss 配置
└─ vite.config.ts # vite 配置
4️⃣ 开发
# 配置
1. 一键安装 .vscode 中推荐的插件
3. node 版本 16+
4. pnpm 版本 7.x
# 克隆项目
git clone https://github.com/un-pany/v3-admin-vite.git
# 进入项目目录
cd v3-admin-vite
# 安装依赖
pnpm i
# 启动项目
pnpm dev