Fast
Fes.js 内置路由、构建、插件管理,提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件,可以满足大部分日常开发需求。
diff --git a/404.html b/404.html index d27a4c4c..d34ddd37 100644 --- a/404.html +++ b/404.html @@ -6,14 +6,14 @@
404
But if you don't change your direction, and if you keep looking, you may end up where you are heading.
如果要同时考虑 OS X 和 Windows,可借助三方工具 cross-env
pnpm add cross-env --dev
+set PORT=3000 && fes dev
如果要同时考虑 OS X 和 Windows,可借助三方工具 cross-env
pnpm add cross-env --dev
cross-env PORT=3000 fes dev
npm i cross-env --save-dev
cross-env PORT=3000 fes dev
.env
文件配置 Fes.js 中约定根目录下以 .env
开头的文件为环境变量配置文件。
比如:
PORT=3000
然后执行
fes dev
会以 3000 端口启动 dev server。
可以新建 .env.local
,这份配置会和 .env
做合并后形成最终配置。
可以通过环境变量 FES_ENV
区分不同环境来指定配置,这时候必须在执行命令前添加 FES_ENV
保证执行加载环境变量配置文件逻辑前 FES_ENV
已设置。
举个 🌰 :
FES_ENV=sit fes dev
如果存在 .env.sit
文件,则会将 .env.sit
的配置和 .env
做合并后形成最终配置。
本地临时配置 > 环境配置 > 基础配置
TIP
如果多份配置中存在相同的配置项,则优先级高的会覆盖优先级低的。
编译时配置是在构建过程需要的变量,开放给用户配置。
指定当前的环境,不同环境各自的配置文件。
TIP
FES_ENV
在会在加载.env
前使用,所以只能用命令行方式配置。
添加额外的插件集入口
添加额外的插件入口
fes dev
时服务指定的端口号,默认是 8000
默认是 localhost
。
默认是 false
。
设为 none 时不监听文件变更。比如:
WATCH=none fes dev
默认开启 Babel 编译缓存,值为 none 时禁用缓存。
用于分析 bundle 构成,默认关闭。
比如:
ANALYZE=1 fes build
默认是server
默认是8888
仅仅在 build
时生效。如果设置为 none
,就不会在构建前清除 Output
文件内容。
仅仅在 build
时生效。如果设置为 none
,就不会在构建后清除 .fes
临时文件内容。
运行时配置需要以 FES_APP_
开头,比如在 .env
中配置:
FES_APP_KEY=123456789
在代码中使用:
console.log(process.env.FES_APP_KEY);
// 输出 123456789
除了用户自定义的以FES_APP_
开头的变量,还提供如下配置:
NODE_ENV:Node 环境变量
FES_ENV:Fes.js 环境变量
BASE_URL:等同于 publicPath
如果工作空间已存在,则直接进入
# 进入目录 workspace
-cd workspace
# 创建模板
+cd workspace
# 创建模板
pnpm create @fesjs/fes-app myapp
# 创建模板
-npx @fesjs/create-fes-app myapp
如果项目文件夹 workspace/myapp
已经存在,会提示目录已存在:
你可以选默认适用于中后台前端应用的 PC
类型,也可以选适用于移动端的 H5
类型。
# 进入项目目录
+npx @fesjs/create-fes-app myapp
如果项目文件夹 workspace/myapp
已经存在,会提示目录已存在:
你可以选默认适用于中后台前端应用的 PC
类型,也可以选适用于移动端的 H5
类型。
# 进入项目目录
cd myapp
# 安装依赖
pnpm i
# 进入项目目录
cd myapp
# 安装依赖
-npm i
# 开发调试
+npm i
# 开发调试
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 文件时,浏览器中的内容也会自动更新。
# 构建
+ DONE Compiled successfully in 3662ms 11:17:46 AM
Fes.js 会在 http://localhost:8000
启动一个热重载的开发服务器。当你修改你的 .vue 文件时,浏览器中的内容也会自动更新。
# 构建
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(E){return(g,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,b),u]))}});export{_ as __pageData,f as default}; diff --git a/assets/guide_getting-started.md.c352b5c1.lean.js b/assets/guide_getting-started.md.ac67d8b9.lean.js similarity index 89% rename from assets/guide_getting-started.md.c352b5c1.lean.js rename to assets/guide_getting-started.md.ac67d8b9.lean.js index a303174f..ee7f3669 100644 --- a/assets/guide_getting-started.md.c352b5c1.lean.js +++ b/assets/guide_getting-started.md.ac67d8b9.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(E){return(g,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),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,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,b),u]))}});export{_ as __pageData,f as default}; diff --git a/assets/index.md.3e788872.js b/assets/index.md.9756eda3.js similarity index 93% rename from assets/index.md.3e788872.js rename to assets/index.md.9756eda3.js index 8583cf92..b3be678d 100644 --- a/assets/index.md.3e788872.js +++ b/assets/index.md.9756eda3.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-8dBFz",id:"tab-KJuVmCv",checked:"checked"}),s("label",{for:"tab-KJuVmCv"},"pnpm"),s("input",{type:"radio",name:"group-8dBFz",id:"tab-z_xdrPU"}),s("label",{for:"tab-z_xdrPU"},"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-FYY-_",id:"tab-MpKLh9s",checked:"checked"}),s("label",{for:"tab-MpKLh9s"},"pnpm"),s("input",{type:"radio",name:"group-FYY-_",id:"tab-8ZgjNzw"}),s("label",{for:"tab-8ZgjNzw"},"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),C=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 h(u,m,f,g,b,_){const l=i("HomeContent");return t(),n("div",null,[o(l,null,{default:c(()=>[r,d,y,C]),_:1})])}const D=a(p,[["render",h]]);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,_){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.3e788872.lean.js b/assets/index.md.9756eda3.lean.js similarity index 93% rename from assets/index.md.3e788872.lean.js rename to assets/index.md.9756eda3.lean.js index 8583cf92..b3be678d 100644 --- a/assets/index.md.3e788872.lean.js +++ b/assets/index.md.9756eda3.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-8dBFz",id:"tab-KJuVmCv",checked:"checked"}),s("label",{for:"tab-KJuVmCv"},"pnpm"),s("input",{type:"radio",name:"group-8dBFz",id:"tab-z_xdrPU"}),s("label",{for:"tab-z_xdrPU"},"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-FYY-_",id:"tab-MpKLh9s",checked:"checked"}),s("label",{for:"tab-MpKLh9s"},"pnpm"),s("input",{type:"radio",name:"group-FYY-_",id:"tab-8ZgjNzw"}),s("label",{for:"tab-8ZgjNzw"},"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),C=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 h(u,m,f,g,b,_){const l=i("HomeContent");return t(),n("div",null,[o(l,null,{default:c(()=>[r,d,y,C]),_:1})])}const D=a(p,[["render",h]]);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,_){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.9680e116.js b/assets/reference_cli_index.md.88d6551f.js similarity index 96% rename from assets/reference_cli_index.md.9680e116.js rename to assets/reference_cli_index.md.88d6551f.js index 0c87af00..d6d49965 100644 --- a/assets/reference_cli_index.md.9680e116.js +++ b/assets/reference_cli_index.md.88d6551f.js @@ -4,7 +4,7 @@ import{_ as s,o as a,c as n,V as e}from"./chunks/framework.c1e1f082.js";const h= -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可以在本机安装后使用:
# 全局安装
+ -m, --merge Merge target directory if it exists
可以在本机安装后使用:
# 全局安装
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
方式创建模板,一直使用最新的模板:
# 创建模板
+create-fes-app fes-app
推荐使用 pnpm create
和 npx
方式创建模板,一直使用最新的模板:
# 创建模板
pnpm create @fesjs/fes-app myapp
# 安装依赖
diff --git a/assets/reference_cli_index.md.9680e116.lean.js b/assets/reference_cli_index.md.88d6551f.lean.js
similarity index 100%
rename from assets/reference_cli_index.md.9680e116.lean.js
rename to assets/reference_cli_index.md.88d6551f.lean.js
diff --git a/assets/reference_plugin_plugins_layout.md.82696a56.js b/assets/reference_plugin_plugins_layout.md.45358f84.js
similarity index 93%
rename from assets/reference_plugin_plugins_layout.md.82696a56.js
rename to assets/reference_plugin_plugins_layout.md.45358f84.js
index ae920ed0..8b936e92 100644
--- a/assets/reference_plugin_plugins_layout.md.82696a56.js
+++ b/assets/reference_plugin_plugins_layout.md.45358f84.js
@@ -3,7 +3,7 @@ import{o as p,c as e,C as s,b as a,V as o,a as l,y as n}from"./chunks/framework.
"@fesjs/fes": "^3.0.0",
"@fesjs/plugin-layout": "^5.0.0"
}
-}
配置参数是 navigation
, 布局有三种类型 side
、mixin
、top
和 left-right
, 默认是 side
。
可以为页面单独设置布局类型:
import { defineRouteMeta } from '@fesjs/fes';
+}
配置参数是 navigation
, 布局有三种类型 side
、mixin
、top
和 left-right
, 默认是 side
。
可以为页面单独设置布局类型:
import { defineRouteMeta } from '@fesjs/fes';
defineRouteMeta({
layout: {
@@ -65,7 +65,9 @@ import{o as p,c as e,C as s,b as a,V as o,a as l,y as n}from"./chunks/framework.
);
return menusRef;
},
-});
最终配置结果是运行时配置跟编译时配置合并的结果,运行时配置优先于编译时配置。
实际上运行配置能做的事情更多,推荐用运行时配置方式。
类型:String
默认值:null
详情:页面底部的文字。
类型:String
默认值:dark
详情:主题,可选有 dark
、light
类型:String
默认值:side
详情:页面布局类型,可选有 side
、 top
、 mixin
类型:Boolean
默认值:false
详情:是否固定头部,不跟随页面滚动。
类型:Boolean
默认值:true
详情:是否固定 sidebar,不跟随页面滚动。
类型:String
默认值:默认为 编译时配置 title
详情:产品名。
类型:String
默认值:默认提供 fes.js
的 Logo
详情:Logo 的链接
类型:boolean
默认值:false
详情:是否开启多页。
类型:[] | () => Ref<[]> | () => []
默认值:[]
详情:菜单配置
子项具体配置如下:
name:菜单的名称。通过匹配 name
和路由元信息 meta 中的 name
,把菜单和路由关联起来,\b 然后使用路由元信息补充菜单配置,比如 title
、path
\b 等。
path:菜单的路径,可配置第三方地址。
match (v4.0.0+):额外匹配的路径,当前路由命中匹配规则时,此菜单高亮。
{
+});
最终配置结果是运行时配置跟编译时配置合并的结果,运行时配置优先于编译时配置。
实际上运行配置能做的事情更多,推荐用运行时配置方式。
类型:String
默认值:null
详情:页面底部的文字。
类型:String
默认值:dark
详情:主题,可选有 dark
、light
类型:String
默认值:side
详情:页面布局类型,可选有 side
、 top
、 mixin
类型:Boolean
默认值:false
详情:是否固定头部,不跟随页面滚动。
类型:Boolean
默认值:true
详情:是否固定 sidebar,不跟随页面滚动。
类型:String
默认值:默认为 编译时配置 title
详情:产品名。
类型:String
默认值:默认提供 fes.js
的 Logo
详情:Logo 的链接,例如在 public/logo.png 放了一个 logo,可以这么配置(BASE_URL 来自这里)
export const layout = {
+ logo: \`\${process.env.BASE_URL}logo.png\`,
+};
类型:boolean
默认值:false
详情:是否开启多页。
类型:[] | () => Ref<[]> | () => []
默认值:[]
详情:菜单配置
子项具体配置如下:
name:菜单的名称。通过匹配 name
和路由元信息 meta 中的 name
,把菜单和路由关联起来,\b 然后使用路由元信息补充菜单配置,比如 title
、path
\b 等。
path:菜单的路径,可配置第三方地址。
match (v4.0.0+):额外匹配的路径,当前路由命中匹配规则时,此菜单高亮。
{
path: '/product',
match: ['/product/*', '/product/create']
}
title:菜单的标题。
如果同时使用国际化插件,而且title
的值以$
开头,则使用$
后面的内容去匹配语言设置。
title 支持配置函数,对应 Fes Design 中 Menu 组件的label
插槽。仅在运行时配置中支持。
icon: 菜单的图标,只一级标题展示图标。
图标使用fes-design icon,编译时配置使用组件名称,我们会自动引入组件。
图标使用本地或者远程 svg 图片。
{
@@ -97,4 +99,4 @@ import{o as p,c as e,C as s,b as a,V as o,a as l,y as n}from"./chunks/framework.
//如果要更新
titleRef.value = 'changed';
-</script>
基于 fetch 封装的 request,内置防止重复请求、请求缓存、错误处理等功能。
在 package.json
中引入依赖:
{
+import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.js";const i=JSON.parse('{"title":"@fesjs/plugin-request","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/request-4.md"}'),p={name:"reference/plugin/plugins/request-4.md"},o=l(`@fesjs/plugin-request
基于 fetch 封装的 request,内置防止重复请求、请求缓存、错误处理等功能。
启用方式
在 package.json
中引入依赖:
json{
"dependencies": {
"@fesjs/fes": "^3.0.0",
"@fesjs/plugin-request": "^4.0.0-beta.0"
diff --git a/assets/reference_plugin_plugins_request-4.md.9d66374b.lean.js b/assets/reference_plugin_plugins_request-4.md.9d66374b.lean.js
new file mode 100644
index 00000000..0d2bbe9a
--- /dev/null
+++ b/assets/reference_plugin_plugins_request-4.md.9d66374b.lean.js
@@ -0,0 +1 @@
+import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.js";const i=JSON.parse('{"title":"@fesjs/plugin-request","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/request-4.md"}'),p={name:"reference/plugin/plugins/request-4.md"},o=l("",31),e=[o];function t(c,r,D,y,F,A){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};
diff --git a/assets/reference_plugin_plugins_request.md.bfd9ee9a.js b/assets/reference_plugin_plugins_request.md.bfd9ee9a.js
new file mode 100644
index 00000000..25aefebc
--- /dev/null
+++ b/assets/reference_plugin_plugins_request.md.bfd9ee9a.js
@@ -0,0 +1,117 @@
+import{_ as s,o as n,c as a,V as l}from"./chunks/framework.c1e1f082.js";const i=JSON.parse('{"title":"@fesjs/plugin-request","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/request.md"}'),p={name:"reference/plugin/plugins/request.md"},o=l(`@fesjs/plugin-request
基于 axios 封装的 request,内置防止重复请求、请求缓存、错误处理等功能。
启用方式
在 package.json
中引入依赖:
json{
+ "dependencies": {
+ "@fesjs/fes": "^3.0.0",
+ "@fesjs/plugin-request": "^3.0.0"
+ }
+}
运行时配置
入口文件的全局配置,具体请求的配置参数会覆盖全局配置,支持 axios 所有的参数。
jsimport { defineRuntimeConfig } from '@fesjs/fes';
+
+export default defineRuntimeConfig({
+ request: {
+ // API 前缀
+ baseURL: '',
+ dataHandler(data, response) {
+ // 处理响应内容异常
+ if (data.code !== '0') {
+ if (data.code === '10000') {
+ FMesseage.error('hello world');
+ }
+ if (data.code === '20000') {
+ FMesseage.error('hello world');
+ }
+ throw new Error(response);
+ }
+ // 响应数据格式化
+ return data?.result ? data.result : data;
+ },
+ // http 异常,和插件异常
+ errorHandler(error) {
+ if (error.response) {
+ // 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围
+ console.log(error.response.data);
+ console.log(error.response.status);
+ console.log(error.response.headers);
+ } else if (error.request) {
+ // 请求已经成功发起,但没有收到响应
+ // \`error.request\` 在浏览器中是 XMLHttpRequest 的实例,
+ // 而在node.js中是 http.ClientRequest 的实例
+ console.log(error.request);
+ } else if (error.type) {
+ // 插件异常
+ console.log(error.msg);
+ } else {
+ // 发送请求时出了点问题
+ console.log('Error', error.message);
+ }
+ console.log(error.config);
+ },
+ // 请求拦截器
+ requestInterceptors: [],
+ // 响应拦截器
+ responseInterceptors: [],
+ // 支持其他 axios 配置
+ ...otherConfigs,
+ },
+});
API
request
类型:函数
详情:请求后端接口
参数:
- url: 后端接口 url
- data: 参数
- options: 配置支持 axios 所有的参数,和插件扩展参数。
返回值: Promise
useRequest
request 的封装,返回响应式 loading
、error
、 data
使用
发起一个普通 post 请求
jsimport { request } from '@fesjs/fes';
+
+request('/api/login', {
+ username: 'robby',
+ password: '123456',
+})
+ .then((res) => {
+ // do something
+ })
+ .catch((err) => {
+ // 处理异常
+ });
merge 重复请求
连续发送多个请求,会被合并成一个请求,不会报 REPEAT
接口错误。
当发生 REPEAT
请求异常,并且确保自身代码合理的情况下,可以使用该配置。
jsimport { request } from '@fesjs/fes';
+
+request(
+ '/api/login',
+ {
+ username: 'robby',
+ password: '123456',
+ },
+ {
+ mergeRequest: true, // 在一个请求没有回来前,重复发送的请求会合并成一个请求
+ },
+)
+ .then((res) => {
+ // do something
+ })
+ .catch((err) => {
+ // 处理异常
+ });
请求缓存
jsimport { request } from '@fesjs/fes';
+
+request(
+ '/api/login',
+ {
+ username: 'robby',
+ password: '123456',
+ },
+ {
+ cache: {
+ cacheType: 'ram', // ram: 内存,session: sessionStorage,local:localStorage
+ cacheTime: 1000 * 60 * 3, // 缓存时间:默认3min
+ },
+ },
+)
+ .then((res) => {
+ // do something
+ })
+ .catch((err) => {
+ // 处理异常
+ });
若 cache
传 true
,则默认使用 ram
缓存类型,缓存时间 3min。
结合 use 使用
jsimport { useRequest } from '@fesjs/fes';
+
+export default {
+ setup() {
+ const { loading, data, error } = useRequest('/api/login', {
+ username: 'robby',
+ password: '123456',
+ });
+
+ return {
+ loading,
+ data,
+ error,
+ };
+ },
+};
`,26),e=[o];function t(c,r,D,F,y,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};
diff --git a/assets/reference_plugin_plugins_request.md.43222d84.lean.js b/assets/reference_plugin_plugins_request.md.bfd9ee9a.lean.js
similarity index 53%
rename from assets/reference_plugin_plugins_request.md.43222d84.lean.js
rename to assets/reference_plugin_plugins_request.md.bfd9ee9a.lean.js
index 5a64a916..91594d12 100644
--- a/assets/reference_plugin_plugins_request.md.43222d84.lean.js
+++ b/assets/reference_plugin_plugins_request.md.bfd9ee9a.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.js";const i=JSON.parse('{"title":"@fesjs/plugin-request","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/request.md"}'),p={name:"reference/plugin/plugins/request.md"},o=l("",31),e=[o];function t(c,r,D,y,F,A){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};
+import{_ as s,o as n,c as a,V as l}from"./chunks/framework.c1e1f082.js";const i=JSON.parse('{"title":"@fesjs/plugin-request","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/request.md"}'),p={name:"reference/plugin/plugins/request.md"},o=l("",26),e=[o];function t(c,r,D,F,y,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};
diff --git a/guide/builder.html b/guide/builder.html
index 64941f21..b74ca475 100644
--- a/guide/builder.html
+++ b/guide/builder.html
@@ -6,17 +6,17 @@
Vite 和 Webpack 双构建 | Fes.js
-
+
-
+
-
diff --git a/guide/config.html b/guide/config.html
index efeef1cc..5ec0bb2d 100644
--- a/guide/config.html
+++ b/guide/config.html
@@ -6,10 +6,10 @@
编译时配置 | Fes.js
-
+
-
+
@@ -68,7 +68,7 @@
mock: true,
devServer: { port: 8000 }
};
优先级
本地临时配置 > 环境配置 > 基础配置
TIP
如果多份配置中存在相同的配置项,则优先级高的会覆盖优先级低的。
Fes.js 内置路由、构建、插件管理,提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件,可以满足大部分日常开发需求。
基于Vue.js 3.0,上手非常简单。贯彻 “约定优于配置” 思想,在设计插件上尽可能用约定替代配置,依然提供统一的插件配置入口,简单简洁又不失灵活。提供一致性的API入口,一致化的体验,学习起来更轻松。
仅仅需要关心页面内容,减少犯错的机会!提供单元测试、覆盖测试的能力保障项目质量。
借鉴 UMI 实现完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序的运行。
在满足需求的同时,我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能,已使用 webpack5 和 vite 提升构建性能和实现微服务。
我们的主要重点是开发人员体验。我们喜欢 Fes.js,并且会不断改进框架,所以您也喜欢它!期待有吸引力的解决方案,描述性的错误消息,强大的默认值和详细的文档。如果有问题或疑问,我们有用的社区将为您提供帮助。
# 创建模板
+ Skip to content 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,7 +30,7 @@
# 运行
npm run dev
反馈
Github Issue Fes.js 开源运营小助手 @fesjs/fes.js/issues 
-