龙空技术网

基于 Ant Design Vue 的 Vue3.0 框架

麦可易特网 5431

前言:

现时兄弟们对“ant design vue 布局”大约比较关怀,看官们都想要知道一些“ant design vue 布局”的相关内容。那么小编在网上收集了一些关于“ant design vue 布局””的相关文章,希望我们能喜欢,大家快快来了解一下吧!

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 区域。

// 直接<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>

登录页面

验证码

登录页面 - 手机端的显示效果

注册

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

注册页面

工具

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

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,再整理整理使用文档。

标签: #ant design vue 布局