X-ADMIN

介绍 📖

x-admin 一款基于Geeker-Admin改造的后台框架。
使用 Vue3.3、TypeScript、Vite4、Pinia、Element-Plus，UnoCss 等目前最新技术栈开发。

在线预览 👀

• Link：

代码仓库 ⭐

• Gitee：https://gitee.com/fxzer/x-admin.git
• GitHub：https://github.com/fxzer/x-admin.git

项目文档 📚

• 项目更新日志：CHANGELOG.md

• 项目文档地址：

项目功能 🎨

• 使用 Vue3.3 + TypeScript 全面使用 Composition 语法开发（包括 Pinia）
• 使用 Vite4 工具，进行组件和第三方库（ElementPlus）自动按需导入/注册，
  集成（配置 Gzip 打包、TSX 语法、跨域代理、构建体积打印、PWA、新功能用户通知…）等插件
• 使用 Pinia Composition API 替代 Vuex，集成 Pinia 持久化插件
• 使用 TypeScript 对 Axios 整个二次封装（请求拦截、取消、常用请求封装…）
• 支持 Element 组件大小切换，联动布局大小切换、暗黑模式、暗黑主题选择、i18n 国际化
• 使用 VueRouter 进行路由权限拦截、页面按钮权限配置、路由懒加载
• 使用 KeepAlive 对页面进行缓存，支持多级嵌套页面缓存
• 常用自定义指令开发（权限、复制、水印、拖拽、节流、防抖、长按…）
• 集成 unocss 进行样式编写、全局快捷键等规则制定及主题变量管理，
• 使用 @antfu/eslint-config和@unocss/eslint-config 自动检查、格式化代码，自动整理排序 UnoCss 类名，无需进行繁琐的Prettier、 ESLint、Stylelint插件安装和配置、及冲突解决
• 使用 simple-git-hooks、lint-staged、commitlint、czg、cz-git、standard-version， 简化 git-hook 配置，规范提交信息，提交前自动修复和格式化代码，及自动生成更新日志文档

新特性 🎉

• 主题跟随系统、黑暗主题色、主题色加入流行品牌色和中国传统色，主题跑马灯、其他场景色混入主题色等设置
• 面包屑风格、全局路由切换动画及 Loading 动画选择
• 记录登录前目标路径和上次退出前路径，登录后快捷跳转
• 布局设配移动端

使用步骤 📋

• Clone：

# Gitee
git clone https://gitee.com/fxzer/x-admin.git
# GitHub
git clone https://github.com/fxzer/x-admin.git

• Install：

pnpm install

• Run：

pnpm dev

• Build：

# 开发环境
pnpm build:dev

# 测试环境
pnpm build:test

# 生产环境
pnpm build:pro

• Lint：

# eslint 检测代码
pnpm lint

#  Eslint 修复并格式化代码
pnpm lint:fix

• commit：

# 提交代码（提交前会自动执行 lint:lint-staged 命令）
pnpm commit

# 交互式提交
git cz

目录说明 📚

x-admin

浏览器支持 🌎

• 本地开发推荐使用 Chrome 最新版浏览器 Download。
• 生产环境支持现代浏览器，不再支持 IE 浏览器，更多浏览器可以查看 Can I Use Es Module。

not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions