Makeit Admin Pro 3.x
2024-03-29 更新
3.x
现已发布 Beta 版本体验地址「admin.makeit.vip 」现为 2.x 版本的使用说明与示例站点,3.x 版本的文档说明站点正在构建。
npm
安装包名称由 makeit-admin-pro 更新为 @miitvip/admin-pro
安装使用
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" />
<!-- 注册页面 -->
<mi-register action="/v1/register" />
</template>
旧版 - Makeit Admin Pro 2.x
Makeit Admin Pro,基于 Vue3.0 + Vite 开发,结合 Ant Design Vue 组件库开发的一套适合中后台管理项目的统一 UI 框架,包含统一的页面布局 / 注册页面 / 登录页面 / 验证码 / 动态配置项目菜单等常用模块,开箱即用。先上几张效果图看看:
GitHub 地址:github.com/lirongtong/…
npm 地址:www.npmjs.com/package/mak…
示例地址:admin.makeit.vip/
Makeit-Admin-Pro,是基于Vue 3.0 + Vite开发的一套适合中后台管理项目的集成框架,依赖于阿里的Ant Design Vue 2.x版本,内置了登录页面 / 注册页面 / 验证码 / 页面布局等常用模块,开箱即用,现阶段还在持续更新中 ... 开发这套统一的中后台管理项目的 UI 框架,主要就是为了免去那些没完没了的后台项目中的基础构建,通过npm安装引入的方式,以组件引入的形式,渲染想要的但又在无数个项目中重复的基础页面。
安装使用
// 安装
npm i makeit-admin-pro
// 使用
import { createApp } from 'vue'
import { createStore } from 'vuex'
import router from './router'
import MakeitAdminPro from 'makeit-admin-pro'
import App from './App.vue'
import 'ant-design-vue/dist/antd.min.css'
import 'makeit-admin-pro/dist/miitvip.min.css'
const app = createApp(App)
app.use(router)
app.use(createStore({}))
app.use(MakeitAdminPro)
app.mount('#app')
登录组件
<!-- 最基础的使用 -->
<mi-login :action="api.login"></mi-login>
<!-- 自定义验证码校验接口等 -->
<mi-login
:action="api.login"
:captcha-init-action="api.captcha.init"
:captcha-verify-action="api.captcha.verification">
</mi-login>
<!-- 更多用法 ... -->
注册组件
<!-- 基础用法 ... -->
<mi-register :action="api.register"></mi-register>
<!-- 自定义提交表单 ... -->
<mi-register :action="api.register">
<template v-slot:content>
<a-form>
<a-form-item prop="username">
<!-- more ... -->
</a-form-item>
</a-form>
</template>
</mi-register>
<!-- 自定义校验规则 ... -->
<mi-register :action="api.register" :rules="rules"></mi-login>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
const checkUserName = (
_rule: any,
value: string,
_callback: any
) => {
if (this.$tools.isEmpty(value)) {
return Promise.reject('请设置用户账号')
} else {
if (!this.$g.regExp.username.test(value)) {
return Promise.reject('仅允许字母+数字,4-16 个字符,且以字母开头')
} else {
if (this.usernameVerifyAction) {
this.$http.get(`${this.usernameVerifyAction}/${value}`)
.then((res: any) => {
if (res.ret.code !== 1) {
return Promise.reject(res.ret.message)
} else return Promise.resolve()
}).catch((err: any) => {
MiModal.error({content: err.message})
return Promise.reject('请设置用户账号')
})
} else return Promise.resolve()
}
}
}
return {
rules: {
username: [{
required: true,
validator: checkUserName
}]
}
}
}
})
</script>
<!-- 更多用法 ... -->
滑块验证码组件
<!-- 基础效果 ... -->
<template>
<mi-captcha></mi-captcha>
</template>
<!-- 自定义背景 ... -->
<template>
<mi-captcha image="/@images/bg.jpg"></mi-captcha>
</template>
<!-- 自定义主题色 ... -->
<template>
<mi-captcha theme-color="#2F9688"></mi-captcha>
</template>
<!-- 更多用法 ... -->
弹窗组件
<!-- 基础效果 ... -->
<template>
<a-button type="primary" @click="handleModal">点击打开弹窗</a-button>
<mi-modal v-model:visible="visible" title="标题">
自定义弹窗内容(Modal Content)
</mi-modal>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
visible: false
}
},
methods: {
handleModal() {
this.visible = !this.visible
}
}
})
</script>
<!-- 弹窗打开的动画效果 ... -->
<template>
<a-button type="ghost" @click="handleAnim('scale')">Scale ( 默认 )</a-button>
<a-button type="ghost" @click="handleAnim('fade')">Fade</a-button>
<!-- ... -->
<mi-modal v-model:visible="visible" :animation="anim" title="标题">
自定义弹窗内容(Modal Content)
</mi-modal>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
anim: 'scale'
}
},
methods: {
handleAnim(anim: string) {
this.anim = anim
}
}
})
</script>
<!-- 更多用法 ... -->
该框架内同时封装了 Cookie / Storage / Http 等常用模块,按需加载 / 菜单选项 / 消息中心 / 联想搜索 / 密码设置 / 下拉菜单 / 气泡提示框等常用组件,现阶段仍在持续开发中,欢迎 Star,提 Issues