Installation

This guide explains how to install and use the @form-create/naive-ui component library, including installation methods for both browser environments and npm.

Note

If you encounter issues, please update the UI framework and FormCreate to the latest version.

NPM

Install

It is recommended to install via npm, which works better with build tools like webpack.

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

Import and Mount

// Import form-create component library
import formCreate from '@form-create/naive-ui';
import naive from 'naive-ui';
// Create Vue application
const app = Vue.createApp({});
app.use(formCreate);
app.use(naive)
app.mount('#app');

Component Mounting Methods

Create Form

<template>
    <form-create :rule="rule" v-model:api="fApi" :option="options" />
</template>
<script setup>
    import { ref } from 'vue';
    const fApi = ref({});
    const options = ref({
        onSubmit: (formData) => {
            alert(JSON.stringify(formData));
        },
        resetBtn: true,
    });
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: 'Product Name',
            value: 'form-create',
        },
        {
            type: 'checkbox',
            field: 'label',
            title: 'Label',
            value: [0, 1, 2, 3],
            options: [
                { label: 'Easy to Use', value: 0 },
                { label: 'Fast', value: 1 },
                { label: 'Efficient', value: 2 },
                { label: 'All-in-One', value: 3 },
            ],
        },
    ]);
</script>

Compatibility

• naive-ui

Example