From deb8ed31c35b1e8c276df610f8b899898d724832 Mon Sep 17 00:00:00 2001 From: vdpAdmin Date: Sun, 30 Jan 2022 16:07:28 +0800 Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AEbuild=E7=94=9F=E4=BA=A7?= =?UTF-8?q?=E6=89=93=E5=8C=85=E5=8F=82=E6=95=B0=EF=BC=8C=E6=9C=AA=E5=85=A8?= =?UTF-8?q?=E9=83=A8=E8=A7=A3=E5=86=B3=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 188 +++++++++++++----- index.html | 2 +- package.json | 1 + src/components/code-editor/index.vue | 5 - src/components/form-designer/designer.js | 2 - .../container-widget/table-cell-widget.vue | 2 - .../form-widget/field-widget/fieldMixin.js | 28 +-- .../container-item/sub-form-item.vue | 1 - src/components/form-render/index.vue | 12 -- vite-lib-render.config.js | 3 +- vite-lib.config.js | 2 +- vite.config.js | 56 +++++- 12 files changed, 188 insertions(+), 114 deletions(-) diff --git a/README.md b/README.md index 4578a7b..81f039d 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,139 @@ -# Variant Form 3 Beta For Vue 3.x -#### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。 +# Variant Form 3 For Vue 3.x +#### 一款高效的Vue 3低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。 -### 友情链接 -[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3） - -[REBUILD](https://getrebuild.com/) —— 高度可定制化的企业管理系统 - -### 功能一览 -``` -> 拖拽式可视化表单设计； -> 支持PC、Pad、H5三种布局； -> 支持运行时动态加载表单； -> 支持表单复杂交互控制； -> 支持自定义CSS样式； -> 支持自定义校验逻辑； -> 支持国际化多语言； -> 可导出Vue组件、HTML源码； -> 可导出Vue的SFC单文件组件； -> 支持开发自定义组件； -> 支持响应式自适应布局； -> 支持VS Code插件； -> 更多功能等你探究...； -``` - - -### 安装依赖 -``` -npm install --registry=https://registry.npm.taobao.org -``` - -### 开发调试 -``` -npm run serve -``` - -### 生产打包 -``` -npm run build -``` - -### 表单设计器 + 表单渲染器打包 -``` -npm run lib -``` - -### 表单渲染器打包 -``` -npm run lib-render -``` - -### 浏览器兼容性 -```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Firefox，Safari``` +![image](https://vform2021.oss-cn-beijing.aliyuncs.com/vform_demo.gif?versionId=CAEQGBiBgIDst4zj4hciIDQyYTkyOGY1ZGJiODQ4YTk5ZjkxMGIwMDY0MmY2M2Ri)
+ +#### 立即体验 + [在线Demo](http://120.92.142.115/vform3/) + + ### 友情链接 + [Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3） + + [REBUILD](https://getrebuild.com/) —— 高度可定制化的企业管理系统 + + ### 功能一览 + ``` + > 拖拽式可视化表单设计； + > 支持PC、Pad、H5三种布局； + > 支持运行时动态加载表单； + > 支持表单复杂交互控制； + > 支持自定义CSS样式； + > 支持自定义校验逻辑； + > 支持国际化多语言； + > 可导出Vue组件、HTML源码； + > 可导出Vue的SFC单文件组件； + > 支持开发自定义组件； + > 支持响应式自适应布局； + > 支持VS Code插件； + > 更多功能等你探究...； + ``` + + ### 浏览器兼容性 + ```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Firefox，Safari``` + +
+ + ### 跟Vue 3.x项目集成 + +
+ + #### 1. 安装包 + ```bash + npm i vform3-builds + ``` + 或 + ```bash + yarn add vform3-builds + ``` + +
+ + #### 2. 引入并全局注册VForm 3组件 + ``` + import { createApp } from 'vue' + import App from './App.vue' + + import ElementPlus from 'element-plus' //引入element-plus库 + import 'element-plus/dist/index.css' //引入element-plus样式 + + import VForm3 from 'vform3-builds' //引入VForm 3库 + import 'vform3-builds/dist/designer.style.css' //引入VForm3样式 + + const app = createApp(App) + app.use(ElementPlus) //全局注册element-plus + app.use(VForm3) //全局注册VForm 3(同时注册了v-form-designer和v-form-render组件) + + app.mount('#app') + ``` + +
+ + #### 3. 在Vue 3.x模板中使用表单设计器组件 + ```bash + + + + + + ``` + +
+ + #### 4. 在Vue 3.x模板中使用表单渲染器组件 + ```html + + + ``` + +
+ + ### 资源链接 +
+ + 文档官网：https://www.vform666.com/ + + 在线演示：http://120.92.142.115/vform3/ + + Github仓库：https://github.com/vform666/variant-form3-vite + + Gitee仓库：https://gitee.com/vdpadmin/variant-form3-vite + + 更新日志：https://www.vform666.com/pages/changelog/ + + 技术交流群：微信搜索“vformAdmin”，或者扫如下二维码加群 + + ![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vx-qrcode-242.png) diff --git a/index.html b/index.html index 13a52ee..8ee72a1 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Variant Form + Variant Form 3
diff --git a/package.json b/package.json index 3da2efc..23365bb 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "ace-builds": "^1.4.12", "babel-eslint": "^10.1.0", "mvdir": "^1.0.21", + "rollup-plugin-external-globals": "^0.6.1", "rollup-plugin-visualizer": "^5.5.2", "sass": "^1.45.0", "vite": "^2.7.2", diff --git a/src/components/code-editor/index.vue b/src/components/code-editor/index.vue index b8f99cf..cbfa8dc 100644 --- a/src/components/code-editor/index.vue +++ b/src/components/code-editor/index.vue @@ -78,11 +78,6 @@ //编辑时同步数据 this.aceEditor.getSession().on('change',(ev)=>{ - /* - //this.$emit('update:value', this.aceEditor.getValue()) // 触发更新事件, 实现.sync双向绑定！！ - this.$emit('input', this.aceEditor.getValue()) - */ - this.$emit('update:modelValue', this.aceEditor.getValue()) }) }, diff --git a/src/components/form-designer/designer.js b/src/components/form-designer/designer.js index 4402f89..06590b7 100644 --- a/src/components/form-designer/designer.js +++ b/src/components/form-designer/designer.js @@ -817,12 +817,10 @@ export function createDesigner(vueInstance) { }, emitEvent(evtName, evtData) { //用于兄弟组件发射事件 - //this.vueInstance.$emit(evtName, evtData) eventBus.$emit(evtName, evtData) }, handleEvent(evtName, callback) { //用于兄弟组件接收事件 - //this.vueInstance.$on(evtName, (data) => callback(data)) eventBus.$on(evtName, (data) => callback(data)) }, diff --git a/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue b/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue index a56ef32..35583e4 100644 --- a/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue +++ b/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue @@ -226,12 +226,10 @@ }, mergeLeftCol() { - //this.designer.mergeTableColumn(this.colArray, this.colIndex, true) this.designer.mergeTableCol(this.rowArray, this.colArray, this.rowIndex, this.colIndex, true, this.widget) }, mergeRightCol() { - //this.designer.mergeTableColumn(this.colArray, this.colIndex, false) this.designer.mergeTableCol(this.rowArray, this.colArray, this.rowIndex, this.colIndex, false, this.widget) }, diff --git a/src/components/form-designer/form-widget/field-widget/fieldMixin.js b/src/components/form-designer/form-widget/field-widget/fieldMixin.js index 4aff73e..2f7a7ff 100644 --- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js +++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js @@ -88,12 +88,6 @@ export default { }, initEventHandler() { - // eventBus.$on('setFormData', (newFormData) => { - // console.log('formModel of globalModel----------', this.globalModel.formModel) - // if (!this.subFormItemFlag) { - // this.setValue(newFormData[this.field.options.name]) - // } - // }) this.on$('setFormData', (newFormData) => { console.log('formModel of globalModel----------', this.globalModel.formModel) if (!this.subFormItemFlag) { @@ -101,14 +95,6 @@ export default { } }) - // eventBus.$on('field-value-changed', (values) => { - // if (!!this.subFormItemFlag) { - // let subFormData = this.formModel[this.subFormName] - // this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId) - // } else { - // this.handleOnChange(values[0], values[1]) - // } - // }) this.on$('field-value-changed', (values) => { if (!!this.subFormItemFlag) { let subFormData = this.formModel[this.subFormName] @@ -118,12 +104,6 @@ export default { } }) - /* 监听重新加载选项事件 */ - // eventBus.$on('reloadOptionItems', (widgetNames) => { - // if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) { - // this.initOptionItems(true) - // } - // }) this.on$('reloadOptionItems', (widgetNames) => { if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) { this.initOptionItems(true) @@ -308,15 +288,11 @@ export default { //--------------------- 事件处理 begin ------------------// emitFieldDataChange(newValue, oldValue) { - //this.$emit('field-value-changed', [newValue, oldValue]) - //eventBus.$emit('field-value-changed', [newValue, oldValue]) //此处应该加事件触发组件判断，非本组件（其他组件）触发的事件应该跳过，否则会出现事件无限循环！！ - this.emit$('field-value-changed', [newValue, oldValue]) - // /* 必须用dispatch向指定父组件派发消息！！ */ + /* 必须用dispatch向指定父组件派发消息！！ */ this.dispatch('VFormRender', 'fieldChange', [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex]) - // eventBus.$emit('fieldChange', [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex]) }, syncUpdateFormModel(value) { @@ -559,12 +535,10 @@ export default { }, setUploadHeader(name, value) { - //this.$set(this.uploadHeaders, name, value) this.uploadHeaders[name] = value }, setUploadData(name, value) { - //this.$set(this.uploadData, name, value) this.uploadData[name] = value }, diff --git a/src/components/form-render/container-item/sub-form-item.vue b/src/components/form-render/container-item/sub-form-item.vue index 7ce8482..3b04c79 100644 --- a/src/components/form-render/container-item/sub-form-item.vue +++ b/src/components/form-render/container-item/sub-form-item.vue @@ -192,7 +192,6 @@ return } - //eventBus.$on('setFormData', (newFormData) => { this.on$('setFormData', (newFormData) => { this.initRowIdData(false) this.initFieldSchemaData() diff --git a/src/components/form-render/index.vue b/src/components/form-render/index.vue index 0c43bd1..3431dba 100644 --- a/src/components/form-render/index.vue +++ b/src/components/form-render/index.vue @@ -221,15 +221,12 @@ } }) - //this.$set(this.formDataModel, subFormName, [subFormDataRow]) // this.formDataModel[subFormName] = [subFormDataRow] } else { - //this.$set(this.formDataModel, subFormName, []) // this.formDataModel[subFormName] = [] } } else { let initialValue = this.formData[subFormName] - //this.$set(this.formDataModel, subFormName, deepClone(initialValue)) this.formDataModel[subFormName] = deepClone(initialValue) } } else if ((wItem.type === 'grid-col') || (wItem.type === 'table-cell')) { @@ -247,21 +244,16 @@ } } else if (!!wItem.formItemFlag) { if (!this.formData.hasOwnProperty(wItem.options.name)) { - //this.formDataModel[wItem.options.name] = '' //这种写法不支持对象属性响应式更新，必须用$set方法！！ - //this.$set(this.formDataModel, wItem.options.name, wItem.options.defaultValue) //设置字段默认值 this.formDataModel[wItem.options.name] = wItem.options.defaultValue } else { let initialValue = this.formData[wItem.options.name] - //this.$set(this.formDataModel, wItem.options.name, deepClone(initialValue)) this.formDataModel[wItem.options.name] = deepClone(initialValue) } } }, addFieldChangeEventHandler() { - //eventBus.$off('fieldChange') //移除原有事件监听 this.off$('fieldChange') //移除原有事件监听 - //eventBus.$on('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => { this.on$('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => { this.handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex) this.$emit('formChange', fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex) @@ -269,9 +261,7 @@ }, addFieldValidateEventHandler() { - //eventBus.$off('fieldValidation') //移除原有事件监听 this.off$('fieldValidation') //移除原有事件监听 - //eventBus.$on('fieldValidation', (fieldName) => { this.on$('fieldValidation', (fieldName) => { this.$refs.renderForm.validateField(fieldName) }) @@ -366,10 +356,8 @@ this.clearFormDataModel() //上行代码有问题，会导致表单校验失败，故保留原对象引用只清空对象属性！！ this.buildFormModel(newFormJsonObj.widgetList) - //this.$set(this.formJsonObj, 'formConfig', newFormJsonObj.formConfig) this.formJsonObj['formConfig'] = newFormJsonObj.formConfig this._provided.formConfig = newFormJsonObj.formConfig //强制更新provide的formConfig对象 - //this.$set(this.formJsonObj, 'widgetList', newFormJsonObj.widgetList) this.formJsonObj['widgetList'] = newFormJsonObj.widgetList this.initFormObject() diff --git a/vite-lib-render.config.js b/vite-lib-render.config.js index 3575093..b6c645e 100644 --- a/vite-lib-render.config.js +++ b/vite-lib-render.config.js @@ -48,6 +48,7 @@ export default defineConfig({ }, build: { + minify: false, // lib: { entry: resolve(__dirname, 'install-render.js'), name: 'VFormRender', @@ -60,7 +61,7 @@ export default defineConfig({ // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 globals: { vue: 'Vue', - 'element-plus': 'ELEMENT', + 'element-plus': 'ElementPlus', } } } diff --git a/vite-lib.config.js b/vite-lib.config.js index c47dd12..c8d77dd 100644 --- a/vite-lib.config.js +++ b/vite-lib.config.js @@ -64,7 +64,7 @@ export default defineConfig({ // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 globals: { vue: 'Vue', - 'element-plus': 'ELEMENT', + 'element-plus': 'ElementPlus', } } } diff --git a/vite.config.js b/vite.config.js index 2a7fbbd..519d545 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,9 +4,11 @@ import vueJsx from '@vitejs/plugin-vue-jsx' import viteSvgIcons from 'vite-plugin-svg-icons' import { resolve } from 'path' import commonjs from '@rollup/plugin-commonjs' +import externalGlobals from "rollup-plugin-external-globals" // https://vitejs.dev/config/ export default defineConfig({ + base: '', plugins: [ vue(), @@ -14,7 +16,28 @@ export default defineConfig({ vueJsx({}), //解决引入commonjs模块后打包出现的{'default' is not exported by XXX}错误!! - commonjs(), + // commonjs(), + // commonjs({ + // //exclude: ['node_modules/vue/dist/*.js'], + // requireReturnsDefault: true + // }), + + // commonjs({requireReturnsDefault: (id) => { + // //console.log('aaa', id) + // if (!!id && id.indexOf('/sortablejs/') > -1) { + // return false + // } else { + // return (!!id && id.indexOf('/axios/') > -1) + // } + // } + // }), + + /* 开启externalGlobals后， + 报错：TypeError: Cannot read properties of null (reading 'nodeType')，不知何故？？ */ + // externalGlobals({ + // vue: "Vue", + // 'element-plus': 'ElementPlus', + // }), viteSvgIcons({ // Specify the icon folder to be cached @@ -46,16 +69,29 @@ export default defineConfig({ }, build: { + minify: false, + commonjsOptions: { + exclude: [ + 'lib/vuedraggable/dist/vuedraggable.umd.js,', //引号前的逗号不能删，不知何故？？ + 'vue/dist/*.js'], + include: [] + //requireReturnsDefault: true + }, rollupOptions: { - // 确保外部化处理那些你不想打包进库的依赖 - external: ['vue', 'element-plus'], - output: { - // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 - globals: { - vue: 'Vue', - 'element-plus': 'ELEMENT', - } - } + // 指定生产打包入口文件为index.htm + input: { + main: resolve(__dirname, 'index.html'), + }, + + // // 确保外部化处理那些你不想打包进库的依赖 + // external: ['vue', 'element-plus'], + // output: { + // // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 + // globals: { + // vue: 'Vue', //报错：Failed to resolve module specifier "vue". Relative references must start with either + // 'element-plus': 'ElementPlus', + // } + // } } }