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
全局