Formily 项目教程

Formily 项目教程

formily📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址:https://gitcode.com/gh_mirrors/fo/formily

1. 项目的目录结构及介绍

Formily 项目的目录结构如下：

formily/
├── docs/
├── packages/
├── scripts/
├── .all-contributorsrc
├── .codecov.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierrc.js
├── .umirc.js
├── .yarnrc
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── README.zh-cn.md
├── commitlint.config.js
└── global.config.js

目录结构介绍

• docs/: 存放项目文档。
• packages/: 存放项目的各个包。
• scripts/: 存放项目的脚本文件。
• .all-contributorsrc: 贡献者配置文件。
• .codecov.yml: Codecov 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintignore: ESLint 忽略配置。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略配置。
• .prettierrc.js: Prettier 配置文件。
• .umirc.js: Umi 配置文件。
• .yarnrc: Yarn 配置文件。
• CHANGELOG.md: 变更日志。
• LICENSE.md: 许可证文件。
• README.md: 项目英文介绍文档。
• README.zh-cn.md: 项目中文介绍文档。
• commitlint.config.js: Commitlint 配置文件。
• global.config.js: 全局配置文件。

2. 项目的启动文件介绍

Formily 项目的启动文件通常位于 packages/ 目录下，具体取决于你使用的框架（React、React Native、Vue 2、Vue 3）。以下是一个示例启动文件的介绍：

// packages/formily-react/src/index.js
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import * as components from '@formily/antd'

const form = createForm()
const SchemaField = createSchemaField({ components })

const App = () => (
  <FormProvider form={form}>
    <SchemaField schema={schema} />
  </FormProvider>
)

export default App

启动文件介绍

• createForm: 创建一个 Formily 表单实例。
• FormProvider: 提供表单上下文。
• createSchemaField: 创建一个 SchemaField 组件，用于渲染 JSON Schema。
• components: 导入 Formily 的组件库（如 Ant Design）。

3. 项目的配置文件介绍

Formily 项目的配置文件主要包括以下几个：

.eslintrc

ESLint 配置文件，用于代码风格检查：

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["react"],
  "rules": {
    "react/prop-types": "off"
  }
}

.prettierrc.js

Prettier 配置文件，用于代码格式化：

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,
};

.umirc.js

Umi 配置文件，用于项目构建和开发：

export default {
  routes: [
    { path: '/', component: 'index' },
  ],
  plugins: [
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      dynamicImport: { webpackChunkName: true },
      title: 'formily',
      dll: true,
      pwa: {
        workboxOptions: {
          skipWaiting: true,
        },
      },
      fastRefresh: {},
    }],
  ],
};

global.config.js

全局

formily📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址:https://gitcode.com/gh_mirrors/fo/formily