miitvip vue admin manager

Makeit Admin Pro 3.x

基於Vue3.x構建的適用於中後台管理系統的開箱即用的組合模板框架

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

注意

3.x版本的npm包更名為@miitvip/admin-pro

2.x版本的npm包在這裡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 框架。

? 框架內置了統一風格的頁面佈局/ 註冊頁面/ 登錄頁面/ 忘記密碼/ 滑塊驗證碼組件/ 搜索聯想組件/ 動態菜單配置/ 權限管理配置等常用模塊，開箱即用。

? 設計這套框架的初衷是為了免去中後台管理項目中基礎又重複的頁面構建，將頁面內的一系列行為進行封裝形成重型組件（一個組件≈ 一個頁面），如基礎佈局Layout ，登錄Login / 註冊Register / 忘記密碼Forget等頁面模塊，讓開發人員能更加專注於業務內容的開發，無需花費過多的時間在基礎構建上，希望可以通過Makeit Admin Pro系列組件提供快速高效的搭建高質量的中後台應用，現階段還在不斷完善，持續開發更新中...

效果圖

深色主題

淺色主題

更換主題

收合菜單

手機效果

全局應用

✅主題配置( css modules + css variables )

✅國際化( vue-i18n )

✅ Cookie ( document.cookie )

✅ Storage ( localStorage & sessionStorage )

✅ Request ( axios )

✅ Global ( 全局配置global configuration )

✅ Tools ( global functions庫global functions )

基礎組件

✅基礎佈局( Layout ) ?

✅滑塊驗證碼( Captcha ) ?

✅錨點鏈接( Anchor ) ?

✅在線鐘錶( Clock ) ?

✅下拉菜單( Dropdown ) ?

✅鏈接地址( Link ) ?

✅調色面板( Palette )

✅授權登錄( Socialite ) ?

✅菜單導航( Menu )

✅彈窗動效( Modal ) ?

✅ Notice中心( Notice ) ?

✅ Password設置( Password ) ?

✅ Search組件( Search ) ?

✅代碼高亮( Code ) ?

✅標題設置( Title ) ?

✅引用說明( Quotes ) #️⃣

✅回到頂部( Backtop ) ?

✅ History路由( History ) ?

✅圖片加載( ItemsImage ) ?

排版組件

✅文案排版( ItemsText ) ?

✅圖片排版( ItemsImage )

守護組件

✅ Login頁面( Login ) ?

✅ Register頁面( Register ) ?

✅忘記密碼( 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