miitvip vue admin manager

Maine admin Pro 3.x machen

Out-of-the-Box-Kombinationsvorlage-Framework für Mid- und Back-End-Managementsysteme, die auf Vue3.x basieren, basieren

(Eine UI-Lösung außerhalb des Boxs für Unternehmensanwendungen, die auf VUE3.x basieren.)

Beachten

3.x Version des npm Pakets wird in @miitvip/admin-pro umbenannt

2.x Version des npm Pakets makeit-admin-pro

3.x Versionserlebnis Adresse " https://admin.makeit.vip "

2.x Versionserfahrung " https://2x.makeit.vip "

um

Makeit Admin Pro ist ein UI 框架, das für Projekte mit mittlerer und Back-End-Management geeignet ist, die auf Vue 3.x + Vite 5.x + Ant Design Vue 4.x gebaut und entwickelt wurden.

? Das Framework verfügt über integrierte allgemeine Module wie Seitenlayout-/Registrierungsseite/Anmeldeseite/Passwort/Slider-Verifizierungscodekomponente/Search Lenovo-Komponente/dynamische Menükonfiguration/Berechtigungsverwaltungskonfiguration usw., die außerhalb des Feldes verfügbar sind .

? Die ursprüngliche Absicht, dieses Framework zu entwerfen, besteht darin , die grundlegende und doppelte Seitenkonstruktion im Middle- Register Backend Management -Projekt zu Forget und eine Reihe von Verhaltensweisen in der Seite in schwere Komponenten ( Login Komponente ≈ eine Seite ) zu verkapulieren, wie z Layout Ich hoffe, dass ich durch Komponenten Makeit Admin Pro Serie eine schnelle und effiziente Konstruktion hochwertiger Mittel- und Backend-Anwendungen anbieten kann. Es wird zu diesem Zeitpunkt noch verbessert und entwickelt und aktualisiert sich ständig ...

Reproduktionsdiagramm

Dunkles Thema

Leichtes Thema

Ändern Sie das Thema

Sammelmenü

Mobiltelefoneffekt

Globale Anwendung

✅theme Konfiguration ( css modules + css variables )

✅Internationalisierung ( vue-i18n )

✅ Cookies ( document.cookie )

✅ Speicher ( localStorage & sessionStorage )

✅ Anfrage ( axios )

✅ Global ( global configuration Konfiguration)

✅ Tools (Globale Funktionen der Global Functions Library global functions )

Grundkomponenten

✅Basic Layout ( Layout )?

✅Slider -Verifizierungscode ( Captcha )?

✅anchor Link ( Anchor )?

Clock Uhr ?

✅Dropdown -Menü ( Dropdown )?

✅Link Adresse ( Link )?

✅ Farbpalette ( Palette )

✅authorisierte Login ( Socialite )?

✅ Menünavigation ( Menu )

✅Populäre Fensteranimationseffekt ( Modal )?

✅Message Center ( Notice )?

✅Password -Einstellungen ( Password )?

✅Search -Komponenten ( Search )?

✅Code hervorheben ( Code )?

✅Title -Einstellungen ( Title )?

✅Quotes ( Quotes ) #️⃣

✅backtop Backtop

✅History Routing ( History )?

✅Image Loading ( ItemsImage )?

Typenetkomponenten

✅CopyWriting ( ItemsText )?

✅Picture Layout ( ItemsImage )

Wächterkomponenten

✅login Seite ( Login )?

✅ Registrationsseite ( Register )?

✅Forgot Passwort ( Forget )?

Erweiterte Anwendungen

✅schwagekonfiguration ( AppsLanguage ) ❄️

✅MEN Management (Dynamic Routing) ( AppsMenu )

Berechtigungskontrolle?

Anwendungsmanagement?

Reicher Texteditor?

Regionale Wahl?

Ausnahmeseite ( 404 )?

Persönliches Zentrum?

······.

Installieren und verwenden

npm i @miitvip/admin-pro

Globale Einführung

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

Last bei Bedarf

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

Grundlayout

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

Anmeldeseite

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

Registrierungsseite

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

Weitere Anwendungen

Weitere Inhalte und Verwendung finden Sie im Online -Beispiel: https://admin.makeit.vip