miitvip vue admin manager

Makeit Admin Pro 3.x

Из-за коробки структура комбинированного шаблона для систем управления средним и бэк-эндом, основанными на Vue3.x

(Решение внедорожного пользовательского интерфейса для корпоративных приложений, построенных на VUE3.X)

Уведомление

3.x пакета npm будет переименована в @miitvip/admin-pro

2.x версии npm makeit-admin-pro здесь

3.x версия Adder " https://admin.makeit.vip "

2.x версия Адрес " https://2x.makeit.vip "

о

Makeit Admin Pro это UI 框架, подходящая для проектов управления средним и бэк-эндом, построенным и разработанным на основе Vue 3.x + Vite 5.x + Ant Design Vue 4.x

? Фреймворк имеет встроенные общие модули, такие как страница страницы/страница регистрации/страница входа в систему/Забывший код кода пароля/ползунок компонент/поиск компонента Lenovo/Динамический конфигурация меню/конфигурация управления разрешениями и т. Д., Которые доступны из поля .

? Первоначальное намерение проектирования этой структуры состоит в том, чтобы избежать основной и дублированной конструкции страниц в проекте управления средним и бэкэнд, а также инкапсулировать серию поведения на странице в тяжелые компоненты ( один компонент ≈ Одна страница ), такие как базовая Layout макета, вход в систему, Login / Register / Forget пароль и другие модули на других страницах, так что разработчики могут больше сосредоточиться на разработке бизнес -контента без замыкания. Я надеюсь обеспечить быстрое и эффективное строительство высококачественных средних и бэкэнд-применений с помощью компонентов серии Makeit Admin Pro . Это все еще улучшается на этом этапе и постоянно разрабатывает и обновляет ...

Диаграмма воспроизведения

Темная тема

Легкая тема

Изменить тему

Меню коллекции

Эффект мобильного телефона

Глобальное приложение

✅teme Configuration ( css modules + css variables )

✅interationalization ( vue-i18n )

✅ cookie ( document.cookie )

✅ Хранение ( localStorage & sessionStorage )

✅ Запрос ( axios )

✅ Глобальная ( global configuration конфигурация)

✅ Инструменты (Глобальные функции Глобальных функций) global functions )

Основные компоненты

✅basic Mayout ( Layout )?

✅slider Verification Code ( Captcha )?

✅anchor ссылка ( Anchor )?

Clock часы ?

✅dropdown Меню ( Dropdown )?

✅link адрес ( Link )?

✅ Панель цветовой палитры ( Palette )

✅authorized Login ( Socialite )?

✅ Навигация по меню ( Menu )

✅popular Window Animation эффект ( Modal )?

✅message Center ( Notice )?

✅Password Настройки ( Password )?

✅search Components ( Search )?

✅code выделение ( Code )?

✅ Настройки настройки ( Title )?

✅quotes ( Quotes ) #⃣

✅backTop Backtop

«История маршрутизации ( History )?

✅image Загрузка ( ItemsImage )?

Набора компонентов

✅copyWriting ( ItemsText )?

✅picture Mayout ( ItemsImage )

Компоненты опекуна

✅login страница ( Login )?

‘ Страница регистрации ( Register )?

✅forgot пароль ( Forget )?

Расширенные приложения

✅language Configuration ( AppsLanguage ) ❄

✅ Менян управление (динамическая маршрутизация) ( AppsMenu )

Контроль разрешения?

Управление приложениями?

Богатый текстовый редактор?

Региональный выбор?

Страница исключений ( 404 )?

Личный центр?

······

Установить и использовать

npm i @miitvip/admin-pro

Глобальное введение

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

Нагрузка на спрос

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

Основная планировка

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

Страница входа в систему

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

Регистрационная страница

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

Больше приложений

Для получения дополнительного контента и использования, пожалуйста, проверьте онлайн -пример: https://admin.makeit.vip