Formik-Antd 项目使用教程

宋虎辉Mandy

于 2024-08-16 09:21:12 发布

阅读量329

点赞数 4

本文链接：https://blog.csdn.net/gitblog_01007/article/details/141247107

版权

Formik-Antd 项目使用教程

formik-antdSimple declarative bindings for Ant Design and Formik.项目地址:https://gitcode.com/gh_mirrors/fo/formik-antd

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

Formik-Antd 项目的目录结构如下：

formik-antd/
├── src/
│   ├── components/
│   │   ├── AutoComplete.tsx
│   │   ├── Cascader.tsx
│   │   ├── Checkbox.tsx
│   │   ├── CheckboxGroup.tsx
│   │   ├── DatePicker.tsx
│   │   ├── ...
│   ├── index.ts
│   ├── types.ts
├── package.json
├── README.md
├── tsconfig.json

目录结构介绍

src/：包含项目的源代码。
- components/：包含与 Ant Design 组件绑定的 Formik 组件。
- index.ts：项目的入口文件。
- types.ts：定义项目中使用的类型。
package.json：项目的依赖管理文件。
README.md：项目的说明文档。
tsconfig.json：TypeScript 的配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，它负责导出所有的 Formik-Antd 组件。

// src/index.ts
export * from './components/AutoComplete';
export * from './components/Cascader';
export * from './components/Checkbox';
export * from './components/CheckboxGroup';
export * from './components/DatePicker';
// 其他组件...

启动文件介绍

src/index.ts：导出所有的 Formik-Antd 组件，使得这些组件可以在其他项目中被导入和使用。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "formik-antd",
  "version": "2.0.0",
  "description": "Simple declarative bindings for Ant Design and Formik",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "test": "jest"
  },
  "dependencies": {
    "antd": "^4.0.0",
    "formik": "^2.0.0"
  },
  "devDependencies": {
    "@types/react": "^16.9.0",
    "typescript": "^4.0.0"
  }
}

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了编译选项。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}