# 表单设计器 k-form-design
<p align="center">
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/vueComponent/ant-design-vue">
<img src="https://img.shields.io/badge/Ant%20Design%20Vue-1.5.1-blue" alt="ant-design-vue">
</a>
<a href="https://github.com/Kchengz/k-form-design/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
</p>
![](http://cdn.kcz66.com/demo.gif)
<b>感谢您的支持!由于已经将项目的重心转向 Vue 3 版本设计器,对于k-form-design项目决定暂停维护更新,欢迎您使用全新的 Vue3 版本设计器[ epic-designer](https://gitee.com/kcz66/epic-designer),以便享受到更多优化和功能!</b>
## 简介
基于vue和ant-design-vue实现的表单设计器,样式使用less作为开发语言,主要功能是能通过简单操作来生成配置表单,生成可保存的JSON数据,并能将JSON还原成表单,使表单开发更简单更快速
- [github](https://github.com/Kchengz/k-form-design)
- [码云](https://gitee.com/kcz66/k-form-design)
- [项目预览](http://cdn.kcz66.com/k-form-design.html)
- [项目文档 Github Pages](https://kchengz.github.io/k-form-design/)
- [项目文档 Gitee Pages 较快](http://kcz66.gitee.io/k-form-design/#/)
## 特性
- 可视化配置页面
- 提供栅格、表格等布局
- 布局嵌套使用
- 提供预览、保存、生成json、生成可执行代码等操作
- 支持表单验证
- 快速获取表单数据
- 自定义组件插入
- 自定义主题色
## 组件
- KFormDesign 表单设计器(基于可视化操作快速设计出表单页面,生成配置json或页面)
- KFormBuild 表单构建器(根据设计器中获取的配置json数据,快速构建出表单页面)
## 安装
> 安装表单设计器
```cmd
npm i k-form-design --save
# OR
yarn add k-form-design
```
> 安装 ant-design-vue UI ,推荐 vue2 版本最新的 1.7.8版本
```cmd
npm i ant-design-vue@1.7.8 --save
# OR
yarn add ant-design-vue@1.7.8
```
###
## 引入组件
``` javascript
// 在main.js引入
// 注:useComponents 需放最上面,优先注册懒加载组件
import { useAntd } from 'k-form-design/packages/core/useComponents'
import KFormDesign from 'k-form-design/packages/use.js'
import 'k-form-design/lib/k-form-design.css'
useAntd(Vue)
Vue.use(KFormDesign)
```
## 使用组件
``` html
<template>
<div>
<k-form-design />
</div>
</template>
```
## 交流
点击链接加入qq群聊
- [【k-form-desgin交流群:1020643215】](https://jq.qq.com/?_wv=1027&k=5BeoFAr)
- [【k-form-desgin交流二群:727396923】](https://jq.qq.com/?_wv=1027&k=uYyqQPlQ)
License
---
[MIT](https://github.com/Kchengz/k-form-design/blob/master/LICENSE)
Copyright (c) 2019 Kchengz
没有合适的资源?快使用搜索试试~ 我知道了~
基于vue Ant-Design 的表单设计器,快速开发.zip
共153个文件
vue:38个
js:37个
md:23个
需积分: 5 0 下载量 63 浏览量
2024-05-15
12:49:29
上传
评论
收藏 1.44MB ZIP 举报
温馨提示
1、概述 1、若只写个vue的简单demo程序,那么只需在html中引入vue.js即可,没必要安装node、npm、webpack以及Vue-cli 2、如果开发大型项目,就需要vue-cli完成项目目录结构 部署 热加载等功能 3、因为vue-cli和webpack一样也是一个工具,会依赖于webpack生成一套的webpack配置,所以要使用vue-cli之前,本地要有webpack(而webpack安装运行依赖node环境) 4、所以使用脚手架vue-cli创建完成结构的vue项目首先需要安装node以及webpack 2、安装node,以及npm 首先我们上node.js官网(https://nodejs.org/zh-cn/),下载最新的长期版本,直接运行安装完成之后,我们就已经具备了node和npm的环境(安装node同时会安装node) C:\Users\HXB101>node -v v12.18.3 C:\Users\HXB101>npm -v 6.14.6 默认npm安装全局模块所在路径以及缓存cache的路径在C:\Users\用户名\AppData\
资源推荐
资源详情
资源评论
收起资源包目录
基于vue Ant-Design 的表单设计器,快速开发.zip (153个子文件)
vue.css 13KB
demo.css 8KB
iconfont.css 2KB
.eslintignore 18B
2-1584793506316.gif 85KB
444.gif 84KB
2-1584791884885.gif 83KB
2-1584792430622.gif 65KB
2-1584791416791.gif 56KB
2-1584794814249.gif 40KB
2-1584792004589.gif 36KB
2-1584791563798.gif 36KB
2.gif 36KB
2-1584791471830.gif 36KB
1-1585492231794.gif 29KB
.gitignore 218B
demo_index.html 40KB
demo.html 4KB
form-build2.html 3KB
form-build1.html 2KB
index.html 2KB
index.html 636B
favicon.ico 9KB
favicon.ico 9KB
12312.jpg 47KB
docsify.min.js 157KB
iconfont.js 30KB
formItemsConfig.js 15KB
useComponents.js 4KB
mini.js 3KB
NodeSchema.js 3KB
Revoke.js 2KB
preUseAntd.js 2KB
preUseComponents.js 2KB
main.js 2KB
antdStyle.js 1KB
index.js 1KB
LazyLoadTick.js 1KB
jsonFormat.js 819B
PluginManager.js 772B
use.js 674B
vue.config.js 659B
index.js 576B
index.js 555B
modal.js 265B
babel.config.js 233B
index.js 214B
index.js 203B
index.js 198B
index.js 193B
index.js 188B
index.js 158B
index.js 87B
index.js 70B
index.js 70B
index.js 67B
index.js 64B
index.js 61B
index.js 61B
index.js 57B
index.js 55B
index.js 55B
iconfont.json 7KB
package.json 2KB
form-design.less 21KB
k-editor.less 3KB
k-table.less 761B
k-slider.less 140B
k-form-design.less 136B
LICENSE 1KB
yarn.lock 377KB
build.md 26KB
design.md 8KB
CHANGELOG.md 3KB
form.md 3KB
cascader.md 3KB
README.md 3KB
README.md 3KB
treeSelect.md 3KB
start.md 2KB
nodeSchema.md 2KB
customize-theme.md 2KB
custom.md 2KB
soundCode.md 2KB
config.md 2KB
editor.md 932B
_coverpage.md 908B
README.md 881B
_sidebar.md 789B
vue-cli-ie.md 669B
README.md 599B
communication.md 242B
donation.md 112B
README.md 0B
.nojekyll 0B
.npmignore 290B
image-20200329202427369.png 61KB
image-20200411184121347.png 61KB
image-20200329173941524.png 61KB
image-20200411183148543.png 60KB
共 153 条
- 1
- 2
资源评论
野生的狒狒
- 粉丝: 2820
- 资源: 2233
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 3层别墅图纸D086-三层-15.11&16.30米-施工图.dwg
- TCP 三次握手(Three-Way Handshake) SYN 握手:客户端发送一个带有 SYN(同步序列编号)标志的 T
- 农村小院别墅图D085-三层-15.50&13.80米-施工图.dwg
- tcp三次握手四次挥手
- tcp三次握手四次挥手
- 三层农村小别墅图纸D084-三层-14.00&13.90米-施工图.dwg
- 三层独栋别墅编号D083-三层-14.60&11.50米-施工图.dwg
- 3层独栋别墅D082-三层-10.40&15.90米-施工图.dwg
- 3层独栋别墅编号D081-三层-11.00&11.60米-施工图.dwg
- 3层独栋别墅占地面积140平方米别墅结构.dwg
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功