快速上手
下载
进入控制台 - 已购产品 - 下载产品；下载后将其解压到项目中根目录 /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文件夹中。