Fast
Fes.js 内置路由、构建、插件管理,提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件,可以满足大部分日常开发需求。
diff --git a/404.html b/404.html index a97732aa..6a78bfc5 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.b31a4
✔ 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.b31a4
├── index.html
├── logo.png
└── static
- └── logo.0f85bba0.png
发布之前,可以通过 serve 做本地验证,验证结果应该跟执行 fes dev
的结果一样。
本地验证完,就可以部署了。你需要把 dist 目录部署到服务器上。
`,9),F=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),u={name:"guide/getting-started.md"},_=Object.assign(u,{setup(m){return(g,A)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),y,a(" 或者 "),d,a(" 或者项目目录 "),B,a(" 不存在,会提示选取一个 "),E,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),C]))}});export{F as __pageData,_ as default}; + └── logo.0f85bba0.png发布之前,可以通过 serve 做本地验证,验证结果应该跟执行 fes dev
的结果一样。
本地验证完,就可以部署了。你需要把 dist 目录部署到服务器上。
`,9),v=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),u={name:"guide/getting-started.md"},_=Object.assign(u,{setup(m){return(A,g)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),y,a(" 或者 "),d,a(" 或者项目目录 "),B,a(" 不存在,会提示选取一个 "),E,a(": "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,h)]),D,s("img",{src:n(l)("home.png"),alt:"home"},null,8,C),b]))}});export{v as __pageData,_ as default}; diff --git a/assets/guide_getting-started.md.faef5c20.lean.js b/assets/guide_getting-started.md.da880f97.lean.js similarity index 75% rename from assets/guide_getting-started.md.faef5c20.lean.js rename to assets/guide_getting-started.md.da880f97.lean.js index 4d3a7401..2f36128b 100644 --- a/assets/guide_getting-started.md.faef5c20.lean.js +++ b/assets/guide_getting-started.md.da880f97.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.b31a4d00.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),y=s("code",null,"Overwrite",-1),d=s("code",null,"Merge",-1),B=s("code",null,"workspace/myapp",-1),E=s("code",null,"template",-1),D=["src"],h=p("",6),b=["src"],C=p("",9),F=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),u={name:"guide/getting-started.md"},_=Object.assign(u,{setup(m){return(g,A)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),y,a(" 或者 "),d,a(" 或者项目目录 "),B,a(" 不存在,会提示选取一个 "),E,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),C]))}});export{F as __pageData,_ 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.b31a4d00.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),y=s("code",null,"Overwrite",-1),d=s("code",null,"Merge",-1),B=s("code",null,"workspace/myapp",-1),E=s("code",null,"template",-1),h=["src"],D=p("",6),C=["src"],b=p("",9),v=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),u={name:"guide/getting-started.md"},_=Object.assign(u,{setup(m){return(A,g)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),y,a(" 或者 "),d,a(" 或者项目目录 "),B,a(" 不存在,会提示选取一个 "),E,a(": "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,h)]),D,s("img",{src:n(l)("home.png"),alt:"home"},null,8,C),b]))}});export{v as __pageData,_ as default}; diff --git a/assets/index.md.4de9335e.js b/assets/index.md.2fff344c.js similarity index 96% rename from assets/index.md.4de9335e.js rename to assets/index.md.2fff344c.js index 441e8921..3ce8b7c1 100644 --- a/assets/index.md.4de9335e.js +++ b/assets/index.md.2fff344c.js @@ -1,4 +1,4 @@ -import{_ as a,H as t,o as n,c as o,J as c,E as i,C as s,a as e}from"./chunks/framework.b31a4d00.js";const _=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-7_AmW",id:"tab-TwLpVtH",checked:"checked"}),s("label",{for:"tab-TwLpVtH"},"pnpm"),s("input",{type:"radio",name:"group-7_AmW",id:"tab-wKeYG2N"}),s("label",{for:"tab-wKeYG2N"},"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,H as t,o as n,c as o,J as c,E as i,C as s,a as e}from"./chunks/framework.b31a4d00.js";const _=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-XHLl0",id:"tab-8NoAE2e",checked:"checked"}),s("label",{for:"tab-8NoAE2e"},"pnpm"),s("input",{type:"radio",name:"group-XHLl0",id:"tab-6Eta7Qc"}),s("label",{for:"tab-6Eta7Qc"},"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:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"create"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/fes-app"),s("span",{style:{color:"#BABED8"}}," "),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(` diff --git a/assets/index.md.4de9335e.lean.js b/assets/index.md.2fff344c.lean.js similarity index 96% rename from assets/index.md.4de9335e.lean.js rename to assets/index.md.2fff344c.lean.js index 441e8921..3ce8b7c1 100644 --- a/assets/index.md.4de9335e.lean.js +++ b/assets/index.md.2fff344c.lean.js @@ -1,4 +1,4 @@ -import{_ as a,H as t,o as n,c as o,J as c,E as i,C as s,a as e}from"./chunks/framework.b31a4d00.js";const _=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-7_AmW",id:"tab-TwLpVtH",checked:"checked"}),s("label",{for:"tab-TwLpVtH"},"pnpm"),s("input",{type:"radio",name:"group-7_AmW",id:"tab-wKeYG2N"}),s("label",{for:"tab-wKeYG2N"},"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,H as t,o as n,c as o,J as c,E as i,C as s,a as e}from"./chunks/framework.b31a4d00.js";const _=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-XHLl0",id:"tab-8NoAE2e",checked:"checked"}),s("label",{for:"tab-8NoAE2e"},"pnpm"),s("input",{type:"radio",name:"group-XHLl0",id:"tab-6Eta7Qc"}),s("label",{for:"tab-6Eta7Qc"},"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:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"create"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/fes-app"),s("span",{style:{color:"#BABED8"}}," "),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(` diff --git a/assets/reference_cli_index.md.fb2c216a.js b/assets/reference_cli_index.md.bd370a56.js similarity index 95% rename from assets/reference_cli_index.md.fb2c216a.js rename to assets/reference_cli_index.md.bd370a56.js index 9c56950c..4e5db624 100644 --- a/assets/reference_cli_index.md.fb2c216a.js +++ b/assets/reference_cli_index.md.bd370a56.js @@ -1,10 +1,10 @@ -import{_ as s,o as a,c as n,V as e}from"./chunks/framework.b31a4d00.js";const u=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 -h
则可以看到如下信息:
Usage: create-fes-app <name>
+import{_ as s,o as a,c as n,V as e}from"./chunks/framework.b31a4d00.js";const f=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>
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.b31a4d00.js";const u=
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.b31a4d00.js";const u=
--rules list all module rule names
--plugins list all plugin names
--verbose show full function definitions in output
- -h, --help display help for command
比如:
bashfes webpack
`,34),o=[p];function t(c,i,r,d,b,y){return a(),n("div",null,o)}const f=s(l,[["render",t]]);export{u as __pageData,f as default};
+ -h, --help display help for command比如:
bashfes webpack
`,34),o=[p];function t(c,i,r,d,b,y){return a(),n("div",null,o)}const u=s(l,[["render",t]]);export{f as __pageData,u as default};
diff --git a/assets/reference_cli_index.md.fb2c216a.lean.js b/assets/reference_cli_index.md.bd370a56.lean.js
similarity index 62%
rename from assets/reference_cli_index.md.fb2c216a.lean.js
rename to assets/reference_cli_index.md.bd370a56.lean.js
index 2f71f3db..a6dc0933 100644
--- a/assets/reference_cli_index.md.fb2c216a.lean.js
+++ b/assets/reference_cli_index.md.bd370a56.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,V as e}from"./chunks/framework.b31a4d00.js";const u=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,d,b,y){return a(),n("div",null,o)}const f=s(l,[["render",t]]);export{u as __pageData,f as default};
+import{_ as s,o as a,c as n,V as e}from"./chunks/framework.b31a4d00.js";const f=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,d,b,y){return a(),n("div",null,o)}const u=s(l,[["render",t]]);export{f as __pageData,u as default};
diff --git a/assets/reference_plugin_plugins_layout.md.fc5542e1.js b/assets/reference_plugin_plugins_layout.md.6aabd804.js
similarity index 92%
rename from assets/reference_plugin_plugins_layout.md.fc5542e1.js
rename to assets/reference_plugin_plugins_layout.md.6aabd804.js
index 43271142..371eac81 100644
--- a/assets/reference_plugin_plugins_layout.md.fc5542e1.js
+++ b/assets/reference_plugin_plugins_layout.md.6aabd804.js
@@ -1,9 +1,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.b31a4d00.js";const t=o(`@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{
+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.b31a4d00.js";const t=o(`@fesjs/plugin-layout
介绍
为了进一步降低研发成本,我们将布局利用 fes.js
插件的方式内置,只需通过简单的配置即可拥有布局,包括导航以及侧边栏。从而做到用户无需关心布局。
- 侧边栏菜单数据根据路由中的配置自动生成。
- 布局,提供
side
、 top
、mixin
、left-right
、top-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"
}
-}
布局类型
配置参数是 navigation
, 布局有三种类型 side
、mixin
、top
和 left-right
, 默认是 side
。
side
`,10),c=["src"],r=s("h3",{id:"top",tabindex:"-1"},[l("top "),s("a",{class:"header-anchor",href:"#top","aria-label":'Permalink to "top"'},"")],-1),i=["src"],F=s("h3",{id:"mixin",tabindex:"-1"},[l("mixin "),s("a",{class:"header-anchor",href:"#mixin","aria-label":'Permalink to "mixin"'},"")],-1),D=["src"],y=s("h3",{id:"left-right",tabindex:"-1"},[l("left-right "),s("a",{class:"header-anchor",href:"#left-right","aria-label":'Permalink to "left-right"'},"")],-1),d=["src"],B=o(`页面个性化
可以为页面单独设置布局类型:
jsimport { defineRouteMeta } from '@fesjs/fes';
+}
布局类型
配置参数是 navigation
, 布局有五种类型 side
、mixin
、top
、left-right
、top-left-right
, 默认是 side
。
side
`,10),c=["src"],r=s("h3",{id:"top",tabindex:"-1"},[l("top "),s("a",{class:"header-anchor",href:"#top","aria-label":'Permalink to "top"'},"")],-1),i=["src"],F=s("h3",{id:"mixin",tabindex:"-1"},[l("mixin "),s("a",{class:"header-anchor",href:"#mixin","aria-label":'Permalink to "mixin"'},"")],-1),D=["src"],y=s("h3",{id:"left-right",tabindex:"-1"},[l("left-right "),s("a",{class:"header-anchor",href:"#left-right","aria-label":'Permalink to "left-right"'},"")],-1),d=["src"],B=["src"],u=o(`页面个性化
可以为页面单独设置布局类型:
jsimport { defineRouteMeta } from '@fesjs/fes';
defineRouteMeta({
layout: {
@@ -71,7 +71,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.
};
}
最终配置结果是运行时配置跟编译时配置合并的结果,运行时配置优先于编译时配置。
实际上运行配置能做的事情更多,推荐用运行时配置方式。
footer
类型:String
默认值:null
详情:页面底部的文字。
theme
类型:String
默认值:dark
详情:主题,可选有 dark
、light
navigation
类型:String
默认值:side
详情:页面布局类型,可选有 side
、 top
、 mixin
navigationOnError
类型:String
、Function
详情:指定 403
、404
时,页面的布局类型。值同 navigation
。也支持函数返回。
isFixedHeader
类型:Boolean
默认值:false
详情:是否固定头部,不跟随页面滚动。
isFixedSidebar
类型:Boolean
默认值:true
详情:是否固定 sidebar,不跟随页面滚动。
title
类型:String
默认值:默认为 编译时配置 title
详情:产品名。
logo
类型:String
默认值:默认提供 fes.js
的 Logo
详情:Logo 的链接,例如在 public/logo.png 放了一个 logo,可以这么配置(BASE_URL 来自这里)
jsexport const layout = {
logo: \`\${process.env.BASE_URL}logo.png\`,
-};
multiTabs
类型:boolean
默认值:false
详情:是否开启多页。
menus
类型:[] | () => Ref<[]> | () => []
默认值:[]
详情:菜单配置
子项具体配置如下:
name:菜单的名称。通过匹配 name
和路由元信息 meta 中的 name
,把菜单和路由关联起来,\b 然后使用路由元信息补充菜单配置,比如 title
、path
\b 等。
path:菜单的路径,可配置第三方地址。
match (v4.0.0+):额外匹配的路径,当前路由命中匹配规则时,此菜单高亮。
{
+};
multiTabs
类型:boolean
默认值:false
详情:是否开启多页。
menus
类型:[] | () => Ref<[]> | () => []
默认值:[]
详情:菜单配置
子项具体配置如下:
name:菜单的名称。通过匹配 name
和路由元信息 meta 中的 name
,把菜单和路由关联起来,\b 然后使用路由元信息补充菜单配置,比如 title
、path
\b 等。
path:菜单的路径,可配置第三方地址。
query:同 vue-router 的 query 参数。
params:同 vue-router 的 params 参数。
match (v4.0.0+):额外匹配的路径,当前路由命中匹配规则时,此菜单高亮。
{
path: '/product',
match: ['/product/*', '/product/create']
}
title:菜单的标题。
如果同时使用国际化插件,而且title
的值以$
开头,则使用$
后面的内容去匹配语言设置。
title 支持配置函数,对应 Fes Design 中 Menu 组件的label
插槽。仅在运行时配置中支持。
icon: 菜单的图标,只一级标题展示图标。
图标使用fes-design icon,编译时配置使用组件名称,我们会自动引入组件。
图标使用本地或者远程 svg 图片。
js{
@@ -103,4 +103,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>
4.x 升级到 5.x
- 个性化 layout 配置改为使用传入 navigation
- customHeader 改为 renderCustom
- fixedHeader 改为 isFixedHeader
- menusConfig 改为 menuProps
- fixedSideBar 改为 isFixedSidebar
- 去掉运行时 logo、header、sidebar 三个区域显示配置,请改为使用 navigation: left-right
`,65),f=JSON.parse('{"title":"@fesjs/plugin-layout","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/layout.md"}'),u={name:"reference/plugin/plugins/layout.md"},m=Object.assign(u,{setup(g){return(h,A)=>(p(),e("div",null,[t,s("img",{src:a(n)("side.png"),alt:"side"},null,8,c),r,s("img",{src:a(n)("top.png"),alt:"top"},null,8,i),F,s("img",{src:a(n)("mixin.png"),alt:"mixin"},null,8,D),y,s("img",{src:a(n)("left-right.png"),alt:"left-right"},null,8,d),B]))}});export{f as __pageData,m as default};
+</script>
4.x 升级到 5.x
- 个性化 layout 配置改为使用传入 navigation
- customHeader 改为 renderCustom
- fixedHeader 改为 isFixedHeader
- menusConfig 改为 menuProps
- fixedSideBar 改为 isFixedSidebar
- 去掉运行时 logo、header、sidebar 三个区域显示配置,请改为使用 navigation: left-right
`,65),m=JSON.parse('{"title":"@fesjs/plugin-layout","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/layout.md"}'),g={name:"reference/plugin/plugins/layout.md"},b=Object.assign(g,{setup(h){return(A,E)=>(p(),e("div",null,[t,s("img",{src:a(n)("side.png"),alt:"side"},null,8,c),r,s("img",{src:a(n)("top.png"),alt:"top"},null,8,i),F,s("img",{src:a(n)("mixin.png"),alt:"mixin"},null,8,D),y,s("img",{src:a(n)("left-right.png"),alt:"left-right"},null,8,d),s("img",{src:a(n)("top-left-right.png"),alt:"top-left-right"},null,8,B),u]))}});export{m as __pageData,b as default};
diff --git a/assets/reference_plugin_plugins_layout.md.6aabd804.lean.js b/assets/reference_plugin_plugins_layout.md.6aabd804.lean.js
new file mode 100644
index 00000000..45544dc6
--- /dev/null
+++ b/assets/reference_plugin_plugins_layout.md.6aabd804.lean.js
@@ -0,0 +1 @@
+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.b31a4d00.js";const t=o("",10),c=["src"],r=s("h3",{id:"top",tabindex:"-1"},[l("top "),s("a",{class:"header-anchor",href:"#top","aria-label":'Permalink to "top"'},"")],-1),i=["src"],F=s("h3",{id:"mixin",tabindex:"-1"},[l("mixin "),s("a",{class:"header-anchor",href:"#mixin","aria-label":'Permalink to "mixin"'},"")],-1),D=["src"],y=s("h3",{id:"left-right",tabindex:"-1"},[l("left-right "),s("a",{class:"header-anchor",href:"#left-right","aria-label":'Permalink to "left-right"'},"")],-1),d=["src"],B=["src"],u=o("",65),m=JSON.parse('{"title":"@fesjs/plugin-layout","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/layout.md"}'),g={name:"reference/plugin/plugins/layout.md"},b=Object.assign(g,{setup(h){return(A,E)=>(p(),e("div",null,[t,s("img",{src:a(n)("side.png"),alt:"side"},null,8,c),r,s("img",{src:a(n)("top.png"),alt:"top"},null,8,i),F,s("img",{src:a(n)("mixin.png"),alt:"mixin"},null,8,D),y,s("img",{src:a(n)("left-right.png"),alt:"left-right"},null,8,d),s("img",{src:a(n)("top-left-right.png"),alt:"top-left-right"},null,8,B),u]))}});export{m as __pageData,b as default};
diff --git a/assets/reference_plugin_plugins_layout.md.fc5542e1.lean.js b/assets/reference_plugin_plugins_layout.md.fc5542e1.lean.js
deleted file mode 100644
index 778795db..00000000
--- a/assets/reference_plugin_plugins_layout.md.fc5542e1.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-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.b31a4d00.js";const t=o("",10),c=["src"],r=s("h3",{id:"top",tabindex:"-1"},[l("top "),s("a",{class:"header-anchor",href:"#top","aria-label":'Permalink to "top"'},"")],-1),i=["src"],F=s("h3",{id:"mixin",tabindex:"-1"},[l("mixin "),s("a",{class:"header-anchor",href:"#mixin","aria-label":'Permalink to "mixin"'},"")],-1),D=["src"],y=s("h3",{id:"left-right",tabindex:"-1"},[l("left-right "),s("a",{class:"header-anchor",href:"#left-right","aria-label":'Permalink to "left-right"'},"")],-1),d=["src"],B=o("",65),f=JSON.parse('{"title":"@fesjs/plugin-layout","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/layout.md"}'),u={name:"reference/plugin/plugins/layout.md"},m=Object.assign(u,{setup(g){return(h,A)=>(p(),e("div",null,[t,s("img",{src:a(n)("side.png"),alt:"side"},null,8,c),r,s("img",{src:a(n)("top.png"),alt:"top"},null,8,i),F,s("img",{src:a(n)("mixin.png"),alt:"mixin"},null,8,D),y,s("img",{src:a(n)("left-right.png"),alt:"left-right"},null,8,d),B]))}});export{f as __pageData,m as default};
diff --git a/guide/builder.html b/guide/builder.html
index cc3c6f55..c6d49cf0 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 ef8943e0..1bfd28c8 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
-