Skip to content
On this page

快速上手

下载

进入控制台 - 已购产品 - 下载产品;下载后将其解压到项目中根目录 /lib 下。

├─ lib                    # 项目lib目录,用于放置FormMaking产品
│  ├─ vue-form-making     # 从网站下载的FormMaking程序包
│  │  ├─ src              # FormMaking 源码包,源码版本才有该目录										
│  │  ├─ dist             # FormMaking 打包后的文件目录
│  │  └─ package.json     # 配置文件
├─ src                    # 项目代码
├─ package.json           # package.json
└─ vue.config.js          # vue-cli 配置

Vue 配置

v1.2.13 后加入了自定义组件,需要在项目中引入 Vue 的完整版本(同时包含编译器和运行时的版本)。

javascript
// 以vue-cli3.0 创建的项目为例,在vue.config.js中进行配置
chainWebpack: config => {
  config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
}

如果您的项目不是使用的 vue-cli3.0 创建的项目,Vue官方文档也提供了更多的方法 安装 ↗

引入 Element

设计器使用的是 element-ui 组件库,使用的时候需要引入 Element,详细的引入方法请参考 Element 文档 快速上手 ↗

引入 FormMaking

在项目中使用 import 方式引入时,需要将 babel 的 sourceType 参数设置为 unambiguous

json
// 在package.json中如下配置,适用于项目babel配置在package.json中
"babel": {
  "sourceType": "unambiguous"
}
javascript
// 在 babel.config.js 中如下配置,适用于项目 babel 配置在单独的 babel.config.js 文件中
module.exports = {
  sourceType: 'unambiguous'
}

以上配置根据自己的项目选择一种设置即可。

完整引入

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

Vue.use(FormMaking)

需要根据 FormMaking 在项目中的路径进行引入。

引入部分组件

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

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

开始使用

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

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

关于各组件的使用方法可以参阅 组件文档

在 Html 中使用

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <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">
    <!-- 需要设置设计器高度 -->
    <fm-making-form style="height: 500px;" preview generate-code generate-json>
    </fm-making-form>
  </div>
</body>
  <!-- 引入组件库 -->
  <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>

需要将FormMaking包中 css 与 umd.js 拷贝到html能够访问的位置,此处放到同级form-making文件夹中。