Formily-Schema-Editor 使用教程
formily-editorSchemaEditor项目地址:https://gitcode.com/gh_mirrors/fo/formily-editor
1. 项目的目录结构及介绍
Formily-Schema-Editor 的目录结构如下:
formily-editor/
├── docs/
│ └── zh-cn/
├── packages/
│ ├── editorconfig
│ ├── eslintignore
│ ├── eslintrc
│ ├── gitignore
│ ├── prettierrc.js
│ ├── umirc.js
│ ├── LICENSE.md
│ ├── lerna.json
│ ├── package.json
│ ├── README.md
│ └── tsconfig.json
├── umi.js
└── README.md
目录结构介绍
docs/
: 包含项目文档,特别是中文文档。packages/
: 包含项目的各种配置文件和核心代码。editorconfig
,eslintignore
,eslintrc
,gitignore
: 编辑器和代码风格配置文件。prettierrc.js
,umirc.js
: 代码格式化和项目配置文件。LICENSE.md
,lerna.json
,package.json
,README.md
,tsconfig.json
: 项目许可证、多包管理配置、项目依赖和编译配置文件。
umi.js
: 项目的主配置文件。README.md
: 项目的主介绍文档。
2. 项目的启动文件介绍
Formily-Schema-Editor 的启动文件主要是 umi.js
,它包含了项目的核心配置和启动逻辑。
// umi.js
export default {
routes: [
{ path: '/', component: './index' },
],
plugins: [
['umi-plugin-react', {
antd: true,
dva: true,
dynamicImport: { webpackChunkName: true },
title: 'formily-editor',
dll: true,
pwa: {
workboxOptions: {
skipWaiting: true,
},
},
routes: {
exclude: [
/models\//,
/services\//,
/model\.(t|j)sx?$/,
/service\.(t|j)sx?$/,
/components\//,
],
},
}],
],
};
启动文件介绍
routes
: 定义了项目的路由配置。plugins
: 使用了umi-plugin-react
插件,启用了 Ant Design、DVA、动态导入等功能。
3. 项目的配置文件介绍
Formily-Schema-Editor 的配置文件主要包括 package.json
和 umirc.js
。
package.json
{
"name": "formily-editor",
"version": "1.0.0",
"description": "SchemaEditor for Formily",
"main": "index.js",
"scripts": {
"start": "umi dev",
"build": "umi build",
"test": "umi test",
"lint": "eslint --ext .js,.jsx,.ts,.tsx ./",
"precommit": "lint-staged"
},
"dependencies": {
"umi": "^3.0.0",
"antd": "^4.0.0"
},
"devDependencies": {
"eslint": "^7.0.0",
"prettier": "^2.0.0"
},
"license": "MIT"
}
umirc.js
export default {
routes: [
{ path: '/', component: './index' },
],
plugins: [
['umi-plugin-react', {
antd: true,
dva: true,
dynamicImport: { webpackChunkName: true },
title: 'formily-editor',
dll: true,
pwa: {
workboxOptions: {
skipWaiting: true,
},
},
routes: {
exclude: [
/models\//,
/services\//,
/model\.(t|j)sx?$/,
/service\.(t|j)sx?$/,
/components\//,
formily-editorSchemaEditor项目地址:https://gitcode.com/gh_mirrors/fo/formily-editor