miitvip vue admin manager

Makeit Admin Pro 3.x

Vue3.x 기반으로 구축 된 중간 및 백엔드 관리 시스템을위한 상자 외 조합 템플릿 프레임 워크

(vue3.x에 구축 된 엔터프라이즈 애플리케이션을위한 박스 외 UI 솔루션)

알아채다

npm 패키지의 3.x 버전은 @miitvip/admin-pro 로 이름이 바뀌 었습니다.

npm 패키지의 2.x 버전은 여기에 makeit-admin-pro

3.x 버전 경험 주소 " https://admin.makeit.vip "

2.x 버전 경험 주소 " https://2x.makeit.vip "

~에 대한

Makeit Admin Pro Vue 3.x + Vite 5.x + Ant Design Vue 4.x 기반으로 구축 및 개발 된 중간 및 백엔드 관리 프로젝트에 적합한 UI 框架입니다.

? 프레임 워크에는 페이지 레이아웃/등록 페이지/로그인 페이지/비밀번호/슬라이더 확인 코드 구성 요소/검색 Lenovo 구성 요소/동적 메뉴 구성/허가 관리 구성 등과 같은 공통 모듈이 내장되어 있으며 상자에서 사용할 수 있습니다 .

? 이 프레임 워크를 설계하려는 원래 의도는 중간 및 백엔드 관리 프로젝트에서 기본 및 중복 페이지 구성을 피하고 기본 레이아웃 레이아웃, 로그인 / Login / 비밀번호 Forget 버리고 다른 페이지 모듈과 같은 기본 레이아웃 Layout , 로그인 / Register 및 기타 페이지 모듈과 같은 페이지의 일련의 동작을 무거운 구성 요소 ( 한 구성 요소 ≈ 한 페이지 )로 캡슐화하는 것입니다. Makeit Admin Pro Series 구성 요소를 통해 고품질 중간 및 백엔드 애플리케이션을 빠르고 효율적으로 구성하고 싶습니다. 이 단계에서 여전히 개선되고 있으며 지속적으로 개발하고 업데이트하고 있습니다 ...

복제 다이어그램

어두운 테마

가벼운 테마

테마를 변경하십시오

컬렉션 메뉴

휴대폰 효과

글로벌 응용 프로그램

seme 구성 ( css modules + css variables )

국제화 ( vue-i18n )

✅ 쿠키 ( document.cookie )

✅ 스토리지 ( localStorage & sessionStorage )

✅ 요청 ( axios )

✅ 글로벌 ( global configuration 구성)

✅ 도구 (글로벌 기능 도서관 global functions )

기본 구성 요소

✅ 기생충 레이아웃 ( Layout )?

Slider Verification Code ( Captcha )?

율 링크 ( Anchor )?

Clock 클록 ?

dropdown 메뉴 ( Dropdown )?

✅ 링크 주소 ( Link )?

✅ 컬러 팔레트 패널 ( Palette )

짐서 로그인 ( Socialite )?

✅ 메뉴 탐색 ( Menu )

popular 창문 애니메이션 효과 ( Modal )?

message 센터 ( Notice )?

password 파워 설정 ( Password )?

search 구성 요소 ( Search )?

code 코드 강조 표시 ( Code )?

wittle 설정 설정 ( Title )?

✅ quotes ( Quotes ) #ØNCED

backtop Backtop

역사 라우팅 ( History )?

wimage 로딩 ( ItemsImage )?

조판 구성 요소

copywriting ( ItemsText )?

picture 레이아웃 ( ItemsImage )

가디언 구성 요소

login 페이지 ( Login )?

✅ 등록 페이지 ( Register )?

postgot 비밀번호 ( Forget )?

고급 응용 프로그램

✅ 언어 구성 ( 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