基于 Vue3 + Vite + Ant Design Vue 的中后台管理开箱即用模板框架

方案简介

Makeit Admin Pro 是一套基于 Vue 3.x + Vite 5.x + Ant Design Vue 4.x 构建的中后台管理系统 UI 框架，定位为开箱即用的组合模板框架。它将中后台项目里基础又重复的页面构建封装为重型组件（一个组件 ≈ 一个页面），如基础布局 Layout、登录 Login、注册 Register、忘记密码 Forget 等页面模块，让开发人员专注于业务开发。适合需要快速搭建企业级中后台应用的团队与个人开发者。NPM 包为 @miitvip/admin-pro，体验地址 https://admin.makeit.vip。

亮点与能力

• 统一风格的页面布局、登录、注册、忘记密码等页面模块
• 滑块验证码组件、搜索联想组件
• 动态菜单配置（动态路由）
• 主题配置（css modules + css variables），支持深色/浅色主题切换与收合菜单
• 国际化（vue-i18n）
• Cookie（document.cookie）与 Storage（localStorage & sessionStorage）封装
• Request（axios）统一请求封装
• 全局配置与全局公用函数库
• 移动端适配（手机效果演示）

前置要求

项目基于 Node.js 与 npm 生态开发（仓库 Topics 含 nodejs）。安装 NPM 包：

bash
npm i @miitvip/admin-pro

实施步骤

1. 安装依赖包

bash
npm i @miitvip/admin-pro

2. 全局引入（适合快速使用全部能力）

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

3. 按需加载（适合控制体积）

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

4. 配置动态菜单

使用 useStoreMenu 更新菜单数据，菜单项包含 name、path、meta（title、icon、tag 等）：

html

使用与配置要点

• 基础布局： 模板中直接使用，配合 useStoreMenu 配置菜单。
• 登录页面：，通过 action 指定登录接口地址。
• 注册页面： 同理作为守护组件使用。
• 深色/浅色主题可通过主题配置切换，菜单支持收合，且有移动端（手机）效果。
• 日常开发中可通过国际化（vue-i18n）配置语言，通过 axios 封装的 Request 与后端交互。

优缺点

• ✓ 开箱即用，免基础页面构建
• ✓ 内置布局、登录、验证码等重型组件
• ✕ 权限控制等高级模块尚未完成
• ✕ 文档相对较薄

出处

本方案挖掘自开源项目 lirongtong/makeit-admin-manager，方案内容与实施命令均来自其 README 原文。