基于 Vue3 + Ant Design Vue 开发的精美中后台管理系统框架 Makeit Admin Pro

·  阅读 3519

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

分类:
前端
标签:
分类:
前端
标签: