Installation
FormCreate supports multiple mainstream UI frameworks. Choose the corresponding version to install based on your project requirements.
Note
Install the corresponding FormCreate version based on the UI framework used in your project.
Vant UI version: Installation Documentation Mobile
npm i @form-create/vant^3Element Plus version: Installation Documentation
npm i @form-create/element-ui@^3Ant Design Vue version: Installation Documentation
npm i @form-create/ant-design-vue@^3Naive UI version: Installation Documentation
npm i @form-create/naive-ui@^3Arco Design version: Installation Documentation
npm i @form-create/arco-design@^3TDesign version: Installation Documentation
npm i @form-create/tdesign@^3Initial Configuration After Installation
After installing the corresponding FormCreate version, import and configure it in your Vue project. The following are general configuration steps, which may vary slightly depending on your project structure and UI framework.
Importing and Registering FormCreate
Import and register FormCreate in main.js or main.ts:
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus'; // Adjust according to your selected UI framework
import 'element-plus/dist/index.css'; // Style file
import formCreate from '@form-create/element-ui'; // Import FormCreate
const app = createApp(App);
app.use(ElementPlus); // Mount UI framework
app.use(formCreate); // Mount FormCreate
app.mount('#app');Note
If you haven't globally mounted the UI framework, manually register the required components before form rendering, or directly import the preset components provided by FormCreate load file.
Using FormCreate in Components
Define form rules (including username and password input fields) and bind form data and API instances to enable dynamic form rendering and management.
<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: 'Username',
value: '',
},
{
type: 'input',
field: 'password',
props: {
type:'password'
},
title: 'Password',
value: '',
}
]);
</script>In the example above, we defined a simple login form including username and password input fields. Both form data (formData) and API instance (formApi) are bound through v-model for two-way data binding.
Next Steps
At this point, you've completed the basic installation and configuration of FormCreate and have a preliminary understanding of how to use it in your project to create dynamic forms. Next, explore the following content in depth:
Quick Navigation
Usage Guide