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>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\'}
      }
    }, ...]
  }
})

注册

注册效果与登录的差不多，加了一些内容输入时的弹窗实时提醒信息。

注册页面

工具

另外也封装了不少基础内容，大致的列一下：

Storage 存储。暴露的变量为 $storage，可直接通过 this.$storage.get 等形式进行取值 / 设定值等。
Cookie 存储。暴露的变量为 $cookie，方法也与 storage 类似，get / set / del 等。
Http 工具。暴露的变量为 $http，内含常用的 get / post / put / patch / delete / options / head 等常用方法，通过 this.$http.get 等形式直接调用（基于 axios 封装）。
Api 类。该类主要是封装 API，加版本号等操作，可直接通过 this.$g.api 进行赋值，通过 this.api.login 形式获取相应 API 即可。
Tools 工具类。暴露的变量为 $tools，内含 on 事件绑定 / off 事件解绑等常用的工具类函数。通过 this.$tools.on(…) 形式进行调用。
Config 配置。暴露的变量为 $g，配置全局变量，内含常用的正则，站点标题，站点描述等公用常量。

总结

老早在 Vue 2.x 版本的时候，结合 view-design 组件库，用 template 的形式集成过一些基础框架的内容，只是一直没有再去整理，这次恰好 Vue 3.x 版本也出来了，也就直接用 Vue 3.x 版本 Vite TSX 进行整理开发了，也当是初步探索 Vue 3.x 的开发。最近有时间的时候，大部分都是用于这个框架的组件开发了，现在还在持续开发中，等想要做的组件或基础功能完善了之后，再整 Demo，再整理整理使用文档。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/soft/15954.html

基于Ant Design Vue的Vue3.0框架

安装

布局

菜单

登录

注册

工具

总结

发表评论

基于Ant Design Vue的Vue3.0框架

安装

布局

菜单

登录

注册

工具

总结

相关推荐

发表评论