Makeit Admin Pro 2.x
基于 Vue3.x + Vite2.x + Ant Design Vue 构建的适用于中后台管理系统的组合模板框架。
( A unified template used to backend management system based on Vue3.x + Vite2.x + Ant Design Vue. )
关于
🚩
Makeit Admin Pro，基于Vue3.x + Vite2.x版本，并结合Ant Design Vue组件库开发的一套适合中后台管理项目的统一UI框架。🔰 项目内含统一的页面布局 / 注册页面 / 登录页面 / 忘记密码 / 滑块验证码组件 / 搜索联想组件 / 动态菜单配置 / 权限管理配置等常用模块，开箱即用（部分组件已单独抽离并发布于
Npm）。🍭 集成这套框架的目的，主要是为了免去中后台管理项目中，基础又重复的页面构建，如各个项目的基础布局，登录 / 注册 / 忘记密码等模块，让开发人员能更加专注于业务内容页面的开发。该框架封装了
Axios/Cookie/Storage等基础功能，可通过如this.$cookie形式直接调用，同时也易于扩展。现阶段还在不断完善，持续开发更新中 ...🐛 限于本人的技术水平，有些问题可能考虑的并不周全，若您看到甚至尝试使用了该框架 😇 对该框架的
UI或功能组件的使用有更好的建议，或有更多的定制化需求，组件存在BUG等，欢迎来 这里 提issues，我将尽可能的抽时间去解决相应的BUG，去完善合理的定制化需求。
⚠️ 注：现在 https://admin.makeit.vip 站点内看到的页面是基于 1.x 版本的效果，2.x 版本的示例站点正在开发中，2.x 版本的页面效果及组件效果都做了很多调整，敬请期待 ~
全局应用
✅ 主题配置 ( css variables )
✅ 国际化 ( vue-i18n )
✅ Cookie ( document.cookie )
✅ Storage ( localStorage & sessionStorage )
✅ Request ( axios )
✅ Global ( 全局配置 global configuration )
✅ Tools ( 全局公用函数库 common functions )
基础组件
✅ 基础布局 ( Layout ) 💖
✅ 滑块验证码 ( Captcha ) 💥
✅ 锚点链接 ( Anchor ) 🎈
✅ 时钟 ( Clock - 仿 Apple Watch 表盘 ) 🕜
✅ 下拉菜单 ( Dropdown ) 🌴
✅ 忘记密码 ( Forget ) 🔨
✅ 历史路由 ( History ) 🎸
✅ 登录组件 ( Login ) 🍒
✅ 注册组件 ( Register ) 🏰
✅ 菜单组件 ( Menu ) 🚀
✅ 弹窗动效 ( Modal ) 🚥
✅ 消息中心 ( Notice ) 📍
✅ 密码设置 ( Password ) 🈲
✅ 搜索组件 ( Search ) 📑
✅ 代码高亮 ( Code ) 🛬
高级应用
❌ 权限控制 😎
❌ 菜单配置 ( 动态路由 ) 🚩
❌ 语言配置 ❄️
❌ 富文本编辑器 🌊
❌ 地域选择 😻
❌ 异常页面 ( 404 ) 😴
❌ 个人中心 😍
✨ ······
安装
npm i makeit-admin-pro使用
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')布局
<template>
<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>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
import { DashboardOutlined, LayoutOutlined } from '@ant-design/icons-vue'
const { appContext: {config: {globalProperties: vm}} } = getCurrentInstance()
vm.$g.menus.items = [{
name: 'dashboard',
path: '/dashboard',
meta: {
title: '控制中心',
subTitle: 'Dashboard',
icon: DashboardOutlined,
tag: {color: '#f50', content: 'Hot'}
}
}, {
// ... sider menu
}]
const searchData = [{
title: '页面布局',
content: '基于 Layout 组件的二次定制',
link: '/layout',
icon: LayoutOutlined
}, {
// ... search data
}]
</script>登录
<template>
<mi-login :action="api.login"
:background="bg"
:captcha-init-action="api.captcha.init"
:captcha-verify-action="api.captcha.verify" />
</template>
<script 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 setup>
import bg from '@images/login-bg.jpg'
</script>更多
更多内容及使用请查看在线示例：https://admin.makeit.vip