表单构建器-Form Gernerator

只引入部分elementui_Form-Generator - Element UI 表单设计与代码生成器_St.Helena的博客-CSDN博客

多入口

pages: {
 
    index: {
 
      entry: 'src/main.js',
 
      template: 'public/index.html',
 
      filename: 'index.html',
 
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
 
      minify
 
    },
 
    preview: {
 
      entry: 'src/views/tool/tabletool/preview/main.js',
 
      template: 'public/preview.html',
 
      filename: 'preview.html',
 
      chunks: ['chunk-vendors', 'chunk-common', 'preview'],
 
      minify
 
    }
 
  },
 
  chainWebpack(config) {
 
    // it can improve the speed of the first screen, it is recommended to turn on preload
 
    config.plugin('preload-index').tap(() => [
 
      {
 
        rel: 'preload',
 
        // to ignore runtime.js
 
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
 
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
 
        include: 'initial'
 
      }
 
    ])
 
    config.plugin('preload-preview').tap(() => [
 
      {
 
        rel: 'preload',
 
        // to ignore runtime.js
 
        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
 
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
 
        include: 'initial'
 
      }
 
    ])

Vue Cli 配置多入口报错解决办法 Cannot call .tap() on a plugin that has not yet been defined_error: cannot call .tap() on a plugin that has not_喜樂的CC的博客-CSDN博客

You are using the runtime-only build of Vue where the template compiler is not available. Either pre - 简书

vue中如何实现页面刷新及局部刷新 - 掘金

简介及使用教程

Vue 表单生成器(Form Generator)是一个基于Schema的表单生成器组件，可以基于Schema构建反应式表单。

Vue 表单生成器(Form Generator)提供21种字段类型，、也可以使用自定义字段进行扩展。生成的模板对Bootstrap友好，并且可以轻松自定义样式。

安装

Npm

npm i vue-form-generator

Yarn

yarn add vue-form-generator

使用

全局引入

import VueFormGenerator from "vue-form-generator";
import "vue-form-generator/dist/vfg.css";  // optional full css additions
 
Vue.use(VueFormGenerator)

组件中引入

import VueFormGenerator from "vue-form-generator";
 
//component javascript
export default {
    components: {
        "vue-form-generator": VueFormGenerator.component
    }
};

组件中使用

<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>

数据：

{
  model: {
    id: 1,
    name: 'John Doe',
    password: 'J0hnD03!x4',
    skills: ['Javascript', 'VueJS'],
    email: '[email protected]',
    status: true
  },
  schema: {
    fields: [
      {
        type: 'input',
        inputType: 'text',
        label: 'ID (disabled text field)',
        model: 'id',
        readonly: true,
        disabled: true
      },
      {
        type: 'input',
        inputType: 'text',
        label: 'Name',
        model: 'name',
        placeholder: 'Your name',
        featured: true,
        required: true
      },
      {
        type: 'input',
        inputType: 'password',
        label: 'Password',
        model: 'password',
        min: 6,
        required: true,
        hint: 'Minimum 6 characters',
        validator: VueFormGenerator.validators.string
      },
      {
        type: 'select',
        label: 'Skills',
        model: 'skills',
        values: ['Javascript', 'VueJS', 'CSS3', 'HTML5']
      },
      {
        type: 'input',
        inputType: 'email',
        label: 'E-mail',
        model: 'email',
        placeholder: 'User\'s e-mail address'
      },
      {
        type: 'checkbox',
        label: 'Status',
        model: 'status',
        default: true
      }
    ]
  },
  formOptions: {
    validateAfterLoad: true,
    validateAfterChanged: true,
    validateAsync: true
  }
}

自己摸索

下载github仓库文件

推荐下载master分支，dev分支很多正在测试开发，实际运行出来的与完整官方页面不一样

GitHub - JakHuang/form-generator: Element UI表单设计及代码生成器

git clone -b master https://github.com/JakHuang/form-generator.git

[Vue warn]: Error in v-on handler: “TypeError: Object(…) is not a function“_十一吖i的博客-CSDN博客

vue文件

然后根据报错，缺啥补啥！！！

编辑器的坑

结果