makeit-admin-pro

A unified template used to backend management built on Vue3.x + Vite4.x + Ant Design Vue 3.x.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
makeit-admin-pro
2.1.3648 months ago3 years agoMinified + gzip package size for makeit-admin-pro in KB

Popular Searches

Readme

<a href="https://admin.makeit.vip/">
<img width="200" src="https://file.makeit.vip/MIITVIP/M00/00/00/K4vDRGPcbmmAG8_sAAAtlj6Tt_s562.png">
</a>

<a href="https://admin.makeit.vip/" target="_blank">
<font color="#f6ca9d">Makeit Admin Pro 2.x</font>
</a>
基于 Vue3.x + Vite4.x + Ant Design Vue 构建的适用于中后台管理系统的组合模板框架。 ( A unified template used to backend management system based on Vue3.x + Vite4.x + Ant Design Vue. ) npm package npm downloads MIT npm nodejs webpack vue vite axios ant design vue vue router vuex vue-i18n

关于

:triangularflagonpost: Makeit Admin Pro 是基于 Vue3.x + Vite4.x + Ant Design Vue 构建开发的一套适合中后台管理项目的 UI 框架。
>
:beginner: 框架内置了统一风格的页面布局 / 注册页面 / 登录页面 / 忘记密码 / 滑块验证码组件 / 搜索联想组件 / 动态菜单配置 / 权限管理配置等常用模块，开箱即用（有部分组件已抽离并发布于 Npm，可单独安装使用）。
>
:lollipop: 设计这套框架的初衷是为了免去中后台管理项目中，基础又重复的页面构建，如各个项目的基础布局，登录 / 注册 / 忘记密码等模块，让开发人员能更加专注于业务内容的开发，无需花费过多的时间在基础构建上。框架封装了 Axios / Cookie / Storage 等常用的基础基础功能，如 cookie 可通过如 this.$cookie 形式直接调用，同时也支持开发人员自行定制，易于扩展。现阶段还在不断完善，持续开发更新中 ...
>
:bug: 该框架并不一定适合所有人的需求，若您看到或是尝试使用了该框架 :innocent: 对该框架的 UI 或功能组件的使用有更好的建议，或组件存在 BUG 等，欢迎来 这里 提 issues，我将尽力去解决相应的问题及尽量满足一些合理的定制化需求。
>>
体验地址：https://admin.makeit.vip/

全局应用

:whitecheckmark: 主题配置 ( css variables ) :whitecheckmark: 国际化 ( vue-i18n ) :whitecheckmark: Cookie ( document.cookie ) :whitecheckmark: Storage ( localStorage & sessionStorage ) :whitecheckmark: Request ( axios ) :whitecheckmark: Global ( 全局配置 global configuration ) :whitecheckmark: Tools ( 全局公用函数库 common functions )

基础组件

:whitecheckmark: 基础布局 ( Layout ) :sparklingheart: :whitecheckmark: 滑块验证码 ( Captcha ) :collision: :whitecheckmark: 锚点链接 ( Anchor ) :balloon: :whitecheckmark: 时钟 ( Clock - 仿 Apple Watch 表盘 ) :clock130: :whitecheckmark: 下拉菜单 ( Dropdown ) :palmtree: :whitecheckmark: 忘记密码 ( Forget ) :hammer: :whitecheckmark: 历史路由 ( History ) :guitar: :whitecheckmark: 登录组件 ( Login ) :cherries: :whitecheckmark: 注册组件 ( Register ) :europeancastle: :whitecheckmark: 菜单组件 ( Menu ) :rocket: :whitecheckmark: 弹窗动效 ( Modal ) :trafficlight: :whitecheckmark: 消息中心 ( Notice ) :roundpushpin: :whitecheckmark: 密码设置 ( Password ) :u7981: :whitecheckmark: 搜索组件 ( Search ) :bookmarktabs: :whitecheckmark: 代码高亮 ( Code ) :flightarrival: :whitecheckmark: 标题设置 ( Title ) :palmtree: :whitecheckmark: 引用说明 ( Quotes ) :hash: :whitecheckmark: 回到顶部 ( Backtop ) :top:

高级应用

:x: 权限控制 :sunglasses: :whitecheckmark: 应用管理 :rose: :whitecheckmark: 菜单配置 ( 动态路由 ) :triangularflagonpost: :whitecheckmark: 语言配置 :snowflake: :x: 富文本编辑器 :ocean: :x: 地域选择 :hearteyescat: :x: 异常页面 ( 404 ) :sleeping: :x: 个人中心 :hearteyes: :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 
<mi-layout>
<template v-slot:headerExtra>
<mi-search :data="searchData"
search-key="title"
:width="120"
:height="48"
placeholder="搜索组件"
:list-width="320"
:list-height="335"
:gap="4"
:page-size="3"
:list-radius="8"
border-color="transparent"
background-color="transparent" />
</template>
</mi-layout>
```

登录

```vue 
<mi-login :action="api.login"
:background="bg"
:captcha-init-action="api.captcha.init"
:captcha-verify-action="api.captcha.verify" />
```

注册

```vue 
<mi-register :action="api.register"
:background="bg"
:email-verify-action="api.validator.email"
:username-verify-action="api.validator.name" />
```

更多

更多内容及使用请查看在线示例：https://admin.makeit.vip