安装

FormCreate 支持多个主流 UI 框架，您可以根据自己项目的需求选择对应的版本进行安装。

注意

请根据您项目中使用的 UI 框架，安装对应的 FormCreate 版本。

Vant UI 版本移动端

npm i @form-create/vant^3

Element Plus 版本

npm i @form-create/element-ui@^3

Ant Design Vue 版本

npm i @form-create/ant-design-vue@^3

Naive UI 版本

npm i @form-create/naive-ui@^3

Arco Design 版本

npm i @form-create/arco-design@^3

TDesign 版本

npm i @form-create/tdesign@^3

安装后的初始配置

安装完对应的 FormCreate 版本后，您需要将其引入并配置在 Vue 项目中。以下是通用的配置步骤，具体根据您的项目结构和 UI 框架可能略有不同。

引入和注册 FormCreate

在 main.js 或 main.ts 中引入并注册 FormCreate：

javascript

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'; // 根据您选择的 UI 框架调整
import 'element-plus/dist/index.css'; // 样式文件


import formCreate from '@form-create/element-ui'; // 引入 FormCreate


const app = createApp(App);


app.use(ElementPlus); // 挂载 UI 框架
app.use(formCreate); // 挂载 FormCreate


app.mount('#app');

在组件中使用 FormCreate

vue

<template>
  <div id="app">
    <form-create v-model="formData" v-model:api="formApi" :rule="formRules" />
  </div>
</template>


<script setup>
import { ref } from 'vue';


const formData = ref({});
const formApi = ref(null);


const formRules = ref([
  {
    type: 'input',
    field: 'username',
    title: '用户名',
    value: '',
  },
  {
    type: 'input',
    field: 'password',
    props: {
        type:'password'
    },
    title: '密码',
    value: '',
  }
]);
</script>

在上面的示例中，我们定义了一个简单的登录表单，包括用户名、密码输入框。表单数据 (formData) 和 API 实例 (formApi) 都是通过 v-model 进行双向绑定的。

下一步

至此，您已经完成了 FormCreate 的基本安装和配置，并初步了解了如何在项目中使用它来创建动态表单。接下来，您可以深入探索以下内容：

快速导航

使用指南

安装 ​

安装后的初始配置 ​

引入和注册 FormCreate ​

在组件中使用 FormCreate ​

下一步 ​

安装

安装后的初始配置

引入和注册 FormCreate

在组件中使用 FormCreate

下一步