mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
98bae6d141
* feat: 基础功能 * feat: 支持时间戳 * refactor(plugin-watermark): 优化实现 * feat(plugin-watermark): 提供开关 * docs: 添加文档 * docs: 优化文档
139 lines
3.4 KiB
Markdown
139 lines
3.4 KiB
Markdown
# 目录结构
|
||
|
||
在[快速上手](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。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
|
||
```json
|
||
{
|
||
"name": "@fesjs/template",
|
||
"version": "2.0.0",
|
||
"description": "fes项目模版",
|
||
"scripts": {
|
||
"build": "fes build",
|
||
"prod": "FES_ENV=prod fes build",
|
||
"analyze": "ANALYZE=1 fes build",
|
||
"dev": "fes dev",
|
||
"test": "fes test"
|
||
},
|
||
"keywords": [
|
||
"管理端",
|
||
"fes",
|
||
"fast",
|
||
"easy",
|
||
"strong"
|
||
],
|
||
"files": [
|
||
".eslintrc.js",
|
||
".gitignore",
|
||
".fes.js",
|
||
".fes.prod.js",
|
||
"mock.js",
|
||
"package.json",
|
||
"README.md",
|
||
"tsconfig.json",
|
||
"/src",
|
||
"/config"
|
||
],
|
||
"repository": {
|
||
"type": "git",
|
||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||
"directory": "packages/fes-template"
|
||
},
|
||
"author": "harrywan",
|
||
"license": "MIT",
|
||
"bugs": {
|
||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||
},
|
||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||
"publishConfig": {
|
||
"access": "public"
|
||
},
|
||
"devDependencies": {
|
||
"@webank/eslint-config-webank": "0.3.1"
|
||
},
|
||
"dependencies": {
|
||
"@fesjs/fes": "^2.0.0",
|
||
"@fesjs/plugin-access": "^2.0.0",
|
||
"@fesjs/plugin-layout": "^3.0.0",
|
||
"@fesjs/plugin-locale": "^3.0.0",
|
||
"@fesjs/plugin-model": "^2.0.0",
|
||
"@fesjs/plugin-enums": "^2.0.0",
|
||
"@fesjs/plugin-jest": "^2.0.0",
|
||
"@fesjs/plugin-vuex": "^2.0.0",
|
||
"@fesjs/plugin-request": "^2.0.0",
|
||
"@fesjs/plugin-qiankun": "^2.0.0",
|
||
"@fesjs/plugin-sass": "^2.0.0",
|
||
"@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
|
||
"@fesjs/plugin-windicss": "^2.0.0",
|
||
"@fesjs/fes-design": "^0.4.0",
|
||
"vue": "^3.0.5",
|
||
"vuex": "^4.0.0"
|
||
},
|
||
"private": true
|
||
}
|
||
```
|
||
其中`@fesjs/fes`是 Fes.js 核心依赖，另外以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
|
||
|
||
### tsconfig.json
|
||
解决 `@fesjs/fes` 和使用 `@` 的 API 提示
|
||
|
||
### .fes.js
|
||
配置文件，包含 Fes.js 内置功能和安装的其他插件配置。
|
||
|
||
### mock.js
|
||
`mock` 数据的配置文件。
|
||
|
||
### .env
|
||
定义环境变量。
|
||
|
||
比如 `.env` 文件内容如下：
|
||
```
|
||
PORT=8888
|
||
FES_ENV=prod
|
||
```
|
||
等同于 node 端运行时，设置如下：
|
||
```
|
||
process.env.PORT = '8888';
|
||
process.env.FES_ENV = 'prod';
|
||
```
|
||
|
||
|
||
### dist 目录
|
||
执行 `fes build` 后，产物默认会存放在这里。
|
||
|
||
## public 目录
|
||
此目录下所有文件为静态资源，会被复制到输出路径。
|
||
|
||
### index.html
|
||
默认的 `html` 模板文件，如果删除此 `html` 则会使用内置的 `html` 模板文件。
|
||
|
||
## src 目录
|
||
|
||
### .fes 目录
|
||
临时文件目录，比如入口文件、路由等，都会被临时生成到这里。
|
||
|
||
:::warning
|
||
不要提交 `.fes` 目录到 `git` 仓库，他们会在 `fes dev` 和 `fes build` 时被删除并重新生成。
|
||
:::
|
||
|
||
### pages 目录
|
||
所有路由组件文件存放在这里。
|
||
|
||
### app.js
|
||
运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。 |