schema-plugin-flow 项目教程
1. 项目的目录结构及介绍
schema-plugin-flow 项目的目录结构如下:
schema-plugin-flow/
├── docs/
├── examples-vue/
├── image/
├── packages/
├── web-app/
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .umirc.js
├── LICENSE
├── README-zh_CN.md
├── README.md
├── babel.config.js
├── lerna.json
├── package.json
目录介绍
docs/
: 项目文档目录。examples-vue/
: Vue 示例代码目录。image/
: 项目图片资源目录。packages/
: 项目包目录,包含核心库和其他扩展包。web-app/
: 项目 Web 应用目录。.babelrc
: Babel 配置文件。.editorconfig
: 编辑器配置文件。.eslintignore
: ESLint 忽略配置文件。.eslintrc
: ESLint 配置文件。.gitignore
: Git 忽略配置文件。.umirc.js
: Umi 配置文件。LICENSE
: 项目许可证文件。README-zh_CN.md
: 项目中文介绍文档。README.md
: 项目英文介绍文档。babel.config.js
: Babel 配置文件。lerna.json
: Lerna 多包管理配置文件。package.json
: 项目依赖和脚本配置文件。
2. 项目的启动文件介绍
项目的启动文件主要包括以下几个部分:
React 项目启动
$ git clone https://github.com/alibaba/schema-plugin-flow.git
$ cd schema-plugin-flow
$ npm install
$ npm run start
启动后,访问 http://localhost:8000
即可看到 React 示例应用。
Vue 项目启动
$ git clone https://github.com/alibaba/schema-plugin-flow.git
$ cd schema-plugin-flow
$ npm install
$ npm run i-vue
$ npm run start-vue
启动后,访问 http://localhost:8000
即可看到 Vue 示例应用。
3. 项目的配置文件介绍
.babelrc
Babel 配置文件,用于配置 JavaScript 转译规则。
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
.editorconfig
编辑器配置文件,用于统一代码风格。
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
.eslintrc
ESLint 配置文件,用于代码检查。
{
"parser": "babel-eslint",
"extends": "eslint:recommended",
"env": {
"browser": true,
"node": true
},
"rules": {
"no-console": "off"
}
}
.umirc.js
Umi 配置文件,用于配置 Umi 应用。
export default {
routes: [
{ path: '/', component: './index' }
],
plugins: [
['umi-plugin-react', {
antd: true
}]
]
};
babel.config.js
Babel 配置文件,用于配置 JavaScript 转译规则。
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react'
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
};
lerna.json
Lerna 多包管理配置文件,用于管理多个包的依赖