miitvip vue admin manager

Makeit Admin Pro 3.x

Out-of-the-box combination template framework for mid- and back-end management systems built based on Vue3.x

(An out-of-box UI solution for enterprise applications built on Vue3.x )

Notice

3.x version of npm package is renamed to @miitvip/admin-pro

2.x version of npm package makeit-admin-pro here

3.x version experience address " https://admin.makeit.vip "

2.x version experience address " https://2x.makeit.vip "

about

Makeit Admin Pro is a UI 框架suitable for mid- and back-end management projects built and developed based on Vue 3.x + Vite 5.x + Ant Design Vue 4.x

? The framework has built-in common modules such as page layout/registration page/login page/forgot password/slider verification code component/search Lenovo component/dynamic menu configuration/permission management configuration, etc., which are available out of the box .

? The original intention of designing this framework is to avoid the basic and duplicate page construction in the middle and backend management project, and to encapsulate a series of behaviors in the page into heavy components ( one component ≈ one page ), such as basic layout Layout , login, Login / Register / Forgot password Forget and other page modules, so that developers can focus more on the development of business content without spending too much time on basic construction. I hope to provide fast and efficient construction of high-quality middle and backend applications through Makeit Admin Pro series components. It is still being improved at this stage and is constantly developing and updating...

Reproduction diagram

Dark theme

Light theme

Change the theme

Collection menu

Mobile phone effect

Global application

✅Theme configuration ( css modules + css variables )

✅Internationalization ( vue-i18n )

✅ Cookies ( document.cookie )

✅ Storage ( localStorage & sessionStorage )

✅ Request ( axios )

✅ Global ( global configuration configuration)

✅ Tools (global functions library global functions )

Basic Components

✅Basic layout ( Layout )?

✅Slider verification code ( Captcha )?

✅Anchor link ( Anchor )?

Clock Clock ?

✅Dropdown menu ( Dropdown )?

✅Link address ( Link )?

✅ Color palette panel ( Palette )

✅Authorized login ( Socialite )?

✅ Menu Navigation ( Menu )

✅Popular window animation effect ( Modal )?

✅Message Center ( Notice )?

✅Password settings ( Password )?

✅Search components ( Search )?

✅Code highlighting ( Code )?

✅Title settings ( Title )?

✅Quotes ( Quotes ) #️⃣

✅Backtop Backtop

✅History Routing ( History )?

✅Image loading ( ItemsImage )?

Typesetting components

✅Copywriting ( ItemsText )?

✅Picture layout ( ItemsImage )

Guardian Components

✅Login page ( Login )?

✅Registration page ( Register )?

✅Forgot password ( Forget )?

Advanced Applications

✅Language Configuration ( AppsLanguage ) ❄️

✅Men Management (Dynamic Routing) ( AppsMenu )

Permission control?

Application management?

Rich text editor?

Regional choice?

Exception page ( 404 )?

Personal center?

······

Install and use

npm i @miitvip/admin-pro

Global introduction

 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' ) 

Load on demand

 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' ) 

Basic layout

 < 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 > 

Login page

< template >
    < mi-login action = " /v1/login " />
</ template >

Registration page

< template >
    < mi-register action = " /v1/register " />
</ template >

More applications

For more content and usage, please check the online example: https://admin.makeit.vip