vue3 main.js引入 axios_基于 Ant Design Vue 的 Vue3.0 框架

Makeit-Admin-Pro，是基于 Vue 3.0 + Vite 开发的一套适合中后台管理项目的集成框架，依赖于阿里的 Ant Design Vue 2.x 版本，内置了登录页面 / 注册页面 / 验证码 / 页面布局等常用模块，开箱即用，现阶段还在持续更新中 ...

开发这套统一的中后台管理项目的 UI 框架，主要就是为了免去那些没完没了的后台项目中的基础构建，通过 npm 安装引入的方式，以组件引入的形式，渲染想要的但又在无数个项目中重复的基础页面。

现阶段还在持续开发完善中，所以暂时 还没有部署 Demo 及撰写相关的说明或使用文档。Github 地址附加在最后的扩展链接中，有需要的可以看看，也可以在 npm 的官网中搜索 makeit-admin-pro 查看

安装

直接通过 npm 命令安装即可。

// 安装
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)

布局

页面布局采用常用的左侧菜单 + 顶部导航 + 内容区域，引入布局组件后可以直接进行 vue 单页面开发，内容会直接嵌入到 Content 区域。

// 直接
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'}
      }
    }, ...]
  }
})

登录

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

// 未开启验证码
mi-login>template>// 开启验证码