miitvip vue admin manager

Makeit Admin Pro 3.x

Estrutura de modelo de combinação pronta para uso para sistemas de gerenciamento intermediários e de back-end, construídos com base no Vue3.x

(Uma solução de interface do usuário fora da caixa para aplicativos corporativos criados no VUE3.x)

Perceber

3.x do pacote npm é renomeada para @miitvip/admin-pro

2.x do pacote npm makeit-admin-pro aqui

Endereço da experiência da versão 3.x " https://admin.makeit.vip "

2.x versão Experiência Endereço " https://2x.makeit.vip "

sobre

Makeit Admin Pro é uma UI 框架adequada para projetos de gerenciamento de médio e back-end, construídos e desenvolvidos com base no Vue 3.x + Vite 5.x + Ant Design Vue 4.x

? O Framework possui módulos comuns integrados, como Layout/Página de Página/página de registro/página de login/Esqueceu a senha/código de verificação do controle deslizante Componente/pesquisa componente Lenovo/Configuração do Menu Dinâmico/Configuração de Gerenciamento de Permissão, etc., que estão disponíveis fora da caixa .

? A intenção original de projetar essa estrutura é evitar a construção de páginas básica e duplicada no projeto de gerenciamento intermediário e de back -end e encapsular uma série de comportamentos na página em componentes pesados ( um componente ≈ uma página ), como o layout básico, o Layout , Login / Register / Forget a senha e outros módulos de página, para que os desenvolvedores possam focar mais o conteúdo dos desenvolvedores. Espero fornecer uma construção rápida e eficiente de aplicativos médios e de back-end de alta qualidade por meio de componentes Makeit Admin Pro Series. Ainda está sendo melhorado nesta fase e está constantemente desenvolvendo e atualizando ...

Diagrama de reprodução

Tema sombrio

Tema leve

Mude o tema

Menu de coleção

Efeito do telefone celular

Aplicação global

✅ Configuração do tempo ( css modules + css variables )

✅internationalization ( vue-i18n )

✅ Cookies ( document.cookie )

✅ Armazenamento ( localStorage & sessionStorage )

✅ Solicitação ( axios )

✅ Global (configuração global configuration )

✅ Tools (Funções Globais da Biblioteca global functions )

Componentes básicos

Layout Basico ( Layout )?

Code Código de verificação do lider ( Captcha )?

✅anchor link ( Anchor )?

Clock Clock ?

✅DROPDOWN MENU ( Dropdown )?

✅Link Endereço ( Link )?

✅ Painel da paleta de cores ( Palette )

Login Authorized Login ( Socialite )?

✅ Navegação de menu ( Menu )

✅ Efeito de animação da janela popular ( Modal )?

✅ Message Center ( Notice )?

✅PASPWORD Settings ( Password )?

✅ Componentes de pesquisa ( Search )?

✅Codes Destacing ( Code )?

✅ Configurações do título ( Title )?

"Quotes ( Quotes ) #️⃣

✅backtop Backtop

✅ Roteamento da história ( History )?

✅Mage Carreging ( ItemsImage )?

Componentes de tipografia

✅CopyWriting ( ItemsText )?

Layout Picture Layout ( ItemsImage )

Componentes guardiões

✅ Login Page ( Login )?

✅ Página de registro ( Register )?

✅forgot senha ( Forget )?

Aplicações avançadas

✅ Configuração da linguagem ( AppsLanguage ) ❄️

✅ Management Management (Routing Dynamic) ( AppsMenu )

Controle de permissão?

Gerenciamento de aplicativos?

Editor de texto rico?

Escolha regional?

Página de exceção ( 404 )?

Centro pessoal?

······

Instalar e usar

npm i @miitvip/admin-pro

Introdução global

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

Carga sob demanda

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

Layout básico

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

Página de login

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

Página de inscrição

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

Mais aplicações

Para mais conteúdo e uso, verifique o exemplo online: https://admin.makeit.vip