优化生产环境

• 检查 defaultConfig
• 自定义配置
  • 使用全局插件
  • 使用 Nuxt 模块
• 配置注入（代码分割）

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

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>