今天给大家推荐一个我朋友开源的项目ant–pro。在2月份发布v1.0版本，到现在已经有一段时间了，并且也在上收获了100+star, 接下来笔者就来带大家一起介绍一下这款开源项目。
ant–pro 提供了一套开箱即用的后台管理模板, 使得我们可以快速搭建后台管理项目, 并且对Vue3, React, 都有对应版本的支持, 我们可以应用于任何框架的管理系统中.
姗姗来迟的2.0
已完成版本未完成部分
此次的版本更新，react版本难度不大，难的是vue版本，因为react对应的插件和第三方库，vue3.0有的没有，哎，其实也不是没有，是完全没有，因此开启了我们造轮子的想法。
温馨提示：如下代码片段只是演示，并不是完整的，完整的请查看ant–pro。
vue3-grid-
vue3-grid-借鉴了vue-grid-，react-grid-这两个库，并且我们在vue-grid-的基础上，全部用vue3+ts全部重写，使其支持vue3，，vue3-grid-可能有很多的bug，不过欢迎各位提，vue3-grid-文档地址。
// 如下代码来自ant-simple-pro
import { GridLayout, GridItem } from '@/components/grid-layout'
onComponentClick(e, item)" :data-i="item.i">
vue3–menu
vue3–menu是我们自已写的一款右键菜单组件，用vue3+ts进行编写,完美的支持vue3，，如若有bug，可以提，vue3–menu文档地址。
// 如下代码来自ant-simple-pro
import createContextMenu from '@/components/context-menu/create-context-menu'
setup() {
function onContainerRightClick(e: MouseEvent) {
createContextMenu({
event: e,
menus: [
{
label: '编辑',
handler() {
visible.value = true
}
},
{
label: '复制标题',
handler(item, event: MouseEvent) {
copy(form.title, event)
message.destroy()
message.success('复制成功，ctrl+v进行粘贴')
}
}
]
})
}
}
{{ data.title }}
{{ data.description }}
vue3-
vue3-是我们自已写的一款生成二维码的组件，用vue3+ts进行编写,完美的支持vue3，，如若有bug，可以提，vue3-地址文档。
// 如下代码来自ant-simple-pro
import VueQrcode from '@/components/qrcode'
vue3-color
vue3-color是我们借鉴了react-color的源码思想，用vue3+ts写的一款颜色选择器组件，完全支持vue3,ts,我们对外暴露了,等组件选择器，api和组件选择器，更react-color如出一辙，vue3-color文档地址。
// 如下代码来自ant-simple-pro
import { Sketch, Swatch, Chrome, Compact } from '@/components/vue-color'
vue3-
vue3-是我们写的一款图片上传剪切组件，vue3+ts编写，完美支持vue3,操作简单，vue3-文档地址。
// 如下代码来自ant-simple-pro
import CropImage from '@/components/cropper/index.vue'
vue3-
vue3-是我们写的一款按键监听插件，用vue3中的hooks思想，在配合-js而写的，操作简单，vue3-文档地址。
// 如下代码来自ant-simple-pro
import { useHotkeys } from '@/hooks'
useHotkeys('ctrl+d', event => {
event.preventDefault()
disabled.value = false
})
useHotkeys('ctrl+s', event => {
event.preventDefault()
disabled.value = true
})vue3-for-
vue3-for-是我们借鉴了for-而写出来的语法编辑器，for- 是一款 语法编辑器，虽然作者没怎么维护了，但是我们看中了for-简洁，适合二次开发的特点，所以用vue3+ts全部重写，可以认为vue3-for-是for-的vue版本，vue3-for-文档地址。
// 如下代码来自ant-simple-pro
import ForEditor from '@/components/for-editor'
vue3-
vue3-是我们借鉴了，且在的基础上用vue3+ts写的一个代码编辑器组件，使其完美支持vue3和操作简洁，vue3-文档地址。
// 如下代码来自ant-simple-pro
import Codemirror from '@/components/vue-codemirror/index.vue'
vue3-
vue3-是我们借鉴了和-vue这2个插件而写的一个富文本编辑器组件，虽然-vue现在已经支持vue3.0了，但是有些bug，我们在这二者之间，再次进行封装，使其操作更加简洁，vue3-文档地址。
// 如下代码来自ant-simple-pro
import TinymceEditor from '@/components/tinymce/index.vue'
emoji-mart-vue
emoji-mart-vue并不是我们开发的，而且emoji-mart-vue也支持vue3.0,只是缺少ts声明，所以我们对emoji-mart-vue新增了ts版本的类型声明文件 地址。
// 如下代码来自ant-simple-pro
import { Picker, EmojiIndex } from 'vue-emoji-mart'
总结
如上所述的这些vue3组件或者插件，基本上是我们自已编写开发和维护的，所以如果有什么bug也是很正常的，我们很希望大家能够给我们提。
我们在vue版本中除了上面的这些组件外，我们还编写了很多小组件，如图片上传组件,，，svg组件等等，当然我们也编写了一些hooks，具体的请查看此项目。
我们都是一群很菜的码农，如果有些不好的地方，还请各位多多指教，我们也想为vue3社区和antd社区献出一份微薄之力，同时也非常感谢我的好朋友；永豪为vue版本做出的重大贡献。
ant–pro会持续更新，迭代，不用担心项目没人维护的问题。
项目地址：ant–pro。文档地址：ant–pro-必看。
温馨提示：ant–pro-文档，可能有些案例用法没有同步进来，我们会在后续同步更新文档的。
最后
如果想了解更多H5游戏, ，node，gulp，css3，，，数据可视化等前端知识和实战，欢迎在《趣谈前端》一起学习讨论，共同探索前端的边界。
———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，永久会员只需109元，全站资源免费下载 点击查看详情
站 长 微 信： nanadh666
