makeit-admin-pro v2.1.364
基于 Vue3.x + Vite4.x + Ant Design Vue 构建的适用于中后台管理系统的组合模板框架。
( A unified template used to backend management system based on Vue3.x + Vite4.x + Ant Design Vue. )
关于
: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
等,欢迎来 这里 提issues
,我将尽力去解决相应的问题及尽量满足一些合理的定制化需求。
全局应用
: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: ······
安装
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
8 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago