基于 Vue3.x + Vite4.x + Ant Design Vue 构建的适用于中后台管理系统的组合模板框架。
( A unified template used to backend management system based on Vue3.x + Vite4.x + Ant Design Vue. )
[](https://www.npmjs.com/package/makeit-admin-pro)
[](http://www.npmtrends.com/makeit-admin-pro)
## 关于
> :triangular_flag_on_post: `Makeit Admin Pro` 是基于 `Vue3.x + Vite4.x + Ant Design Vue` 构建开发的一套适合中后台管理项目的 `UI` 框架。
> >
> :beginner: 框架内置了统一风格的页面布局 / 注册页面 / 登录页面 / 忘记密码 / 滑块验证码组件 / 搜索联想组件 / 动态菜单配置 / 权限管理配置等常用模块，开箱即用（有部分组件已抽离并发布于 `Npm`，可单独安装使用）。
> >
> :lollipop: 设计这套框架的初衷是为了免去中后台管理项目中，基础又重复的页面构建，如各个项目的基础布局，登录 / 注册 / 忘记密码等模块，让开发人员能更加专注于业务内容的开发，无需花费过多的时间在基础构建上。框架封装了 `Axios` / `Cookie` / `Storage` 等常用的基础基础功能，如 `cookie` 可通过如 `this.$cookie` 形式直接调用，同时也支持开发人员自行定制，易于扩展。现阶段还在不断完善，持续开发更新中 ...
> >
> :bug: 该框架并不一定适合所有人的需求，若您看到或是尝试使用了该框架 :innocent: 对该框架的 `UI` 或功能组件的使用有更好的建议，或组件存在 `BUG` 等，欢迎来 [这里](https://github.com/lirongtong/miitvip-vue-admin-manager/issues) 提 `issues`，我将尽力去解决相应的问题及尽量满足一些合理的定制化需求。
>>
> 体验地址：[https://admin.makeit.vip/](https://admin.makeit.vip/)
## 全局应用
:white_check_mark: 主题配置 ( `css variables` )
:white_check_mark: 国际化 ( `vue-i18n` )
:white_check_mark: Cookie ( `document.cookie` )
:white_check_mark: Storage ( `localStorage & sessionStorage` )
:white_check_mark: Request ( `axios` )
:white_check_mark: Global ( 全局配置 `global configuration` )
:white_check_mark: Tools ( 全局公用函数库 `common functions` )
## 基础组件
:white_check_mark: 基础布局 ( `Layout` ) :sparkling_heart:
:white_check_mark: 滑块验证码 ( `Captcha` ) :collision:
:white_check_mark: 锚点链接 ( `Anchor` ) :balloon:
:white_check_mark: 时钟 ( `Clock` - 仿 `Apple Watch` 表盘 ) :clock130:
:white_check_mark: 下拉菜单 ( `Dropdown` ) :palm_tree:
:white_check_mark: 忘记密码 ( `Forget` ) :hammer:
:white_check_mark: 历史路由 ( `History` ) :guitar:
:white_check_mark: 登录组件 ( `Login` ) :cherries:
:white_check_mark: 注册组件 ( `Register` ) :european_castle:
:white_check_mark: 菜单组件 ( `Menu` ) :rocket:
:white_check_mark: 弹窗动效 ( `Modal` ) :traffic_light:
:white_check_mark: 消息中心 ( `Notice` ) :round_pushpin:
:white_check_mark: 密码设置 ( `Password` ) :u7981:
:white_check_mark: 搜索组件 ( `Search` ) :bookmark_tabs:
:white_check_mark: 代码高亮 ( `Code` ) :flight_arrival:
:white_check_mark: 标题设置 ( `Title` ) :palm_tree:
:white_check_mark: 引用说明 ( `Quotes` ) :hash:
:white_check_mark: 回到顶部 ( `Backtop` ) :top:
## 高级应用
:x: 权限控制 :sunglasses:
:white_check_mark: 应用管理 :rose:
:white_check_mark: 菜单配置 ( 动态路由 ) :triangular_flag_on_post:
:white_check_mark: 语言配置 :snowflake:
:x: 富文本编辑器 :ocean:
:x: 地域选择 :heart_eyes_cat:
:x: 异常页面 ( `404` ) :sleeping:
:x: 个人中心 :heart_eyes:
:sparkles: ······
## 安装
```bash
npm i makeit-admin-pro
```
## 使用
```ts
import { createApp } from 'vue'
import MakeitAdminPro from 'makeit-admin-pro'
import 'makeit-admin-pro/dist/miitvip.min.css'
import App from './app.vue'
const app = createApp(App)
app.use(MakeitAdminPro)
app.mount('#app')
```
## 布局
```vue
```
## 登录
```vue
```
## 注册
```vue
```
## 更多
> 更多内容及使用请查看在线示例：[https://admin.makeit.vip](https://admin.makeit.vip)