Vue Formulate

关于 Vue 3 的说明

Vue Formulate 与 Vue 2 兼容。Vue Formulate 的下一个主要版本称为 FormKit — 它目前处于公开测试阶段，您可以在 formkit.com(opens new window) 上了解更多信息.

# 安装

使用 Vue Formulate 的首选方法是通过您最喜欢的 JavaScript 包管理器进行安装。

# NPM

npm install @braid/vue-formulate

# Yarn

yarn add @braid/vue-formulate

# 直接下载

或者，如果您的项目没有构建过程，您可以下载存储库并手动链接到缩小版本：

<script src="/vue-formulate/dist/formulate.min.js"></script>

笔记

由于 DOM 的限制，当在 DOM 模板中（在单文件组件之外）挂载 Vue Formulate 时，所有组件名称都需要 小写、连字符分隔并带有结束标签(opens new window) .

<FormulateInput /> ⭢ <formulate-input></formulate-input>

# CDN

与直接下载类似，您可以直接从像 JSDeliver(opens new window) 这样的 CDN 加载 Vue Formulate 。

# 添加到 Vue

下载 Vue Formulate 后，您需要使用 Vue 安装它。

import Vue from 'vue'
import VueFormulate from '@braid/vue-formulate'

Vue.use(VueFormulate)

提示

当加载 Vue Formulate 作为 commonJS 模块时（想想 require()）可能需要 VueFormulate.default 在注册 Vue 时使用：

const VueFormulate = require('@braid/vue-formulate')
Vue.use(VueFormulate.default)

# 配置选项

如果您需要自定义配置选项，您可以将配置选项对象传递给第二个参数。

Vue.use(VueFormulate, options)

# Nuxt 2.5.1

在 Nuxt 上使用 Vue Formulate 也很容易。在 Nuxt 项目上开始使用 Vue Formulate 的最简单方法是使用包含的 Nuxt 模块。

// nuxt.config.js
export default {
  buildModules: [
    '@braid/vue-formulate/nuxt'
  ]
}

# Nuxt 模块配置文件

要使用其他 插件, 本地化, 验证规则 等配置 Vue Formulate， 您可以在 Nuxt 项目的根目录中创建一个 formulate.config.js 文件，该文件将由 Vue Formulate Nuxt 模块导入和使用。 如果您希望将配置文件放在 Nuxt 项目的根目录之外的某个位置， 只需告诉 Nuxt 模块它可以使用文件 configPath 中 formulate 对象的参数定位配置 nuxt.config.js 文件的位置。

// nuxt.config.js
export default {
  formulate: {
    configPath: '~/different/location/of/formulate.config.js'
  }
}

您的 formulate.config.js 文件应该导出一个对象，该对象将通过 Vue.use() .

// formulate.config.js
import { de } from '@braid/vue-formulate-i18n'

export default {
  plugins: [de],
  locale: 'de',
  rules: {
    foobar: ({ value }) => ['foo', 'bar'].includes(value)
  }
}

# 样式 / 主题

如果您想使用默认主题（这些文档中使用的主题），您可以 轻松地将该 css 包含在您的页面。 Vue Formulate 也非常容易为您自己 自己设置主题。

# IE11 支持

虽然支持 Internet Explorer 11，但 Vue Formulate 中不包含 ES2015 语言功能的 polyfill。对于那些需要 IE11 支持的人， 我们建议使用 polyfill.io(opens new window) 或类似的服务，抹平 ES2015 功能。

<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>

快速开始 →