// 安装 npm i makeit-admin-pro  // 使用 import { createApp } from 'vue' import MakeitAdminPro from 'makeit-admin-pro' import 'makeit-admin-pro/dist/miitvip.min.css' createApp(App).use(MakeitAdminPro)

// 直接 <template>     <mi-layout></mi-layout> </template>

菜单

左侧菜单通过全局变量 $g 进行配置。也就是说，菜单 menu 完全可以根据权限系统配置，通过接口等的方式获取后再赋值形成菜单列表，菜单的字段属性符合 RouteRecordRaw 即可，其中内含的 meta 属性，自定义性质比较强，所以 icon / tag 等都包含在这个属性内进行判断渲染了。

import { defineComponent, createVNode } from 'vue' import { ThunderboltOutlined } from '@ant-design/icons-vue'  export default defineComponent({   created() {     this.$g.menus.items = [{       name: 'start',       path: '/start',       meta: {         title: '快速上手',         subTitle: 'Getting Start',         icon: createVNode(ThunderboltOutlined),         tag: {color: '#f50', content: 'Hot'}       }     }, ...]   } })

登录

登录也非常简单，引入组件即可。不过现在定制性并没有那么好，背景图，表单等可以通过传参的形式自行定制，但登录页面的布局不支持定制，如下图所示。

// 未开启验证码 <template>     <mi-login action="v1/login"></mi-login> </template>  // 开启验证码 <template>     <mi-login action="v1/login" captcha-init-action="v1/captcha/init" captcha-verify-action="v1/captcha/verification"></mi-login> </template>

登录页面