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 安装。

检查 defaultConfig

大多数 FormKit 用户开始时会使用提供的 defaultConfig —— 但这实际上包括了什么呢?

  • 添加了带有所有规则的 @formkit/validation 插件。
  • 添加了带有 en 语言环境(以及您添加的任何其他语言环境)的 @formkit/i18n 插件。
  • 添加了带有所有非专业输入的 @formkit/inputs 插件。
  • 添加了带有 CDN 加载的图标或任何明确加载的图标的 @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]
})

使用 Nuxt 模块

如果您正在使用 @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
自定义消息

在上面的例子中,我们导入了 ende 语言环境。这些包括我们示例中未使用的消息。相反,我们可以直接提供我们自己的自定义消息:

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>