🚩 Makeit Admin Pro 是基于 Vue 3.x + Vite 5.x + Ant Design Vue 4.x 构建开发的一套适合中后台管理项目的 UI 框架 ( 3.x 版本的 npm 包将由 makeit-admin-pro 更改为 @makeit/admin-pro, 正在重构中 ... )。

🔰 框架内置了统一风格的页面布局 / 注册页面 / 登录页面 / 忘记密码 / 滑块验证码组件 / 搜索联想组件 / 动态菜单配置 / 权限管理配置等常用模块，开箱即用。

🍭 设计这套框架的初衷是为了免去中后台管理项目中基础又重复的页面构建，将页面内的一系列行为进行封装形成重型组件（一个组件 ≈ 一个页面），如基础布局 Layout，登录 Login / 注册 Register / 忘记密码 Forget 等页面模块，让开发人员能更加专注于业务内容的开发，无需花费过多的时间在基础构建上，希望可以通过 Makeit Admin Pro 系列组件提供快速高效的搭建高质量的中后台应用，现阶段还在不断完善，持续开发更新中 ...

体验地址：https://admin.makeit.vip/

✅ 主题配置 ( css modules + css variables )

✅ 国际化 ( vue-i18n )

✅ Cookie ( document.cookie )

✅ Storage ( localStorage & sessionStorage )

✅ Request ( axios )

✅ Global ( 全局配置 global configuration )

✅ Tools ( 全局公用函数库 global functions )

✅ 基础布局 ( Layout ) 💖

✅ 滑块验证码 ( Captcha ) 💥

✅ 锚点链接 ( Anchor ) 🎈

✅ 时钟 ( Clock - 仿 Apple Watch 表盘 ) 🕜

✅ 下拉菜单 ( Dropdown ) 🌴

✅ 忘记密码 ( Forget ) 🔨

✅ 历史路由 ( History ) 🎸

✅ 登录组件 ( Login ) 🍒

✅ 注册组件 ( Register ) 🏰

✅ 菜单组件 ( Menu ) 🚀

✅ 弹窗动效 ( Modal ) 🚥

✅ 消息中心 ( Notice ) 📍

✅ 密码设置 ( Password ) 🈲

✅ 搜索组件 ( Search ) 📑

✅ 代码高亮 ( Code ) 🛬

✅ 标题设置 ( Title ) 🌴

✅ 引用说明 ( Quotes ) #️⃣

✅ 回到顶部 ( Backtop ) 🔝

❌ 权限控制 😎

✅ 应用管理 🌹

✅ 菜单配置 ( 动态路由 ) 🚩

✅ 语言配置 ❄️

❌ 富文本编辑器 🌊

❌ 地域选择 😻

❌ 异常页面 ( 404 ) 😴

❌ 个人中心 😍

✨ ······

npm i @makeit/admin-pro

import { createApp } from 'vue'
import MakeitAdminPro from '@makeit/admin-pro'
import App from './app.vue'

const app = createApp(App)
app.use(MakeitAdminPro)
app.mount('#app')

import { createApp } from 'vue'
import router from './router'
import App from './app.vue'
import { Layout, Notice } from '@makeit/admin-pro'

const app = createApp(App)
app.use(router)
const components = [Layout, Notice]
components.forEach((component) => app.use(component))
app.mount('#app')

<template>
    <mi-layout />
</template>

<script lang="ts" setup>
    import { useMapMenuStore } from '@makeit/admin-pro'

    const menuStore = useMapMenuStore()
    menuStore.updateMenus([
        {
            name: 'dashboard',
            path: '/dashboard',
            meta: {
                title: '控制中心',
                subTitle: 'Dashboard',
                icon: DashboardOutlined,
                tag: {color: '#f50', content: 'Hot'}
            }
        }, {
            // ... sider menus
        }
    ])
</script>

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

<script lang="ts" setup>
import bg from '@images/login-bg.jpg'
</script>

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

<script lang="ts" setup>
import bg from '@images/login-bg.jpg'
</script>

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