form-create（一）

form-create Designer 导入 Vue 项目

使用开源的表单设计器，封装我们自己想要的组件，可以使用 form-create-designer 设计器
文档地址： http://designer.form-create.com/guide/config.html

安装

npm install @form-create/designer

引入

CDN:

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import element -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import form-create/element -->
<script src="//unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
<!-- import form-create/designer -->
<script src="//unpkg.com/@form-create/designer/dist/index.min.js"></script>

NodeJs:

请自行导入ElementUI并挂载

import formCreate from '@form-create/element-ui'
import FcDesigner from '@form-create/designer'

Vue.use(formCreate)
Vue.use(FcDesigner)

使用

<fc-designer ref="designer"/>

GitHub项目拉取来的代码，标记为核心组件 需要导入到我们的项目中

在自己项目中的 view 新建一个文件夹存放 form-create的源码

运行之后会报错，这是刚刚导入的文件，我们有些依赖没有安装，如下：

安装依赖：

yarn add @form-create/element-ui

yarn add element-ui

yarn add vuedraggable

yarn add @form-create/component-wangeditor

yarn add vue-codemirror

安装完成这些依赖后，如果运行还报错误，如下

请将源码node_modules文件夹中的codemirror复制到我们自己项目的node_modules

编译运行成功