Skip to content

Quick Start Guide


Enter the Console - Purchased Product - FormMaking or FormMaking(V3); Once downloaded, unzip it to the root directory '/lib' in your project.

├─ lib                    # The project lib directory is used to house the FormMaking product
│  ├─ vue-form-making     # A FormMaking package downloaded from the website
│  │  ├─ src              # FormMaking source package, only source version have the directory										
│  │  ├─ dist             # FormMaking Directory of the packaged file
│  │  └─ package.json     # Configuration file
├─ src                    # Your project code
├─ package.json           # package.json
└─ vue.config.js          # vue-cli configuration

Vue Configuration

Custom components were added after v1.2.13, requiring the full version of Vue (both compiler and runtime versions) to be import into the project.

//Take vue.config.js as an example, configure the project created by vue.cli3.0
chainWebpack: config => {
  config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')

If your project is not using vue-cli3.0, vue official document also provides more methods [Install ↗] (

Import Element

Our FormMaking uses the Element-UI component library, which requires the import of Element, A detailed import of Element method please refer to the document [Quick Start ↗] (

Import FormMaking

When using import in your project, you need to set babel's sourceType parameter to unambiguous.

// In package.json the following configuration, for the project babel configuration in package.json

"babel": {
  "sourceType": "unambiguous"
//In babel.config.js the following configuration applies to the project babel configuration in a separate babel.config.js file****

module.exports = {
  sourceType: 'unambiguous'

You can choose one of these Settings according to your project.

Full Importing

import FormMaking from '@/lib/vue-form-making'
import '@/lib/vue-form-making/dist/FormMaking.css'


You need to import according to the path of FormMaking in your project.

Partial Importing

import {
} from '@/lib/vue-form-making'
import '@/lib/vue-form-making/dist/FormMaking.css'


Get Started

    style="height: 500px;" 

You need to set the height of the designer when using it. By default, the height is rendered according to 100% of the parent element.

For more information about instructions on how to use each component please refer to See the MakingForm for.

Used in Html

<!DOCTYPE html>
  <meta charset="UTF-8">
  <!-- Import style -->
  <link rel="stylesheet" href="">
  <link rel="stylesheet" href="form-making/FormMaking.css">
  <div id="app">
    <!-- The height of the designer needs to be set -->
    <fm-making-form style="height: 500px;" preview generate-code generate-json>
  <!-- Import component library -->
  <script src=""></script>
  <script src=""></script>
  <script src="form-making/FormMaking.umd.js"></script>
    new Vue({
      el: '#app'

You need to copy the css and umd.js in the FormMaking package to a location accessible to html, which is in the same level of form-making folder.