diff --git a/404.html b/404.html index 73b12a4b..7bb1a252 100644 --- a/404.html +++ b/404.html @@ -12,9 +12,9 @@ -
Fes.js

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home

Released under the MIT License.

Copyright © 2020-present Webank

- +
Fes.js

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home

Released under the MIT License.

Copyright © 2020-present Webank

+ \ No newline at end of file diff --git a/assets/guide_env.md.f6abd24c.js b/assets/guide_env.md.5a49ed1f.js similarity index 95% rename from assets/guide_env.md.f6abd24c.js rename to assets/guide_env.md.5a49ed1f.js index 45e67a6b..a980c799 100644 --- a/assets/guide_env.md.f6abd24c.js +++ b/assets/guide_env.md.5a49ed1f.js @@ -1,8 +1,8 @@ -import{_ as a,o as s,c as e,V as o}from"./chunks/framework.c1e1f082.js";const b=JSON.parse('{"title":"环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/env.md"}'),n={name:"guide/env.md"},l=o(`

环境变量 ​

在构建或者代码在端上运行中需要一些跟区分于环境的变量，用于配置构建流程或者运行时过程，这时候我们可以配置环境变量。

配置环境变量 ​

命令行添加 ​

比如：

bash
# OS X, Linux
+import{_ as a,o as s,c as e,V as o}from"./chunks/framework.c1e1f082.js";const y=JSON.parse('{"title":"环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/env.md"}'),l={name:"guide/env.md"},n=o(`
环境变量 ​
在构建或者代码在端上运行中需要一些跟区分于环境的变量，用于配置构建流程或者运行时过程，这时候我们可以配置环境变量。
配置环境变量 ​
命令行添加 ​
比如：
bash
# OS X, Linux
 PORT=3000 fes dev
 
 # Windows (cmd.exe)
-set PORT=3000 && fes dev
如果要同时考虑 OS X 和 Windows，可借助三方工具 cross-env
sh
pnpm add cross-env --dev
+set PORT=3000 && fes dev
如果要同时考虑 OS X 和 Windows，可借助三方工具 cross-env
sh
pnpm add cross-env --dev
 cross-env PORT=3000 fes dev
sh
npm i cross-env --save-dev
 cross-env PORT=3000 fes dev
.env 文件配置 ​
Fes.js 中约定根目录下以 .env 开头的文件为环境变量配置文件。
比如：
bash
PORT=3000
然后执行
bash
fes dev
会以 3000 端口启动 dev server。
本地临时配置 ​
可以新建 .env.local，这份配置会和 .env 做合并后形成最终配置。
环境配置 ​
可以通过环境变量 FES_ENV 区分不同环境来指定配置，这时候必须在执行命令前添加 FES_ENV 保证执行加载环境变量配置文件逻辑前 FES_ENV 已设置。
举个 🌰 ：
bash
FES_ENV=sit fes dev
如果存在 .env.sit 文件，则会将 .env.sit 的配置和 .env 做合并后形成最终配置。
配置优先级 ​
本地临时配置 > 环境配置 > 基础配置
TIP
如果多份配置中存在相同的配置项，则优先级高的会覆盖优先级低的。
编译时配置列表 ​
编译时配置是在构建过程需要的变量，开放给用户配置。
FES_ENV ​
指定当前的环境，不同环境各自的配置文件。
TIP
FES_ENV 在会在加载.env前使用，所以只能用命令行方式配置。
FES_PRESETS ​
添加额外的插件集入口
FES_PLUGINS ​
添加额外的插件入口
PORT ​
fes dev 时服务指定的端口号，默认是 8000
HOST ​
默认是 localhost。
HTTPS ​
默认是 false。
WATCH ​
设为 none 时不监听文件变更。比如：
WATCH=none fes dev
BABEL_CACHE ​
默认开启 Babel 编译缓存，值为 none 时禁用缓存。
ANALYZE ​
用于分析 bundle 构成，默认关闭。
比如：
ANALYZE=1 fes build
ANALYZE_MODE ​
默认是server
ANALYZE_PORT ​
默认是8888
CLEAR_OUTPUT ​
仅仅在 build 时生效。如果设置为 none，就不会在构建前清除 Output 文件内容。
RM_TMPDIR ​
仅仅在 build 时生效。如果设置为 none，就不会在构建后清除 .fes 临时文件内容。
process.env ​
运行时配置需要以 FES_APP_ 开头，比如在 .env 中配置：
FES_APP_KEY=123456789
在代码中使用：
js
console.log(process.env.FES_APP_KEY);
-// 输出 123456789
除了用户自定义的以FES_APP_开头的变量，还提供如下配置：
  • NODE_ENV：Node 环境变量
  • FES_ENV：Fes.js 环境变量
  • BASE_URL：等同于 publicPath
`,64),p=[l];function t(c,r,i,d,h,C){return s(),e("div",null,p)}const y=a(n,[["render",t]]);export{b as __pageData,y as default};
+// 输出 123456789

除了用户自定义的以FES_APP_开头的变量，还提供如下配置：

`,64),p=[n];function t(c,r,i,d,h,C){return s(),e("div",null,p)}const b=a(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/assets/guide_env.md.5a49ed1f.lean.js b/assets/guide_env.md.5a49ed1f.lean.js new file mode 100644 index 00000000..6d7e3f04 --- /dev/null +++ b/assets/guide_env.md.5a49ed1f.lean.js @@ -0,0 +1 @@ +import{_ as a,o as s,c as e,V as o}from"./chunks/framework.c1e1f082.js";const y=JSON.parse('{"title":"环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/env.md"}'),l={name:"guide/env.md"},n=o("",64),p=[n];function t(c,r,i,d,h,C){return s(),e("div",null,p)}const b=a(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/assets/guide_env.md.f6abd24c.lean.js b/assets/guide_env.md.f6abd24c.lean.js deleted file mode 100644 index 42f68bf6..00000000 --- a/assets/guide_env.md.f6abd24c.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as s,c as e,V as o}from"./chunks/framework.c1e1f082.js";const b=JSON.parse('{"title":"环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/env.md"}'),n={name:"guide/env.md"},l=o("",64),p=[l];function t(c,r,i,d,h,C){return s(),e("div",null,p)}const y=a(n,[["render",t]]);export{b as __pageData,y as default}; diff --git a/assets/guide_getting-started.md.d54b00c3.js b/assets/guide_getting-started.md.212dad7e.js similarity index 94% rename from assets/guide_getting-started.md.d54b00c3.js rename to assets/guide_getting-started.md.212dad7e.js index f22cc5d4..61404a2b 100644 --- a/assets/guide_getting-started.md.d54b00c3.js +++ b/assets/guide_getting-started.md.212dad7e.js @@ -5,15 +5,15 @@ import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.c1e1f mkdir workspace # 进入目录 workspace cd workspace

如果工作空间已存在，则直接进入

bash
# 进入目录 workspace
-cd workspace
步骤 2 在工作空间创建项目 ​
bash
# 创建模板
+cd workspace
步骤 2 在工作空间创建项目 ​
bash
# 创建模板
 pnpm create @fesjs/fes-app myapp
bash
# 创建模板
-npx @fesjs/create-fes-app myapp

如果项目文件夹 workspace/myapp 已经存在，会提示目录已存在：

`,16),c=["src"],r=s("p",null,"你可以选择：",-1),i=s("ul",null,[s("li",null,[s("code",null,"Overwrite"),a(" 删除项目文件夹，重新创建项目。")]),s("li",null,[s("code",null,"Merge"),a(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),C=s("code",null,"Overwrite",-1),y=s("code",null,"Merge",-1),d=s("code",null,"workspace/myapp",-1),A=s("code",null,"template",-1),D=["src"],h=p(`

你可以选默认适用于中后台前端应用的 PC 类型，也可以选适用于移动端的 H5 类型。

步骤 3 安装依赖 ​
bash
# 进入项目目录
+npx @fesjs/create-fes-app myapp

如果项目文件夹 workspace/myapp 已经存在，会提示目录已存在：

`,16),c=["src"],r=s("p",null,"你可以选择：",-1),i=s("ul",null,[s("li",null,[s("code",null,"Overwrite"),a(" 删除项目文件夹，重新创建项目。")]),s("li",null,[s("code",null,"Merge"),a(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),C=s("code",null,"Overwrite",-1),y=s("code",null,"Merge",-1),d=s("code",null,"workspace/myapp",-1),A=s("code",null,"template",-1),D=["src"],h=p(`

你可以选默认适用于中后台前端应用的 PC 类型，也可以选适用于移动端的 H5 类型。

步骤 3 安装依赖 ​
bash
# 进入项目目录
 cd myapp
 # 安装依赖
 pnpm i
bash
# 进入项目目录
 cd myapp
 # 安装依赖
-npm i

启动项目 ​

bash
# 开发调试
+npm i

启动项目 ​

bash
# 开发调试
 pnpm dev
 
 pnpm run v1.22.4
@@ -32,7 +32,7 @@ import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.c1e1f
 ✔ Webpack
   Compiled successfully in 3.66s
 
- DONE  Compiled successfully in 3662ms                                11:17:46 AM

Fes.js 会在 http://localhost:8000 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。

`,6),b=["src"],u=p(`

部署发布 ​

构建 ​

bash
# 构建
+ DONE  Compiled successfully in 3662ms                                11:17:46 AM

Fes.js 会在 http://localhost:8000 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。

`,6),u=["src"],b=p(`

部署发布 ​

构建 ​

bash
# 构建
 pnpm build
 
 pnpm run v1.22.4
@@ -57,4 +57,4 @@ import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.c1e1f
 ├── index.html
 ├── logo.png
 └── static
-    └── logo.0f85bba0.png

本地验证 ​

发布之前，可以通过 serve 做本地验证，验证结果应该跟执行 fes dev 的结果一样。

部署 ​

本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。

`,9),_=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),m={name:"guide/getting-started.md"},f=Object.assign(m,{setup(g){return(E,F)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),C,a(" 或者 "),y,a(" 或者项目目录 "),d,a(" 不存在，会提示选取一个 "),A,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,D)]),h,s("img",{src:n(l)("home.png"),alt:"home"},null,8,b),u]))}});export{_ as __pageData,f as default}; + └── logo.0f85bba0.png

本地验证 ​

发布之前，可以通过 serve 做本地验证，验证结果应该跟执行 fes dev 的结果一样。

部署 ​

本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。

`,9),_=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),m={name:"guide/getting-started.md"},f=Object.assign(m,{setup(g){return(E,v)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),C,a(" 或者 "),y,a(" 或者项目目录 "),d,a(" 不存在，会提示选取一个 "),A,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,D)]),h,s("img",{src:n(l)("home.png"),alt:"home"},null,8,u),b]))}});export{_ as __pageData,f as default}; diff --git a/assets/guide_getting-started.md.d54b00c3.lean.js b/assets/guide_getting-started.md.212dad7e.lean.js similarity index 83% rename from assets/guide_getting-started.md.d54b00c3.lean.js rename to assets/guide_getting-started.md.212dad7e.lean.js index 7a1154d7..8759bac5 100644 --- a/assets/guide_getting-started.md.d54b00c3.lean.js +++ b/assets/guide_getting-started.md.212dad7e.lean.js @@ -1 +1 @@ -import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.c1e1f082.js";const t=p("",16),c=["src"],r=s("p",null,"你可以选择：",-1),i=s("ul",null,[s("li",null,[s("code",null,"Overwrite"),a(" 删除项目文件夹，重新创建项目。")]),s("li",null,[s("code",null,"Merge"),a(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),C=s("code",null,"Overwrite",-1),y=s("code",null,"Merge",-1),d=s("code",null,"workspace/myapp",-1),A=s("code",null,"template",-1),D=["src"],h=p("",6),b=["src"],u=p("",9),_=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),m={name:"guide/getting-started.md"},f=Object.assign(m,{setup(g){return(E,F)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),C,a(" 或者 "),y,a(" 或者项目目录 "),d,a(" 不存在，会提示选取一个 "),A,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,D)]),h,s("img",{src:n(l)("home.png"),alt:"home"},null,8,b),u]))}});export{_ as __pageData,f as default}; +import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.c1e1f082.js";const t=p("",16),c=["src"],r=s("p",null,"你可以选择：",-1),i=s("ul",null,[s("li",null,[s("code",null,"Overwrite"),a(" 删除项目文件夹，重新创建项目。")]),s("li",null,[s("code",null,"Merge"),a(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),C=s("code",null,"Overwrite",-1),y=s("code",null,"Merge",-1),d=s("code",null,"workspace/myapp",-1),A=s("code",null,"template",-1),D=["src"],h=p("",6),u=["src"],b=p("",9),_=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),m={name:"guide/getting-started.md"},f=Object.assign(m,{setup(g){return(E,v)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),C,a(" 或者 "),y,a(" 或者项目目录 "),d,a(" 不存在，会提示选取一个 "),A,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,D)]),h,s("img",{src:n(l)("home.png"),alt:"home"},null,8,u),b]))}});export{_ as __pageData,f as default}; diff --git a/assets/index.md.447c7e4c.js b/assets/index.md.488237b2.js similarity index 95% rename from assets/index.md.447c7e4c.js rename to assets/index.md.488237b2.js index 0e201ba7..21ac4da6 100644 --- a/assets/index.md.447c7e4c.js +++ b/assets/index.md.488237b2.js @@ -1,4 +1,4 @@ -import{_ as a,o as t,c as n,I as o,E as c,J as i,C as s,a as e}from"./chunks/framework.c1e1f082.js";const A=JSON.parse('{"title":"Fes.js","description":"","frontmatter":{"layout":"home","title":"Fes.js","hero":{"name":"Fes.js","tagline":"一个好用的前端应用解决方案","image":{"src":"/logo.png","alt":"VitePress"},"actions":[{"text":"快速上手","link":"/guide/getting-started.html","theme":"brand"},{"text":"项目简介","link":"/guide/","theme":"alt"}]},"features":[{"title":"Fast","details":"Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。"},{"title":"Easy","details":"基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。"},{"title":"Strong","details":"仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。"},{"title":"可扩展","details":"借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。"},{"title":"面向未来","details":"在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。"},{"title":"令人愉悦","details":"我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}]},"headers":[],"relativePath":"index.md"}'),p={name:"index.md"},r=s("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[e("像数 1, 2, 3 一样容易 "),s("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-label":'Permalink to "像数 1, 2, 3 一样容易"'},"​")],-1),d=s("div",{class:"vp-code-group"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group--g21W",id:"tab-bcLUogE",checked:"checked"}),s("label",{for:"tab-bcLUogE"},"pnpm"),s("input",{type:"radio",name:"group--g21W",id:"tab-JE1-Td9"}),s("label",{for:"tab-JE1-Td9"},"npm")]),s("div",{class:"blocks"},[s("div",{class:"language-bash active"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(` +import{_ as a,o as t,c as n,I as o,E as c,J as i,C as s,a as e}from"./chunks/framework.c1e1f082.js";const A=JSON.parse('{"title":"Fes.js","description":"","frontmatter":{"layout":"home","title":"Fes.js","hero":{"name":"Fes.js","tagline":"一个好用的前端应用解决方案","image":{"src":"/logo.png","alt":"VitePress"},"actions":[{"text":"快速上手","link":"/guide/getting-started.html","theme":"brand"},{"text":"项目简介","link":"/guide/","theme":"alt"}]},"features":[{"title":"Fast","details":"Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。"},{"title":"Easy","details":"基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。"},{"title":"Strong","details":"仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。"},{"title":"可扩展","details":"借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。"},{"title":"面向未来","details":"在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。"},{"title":"令人愉悦","details":"我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}]},"headers":[],"relativePath":"index.md"}'),p={name:"index.md"},r=s("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[e("像数 1, 2, 3 一样容易 "),s("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-label":'Permalink to "像数 1, 2, 3 一样容易"'},"​")],-1),d=s("div",{class:"vp-code-group"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-FBQO8",id:"tab-O-4qRP0",checked:"checked"}),s("label",{for:"tab-O-4qRP0"},"pnpm"),s("input",{type:"radio",name:"group-FBQO8",id:"tab-grsueYG"}),s("label",{for:"tab-grsueYG"},"npm")]),s("div",{class:"blocks"},[s("div",{class:"language-bash active"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(` `),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"create"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/fes-app"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"myapp")]),e(` `),s("span",{class:"line"}),e(` `),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 安装依赖")]),e(` @@ -12,4 +12,4 @@ import{_ as a,o as t,c as n,I as o,E as c,J as i,C as s,a as e}from"./chunks/fra `),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"install")]),e(` `),s("span",{class:"line"}),e(` `),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 运行")]),e(` -`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"run"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])])])],-1),y=s("h2",{id:"反馈",tabindex:"-1"},[e("反馈 "),s("a",{class:"header-anchor",href:"#反馈","aria-label":'Permalink to "反馈"'},"​")],-1),h=s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Github Issue"),s("th",null,"Fes.js 开源运营小助手")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("a",{href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noreferrer"},"@fesjs/fes.js/issues")]),s("td",null,[s("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})])])])],-1);function C(u,m,g,f,b,E){const l=i("HomeContent");return t(),n("div",null,[o(l,null,{default:c(()=>[r,d,y,h]),_:1})])}const D=a(p,[["render",C]]);export{A as __pageData,D as default}; +`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"run"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])])])],-1),y=s("h2",{id:"反馈",tabindex:"-1"},[e("反馈 "),s("a",{class:"header-anchor",href:"#反馈","aria-label":'Permalink to "反馈"'},"​")],-1),h=s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Github Issue"),s("th",null,"Fes.js 开源运营小助手")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("a",{href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noreferrer"},"@fesjs/fes.js/issues")]),s("td",null,[s("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})])])])],-1);function C(u,m,g,f,b,F){const l=i("HomeContent");return t(),n("div",null,[o(l,null,{default:c(()=>[r,d,y,h]),_:1})])}const D=a(p,[["render",C]]);export{A as __pageData,D as default}; diff --git a/assets/index.md.447c7e4c.lean.js b/assets/index.md.488237b2.lean.js similarity index 95% rename from assets/index.md.447c7e4c.lean.js rename to assets/index.md.488237b2.lean.js index 0e201ba7..21ac4da6 100644 --- a/assets/index.md.447c7e4c.lean.js +++ b/assets/index.md.488237b2.lean.js @@ -1,4 +1,4 @@ -import{_ as a,o as t,c as n,I as o,E as c,J as i,C as s,a as e}from"./chunks/framework.c1e1f082.js";const A=JSON.parse('{"title":"Fes.js","description":"","frontmatter":{"layout":"home","title":"Fes.js","hero":{"name":"Fes.js","tagline":"一个好用的前端应用解决方案","image":{"src":"/logo.png","alt":"VitePress"},"actions":[{"text":"快速上手","link":"/guide/getting-started.html","theme":"brand"},{"text":"项目简介","link":"/guide/","theme":"alt"}]},"features":[{"title":"Fast","details":"Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。"},{"title":"Easy","details":"基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。"},{"title":"Strong","details":"仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。"},{"title":"可扩展","details":"借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。"},{"title":"面向未来","details":"在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。"},{"title":"令人愉悦","details":"我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}]},"headers":[],"relativePath":"index.md"}'),p={name:"index.md"},r=s("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[e("像数 1, 2, 3 一样容易 "),s("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-label":'Permalink to "像数 1, 2, 3 一样容易"'},"​")],-1),d=s("div",{class:"vp-code-group"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group--g21W",id:"tab-bcLUogE",checked:"checked"}),s("label",{for:"tab-bcLUogE"},"pnpm"),s("input",{type:"radio",name:"group--g21W",id:"tab-JE1-Td9"}),s("label",{for:"tab-JE1-Td9"},"npm")]),s("div",{class:"blocks"},[s("div",{class:"language-bash active"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(` +import{_ as a,o as t,c as n,I as o,E as c,J as i,C as s,a as e}from"./chunks/framework.c1e1f082.js";const A=JSON.parse('{"title":"Fes.js","description":"","frontmatter":{"layout":"home","title":"Fes.js","hero":{"name":"Fes.js","tagline":"一个好用的前端应用解决方案","image":{"src":"/logo.png","alt":"VitePress"},"actions":[{"text":"快速上手","link":"/guide/getting-started.html","theme":"brand"},{"text":"项目简介","link":"/guide/","theme":"alt"}]},"features":[{"title":"Fast","details":"Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。"},{"title":"Easy","details":"基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。"},{"title":"Strong","details":"仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。"},{"title":"可扩展","details":"借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。"},{"title":"面向未来","details":"在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。"},{"title":"令人愉悦","details":"我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}]},"headers":[],"relativePath":"index.md"}'),p={name:"index.md"},r=s("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[e("像数 1, 2, 3 一样容易 "),s("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-label":'Permalink to "像数 1, 2, 3 一样容易"'},"​")],-1),d=s("div",{class:"vp-code-group"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-FBQO8",id:"tab-O-4qRP0",checked:"checked"}),s("label",{for:"tab-O-4qRP0"},"pnpm"),s("input",{type:"radio",name:"group-FBQO8",id:"tab-grsueYG"}),s("label",{for:"tab-grsueYG"},"npm")]),s("div",{class:"blocks"},[s("div",{class:"language-bash active"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(` `),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"create"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/fes-app"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"myapp")]),e(` `),s("span",{class:"line"}),e(` `),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 安装依赖")]),e(` @@ -12,4 +12,4 @@ import{_ as a,o as t,c as n,I as o,E as c,J as i,C as s,a as e}from"./chunks/fra `),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"install")]),e(` `),s("span",{class:"line"}),e(` `),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 运行")]),e(` -`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"run"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])])])],-1),y=s("h2",{id:"反馈",tabindex:"-1"},[e("反馈 "),s("a",{class:"header-anchor",href:"#反馈","aria-label":'Permalink to "反馈"'},"​")],-1),h=s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Github Issue"),s("th",null,"Fes.js 开源运营小助手")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("a",{href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noreferrer"},"@fesjs/fes.js/issues")]),s("td",null,[s("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})])])])],-1);function C(u,m,g,f,b,E){const l=i("HomeContent");return t(),n("div",null,[o(l,null,{default:c(()=>[r,d,y,h]),_:1})])}const D=a(p,[["render",C]]);export{A as __pageData,D as default}; +`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"run"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])])])],-1),y=s("h2",{id:"反馈",tabindex:"-1"},[e("反馈 "),s("a",{class:"header-anchor",href:"#反馈","aria-label":'Permalink to "反馈"'},"​")],-1),h=s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Github Issue"),s("th",null,"Fes.js 开源运营小助手")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("a",{href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noreferrer"},"@fesjs/fes.js/issues")]),s("td",null,[s("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})])])])],-1);function C(u,m,g,f,b,F){const l=i("HomeContent");return t(),n("div",null,[o(l,null,{default:c(()=>[r,d,y,h]),_:1})])}const D=a(p,[["render",C]]);export{A as __pageData,D as default}; diff --git a/assets/reference_cli_index.md.a8cc67aa.lean.js b/assets/reference_cli_index.md.a8cc67aa.lean.js deleted file mode 100644 index 8b960dbe..00000000 --- a/assets/reference_cli_index.md.a8cc67aa.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as a,c as n,V as e}from"./chunks/framework.c1e1f082.js";const h=JSON.parse('{"title":"命令行工具","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/cli/index.md"}'),l={name:"reference/cli/index.md"},p=e("",34),o=[p];function t(c,i,r,C,d,y){return a(),n("div",null,o)}const u=s(l,[["render",t]]);export{h as __pageData,u as default}; diff --git a/assets/reference_cli_index.md.a8cc67aa.js b/assets/reference_cli_index.md.dea8e21f.js similarity index 95% rename from assets/reference_cli_index.md.a8cc67aa.js rename to assets/reference_cli_index.md.dea8e21f.js index 7d8f09db..6de05501 100644 --- a/assets/reference_cli_index.md.a8cc67aa.js +++ b/assets/reference_cli_index.md.dea8e21f.js @@ -1,10 +1,10 @@ -import{_ as s,o as a,c as n,V as e}from"./chunks/framework.c1e1f082.js";const h=JSON.parse('{"title":"命令行工具","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/cli/index.md"}'),l={name:"reference/cli/index.md"},p=e(`

命令行工具 ​

create-fes-app ​

通过 create-fes-app 命令创建项目模板，输入create-fes-app -h则可以看到如下信息：

Usage: create-fes-app <name>
+import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.js";const h=JSON.parse('{"title":"命令行工具","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/cli/index.md"}'),e={name:"reference/cli/index.md"},p=l(`
命令行工具 ​
create-fes-app ​
通过 create-fes-app 命令创建项目模板，输入create-fes-app -h则可以看到如下信息：
Usage: create-fes-app <name>
 
 Options:
     -v, --version            Output the current version
     -h, --help               Display help for command
     -f, --force              Overwrite target directory if it exists
-    -m, --merge              Merge target directory if it exists
可以在本机安装后使用：
bash
# 全局安装
+    -m, --merge              Merge target directory if it exists
可以在本机安装后使用：
bash
# 全局安装
 pnpm global add @fesjs/create-fes-app
 
 # 创建模板
@@ -12,7 +12,7 @@ import{_ as s,o as a,c as n,V as e}from"./chunks/framework.c1e1f082.js";const h=
 npm i -g @fesjs/create-fes-app
 
 # 创建模板
-create-fes-app fes-app
推荐使用 pnpm create 和 npx 方式创建模板，一直使用最新的模板：
bash
# 创建模板
+create-fes-app fes-app
推荐使用 pnpm create 和 npx 方式创建模板，一直使用最新的模板：
bash
# 创建模板
 pnpm create @fesjs/fes-app myapp
 
 # 安装依赖
@@ -68,4 +68,4 @@ import{_ as s,o as a,c as n,V as e}from"./chunks/framework.c1e1f082.js";const h=
   --rules                list all module rule names
   --plugins              list all plugin names
   --verbose              show full function definitions in output
-  -h, --help             display help for command
比如：
bash
fes webpack
`,34),o=[p];function t(c,i,r,C,d,y){return a(),n("div",null,o)}const u=s(l,[["render",t]]);export{h as __pageData,u as default};
+  -h, --help             display help for command

比如：

bash
fes webpack
`,34),o=[p];function t(c,i,r,C,d,y){return a(),n("div",null,o)}const u=s(e,[["render",t]]);export{h as __pageData,u as default}; diff --git a/assets/reference_cli_index.md.dea8e21f.lean.js b/assets/reference_cli_index.md.dea8e21f.lean.js new file mode 100644 index 00000000..e96e2873 --- /dev/null +++ b/assets/reference_cli_index.md.dea8e21f.lean.js @@ -0,0 +1 @@ +import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.js";const h=JSON.parse('{"title":"命令行工具","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/cli/index.md"}'),e={name:"reference/cli/index.md"},p=l("",34),o=[p];function t(c,i,r,C,d,y){return a(),n("div",null,o)}const u=s(e,[["render",t]]);export{h as __pageData,u as default}; diff --git a/guide/builder.html b/guide/builder.html index 76e7eb75..a97e6d0f 100644 --- a/guide/builder.html +++ b/guide/builder.html @@ -15,9 +15,9 @@ -
Fes.js

Appearance

本页目录

Vite 和 Webpack 双构建 ​

Fes.js@3.0.x 版本支持 Vite 和 Webpack 两种构建方式，不再内置构建方式，需要开发者自行选择:

  • 选用 Vite 构建，安装 npm i @fesjs/builder-vite 依赖即可。
  • 选用 Webpack 构建，安装 npm i @fesjs/builder-webpack 依赖即可。

使用差异 ​

由于 Fes.js 在 Vite 和 Webpack 上做了一层封装，开发者关心的构建配置不会太多。从使用上来说，主要存在以下几个差异点：

配置 ​

Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看配置。

静态文件处理 ​

由于 Vite 的限制，不支持 require 语法，具体 Vite 的用法可以查看官网

html 模版 ​

html 模版比较常规的需求，例如模版变量，Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求， Webpack 可以使用 html-webpack-plugin，Vite 使用vite-plugin-html 进行个性化配置。

TIP

fes3.0+ html 模版文件从 public/index.html 挪到项目根目录。

Released under the MIT License.

Copyright © 2020-present Webank

- +
Fes.js

Appearance

本页目录

Vite 和 Webpack 双构建 ​

Fes.js@3.0.x 版本支持 Vite 和 Webpack 两种构建方式，不再内置构建方式，需要开发者自行选择:

  • 选用 Vite 构建，安装 npm i @fesjs/builder-vite 依赖即可。
  • 选用 Webpack 构建，安装 npm i @fesjs/builder-webpack 依赖即可。

使用差异 ​

由于 Fes.js 在 Vite 和 Webpack 上做了一层封装，开发者关心的构建配置不会太多。从使用上来说，主要存在以下几个差异点：

配置 ​

Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看配置。

静态文件处理 ​

由于 Vite 的限制，不支持 require 语法，具体 Vite 的用法可以查看官网

html 模版 ​

html 模版比较常规的需求，例如模版变量，Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求， Webpack 可以使用 html-webpack-plugin，Vite 使用vite-plugin-html 进行个性化配置。

TIP

fes3.0+ html 模版文件从 public/index.html 挪到项目根目录。

Released under the MIT License.

Copyright © 2020-present Webank

+ \ No newline at end of file diff --git a/guide/config.html b/guide/config.html index 25d57d21..c138fa0a 100644 --- a/guide/config.html +++ b/guide/config.html @@ -15,7 +15,7 @@ -
Fes.js

Appearance

本页目录

编译时配置 ​

Fes.js 约定 .fes.js 文件为项目编译需要编译时配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。

一份常见的配置示例如下（更多配置项请查阅配置)：

js
import { defineBuildConfig } from '@fesjs/fes';
+    
Fes.js
Appearance
本页目录
编译时配置 ​
Fes.js 约定 .fes.js 文件为项目编译需要编译时配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。
一份常见的配置示例如下（更多配置项请查阅配置)：
js
import { defineBuildConfig } from '@fesjs/fes';
 
 export default defineBuildConfig({
     publicPath: '/',
@@ -68,8 +68,8 @@
     mock: true,
     devServer: { port: 8000 }
 };
优先级 ​
本地临时配置 > 环境配置 > 基础配置
TIP
如果多份配置中存在相同的配置项，则优先级高的会覆盖优先级低的。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/contributing.html b/guide/contributing.html
index d7941684..2a615d9b 100644
--- a/guide/contributing.html
+++ b/guide/contributing.html
@@ -15,10 +15,10 @@
   
   
   
-    
Fes.js
Appearance
本页目录
贡献指南 ​
包概览 ​
项目仓库借助于 pnpm 工作区 来实现  Monorepo ，在 packages 目录下存放多个互相关联的独立包。
  • @fesjs/create-fes-app: 创建项目模板模块。提供create-fes-app命令，提供创建多种类型项目模板的能力。
  • @fesjs/compiler: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。
  • @fesjs/runtime: 运行时插件模块。集成了 vue-router，定义运行时插件生命周期、插件通讯机制。
  • @fesjs/preset-build-in: 内置插件集。包含dev、build等命令，集成 webpack5+babel，提供方便编写插件的 API，入口文件处理，路由处理等能力。
  • @fesjs/fes-template: 适用于 PC 类型的模板项目。
  • @fesjs/fes-template-h5: 适用于 H5 类型的模板项目。
  • @fesjs/plugin-${name}: 官方插件。
  • @fesjs/fes: 入口模块。提供fes命令和 API 入口，封装@fesjs/compiler + @fesjs/runtime + @fesjs/preset-build-in，用户只需要安装此依赖和其他插件。
开发准备 ​
开发要求：
本项目开发使用的一些主要工具：
克隆仓库：
bash
git clone https://github.com/WeBankFinTech/fes.js.git
进入fes.js目录，安装依赖：
bash
pnpm i
贡献文档 ​
文档代码在docs目录，基于 vitepress 实现。
第一步：启动服务 ​
bash
pnpm docs:dev
第二步：修改 md 文件 ​
菜单配置在/docs/.vitpress/configs/sidebar/zh.ts中，可以通过此配置找到对应想修改的文档。
如果想添加图片，则可以先把图片添加至/docs/.vitpress/public，在代码中使用：
html
<img :src="withBase('framework.png')" alt="架构" />
第三步：查看更新 ​
当 md 文档保存后，文档会自动更新，在http://localhost:8080/查看。
贡献源码 ​
Fes.js统一使用ES Module规范编写源码，代码会在 node 端和浏览器端执行，所以源码需要编译后才能发布成包，再被执行。
启动编译服务 ​
bash
pnpm dev
当我们修改build.config.js中配置的包代码时，会把src目录的源码编译后到lib目录。
修改源码 ​
在了解Fes.js设计前提下，修改核心代码或者插件代码。
验证修改内容 ​
根据需求选择模板项目来验证修改内容，比如选择fes-template：
  1. 查看需待验证包是否已经添加到模板项目的依赖中，如果没有则在模板项目的 package.json 中添加包依赖，添加后在根目录执行pnpm关联依赖
  2. 启动模板项目的开发服务
bash
cd packages/fes-template
+    
Fes.js
Appearance
本页目录
贡献指南 ​
包概览 ​
项目仓库借助于 pnpm 工作区 来实现  Monorepo ，在 packages 目录下存放多个互相关联的独立包。
  • @fesjs/create-fes-app: 创建项目模板模块。提供create-fes-app命令，提供创建多种类型项目模板的能力。
  • @fesjs/compiler: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。
  • @fesjs/runtime: 运行时插件模块。集成了 vue-router，定义运行时插件生命周期、插件通讯机制。
  • @fesjs/preset-build-in: 内置插件集。包含dev、build等命令，集成 webpack5+babel，提供方便编写插件的 API，入口文件处理，路由处理等能力。
  • @fesjs/fes-template: 适用于 PC 类型的模板项目。
  • @fesjs/fes-template-h5: 适用于 H5 类型的模板项目。
  • @fesjs/plugin-${name}: 官方插件。
  • @fesjs/fes: 入口模块。提供fes命令和 API 入口，封装@fesjs/compiler + @fesjs/runtime + @fesjs/preset-build-in，用户只需要安装此依赖和其他插件。
开发准备 ​
开发要求：
本项目开发使用的一些主要工具：
克隆仓库：
bash
git clone https://github.com/WeBankFinTech/fes.js.git
进入fes.js目录，安装依赖：
bash
pnpm i
贡献文档 ​
文档代码在docs目录，基于 vitepress 实现。
第一步：启动服务 ​
bash
pnpm docs:dev
第二步：修改 md 文件 ​
菜单配置在/docs/.vitpress/configs/sidebar/zh.ts中，可以通过此配置找到对应想修改的文档。
如果想添加图片，则可以先把图片添加至/docs/.vitpress/public，在代码中使用：
html
<img :src="withBase('framework.png')" alt="架构" />
第三步：查看更新 ​
当 md 文档保存后，文档会自动更新，在http://localhost:8080/查看。
贡献源码 ​
Fes.js统一使用ES Module规范编写源码，代码会在 node 端和浏览器端执行，所以源码需要编译后才能发布成包，再被执行。
启动编译服务 ​
bash
pnpm dev
当我们修改build.config.js中配置的包代码时，会把src目录的源码编译后到lib目录。
修改源码 ​
在了解Fes.js设计前提下，修改核心代码或者插件代码。
验证修改内容 ​
根据需求选择模板项目来验证修改内容，比如选择fes-template：
  1. 查看需待验证包是否已经添加到模板项目的依赖中，如果没有则在模板项目的 package.json 中添加包依赖，添加后在根目录执行pnpm关联依赖
  2. 启动模板项目的开发服务
bash
cd packages/fes-template
 pnpm dev
  1. 在项目模板中添加代码验证修改内容
  2. 打开localhost:8000查看结果
快速调试技巧 ​
每次修改插件或者核心代码后，等待自动编译完，需要在模板目录重新执行fes dev，比较费时费力。
可以先在模板的 .fes 目录中找到对应临时代码，更改逻辑，验证完后再将变更逻辑保存到正式文件中。
WARNING
直接修改临时文件切莫重新执行fes dev，修改会被覆盖。
提交 PR ​
  1. fork 项目!
  2. 创建你的功能分支: git checkout -b my-new-feature
  3. 本地提交新代码: git commit -am 'Add some feature'
  4. 推送本地到服务器分支: git push origin my-new-feature
  5. 创建一个 PR
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/css.html b/guide/css.html
index 335da5d1..eda10413 100644
--- a/guide/css.html
+++ b/guide/css.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
使用 css ​
TIP
本文档以 css 为示例，把后缀换成 .less 同样适用。
全局样式 ​
Fes.js 中约定 src/global.css 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。
比如用于覆盖样式，
css
.layout-content {
+    
Fes.js
Appearance
本页目录
使用 css ​
TIP
本文档以 css 为示例，把后缀换成 .less 同样适用。
全局样式 ​
Fes.js 中约定 src/global.css 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。
比如用于覆盖样式，
css
.layout-content {
   max-width: 1000px;
 }
组件内样式 ​
vue
<style>
 .layout-content {
@@ -27,8 +27,8 @@
   max-width: 1000px;
 }
如果想直接引入CSS文件的话，则CSS文件名需要包含.module，比如：
js
import style from '@/styles/index.module.css'
 console.log(style)
CSS 预处理器 ​
Fes.js 内置支持 less，不支持 sass 和 stylus，但如果有需求，可以通过 chainWebpack 配置或者 fes-plugin 插件的形式支持。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/directory-structure.html b/guide/directory-structure.html
index 36b2a429..f6de286e 100644
--- a/guide/directory-structure.html
+++ b/guide/directory-structure.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
目录结构 ​
在快速上手中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 约定优于配置 的原则，一个基础的 Fes.js 项目大致是这样的：
fes-template
+    
Fes.js
Appearance
本页目录
目录结构 ​
在快速上手中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 约定优于配置 的原则，一个基础的 Fes.js 项目大致是这样的：
fes-template
 ├── package.json
 ├── tsconfig.json
 ├── mock.js
@@ -81,8 +81,8 @@
 }
其中@fesjs/fes是 Fes.js 核心依赖，另外以 @fesjs/preset-、@fesjs/plugin-、@webank/fes-preset-、@webank/fes-plugin-、fes-preset- 和 fes-plugin- 开头的依赖会被自动注册为插件或插件集。@fesjs/builder- 开头的会被注册为构建器。
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 ​
运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/env.html b/guide/env.html
index 653a481e..9e7ee69e 100644
--- a/guide/env.html
+++ b/guide/env.html
@@ -10,21 +10,21 @@
     
   
   
-  
+  
   
   
   
   
-    
Fes.js
Appearance
本页目录
环境变量 ​
在构建或者代码在端上运行中需要一些跟区分于环境的变量，用于配置构建流程或者运行时过程，这时候我们可以配置环境变量。
配置环境变量 ​
命令行添加 ​
比如：
bash
# OS X, Linux
+    
Fes.js
Appearance
本页目录
环境变量 ​
在构建或者代码在端上运行中需要一些跟区分于环境的变量，用于配置构建流程或者运行时过程，这时候我们可以配置环境变量。
配置环境变量 ​
命令行添加 ​
比如：
bash
# OS X, Linux
 PORT=3000 fes dev
 
 # Windows (cmd.exe)
-set PORT=3000 && fes dev
如果要同时考虑 OS X 和 Windows，可借助三方工具 cross-env
sh
pnpm add cross-env --dev
+set PORT=3000 && fes dev
如果要同时考虑 OS X 和 Windows，可借助三方工具 cross-env
sh
pnpm add cross-env --dev
 cross-env PORT=3000 fes dev
sh
npm i cross-env --save-dev
 cross-env PORT=3000 fes dev
.env 文件配置 ​
Fes.js 中约定根目录下以 .env 开头的文件为环境变量配置文件。
比如：
bash
PORT=3000
然后执行
bash
fes dev
会以 3000 端口启动 dev server。
本地临时配置 ​
可以新建 .env.local，这份配置会和 .env 做合并后形成最终配置。
环境配置 ​
可以通过环境变量 FES_ENV 区分不同环境来指定配置，这时候必须在执行命令前添加 FES_ENV 保证执行加载环境变量配置文件逻辑前 FES_ENV 已设置。
举个 🌰 ：
bash
FES_ENV=sit fes dev
如果存在 .env.sit 文件，则会将 .env.sit 的配置和 .env 做合并后形成最终配置。
配置优先级 ​
本地临时配置 > 环境配置 > 基础配置
TIP
如果多份配置中存在相同的配置项，则优先级高的会覆盖优先级低的。
编译时配置列表 ​
编译时配置是在构建过程需要的变量，开放给用户配置。
FES_ENV ​
指定当前的环境，不同环境各自的配置文件。
TIP
FES_ENV 在会在加载.env前使用，所以只能用命令行方式配置。
FES_PRESETS ​
添加额外的插件集入口
FES_PLUGINS ​
添加额外的插件入口
PORT ​
fes dev 时服务指定的端口号，默认是 8000
HOST ​
默认是 localhost。
HTTPS ​
默认是 false。
WATCH ​
设为 none 时不监听文件变更。比如：
WATCH=none fes dev
BABEL_CACHE ​
默认开启 Babel 编译缓存，值为 none 时禁用缓存。
ANALYZE ​
用于分析 bundle 构成，默认关闭。
比如：
ANALYZE=1 fes build
ANALYZE_MODE ​
默认是server
ANALYZE_PORT ​
默认是8888
CLEAR_OUTPUT ​
仅仅在 build 时生效。如果设置为 none，就不会在构建前清除 Output 文件内容。
RM_TMPDIR ​
仅仅在 build 时生效。如果设置为 none，就不会在构建后清除 .fes 临时文件内容。
process.env ​
运行时配置需要以 FES_APP_ 开头，比如在 .env 中配置：
FES_APP_KEY=123456789
在代码中使用：
js
console.log(process.env.FES_APP_KEY);
 // 输出 123456789
除了用户自定义的以FES_APP_开头的变量，还提供如下配置：
  • NODE_ENV：Node 环境变量
  • FES_ENV：Fes.js 环境变量
  • BASE_URL：等同于 publicPath
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/faq.html b/guide/faq.html
index 222c4466..d25b5d27 100644
--- a/guide/faq.html
+++ b/guide/faq.html
@@ -15,10 +15,10 @@
   
   
   
-    
Fes.js
Appearance
本页目录
常见问题 ​
为什么代码提示不生效？ ​
  1. 需要先运行一次fes dev
  2. 检查tsconfig.json，include包含当前编辑文件，compilerOptions.path包含
"@/*": ["./src/*"],
+    
Fes.js
Appearance
本页目录
常见问题 ​
为什么代码提示不生效？ ​
  1. 需要先运行一次fes dev
  2. 检查tsconfig.json，include包含当前编辑文件，compilerOptions.path包含
"@/*": ["./src/*"],
 "@@/*": ["./src/.fes/*"]
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/getting-started.html b/guide/getting-started.html
index a5fc5b21..3f7358ba 100644
--- a/guide/getting-started.html
+++ b/guide/getting-started.html
@@ -10,27 +10,27 @@
     
   
   
-  
+  
   
   
   
   
-    
Fes.js
Appearance
本页目录
快速上手 ​
依赖环境 ​
首先得有 Node.js，并确保 node 版本是 12.13 或以上。
bash
# 打印 node 版本
+    
Fes.js
Appearance
本页目录
快速上手 ​
依赖环境 ​
首先得有 Node.js，并确保 node 版本是 12.13 或以上。
bash
# 打印 node 版本
 node -v
 v12.13.0
推荐使用 pnpm 管理 npm 依赖
bash
# 全局安装 pnpm
 npm i pnpm -g
创建项目 ​
这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。
步骤 1 创建工作空间 ​
如果工作空间不存在，则先创建：
bash
# 创建目录 workspace
 mkdir workspace
 # 进入目录 workspace
 cd workspace
如果工作空间已存在，则直接进入
bash
# 进入目录 workspace
-cd workspace
步骤 2 在工作空间创建项目 ​
bash
# 创建模板
+cd workspace
步骤 2 在工作空间创建项目 ​
bash
# 创建模板
 pnpm create @fesjs/fes-app myapp
bash
# 创建模板
-npx @fesjs/create-fes-app myapp
如果项目文件夹 workspace/myapp 已经存在，会提示目录已存在：
目录已存在提示
你可以选择：
  • Overwrite 删除项目文件夹，重新创建项目。
  • Merge 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。
当选择 Overwrite 或者 Merge 或者项目目录 workspace/myapp 不存在，会提示选取一个 template： 选择模板类型
你可以选默认适用于中后台前端应用的 PC 类型，也可以选适用于移动端的 H5 类型。
步骤 3 安装依赖 ​
bash
# 进入项目目录
+npx @fesjs/create-fes-app myapp
如果项目文件夹 workspace/myapp 已经存在，会提示目录已存在：
目录已存在提示
你可以选择：
  • Overwrite 删除项目文件夹，重新创建项目。
  • Merge 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。
当选择 Overwrite 或者 Merge 或者项目目录 workspace/myapp 不存在，会提示选取一个 template： 选择模板类型
你可以选默认适用于中后台前端应用的 PC 类型，也可以选适用于移动端的 H5 类型。
步骤 3 安装依赖 ​
bash
# 进入项目目录
 cd myapp
 # 安装依赖
 pnpm i
bash
# 进入项目目录
 cd myapp
 # 安装依赖
-npm i
启动项目 ​
bash
# 开发调试
+npm i
启动项目 ​
bash
# 开发调试
 pnpm dev
 
 pnpm run v1.22.4
@@ -49,7 +49,7 @@
 ✔ Webpack
   Compiled successfully in 3.66s
 
- DONE  Compiled successfully in 3662ms                                11:17:46 AM
Fes.js 会在 http://localhost:8000 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
home
部署发布 ​
构建 ​
bash
# 构建
+ DONE  Compiled successfully in 3662ms                                11:17:46 AM
Fes.js 会在 http://localhost:8000 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
home
部署发布 ​
构建 ​
bash
# 构建
 pnpm build
 
 pnpm run v1.22.4
@@ -75,8 +75,8 @@
 ├── logo.png
 └── static
     └── logo.0f85bba0.png
本地验证 ​
发布之前，可以通过 serve 做本地验证，验证结果应该跟执行 fes dev 的结果一样。
部署 ​
本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/image.html b/guide/image.html
index acd9227d..dc966f5c 100644
--- a/guide/image.html
+++ b/guide/image.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
使用图片 ​
使用图片 ​
假设在 src/images 目录下有 logo.png。
Vue 里使用图片 ​
vue
<template>
+    
Fes.js
Appearance
本页目录
使用图片 ​
使用图片 ​
假设在 src/images 目录下有 logo.png。
Vue 里使用图片 ​
vue
<template>
     <img src="@/images/logo.png`" />
 </template>
JS 里使用图片 ​
js
import imageUrl from '@/images/logo.png`';
CSS 里使用图片 ​
css
.logo {
     background: url('@/images/logo.png');
@@ -31,8 +31,8 @@
     },
 };
 </script>
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/index.html b/guide/index.html
index 36af32a5..38c86eaf 100644
--- a/guide/index.html
+++ b/guide/index.html
@@ -15,13 +15,13 @@
   
   
   
-    
Fes.js
Appearance
本页目录
介绍 ​
痛点 ​
在开发一个前端项目之前，我们可能需要做如下准备工作：
  • 搭建开发环境
  • 约定代码规范
  • 封装 API 请求
  • 配置路由
  • 实现布局、菜单、导航
  • 实现登录
  • 权限管理
  • ...
除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
Fes.js 是什么？ ​
Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
它主要具备以下特点：
  • 🚀 快速 ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API 请求、数据字典、SvgIcon 等插件，可以满足大部分日常开发需求。
  • 🧨 简单 ，基于 Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的 API 入口，一致化的体验，学习起来更轻松。
  • 💪 健壮 ，只需要关心页面内容，减少写 BUG 的机会！提供单元测试、覆盖测试能力保障项目质量。
  • 📦 可扩展 ，借鉴 Umi 实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
  • 📡 面向未来 ，在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 提升构建性能和实现微服务，未来会探索 vite 等新技术。
Fes.js 如何工作？ ​
架构 ​
架构
Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
插件和插件集 ​
插件
 Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。 
.fes 临时文件 ​
.fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。
你通常会在 .fes 下看到以下目录
+ .fes
+    
Fes.js
Appearance
本页目录
介绍 ​
痛点 ​
在开发一个前端项目之前，我们可能需要做如下准备工作：
  • 搭建开发环境
  • 约定代码规范
  • 封装 API 请求
  • 配置路由
  • 实现布局、菜单、导航
  • 实现登录
  • 权限管理
  • ...
除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
Fes.js 是什么？ ​
Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
它主要具备以下特点：
  • 🚀 快速 ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API 请求、数据字典、SvgIcon 等插件，可以满足大部分日常开发需求。
  • 🧨 简单 ，基于 Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的 API 入口，一致化的体验，学习起来更轻松。
  • 💪 健壮 ，只需要关心页面内容，减少写 BUG 的机会！提供单元测试、覆盖测试能力保障项目质量。
  • 📦 可扩展 ，借鉴 Umi 实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
  • 📡 面向未来 ，在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 提升构建性能和实现微服务，未来会探索 vite 等新技术。
Fes.js 如何工作？ ​
架构 ​
架构
Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
插件和插件集 ​
插件
 Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。 
.fes 临时文件 ​
.fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。
你通常会在 .fes 下看到以下目录
+ .fes
   + core     # 内部插件生成
   + pluginA  # 外部插件生成
   + presetB  # 外部插件生成
   + fes.js   # 入口文件
临时文件是 Fes.js 中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。
你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 fes 时都会被删除并重新生成。
为什么不是 ...? ​
Vue CLI ​
Vue CLI 是基于 Vue.js 进行快速开发的完整系统，提供交互式脚手架、丰富的官方插件，并且可通过插件进行扩展，他在打包层把体验做到了极致，但是不包含路由，不是框架。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。
UMI ​
UMI 是个很好的选择，Fes.js 很多功能是借鉴 UMI 做的。UMI 是基于 React 封装的应用级框架，贯彻着函数式编程的思维。而 Vue 有所不同，虽然 Vue 3.0 向函数式迈了一大步，但大家可能依然喜欢编写 .vue文件，而非 .jsx 文件。两种思维方式会导致部分 API 设计上有所差异，虽然 UMI 有 plugin-vue ，但不太 "vue"。推荐喜欢 React 的同学使用 UMI。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/mock.html b/guide/mock.html
index 1de66a68..21fc46c9 100644
--- a/guide/mock.html
+++ b/guide/mock.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
Mock 数据 ​
Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。
约定式 Mock 文件 ​
Fes.js 约定 ./mock.js 为 mock 文件。
比如：
.
+    
Fes.js
Appearance
本页目录
Mock 数据 ​
Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。
约定式 Mock 文件 ​
Fes.js 约定 ./mock.js 为 mock 文件。
比如：
.
 ├── mock.js
 └── src
     └── pages
@@ -171,8 +171,8 @@
 }
utils 参数 ​
工具函数：
  • utils.file(path)，从项目根目录根据 path 寻找文件，返回文件流。
配置 Mock ​
详见配置 mock。
关闭 Mock ​
可以通过配置关闭。
js
export default {
     mock: false,
 };
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/plugin.html b/guide/plugin.html
index c73a61c1..748ee8a8 100644
--- a/guide/plugin.html
+++ b/guide/plugin.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
插件 ​
插件的 id 和 key ​
每个插件都会对应一个 id 和一个 key，id 是路径的简写，key 是进一步简化后用于配置的唯一值。
比如插件 /node_modules/@fesjs/plugin-foo/index.js，通常来说，其 id 为 @fesjs/plugin-foo，key 为 foo。
TIP
id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。
启动插件 ​
有多种方式引入插件
package.json 依赖 ​
Fes.js 会自动检测 dependencies 和 devDependencies 里的 fes 插件，比如：
json
{
+    
Fes.js
Appearance
本页目录
插件 ​
插件的 id 和 key ​
每个插件都会对应一个 id 和一个 key，id 是路径的简写，key 是进一步简化后用于配置的唯一值。
比如插件 /node_modules/@fesjs/plugin-foo/index.js，通常来说，其 id 为 @fesjs/plugin-foo，key 为 foo。
TIP
id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。
启动插件 ​
有多种方式引入插件
package.json 依赖 ​
Fes.js 会自动检测 dependencies 和 devDependencies 里的 fes 插件，比如：
json
{
     "dependencies": {
         "@fesjs/plugin-request": "^3.0.0"
     }
@@ -29,8 +29,8 @@
         prefix: '/v2',
     },
 };
这里的 mock 是 Mock 插件 的 key。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/public.html b/guide/public.html
index abcc671b..9b44ea88 100644
--- a/guide/public.html
+++ b/guide/public.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
静态资源 ​
有些内容不需要经过 webpack 模块化处理，则可以将这些内容放在 public 文件夹，构建后会直接复制到 dist 目录，所以你需要通过BASE_URL来引入它们。
在 HTML 模板中使用 ​
在 index.html 中需要设置：
html
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
在.vue 和 js 文件中使用 ​
vue
<template>
+    
Fes.js
Appearance
本页目录
静态资源 ​
有些内容不需要经过 webpack 模块化处理，则可以将这些内容放在 public 文件夹，构建后会直接复制到 dist 目录，所以你需要通过BASE_URL来引入它们。
在 HTML 模板中使用 ​
在 index.html 中需要设置：
html
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
在.vue 和 js 文件中使用 ​
vue
<template>
     <img :src="`${publicPath}my-image.png`" />
 </template>
 <script>
@@ -27,8 +27,8 @@
     },
 };
 </script>
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/route.html b/guide/route.html
index f4e51890..a5316a94 100644
--- a/guide/route.html
+++ b/guide/route.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
路由 ​
像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 Vue Router 实现的路由，想了解更多的同学可以看看官方文档。
路由配置 ​
在配置文件 .fes.js中通过 router 进行配置。
js
export default {
+    
Fes.js
Appearance
本页目录
路由 ​
像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 Vue Router 实现的路由，想了解更多的同学可以看看官方文档。
路由配置 ​
在配置文件 .fes.js中通过 router 进行配置。
js
export default {
     router: {
         routes: [],
         mode: 'hash',
@@ -173,8 +173,8 @@
         router.replace('/new');
     },
 };
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/runtime-config.html b/guide/runtime-config.html
index 518d8131..a0f4e8c4 100644
--- a/guide/runtime-config.html
+++ b/guide/runtime-config.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
运行时配置 ​
Fes.js 约定 src/app.js 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端，因此我们可以在这里写函数、引入浏览器端依赖项等等，注意不要引入 node 端依赖项。
运行时为啥需要配置？ ​
Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件，而 Fes.js 中 entry 文件由框架生成，用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。
例如：
plugin-access 插件定义运行时配置项：
js
api.addRuntimePluginKey(() => 'access');
plugin-access 插件读取配置项：
js
const runtimeConfig = plugin.applyPlugins({
+    
Fes.js
Appearance
本页目录
运行时配置 ​
Fes.js 约定 src/app.js 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端，因此我们可以在这里写函数、引入浏览器端依赖项等等，注意不要引入 node 端依赖项。
运行时为啥需要配置？ ​
Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件，而 Fes.js 中 entry 文件由框架生成，用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。
例如：
plugin-access 插件定义运行时配置项：
js
api.addRuntimePluginKey(() => 'access');
plugin-access 插件读取配置项：
js
const runtimeConfig = plugin.applyPlugins({
     key: 'access',
     type: ApplyPluginsType.modify,
     initialValue: {},
@@ -138,8 +138,8 @@
         console.log(to);
     });
 }
更多配置项 ​
Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/template.html b/guide/template.html
index 04fda26f..b7f491f7 100644
--- a/guide/template.html
+++ b/guide/template.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
HTML 模板 ​
Fes.js 默认模板内容是：
TIP
fes3.0+ html 模版文件从 public/index.html 挪到项目根目录。
html
<!DOCTYPE html>
+    
Fes.js
Appearance
本页目录
HTML 模板 ​
Fes.js 默认模板内容是：
TIP
fes3.0+ html 模版文件从 public/index.html 挪到项目根目录。
html
<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
@@ -34,8 +34,8 @@
 <body>
     <div><%= FES_APP_HELLO_WORLD %></div>
 </body>
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/upgrade3.html b/guide/upgrade3.html
index dc28e31a..d5eee8e6 100644
--- a/guide/upgrade3.html
+++ b/guide/upgrade3.html
@@ -15,9 +15,9 @@
   
   
   
-    
Fes.js
Appearance
本页目录
从 2.0.x 迁移到 3.0.x ​
版本 3.0.x 的 break ​
  1. 编译时的 base 配置，移到了 router.base 下。
  2. webpack-dev-server 从 v3.x 升级到了 v4.x，如果遇到配置不兼容，可以查看webpack-dev-server 3.x 升级 4.x。
继续使用 Webpack ​
  1. 添加 Webpack 构建依赖包： npm i @fesjs/builder-webpack -D。
  2. 如果有，将 public/index.html 文件挪到项目根目录，移除 html-webpack-plugin 相关配置，具体模版变量使用请查看HTML 模版。
换成 Vite ​
  1. 安装依赖包 npm i @fesjs/builder-vite。
  2. 将 Webpack 相关的配置换成 Vite，具体可查看配置。
  3. 将 html 模版文件从 public/index.html 挪到项目根目录，如果有相应的 html-webpack-plugin 配置，需要改成 vite-plugin-html 的写法。
  4. 将 require 等 Vite 不支持的代码，改写成 Vite 支持的方式。
插件 ​
插件都需要升级到 3.0.x 版本，新版添加了兼容builder的逻辑，但是提供的接口和配置没有变化，只需要升级版本即可使用。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
Fes.js
Appearance
本页目录
从 2.0.x 迁移到 3.0.x ​
版本 3.0.x 的 break ​
  1. 编译时的 base 配置，移到了 router.base 下。
  2. webpack-dev-server 从 v3.x 升级到了 v4.x，如果遇到配置不兼容，可以查看webpack-dev-server 3.x 升级 4.x。
继续使用 Webpack ​
  1. 添加 Webpack 构建依赖包： npm i @fesjs/builder-webpack -D。
  2. 如果有，将 public/index.html 文件挪到项目根目录，移除 html-webpack-plugin 相关配置，具体模版变量使用请查看HTML 模版。
换成 Vite ​
  1. 安装依赖包 npm i @fesjs/builder-vite。
  2. 将 Webpack 相关的配置换成 Vite，具体可查看配置。
  3. 将 html 模版文件从 public/index.html 挪到项目根目录，如果有相应的 html-webpack-plugin 配置，需要改成 vite-plugin-html 的写法。
  4. 将 require 等 Vite 不支持的代码，改写成 Vite 支持的方式。
插件 ​
插件都需要升级到 3.0.x 版本，新版添加了兼容builder的逻辑，但是提供的接口和配置没有变化，只需要升级版本即可使用。
Released under the MIT License.
Copyright © 2020-present Webank

+    
     
   
 
\ No newline at end of file
diff --git a/hashmap.json b/hashmap.json
index 30ba1dfc..68f150ab 100644
--- a/hashmap.json
+++ b/hashmap.json
@@ -1 +1 @@
-{"guide_contributing.md":"e88cef42","guide_builder.md":"b359815f","guide_css.md":"dff6cb1a","guide_mock.md":"541ceb28","guide_env.md":"f6abd24c","guide_faq.md":"82040b82","guide_image.md":"cfb36581","guide_index.md":"b02ebfe7","guide_getting-started.md":"d54b00c3","reference_plugin_dev_index.md":"3d159519","reference_plugin_index.md":"c59c462a","reference_plugin_plugins_editor.md":"f8bfc420","reference_plugin_plugins_access.md":"08924ef1","reference_plugin_plugins_layout.md":"82696a56","reference_plugin_plugins_model.md":"f425528b","reference_plugin_plugins_jest.md":"e67f6ac7","reference_plugin_plugins_sass.md":"9c97c518","reference_plugin_plugins_locale.md":"1edeea8b","reference_plugin_plugins_watermark.md":"0cecce74","reference_plugin_plugins_vuex.md":"ebec67ba","reference_plugin_plugins_pinia.md":"ca5af68a","guide_route.md":"8754e456","guide_config.md":"4e96018e","reference_plugin_plugins_windicss.md":"a83e9555","reference_plugin_dev_api.md":"ce09875b","reference_plugin_plugins_login.md":"7a14ea57","guide_template.md":"6735687b","reference_cli_index.md":"a8cc67aa","reference_plugin_plugins_swc.md":"dc3e99c1","guide_upgrade3.md":"f74882c1","reference_plugin_plugins_request.md":"43222d84","reference_api_index.md":"a34a40df","guide_plugin.md":"c99dbfa8","guide_runtime-config.md":"56bc8115","guide_directory-structure.md":"df257571","reference_plugin_plugins_qiankun.md":"6d83cda5","guide_public.md":"eb9a78cd","index.md":"447c7e4c","reference_api.md":"2c52417d","reference_plugin_plugins_icon.md":"85704c28","reference_plugin_plugins_enums.md":"cbb61e98","reference_config_index.md":"7ed2a419"}
+{"guide_builder.md":"b359815f","guide_config.md":"4e96018e","guide_contributing.md":"e88cef42","guide_css.md":"dff6cb1a","reference_plugin_plugins_windicss.md":"a83e9555","guide_image.md":"cfb36581","guide_faq.md":"82040b82","guide_route.md":"8754e456","guide_public.md":"eb9a78cd","reference_plugin_plugins_access.md":"08924ef1","index.md":"488237b2","reference_plugin_plugins_jest.md":"e67f6ac7","reference_plugin_plugins_locale.md":"1edeea8b","reference_plugin_plugins_model.md":"f425528b","reference_plugin_plugins_watermark.md":"0cecce74","reference_plugin_plugins_vuex.md":"ebec67ba","reference_api_index.md":"a34a40df","reference_cli_index.md":"dea8e21f","reference_config_index.md":"7ed2a419","reference_plugin_dev_api.md":"ce09875b","reference_plugin_dev_index.md":"3d159519","reference_plugin_index.md":"c59c462a","reference_plugin_plugins_qiankun.md":"6d83cda5","reference_plugin_plugins_editor.md":"f8bfc420","guide_runtime-config.md":"56bc8115","guide_mock.md":"541ceb28","reference_plugin_plugins_icon.md":"85704c28","reference_plugin_plugins_layout.md":"82696a56","reference_plugin_plugins_login.md":"7a14ea57","reference_plugin_plugins_pinia.md":"ca5af68a","reference_plugin_plugins_request.md":"43222d84","reference_plugin_plugins_swc.md":"dc3e99c1","guide_directory-structure.md":"df257571","guide_upgrade3.md":"f74882c1","reference_plugin_plugins_sass.md":"9c97c518","reference_plugin_plugins_enums.md":"cbb61e98","guide_env.md":"5a49ed1f","guide_plugin.md":"c99dbfa8","guide_template.md":"6735687b","reference_api.md":"2c52417d","guide_index.md":"b02ebfe7","guide_getting-started.md":"212dad7e"}
diff --git a/index.html b/index.html
index b6c538b5..d7c00c95 100644
--- a/index.html
+++ b/index.html
@@ -10,12 +10,12 @@
     
   
   
-  
+  
   
   
   
   
-    
Fes.js
Appearance
VitePress
Fes.js
一个好用的前端应用解决方案
快速上手
项目简介
Fast
Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。
Easy
基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
Strong
仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。
可扩展
借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
面向未来
在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。
令人愉悦
我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。
像数 1, 2, 3 一样容易 ​
bash
# 创建模板
+    
Fes.js
Appearance
VitePress
Fes.js
一个好用的前端应用解决方案
快速上手
项目简介
Fast
Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。
Easy
基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
Strong
仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。
可扩展
借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
面向未来
在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。
令人愉悦
我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。
像数 1, 2, 3 一样容易 ​
bash
# 创建模板
 pnpm create @fesjs/fes-app myapp
 
 # 安装依赖
@@ -30,8 +30,8 @@
 
 # 运行
 npm run dev
反馈 ​
Github IssueFes.js 开源运营小助手
@fesjs/fes.js/issues
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/api.html b/reference/api.html
index 5d06e745..91ab2b40 100644
--- a/reference/api.html
+++ b/reference/api.html
@@ -15,9 +15,9 @@
   
   
   
-    
Fes.js
Appearance
本页目录
API ​
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
Fes.js
Appearance
本页目录
API ​
Released under the MIT License.
Copyright © 2020-present Webank

+    
     
   
 
\ No newline at end of file
diff --git a/reference/api/index.html b/reference/api/index.html
index fba2f382..38a653b0 100644
--- a/reference/api/index.html
+++ b/reference/api/index.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
API ​
Fes.js 统一了 API 的出口，所有运行时 API（包含 Fes.js 内置 API 和插件提供的 API）全部通过@fesjs/fes导出。
js
import { someApi } from '@fesjs/fes';
基础 API ​
plugin ​
TIP
主要在插件里面使用，项目代码中一般用不到。
运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。
js
import { plugin, ApplyPluginsType } from '@fesjs/fes';
+    
Fes.js
Appearance
本页目录
API ​
Fes.js 统一了 API 的出口，所有运行时 API（包含 Fes.js 内置 API 和插件提供的 API）全部通过@fesjs/fes导出。
js
import { someApi } from '@fesjs/fes';
基础 API ​
plugin ​
TIP
主要在插件里面使用，项目代码中一般用不到。
运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。
js
import { plugin, ApplyPluginsType } from '@fesjs/fes';
 
 // 注册插件
 plugin.register({
@@ -80,8 +80,8 @@
 <router-view v-slot="{ Component, route }">
     <component :is="Component" />
 </router-view>
可以查看官方文档了解更多 RouterView 的 Porps。查看官方文档了解 RouterView 的作用域插槽。
其他 Router Methods ​
查看vue-router 官方文档了解更多。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/cli/index.html b/reference/cli/index.html
index b9e447fc..3aa6239e 100644
--- a/reference/cli/index.html
+++ b/reference/cli/index.html
@@ -10,18 +10,18 @@
     
   
   
-  
+  
   
   
   
   
-    
Fes.js
Appearance
本页目录
命令行工具 ​
create-fes-app ​
通过 create-fes-app 命令创建项目模板，输入create-fes-app -h则可以看到如下信息：
Usage: create-fes-app <name>
+    
Fes.js
Appearance
本页目录
命令行工具 ​
create-fes-app ​
通过 create-fes-app 命令创建项目模板，输入create-fes-app -h则可以看到如下信息：
Usage: create-fes-app <name>
 
 Options:
     -v, --version            Output the current version
     -h, --help               Display help for command
     -f, --force              Overwrite target directory if it exists
-    -m, --merge              Merge target directory if it exists
可以在本机安装后使用：
bash
# 全局安装
+    -m, --merge              Merge target directory if it exists
可以在本机安装后使用：
bash
# 全局安装
 pnpm global add @fesjs/create-fes-app
 
 # 创建模板
@@ -29,7 +29,7 @@
 npm i -g @fesjs/create-fes-app
 
 # 创建模板
-create-fes-app fes-app
推荐使用 pnpm create 和 npx 方式创建模板，一直使用最新的模板：
bash
# 创建模板
+create-fes-app fes-app
推荐使用 pnpm create 和 npx 方式创建模板，一直使用最新的模板：
bash
# 创建模板
 pnpm create @fesjs/fes-app myapp
 
 # 安装依赖
@@ -86,8 +86,8 @@
   --plugins              list all plugin names
   --verbose              show full function definitions in output
   -h, --help             display help for command
比如：
bash
fes webpack
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/config/index.html b/reference/config/index.html
index 62b755cf..09e6ccd1 100644
--- a/reference/config/index.html
+++ b/reference/config/index.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
配置文件 ​
Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。
配置文件解析 ​
Fes.js 会自动解析项目根目录下的 .fes.js 文件。
最基础的配置文件是这样的：
js
// .fes.js
+    
Fes.js
Appearance
本页目录
配置文件 ​
Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。
配置文件解析 ​
Fes.js 会自动解析项目根目录下的 .fes.js 文件。
最基础的配置文件是这样的：
js
// .fes.js
 export default {};
可以通过环境变量 FES_ENV 进行环境差异化配置，当我们运行 FES_ENV=prod fes dev 时，Fes.js 会找到 .fes.js 和 .fes.prod.js(可选) 的配置文件进行 deepmerge。
配置智能提示 ​
可以通过 defineBuildConfig 工具函数获取类型提示：
js
import { defineBuildConfig } from '@fesjs/fes';
 
 export default defineBuildConfig({});
共享配置 ​
alias ​
  • 类型： object
  • 默认值： {}
  • 详情：
    配置别名，对引用路径进行映射。
  • 示例：
js
export default {
@@ -122,8 +122,8 @@
 };
extraBabelPlugins ​
  • 类型： array
  • 默认值： []
  • 详情：
配置额外的 babel 插件。
  • 示例：
js
export default {
     extraBabelPlugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]],
 };
extraBabelPresets ​
  • 类型： array
  • 默认值： []
  • 详情：
配置额外的 babel 插件集。
extraPostCSSPlugins ​
  • 类型： array
  • 默认值： []
  • 详情：
    设置额外的 postcss 插件。
html ​
lessLoader ​
nodeModulesTransform ​
  • 类型： object
  • 默认值： { exclude: [] }
  • 详情：
    默认编译所有 node_modules 下的包，可以通过配置 exclude 来跳过某些包，以提高编译速度。
postcssLoader ​
vueLoader ​
  • 类型： object
  • 默认值：{}
  • 详情：
    配置 Vue Loader
Vite 专属配置 ​
viteOption ​
  • 类型： object
  • 详情：
    Vite 的配置，详情请看 Vite Config
viteVuePlugin ​
viteVueJsx ​
viteLegacy ​
viteHtml ​
更多配置项 ​
Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/dev/api.html b/reference/plugin/dev/api.html
index afb6f493..4f3b3346 100644
--- a/reference/plugin/dev/api.html
+++ b/reference/plugin/dev/api.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
插件 API ​
属性 ​
api.paths ​
一些关键的路径：
  • cwd，执行命令的绝对路径
  • absNodeModulesPath，nodeModule 的绝对路径
  • absOutputPath，输出 build 产物的绝对路径
  • absSrcPath，src 目录的绝对路径
  • absPagesPath，pages目录的绝对路径
  • absTmpPath，.fes临时文件目录的绝对路径
api.cwd ​
执行命令的绝对路径
api.pkg ​
package.json的内容
api.configInstance ​
config实例
userConfig ​
用户配置
config ​
插件配置可被修改，此为最终的配置
env ​
process.env
args ​
环境变量
核心方法 ​
describe ​
注册阶段执行，用于描述插件或插件集的 id、key、配置信息、启用方式等。
用法：describe({ id?: string, key?: string, config?: { default, schema, onChange } }, enableBy?)
例如：
js
api.describe({
+    
Fes.js
Appearance
本页目录
插件 API ​
属性 ​
api.paths ​
一些关键的路径：
  • cwd，执行命令的绝对路径
  • absNodeModulesPath，nodeModule 的绝对路径
  • absOutputPath，输出 build 产物的绝对路径
  • absSrcPath，src 目录的绝对路径
  • absPagesPath，pages目录的绝对路径
  • absTmpPath，.fes临时文件目录的绝对路径
api.cwd ​
执行命令的绝对路径
api.pkg ​
package.json的内容
api.configInstance ​
config实例
userConfig ​
用户配置
config ​
插件配置可被修改，此为最终的配置
env ​
process.env
args ​
环境变量
核心方法 ​
describe ​
注册阶段执行，用于描述插件或插件集的 id、key、配置信息、启用方式等。
用法：describe({ id?: string, key?: string, config?: { default, schema, onChange } }, enableBy?)
例如：
js
api.describe({
     key: 'esbuild',
     config: {
         schema(joi) {
@@ -173,8 +173,8 @@
         REPLACE_ROLES: JSON.stringify(roles),
     }),
 });
参数：
  • path：相对于临时文件夹的路径
  • content：文件内容
TIP
不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/dev/index.html b/reference/plugin/dev/index.html
index c0118697..b1d6f9fa 100644
--- a/reference/plugin/dev/index.html
+++ b/reference/plugin/dev/index.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
插件介绍 ​
开始 ​
一个插件是一个 npm 包，它能够为 Fes.js 创建的项目添加额外的功能，这些功能包括：
  • 项目的 webpack 配置。
  • 修改项目的 babel 配置。
  • 添加新的 fes 命令 - 例如 @fes/plugin-jest 添加了 fes test 命令，允许开发者运行单元测试。
  • 集成 Vue 的插件。
  • 修改路由配置
  • 提供运行时 API
  • ...
插件的入口是一个函数，函数会以 API 对象作为第一个参数：
js
export default (api) => {
+    
Fes.js
Appearance
本页目录
插件介绍 ​
开始 ​
一个插件是一个 npm 包，它能够为 Fes.js 创建的项目添加额外的功能，这些功能包括：
  • 项目的 webpack 配置。
  • 修改项目的 babel 配置。
  • 添加新的 fes 命令 - 例如 @fes/plugin-jest 添加了 fes test 命令，允许开发者运行单元测试。
  • 集成 Vue 的插件。
  • 修改路由配置
  • 提供运行时 API
  • ...
插件的入口是一个函数，函数会以 API 对象作为第一个参数：
js
export default (api) => {
     api.describe({
         key: 'esbuild',
         config: {
@@ -27,8 +27,8 @@
         enableBy: api.EnableBy.config,
     });
 };
API 对象是构建流程管理 Service 类的实例，api 提供一些有用的方法帮助你开发插件。
api.describe用来描述插件：
  • key， 插件的 key，可以理解为插件的名称，在 .fes.js 中用 key 配置此插件。
  • config，插件的配置信息： 
    • schema，定义配置的类型
    • default，默认配置
  • enableBy， 是否开启插件，可配置某些场景下禁用插件。
创建插件 ​
第一步：安装create-fes-app ​
bash
npm i -g @fesjs/create-fes-app
第二步：创建插件项目 ​
bash
create-fes-app pluginName
在询问Pick an template时选择Plugin!
第三步：进入插件目录 & 安装依赖 ​
bash
cd pluginName & pnpm i
第四步：启动编译 ​
bash
pnpm dev
第五步：使用插件 API 完成你的插件！（可以参考其他插件理解 api 用法和场景） ​
发布到 npm ​
以 @fesjs/preset-、@fesjs/plugin-、@webank/fes-preset-、@webank/fes-plugin-、fes-preset- 和 fes-plugin- 开头的依赖会被 Fes.js 自动注册为插件或插件集。
所以编写好的插件想发布到 npm 供其他人使用，包名必须是 fes-preset- 和 fes-plugin- 开头。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/index.html b/reference/plugin/index.html
index ff8d52e3..ba6b14ee 100644
--- a/reference/plugin/index.html
+++ b/reference/plugin/index.html
@@ -15,9 +15,9 @@
   
   
   
-    
Fes.js
Appearance
本页目录
介绍 ​
插件列表 ​
插件介绍
@fesjs/plugin-access提供对页面资源的权限控制能力
@fesjs/plugin-enums提供统一的枚举存取及丰富的函数来处理枚举
@fesjs/plugin-iconsvg 文件自动注册为组件
@fesjs/plugin-jest基于 Jest，提供单元测试、覆盖测试能力
@fesjs/plugin-layout简单的配置即可拥有布局，包括导航以及侧边栏
@fesjs/plugin-locale基于 Vue I18n，提供国际化能力
@fesjs/plugin-model简易的数据管理方案
@fesjs/plugin-request基于 Axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能
@fesjs/plugin-vuex基于 Vuex, 提供状态管理能力
@fesjs/plugin-qiankun基于 qiankun，提供微服务能力
@fesjs/plugin-sass样式支持 sass
@fesjs/plugin-monaco-editor提供代码编辑器能力， 基于monaco-editor（VS Code 使用的代码编辑器）
@fesjs/plugin-windicss基于 windicss，提供原子化 CSS 能力
@fesjs/plugin-pinia基于 pinia，提供状态管理
@fesjs/plugin-watermark水印
@fesjs/plugin-swcswc
架构 ​
架构
Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
Fes.js
Appearance
本页目录
介绍 ​
插件列表 ​
插件介绍
@fesjs/plugin-access提供对页面资源的权限控制能力
@fesjs/plugin-enums提供统一的枚举存取及丰富的函数来处理枚举
@fesjs/plugin-iconsvg 文件自动注册为组件
@fesjs/plugin-jest基于 Jest，提供单元测试、覆盖测试能力
@fesjs/plugin-layout简单的配置即可拥有布局，包括导航以及侧边栏
@fesjs/plugin-locale基于 Vue I18n，提供国际化能力
@fesjs/plugin-model简易的数据管理方案
@fesjs/plugin-request基于 Axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能
@fesjs/plugin-vuex基于 Vuex, 提供状态管理能力
@fesjs/plugin-qiankun基于 qiankun，提供微服务能力
@fesjs/plugin-sass样式支持 sass
@fesjs/plugin-monaco-editor提供代码编辑器能力， 基于monaco-editor（VS Code 使用的代码编辑器）
@fesjs/plugin-windicss基于 windicss，提供原子化 CSS 能力
@fesjs/plugin-pinia基于 pinia，提供状态管理
@fesjs/plugin-watermark水印
@fesjs/plugin-swcswc
架构 ​
架构
Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
Released under the MIT License.
Copyright © 2020-present Webank

+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/plugins/access.html b/reference/plugin/plugins/access.html
index e18015f2..18fad384 100644
--- a/reference/plugin/plugins/access.html
+++ b/reference/plugin/plugins/access.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
@fesjs/plugin-access ​
介绍 ​
对于前端应用来说，权限就是页面、页面元素是否可见。
资源 ​
Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分他们：
  • 页面的资源 ID 默认是页面的路由 path 。比如页面 pages/a.vue 的路由 path 是 /a。当页面访问 /a 时会渲染当前页面，/a 也就是页面的 accessId。
  • 页面元素的资源 ID 没有默认值，需要自定义。
vue
<template>
+    
Fes.js
Appearance
本页目录
@fesjs/plugin-access ​
介绍 ​
对于前端应用来说，权限就是页面、页面元素是否可见。
资源 ​
Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分他们：
  • 页面的资源 ID 默认是页面的路由 path 。比如页面 pages/a.vue 的路由 path 是 /a。当页面访问 /a 时会渲染当前页面，/a 也就是页面的 accessId。
  • 页面元素的资源 ID 没有默认值，需要自定义。
vue
<template>
     <access :id="accessId"> accessOnepicess1 </access>
     <div v-access="accessId">accessOnepicess2</div>
 </template>
@@ -106,8 +106,8 @@
     },
 };
 </script>
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/plugins/editor.html b/reference/plugin/plugins/editor.html
index a9e02052..40769d5b 100644
--- a/reference/plugin/plugins/editor.html
+++ b/reference/plugin/plugins/editor.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
@fesjs/plugin-monaco-editor ​
介绍 ​
我们会遇到需要编辑代码的场景，比如编辑json、javascript、python等等，Monaco Editor 是  一个好用而且强大的的代码编辑器库，引入Monaco Editor有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 Monaco Editor 版本是 1.9.1。
启用方式 ​
在 package.json 中引入依赖：
json
{
+    
Fes.js
Appearance
本页目录
@fesjs/plugin-monaco-editor ​
介绍 ​
我们会遇到需要编辑代码的场景，比如编辑json、javascript、python等等，Monaco Editor 是  一个好用而且强大的的代码编辑器库，引入Monaco Editor有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 Monaco Editor 版本是 1.9.1。
启用方式 ​
在 package.json 中引入依赖：
json
{
     "dependencies": {
         "@fesjs/fes": "^3.0.0",
         "@fesjs/plugin-monaco-editor": "^3.0.0"
@@ -56,8 +56,8 @@
     },
 };
 </script>
props ​
属性说明类型默认值
theme编辑器的主题，使用其他主题需要先使用monaco.editor.defineTheme定义主题stringdefaultTheme
language编辑器的语言string-
height编辑器的高度string100%
width编辑器的宽度string100%
modelValue(v-model)编辑器的代码string-
readOnly是否只读booleanfalse
options编辑器的配置对象object{}
check是否检查代码，如果检查不通过则不更新数据，目前只支持jsonbooleanfalse
events ​
事件名称说明回调参数
onload编辑器初始化后触发({monaco, editor, editorModel}) => void
scrollChange滚动时触发(e) => void
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/plugins/enums.html b/reference/plugin/plugins/enums.html
index 9e00e7f5..38b93cb0 100644
--- a/reference/plugin/plugins/enums.html
+++ b/reference/plugin/plugins/enums.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
@fesjs/plugin-enums ​
介绍 ​
日常业务开发中，有很多场景会使用到枚举值，比如 select-options、table-column。
该插件提供统一的枚举存取及丰富的函数来处理枚举。
启用方式 ​
在 package.json 中引入依赖：
json
{
+    
Fes.js
Appearance
本页目录
@fesjs/plugin-enums ​
介绍 ​
日常业务开发中，有很多场景会使用到枚举值，比如 select-options、table-column。
该插件提供统一的枚举存取及丰富的函数来处理枚举。
启用方式 ​
在 package.json 中引入依赖：
json
{
     "dependencies": {
         "@fesjs/fes": "^3.0.0",
         "@fesjs/plugin-enums": "^3.0.0"
@@ -138,8 +138,8 @@
 'age'        =>  18
 'role[0]'    =>  {id: 1, name: '管理员'}
 'role[1].id' =>  2
TIP
枚举项 value 如果是基本类型，则规则不生效，value 就是当前值
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/plugins/icon.html b/reference/plugin/plugins/icon.html
index 96cad11e..31ea840b 100644
--- a/reference/plugin/plugins/icon.html
+++ b/reference/plugin/plugins/icon.html
@@ -15,14 +15,14 @@
   
   
   
-    
Fes.js
Appearance
本页目录
@fesjs/plugin-icon ​
介绍 ​
提供以 component 的方式，直接使用 svg icon 的能力。
启用方式 ​
在 package.json 中引入依赖：
json
{
+    
Fes.js
Appearance
本页目录
@fesjs/plugin-icon ​
介绍 ​
提供以 component 的方式，直接使用 svg icon 的能力。
启用方式 ​
在 package.json 中引入依赖：
json
{
     "dependencies": {
         "@fesjs/fes": "^3.0.0",
         "@fesjs/plugin-icon": "^3.0.0"
     }
 }
使用 ​
新建 src/icons 目录，将 svg 文件放入其中，在 component 中引用：
jsx
<fes-icon type="iconName" />
属性 ​
属性说明类型
typesvg 文件名string
spin是否无限旋转boolean
rotate旋转角度number
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/plugins/jest.html b/reference/plugin/plugins/jest.html
index 533c2f91..9c4d71d1 100644
--- a/reference/plugin/plugins/jest.html
+++ b/reference/plugin/plugins/jest.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
@fesjs/plugin-jest ​
集成 Jest 测试框架，目前只支持单元测试和覆盖测试。
启用方式 ​
在 package.json 中引入依赖：
json
{
+    
Fes.js
Appearance
本页目录
@fesjs/plugin-jest ​
集成 Jest 测试框架，目前只支持单元测试和覆盖测试。
启用方式 ​
在 package.json 中引入依赖：
json
{
     "dependencies": {
         "@fesjs/fes": "^3.0.0",
         "@fesjs/plugin-jest": "^3.0.0"
@@ -314,8 +314,8 @@
   --watchman                    Whether to use watchman for file crawling.
                                 Disable using --no-watchman.
   -h, --help                    display help for command
比如覆盖测试：
fes test --coverage
配置文件 ​
除了插件内置的默认配置之外，插件遵循 Jest的配置文件规范，约定项目根目录下的 jest.config.js 为用户配置文件，约定 packages.json 的 jest 属性内容也是配置。
优先级 ​
args 配置 > package.json中的 jest > jest.config.js > 默认配置
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/plugins/layout.html b/reference/plugin/plugins/layout.html
index a4a79720..665bd466 100644
--- a/reference/plugin/plugins/layout.html
+++ b/reference/plugin/plugins/layout.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
@fesjs/plugin-layout ​
介绍 ​
为了进一步降低研发成本，我们将布局利用 fes.js 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
  • 侧边栏菜单数据根据路由中的配置自动生成。
  • 布局，提供 side、 top、mixin、left-right 四种布局。
  • 主题，提供 light、dark 两种主题。
  • 默认实现对路由的 404、403 处理。
  • 搭配 @fesjs/plugin-access 插件使用，可以完成对路由的权限控制。
  • 搭配 @fesjs/plugin-locale 插件使用，提供切换语言的能力。
  • 支持自定义头部或者侧边栏区域。
  • 菜单支持配置 icon。
  • 菜单标题支持国际化。
  • 可配置页面是否需要 layout。
启用方式 ​
在 package.json 中引入依赖：
json
{
+    
Fes.js
Appearance
本页目录
@fesjs/plugin-layout ​
介绍 ​
为了进一步降低研发成本，我们将布局利用 fes.js 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
  • 侧边栏菜单数据根据路由中的配置自动生成。
  • 布局，提供 side、 top、mixin、left-right 四种布局。
  • 主题，提供 light、dark 两种主题。
  • 默认实现对路由的 404、403 处理。
  • 搭配 @fesjs/plugin-access 插件使用，可以完成对路由的权限控制。
  • 搭配 @fesjs/plugin-locale 插件使用，提供切换语言的能力。
  • 支持自定义头部或者侧边栏区域。
  • 菜单支持配置 icon。
  • 菜单标题支持国际化。
  • 可配置页面是否需要 layout。
启用方式 ​
在 package.json 中引入依赖：
json
{
     "dependencies": {
         "@fesjs/fes": "^3.0.0",
         "@fesjs/plugin-layout": "^5.0.0"
@@ -115,8 +115,8 @@
 //如果要更新
 titleRef.value = 'changed';
 </script>
4.x 升级到 5.x ​
  1. 个性化 layout 配置改为使用传入 navigation
  2. customHeader 改为 renderCustom
  3. fixedHeader 改为 isFixedHeader
  4. menusConfig 改为 menuProps
  5. fixedSideBar 改为 isFixedSidebar
  6. 去掉运行时 logo、header、sidebar 三个区域显示配置，请改为使用 navigation: left-right
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/plugins/locale.html b/reference/plugin/plugins/locale.html
index fb86714d..c0b8fc8a 100644
--- a/reference/plugin/plugins/locale.html
+++ b/reference/plugin/plugins/locale.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录
@fesjs/plugin-locale ​
介绍 ​
国际化插件，基于 Vue I18n，用于解决 i18n 问题。
启用方式 ​
在 package.json 中引入依赖：
json
{
+    
Fes.js
Appearance
本页目录
@fesjs/plugin-locale ​
介绍 ​
国际化插件，基于 Vue I18n，用于解决 i18n 问题。
启用方式 ​
在 package.json 中引入依赖：
json
{
     "dependencies": {
         "@fesjs/fes": "^3.0.0",
         "@fesjs/plugin-locale": "^3.0.0"
@@ -80,8 +80,8 @@
  }
 }
 </script>
useI18n()返回结果是 Composer，提供类似 t、n、d 等转换函数，在模板中使用。
Released under the MIT License.
Copyright © 2020-present Webank

-    
+    
     
   
 
\ No newline at end of file
diff --git a/reference/plugin/plugins/login.html b/reference/plugin/plugins/login.html
index 4bda5743..00839996 100644
--- a/reference/plugin/plugins/login.html
+++ b/reference/plugin/plugins/login.html
@@ -15,7 +15,7 @@
   
   
   
-    
Fes.js
Appearance
本页目录