目录结构

在快速上手中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 约定优于配置 的原则，一个基础的 Fes.js 项目大致是这样的：

fes-template
├── package.json
├── tsconfig.json
├── mock.js
├── .fes.js
├── .env
├── dist
├── public
│   └── index.html
└── src
    ├── .fes
    └── pages
    │    └── index.vue
    └── app.js

根目录

package.json

包含插件和插件集，以 @fesjs/preset-、@fesjs/plugin-、@webank/fes-preset-、@webank/fes-plugin-、fes-preset- 和 fes-plugin- 开头的依赖会被自动注册为插件或插件集。

tsconfig.json

解决 @fesjs/fes 和使用 @ 的 API 提示

.fes.js

配置文件，包含 Fes.js 内置功能和插件的配置。

.env

定义环境变量。

比如 .env 文件内容如下：

PORT=8888
FES_ENV=prod

等同于 node 端运行时，设置如下：

process.env.PORT = '8888';
process.env.FES_ENV = 'prod';

mock.js

mock 数据的配置文件。

dist 目录

执行 fes build 后，产物默认会存放在这里。

public 目录

此目录下所有文件会被 copy 到输出路径。

index.html

默认的 html 模板文件，如果删除此 html 则会使用内置的 html 模板文件。

src 目录

.fes 目录

临时文件目录，比如入口文件、路由等，都会被临时生成到这里。

:::warning 不要提交 .fes 目录到 git 仓库，他们会在 fes dev 和 fes build 时被删除并重新生成。 :::

pages 目录

所有路由组件文件存放在这里。

app.js

运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。

1.8 KiB Raw Blame History Unescape Escape