Skip to content

Latest commit

 

History

History
122 lines (84 loc) · 4.06 KB

README.md

File metadata and controls

122 lines (84 loc) · 4.06 KB
Raw

X-ADMIN

介绍 📖

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

在线预览 👀

  • Link：

代码仓库 ⭐

项目文档 📚

项目功能 🎨

  • 使用 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。
IE Edge Firefox Chrome Safari
not support last 2 versions last 2 versions last 2 versions last 2 versions