Makeit Admin Pro, an exquisite background management system framework developed based on Vue3 + Ant Design Vue

Makeit Admin Pro, based on Vue3.0 + Vite development, combined with Ant Design Vue component library development of a set of unified UI framework for middle and background management projects, Contains unified page layout/registration page/login page/verification code/dynamic configuration item menu and other common modules, out of the box. Take a look at a few renderings first:

GitHub address: github.com/lirongtong/…

NPM address: www.npmjs.com/package/mak…

Example address: admin.makeit. VIP /

Makeit-admin-pro is a set of integration framework for middle and background management projects developed based on Vue 3.0 + Vite. It relies on The Ant Design Vue 2.x version of Ali, and has built-in login page/registration page/verification code/page layout and other common modules. Out of the box, It is still being updated at this stage… The main purpose of developing this unified UI framework for middle and background management projects is to avoid the basic construction in the endless background projects, and to render the desired base page in the form of component introduction through NPM installation, which is repeated in countless projects.

Install and use

/ / installation
npm i makeit-admin-pro

/ / use
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')
Copy the code

Log on to the component

<! -- Basic usage -->
<mi-login :action="api.login"></mi-login>

<! -- Custom verification code interface -->
<mi-login
    :action="api.login"
    :captcha-init-action="api.captcha.init"
    :captcha-verify-action="api.captcha.verification">
</mi-login>

<! -- More usage... -->
Copy the code

Certified components

<! Basic usage... -->
<mi-register :action="api.register"></mi-register>

<! Custom submission forms... -->
<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>

<! Custom verification rules... -->
<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('Please set user account')}else {
                    if (!this.$g.regExp.username.test(value)) {
                        return Promise.reject('Letters + numbers only, 4-16 characters, and starts with a letter')}else {
                        if (this.usernameVerifyAction) {
                            this.$http.get(`The ${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('Please set user account')})}else return Promise.resolve()
                    }
                }
            }
            return {
                rules: {
                    username: [{
                        required: true.validator: checkUserName
                    }]
                }
            }
        }
    })
</script>

<! -- More usage... -->
Copy the code

Slider verification code component

<! -- Base effects... -->
<template>
    <mi-captcha></mi-captcha>
</template>

<! -- Custom background... -->
<template>
    <mi-captcha image="/@images/bg.jpg"></mi-captcha>
</template>

<! -- Custom theme colors... -->
<template>
    <mi-captcha theme-color="#2F9688"></mi-captcha>
</template>

<! -- More usage... -->
Copy the code

Pop-up components

<! -- Base effects... -->
<template>
    <a-button type="primary" @click="handleModal">Click to open the popover</a-button>
    <mi-modal v-model:visible="visible" title="Title">Custom 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>

<! - Animation effect of popover opening... -->
<template>
    <a-button type="ghost" @click="handleAnim('scale')">Scale (default)</a-button>
    <a-button type="ghost" @click="handleAnim('fade')">Fade</a-button>
    <! -... -->

    <mi-modal v-model:visible="visible" :animation="anim" title="Title">Custom 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>

<! -- More usage... -->
Copy the code

The framework at the same time encapsulates Cookie/Storage/Http and other common modules, load on demand/menu options/message center/Lenovo search/password setting/drop-down menu/bubble prompt box and other common components, is still under continuous development at this stage, welcome Star, mention Issues