基于 Vue3.x 构建的适用于中后台管理系统的开箱即用的组合模板框架

( An out-of-box UI solution for enterprise applications built on Vue3.x )

注意

3.x 版本的 npm 包更名为 @miitvip/admin-pro

2.x 版本的 npm 包在这里 makeit-admin-pro

体验地址 「 https://admin.makeit.vip 」 现为 2.x 版本的使用说明与示例站点

关于

:triangular_flag_on_post: Makeit Admin Pro 是基于 Vue 3.x + Vite 5.x + Ant Design Vue 4.x 构建开发的一套适合中后台管理项目的 UI 框架。

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

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

效果图

深色主题

浅色主题

更换主题

收合菜单

手机效果

全局应用

:white_check_mark: 主题配置 ( css modules + 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 ( 全局公用函数库 global functions )

基础组件

:white_check_mark: 基础布局 ( Layout ) :sparkling_heart:

:white_check_mark: 滑块验证码 ( Captcha ) :collision:

:white_check_mark: 锚点链接 ( Anchor ) :balloon:

:white_check_mark: 在线钟表 ( Clock ) :clock130:

:white_check_mark: 下拉菜单 ( Dropdown ) :palm_tree:

:white_check_mark: 忘记密码 ( Forget ) :hammer:

:white_check_mark: 链接地址 ( Link ) :guitar:

:white_check_mark: 调色面板 ( Palette ) :books:

:white_check_mark: 登录页面 ( Login ) :cherries:

:white_check_mark: 注册页面 ( Register ) :european_castle:

:white_check_mark: 授权登录 ( Socialite ) :dizzy:

: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:

:x: 应用管理 :rose:

:x: 菜单配置 ( 动态路由 ) :triangular_flag_on_post:

:x: 语言配置 :snowflake:

:x: 富文本编辑器 :ocean:

:x: 地域选择 :heart_eyes_cat:

:x: 异常页面 ( 404 ) :sleeping:

:x: 个人中心 :heart_eyes:

:sparkles: ······

安装使用

npm i @miitvip/admin-pro

全局引入

import { createApp } from 'vue'
import MakeitAdminPro from '@miitvip/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 '@miitvip/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 { useStoreMenu } from '@miitvip/admin-pro'

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

登录页面

<template>
    <mi-login action="/v1/login" />
</template>

注册页面

<template>
    <mi-register action="/v1/register" />
</template>

更多应用

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