Introducing KickStart — AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free
FormKit 开箱即用的功能非常多。这对于初学者来说很棒,但是 defaultConfig
可能包含了您不使用的功能和输入类型。在本指南中,我们将学习如何为生产环境精简我们的 FormKit 安装。
大多数 FormKit 用户开始时会使用提供的 defaultConfig
—— 但这实际上包括了什么呢?
@formkit/validation
插件。en
语言环境(以及您添加的任何其他语言环境)的 @formkit/i18n
插件。@formkit/inputs
插件。@formkit/theme
插件。@formkit/vue
绑定,以允许 FormKit 与 Vue 交互。@formkit/dev
错误解释器(在开发中提供人类可读的错误信息)。defaultConfig
还公开了一个方便的对象语法,以提供上述所有插件的配置选项。例如,要为 @formkit/inputs
插件实例化提供输入,default config 允许您传递一个 inputs
属性:
app.use(plugin, defaultConfig({
inputs: {
myInput: createInput(/* 输入选项 */)
}
}))
更多详情,请查看 defaultConfig
的源代码。
在为生产环境优化您的 FormKit 安装时,您可能想要创建一个自定义配置。这将允许您仅包含您实际使用的功能、输入、规则和消息。
例如,考虑一个只使用文本输入和 required
规则的简单表单的项目。像这样:
<script setup>
async function submit () {
// ... 提交事项
}
</script>
<template>
<FormKit
type="form"
@submit="submit"
>
<FormKit
type="text"
name="name"
label="Name"
help="What do people call you?"
validation="required"
/>
</FormKit>
</template>
在这种情况下,我们只想使用单一的 required
规则,只有 text
输入,以及只有英语和德语的 required
消息。我们可以通过不使用 defaultConfig
而是执行我们自己的插件实例化来创建这种可摇树的自定义配置:
// 文件:main.ts
import { createApp } from 'vue'
import App from './App.vue'
import type { FormKitOptions } from '@formkit/core'
import { plugin, bindings } from '@formkit/vue'
import { createValidationPlugin } from '@formkit/validation'
import { required } from '@formkit/rules'
import { createI18nPlugin, en, de } from '@formkit/i18n'
import { createLibraryPlugin, text, form, submit } from '@formkit/inputs'
const library = createLibraryPlugin({ text, form, submit })
const validation = createValidationPlugin({ required })
const i18n = createI18nPlugin({ en, de })
const app = createApp(App)
app.use(plugin, {
plugins: [library, validation, i18n, bindings]
})
如果您正在使用 @formkit/nuxt
模块,您可以通过为模块提供 defaultConfig: false
选项来选择不使用 defaultConfig
:
export default defineNuxtConfig({
modules: ['@formkit/nuxt'],
formkit: {
autoImport: true,
defaultConfig: false
}
})
然后您的 formkit.config.ts
应该提供完整的自定义配置:
import type { FormKitOptions } from '@formkit/core'
import { bindings } from '@formkit/vue'
import { createValidationPlugin } from '@formkit/validation'
import { required } from '@formkit/rules'
import { createI18nPlugin, en, de } from '@formkit/i18n'
import { createLibraryPlugin, text, form, submit } from '@formkit/inputs'
const library = createLibraryPlugin({ text, form, submit })
const validation = createValidationPlugin({ required })
const i18n = createI18nPlugin({ en, de })
export default {
plugins: [library, validation, i18n, bindings]
} satisfies FormKitOptions
在上面的例子中,我们导入了 en
和 de
语言环境。这些包括我们示例中未使用的消息。相反,我们可以直接提供我们自己的自定义消息:
createI18nPlugin({
en: {
validation: {
required: 'This field is required'
},
ui: {
submit: 'Submit'
}
},
de: {
validation: {
required: 'Dieses Feld ist erforderlich'
},
ui: {
submit: 'Einreichen'
}
}
})
Vue 的插件架构本质上是全局的。@formkit/vue
中的 plugin
也不例外;然而,这种便利性带来了一个代价 —— FormKit 将在 Vue 被加载的任何地方加载,即使它没有在页面上使用。
幸运的是,对于 Nuxt 用户来说,@formkit/nuxt
模块提供了解决这个问题的方案:autoImport: true
。这个选项将自动只在使用 FormKit 的页面上注入 FormKit 及其配置。
Vite 用户也可以通过使用 unplugin-formkit 来利用自动注入。
对于其他构建工具的用户或不适合 unplugin-formkit
支持的功能的用例,使用 <FormKitProvider>
组件允许您在使用点为您的 FormKit 输入提供全局配置。只需用 <FormKitProvider>
包裹您的组件并提供一个 config
属性:
<script setup>
import { FormKitProvider } from '@formkit/vue'
import type { FormKitOptions } from "@formkit/core"
const formKitConfig: FormKitOptions = {
// ... 您的自定义配置
}
</script>
<template>
<FormKitProvider :config="formKitConfig">
<!-- 您的 FormKit 组件(可以深层嵌套) -->
</FormKitProvider>
</template>