"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[256],{8145:(s,n,a)=>{a.r(n),a.d(n,{data:()=>e});const e={key:"v-040800dc",path:"/guide/directory-structure.html",title:"目录结构",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:3,title:"package.json",slug:"package-json",children:[]},{level:3,title:"tsconfig.json",slug:"tsconfig-json",children:[]},{level:3,title:".fes.js",slug:"fes-js",children:[]},{level:3,title:"mock.js",slug:"mock-js",children:[]},{level:3,title:".env",slug:"env",children:[]},{level:3,title:"dist 目录",slug:"dist-目录",children:[]},{level:2,title:"public 目录",slug:"public-目录",children:[{level:3,title:"index.html",slug:"index-html",children:[]}]},{level:2,title:"src 目录",slug:"src-目录",children:[{level:3,title:".fes 目录",slug:"fes-目录",children:[]},{level:3,title:"pages 目录",slug:"pages-目录",children:[]},{level:3,title:"app.js",slug:"app-js",children:[]}]}],filePathRelative:"guide/directory-structure.md",git:{updatedTime:1656304886e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},4951:(s,n,a)=>{a.r(n),a.d(n,{default:()=>k});var e=a(6252);const p=(0,e._)("h1",{id:"目录结构",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#目录结构","aria-hidden":"true"},"#"),(0,e.Uk)(" 目录结构")],-1),t=(0,e.Uk)("在"),o=(0,e.Uk)("快速上手"),r=(0,e.Uk)("中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 "),l=(0,e._)("code",null,"约定优于配置",-1),c=(0,e.Uk)(" 的原则，一个基础的 Fes.js 项目大致是这样的："),u=(0,e.uE)('
fes-template\n├── package.json\n├── tsconfig.json\n├── mock.js\n├── .fes.js\n├── .env\n├── dist\n├── public\n│   └── index.html\n└── src\n    ├── .fes\n    └── pages\n    │    └── index.vue\n    └── app.js\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14

package.json

{\n  "name": "@fesjs/template",\n  "version": "2.0.0",\n  "description": "fes项目模版",\n  "scripts": {\n    "build": "fes build",\n    "prod": "FES_ENV=prod fes build",\n    "analyze": "ANALYZE=1 fes build",\n    "dev": "fes dev",\n    "test": "fes test"\n  },\n  "keywords": [\n    "管理端",\n    "fes",\n    "fast",\n    "easy",\n    "strong"\n  ],\n  "files": [\n    ".eslintrc.js",\n    ".gitignore",\n    ".fes.js",\n    ".fes.prod.js",\n    "mock.js",\n    "package.json",\n    "README.md",\n    "tsconfig.json",\n    "/src",\n    "/config"\n  ],\n  "repository": {\n    "type": "git",\n    "url": "git+https://github.com/WeBankFinTech/fes.js.git",\n    "directory": "packages/fes-template"\n  },\n  "author": "harrywan",\n  "license": "MIT",\n  "bugs": {\n    "url": "https://github.com/WeBankFinTech/fes.js/issues"\n  },\n  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",\n  "publishConfig": {\n    "access": "public"\n  },\n  "devDependencies": {\n    "@webank/eslint-config-webank": "0.3.1"\n  },\n  "dependencies": {\n    "@fesjs/fes": "^2.0.0",\n    "@fesjs/plugin-access": "^2.0.0",\n    "@fesjs/plugin-layout": "^3.0.0",\n    "@fesjs/plugin-locale": "^3.0.0",\n    "@fesjs/plugin-model": "^2.0.0",\n    "@fesjs/plugin-enums": "^2.0.0",\n    "@fesjs/plugin-jest": "^2.0.0",\n    "@fesjs/plugin-vuex": "^2.0.0",\n    "@fesjs/plugin-request": "^2.0.0",\n    "@fesjs/plugin-qiankun": "^2.0.0",\n    "@fesjs/plugin-sass": "^2.0.0",\n    "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",\n    "@fesjs/plugin-windicss": "^2.0.0",\n    "@fesjs/fes-design": "^0.4.0",\n    "vue": "^3.0.5",\n    "vuex": "^4.0.0"\n  },\n  "private": true\n}\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

其中@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\nFES_ENV=prod\n
1
2

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

process.env.PORT = '8888';\nprocess.env.FES_ENV = 'prod';\n
1
2

dist 目录

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

public 目录

此目录下所有文件为静态资源，会被复制到输出路径。

index.html

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

src 目录

.fes 目录

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

注意

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

pages 目录

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

app.js

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

',30),i={},k=(0,a(3744).Z)(i,[["render",function(s,n){const a=(0,e.up)("RouterLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("p",null,[t,(0,e.Wm)(a,{to:"/guide/getting-started.html"},{default:(0,e.w5)((()=>[o])),_:1}),r,l,c]),u],64)}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,e]of n)a[s]=e;return a}}}]);