# Base-Admin **Repository Path**: doublecc/base-admin ## Basic Information - **Project Name**: Base-Admin - **Description**: Base-Admin 一款基于 Vue3.3、TypeScript、Vite4、Pinia、Element-Plus 开源的后台管理框架。 新手、后端人员开箱即用，只需要修改接口和业务代码。 - **Primary Language**: TypeScript - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: https://gitee.com/hickey_symbol_admin/base-admin - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2023-09-19 - **Last Updated**: 2023-09-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Base-Admin ### 介绍 📖 在[Geeker-Admin](https://github.com/HalseySpicy/Geeker-Admin.git)上二次开发的项目，大家可以先去看大佬写的，多多支持原作者，开源不易。 因为 `Geeker-Admin` 只是搭了基础框架和封装组件，所以在这基础上加上了一些实际的开发场景。变成了真正的开箱即用，基本上只需要修改接口和对应的业务代码就可以使用。 Base-Admin 一款基于 Vue3.3、TypeScript、Vite4、Pinia、Element-Plus 开源的后台管理框架，使用目前最新技术栈开发。项目提供强大的 [ProTable](https://juejin.cn/post/7166068828202336263)，在一定程度上节省您的开发效率。 ### 在线预览 👀 - Link：https://h-base.online ### 代码仓库 ⭐ - Gitee：https://gitee.com/hickey_symbol_admin/base-admin - GitHub：https://github.com/h-base/Base-Admin ### 项目文档 📚 - 项目文档地址：https://docs.h-base.online ### 项目功能 🔨 - 使用 Vue3.x + TypeScript 开发，单文件组件**＜ script setup ＞** - 采用 Vite4 作为项目开发、打包工具（配置 Gzip 打包、TSX 语法、跨域代理…） - 使用 Pinia 替代 Vuex，轻量、简单、易用，集成 Pinia 持久化插件 - 使用 TypeScript 对 Axios 整个二次封装（请求拦截、取消、常用请求封装…） - 基于 Element 二次封装 [ProTable](https://juejin.cn/post/7166068828202336263) 组件，表格页面全部为配置项 - 基于 Element 二次封装 [ProForm](https://docs.h-base.online) 组件，`fromItem`全部为配置项 - 支持 Element 组件大小切换、暗黑模式 - 使用 VueRouter 进行路由权限拦截、页面按钮权限配置、路由懒加载 - 使用 KeepAlive 对页面进行缓存，支持多级嵌套页面缓存 - 常用自定义指令开发（权限、复制、水印、拖拽、节流、防抖、长按…） - 使用 Prettier 统一格式化代码，集成 ESLint、Stylelint 代码校验规范 - 使用 husky、lint-staged、commitlint、czg、cz-git 规范提交信息 ### 安装使用步骤 📔 - **Clone：** ```text # Gitee git clone git@gitee.com:hickey_symbol_admin/base-admin.git # GitHub git clone git@github.com:h-base/Base-Admin.git ``` - **Install：** ```text yarn install ``` - **Run：** ```text yarn run dev ``` - **Build：** ```text # 开发环境 yarn run build:dev # 测试环境 yarn run build:test # 生产环境 yarn run build:pro ``` - **Lint：** ```text # eslint 检测代码 yarn run lint:eslint # prettier 格式化代码 yarn run lint:prettier ``` - **commit：** ```text # 提交代码 yarn run commit ``` ### 文件资源目录 📚 ```text Geeker-Admin ├─ .vscode # VSCode 推荐配置 ├─ build # Vite 配置项 ├─ public # 静态资源文件（该文件夹不会被打包） ├─ src │ ├─ api # API 接口管理 │ ├─ assets # 静态资源文件 │ ├─ components # 全局组件 │ ├─ config # 全局配置项 │ ├─ directives # 全局指令文件 │ ├─ enums # 项目常用枚举 │ ├─ hooks # 常用 Hooks 封装 │ ├─ layouts # 框架布局模块 │ ├─ routers # 路由管理 │ ├─ stores # pinia store │ ├─ styles # 全局样式文件 │ ├─ typings # 全局 ts 声明 │ ├─ utils # 常用工具库 │ ├─ views # 项目所有页面 │ ├─ App.vue # 项目主组件 │ ├─ main.ts # 项目入口文件 │ └─ vite-env.d.ts # 指定 ts 识别 vue ├─ .editorconfig # 统一不同编辑器的编码风格 ├─ .env # vite 常用配置 ├─ .env.development # 开发环境配置 ├─ .env.production # 生产环境配置 ├─ .env.test # 测试环境配置 ├─ .eslintignore # 忽略 Eslint 校验 ├─ .eslintrc.cjs # Eslint 校验配置文件 ├─ .gitignore # 忽略 git 提交 ├─ .prettierignore # 忽略 Prettier 格式化 ├─ .prettierrc.cjs # Prettier 格式化配置 ├─ commitlint.config.cjs # git 提交规范配置 ├─ index.html # 入口 html ├─ LICENSE # 开源协议文件 ├─ package-lock.json # 依赖包包版本锁 ├─ package.json # 依赖包管理 ├─ postcss.config.cjs # postcss 配置 ├─ README.md # README 介绍 ├─ tsconfig.json # typescript 全局配置 └─ vite.config.ts # vite 全局配置文件 ``` ### 浏览器支持 🌎 - 本地开发推荐使用 Chrome 最新版浏览器 [Download](https://www.google.com/intl/zh-CN/chrome/)。 - 生产环境支持现代浏览器，不再支持 IE 浏览器，更多浏览器可以查看 [Can I Use Es Module](https://caniuse.com/?search=ESModule)。 | ![IE](https://i.imgtg.com/2023/04/11/8z7ot.png) | ![Edge](https://i.imgtg.com/2023/04/11/8zr3p.png) | ![Firefox](https://i.imgtg.com/2023/04/11/8zKiU.png) | ![Chrome](https://i.imgtg.com/2023/04/11/8zNrx.png) | ![Safari](https://i.imgtg.com/2023/04/11/8zeGj.png) | | :---------------------------------------------: | :-----------------------------------------------: | :--------------------------------------------------: | :-------------------------------------------------: | :-------------------------------------------------: | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions | ### 项目后台接口 🧩 项目后台接口完全采用 Mock 数据，感谢以下 Mock 平台支持： - EasyMock：https://mock.mengxuegu.com ### 交流 👨‍👨‍👦‍👦 还有前端不看[掘金](https://juejin.cn/user/3210229684124958)的吗？