快速上手

注意

Vue 版本需要大于 2.7

安装

要开始使用 @form-create/designer，首先需要将其安装到您的项目中。可以通过 npm 安装：

npm install @form-create/designer

安装element-ui版本的 form-create

npm install @form-create/element-ui

引入

CDN 引入

如果您希望通过 CDN 方式引入 FcDesigner，请确保先引入 Vue.js 和 Element UI。然后引入 @form-create/element-ui 和 @form-create/designer，并在 Vue 实例中进行配置。

<!-- 引入 Vue.js -->
<script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>


<!-- 引入 Element UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">


<!-- 引入 Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>


<!-- 引入 form-create 和 designer -->
<script src="https://unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer/dist/index.min.js"></script>


<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>


<script>
    Vue.use(FcDesigner);
    Vue.use(FcDesigner.formCreate);


new Vue().$mount('#app');
</script>

Node.js 引入

对于 Node.js 项目，您需要通过 npm 安装相关依赖，并在您的项目中引入并配置它们。

import Vue from 'vue';
import FcDesigner from '@form-create/designer';
import ELEMENT from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


// 使用 Element UI
Vue.use(ELEMENT);


// 使用 form-create 和 designer
Vue.use(FcDesigner);
Vue.use(FcDesigner.formCreate);

使用

在 Vue 组件中，您可以像下面这样使用 fc-designer 组件：

<template>
    <fc-designer ref="designer" height="100vh" />
</template>