FormMaking V3

FormMaking V3 is an updated version of FormMaking, based on the visual/low code form designer developed by Vue 3.x and Element Plus, which can generate Element and Antd style forms.

Installation

Download FormMaking V3

Download ↗ the product (select version V3) and unzip it into the project.

TIP

This document uses the project root directory as an example. In other locations, you only need to modify the import path.

Import

javascript

import FormMakingV3 from 'form-making-v3/dist/form-making-v3.es.js'

import 'form-making-v3/dist/index.css'

Browser Import

The global variable FormMakingV3 can be used by importing FormMakingV3 directly from the browser's script and link tags.

html

<link rel="stylesheet" href="form-making-v3/dist/index.css">

<script src="form-making/dist/form-making-v3.umd.js"></script>

Import Element Plus

bash

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

Import Ant Design Vue

If you want to render Ant Design-style forms, you need to import the Ant Design Vue component library. The project is currently using the ant-design-vue@3.x version, it is recommended to use the 3.x version in the project. For Ant design, Please refer to Ant Design Vue Document ↗ .

Use in Vue Projects

Vue configuration

If you need to configure the form using the Custom Component field, you need to use the full version of Vue in your project (both compiler and runtime versions).

ViteVue Cli

// vite.config.js
resolve: {
  alias: {
    'vue': 'vue/dist/vue.esm-bundler.js'
  }
}

// vue.config.js
chainWebpack: config => {
  config.resolve.alias.set('vue$', 'vue/dist/vue.esm-bundler.js')
}

Complete Import

import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import FormMakingV3 from '@/form-making-v3'
import '@/form-making-v3/dist/index.css'

import App from './App.vue'

createApp(App).use(ElementPlus).use(FormMakingV3).mount('#app')

Partial Import

import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import {
  MakingForm,
  GenerateForm
} from '@/form-making-v3'
import '@/form-making-v3/dist/index.css'

import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(MakingForm)
app.use(GenerateForm)
app.mount('#app')

Start to Use

vue

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
    preview 
    generate-code 
    generate-json
  >
  </fm-making-form>
</template>

TIP

使用时需要设置设计器的高度，默认情况高度是根据父元素 100% 来渲染。

Use in HTHM

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- Import style -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
  <link rel="stylesheet" href="form-making-v3/dist/index.css">
  <style>
    html,body,#app{
      height: 100%;
    }
  </style>
</head>
<body >
  <div id="app" >
    <fm-making-form preview generate-code generate-json>
    </fm-making-form>
  </div>
</body>
<!-- Import component library -->
<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
<script src="form-making-v3/dist/form-making-v3.umd.js"></script>

<script>
  Vue.createApp({}).use(ElementPlus).use(FormMakingV3).mount('#app')
</script>
</html>

FormMaking V3 ​

Installation ​

Download FormMaking V3 ​

Import ​

Browser Import ​

Import Element Plus ​

Import Ant Design Vue ​

Use in Vue Projects ​

Vue configuration ​

Complete Import ​

Partial Import ​

Start to Use ​

Use in HTHM ​