FormMaking

English

简体中文

English

简体中文

Appearance

Quick Start Guide ​

Download ​

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.

javascript
//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 ↗] (https://cn.vuejs.org/v2/guide/installation.html).

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 ↗] (https://element.eleme.cn/#/zh-CN/component/quickstart).

Import FormMaking ​

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

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

"babel": {
  "sourceType": "unambiguous"
}
javascript
//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 ​

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

Vue.use(FormMaking)

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

Partial Importing ​

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

Vue.use(GenerateForm)
Vue.use(MakingForm)

Get Started ​

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

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 ​

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- Import style -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="form-making/FormMaking.css">
</head>
<body>
  <div id="app">
    <!-- The height of the designer needs to be set -->
    <fm-making-form style="height: 500px;" preview generate-code generate-json>
    </fm-making-form>
  </div>
</body>
  <!-- Import component library -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="form-making/FormMaking.umd.js"></script>
  
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</html>

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.

Copyright © 2019-present FormMaking