diff --git a/404.html b/404.html index 31f273e5..480a5650 100644 --- a/404.html +++ b/404.html @@ -5,11 +5,11 @@ Fes.js - + -

404

这里什么都没有
返回首页
- +

404

我们怎么到这来了？
返回首页
+ diff --git a/assets/js/app.7180abc0.js b/assets/js/app.7180abc0.js new file mode 100644 index 00000000..dc9a0ee2 --- /dev/null +++ b/assets/js/app.7180abc0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[143],{3131:(e,n,i)=>{i.d(n,{g:()=>c});var t=i(2009),d=i(6971),l=i(1598),r=i(6934);const c=[t.Z,d.Z,l.Z,r.Z]},9947:(e,n,i)=>{i.d(n,{p:()=>l});var t=i(3051),d=i(8341);const l=[t.Z,d.Z]},4611:(e,n,i)=>{i.d(n,{l:()=>c});var t=i(8866),d=i(1263),l=i(6243),r=i(4862);const c=[t.Z,d.Z,l.Z,r.Z]},4150:(e,n,i)=>{i.d(n,{Z:()=>d});var t=i(6252);const d={404:(0,t.RC)((()=>i.e(491).then(i.bind(i,8491)))),Layout:(0,t.RC)((()=>i.e(293).then(i.bind(i,3293))))}},6056:(e,n,i)=>{i.d(n,{b:()=>d});var t=i(6252);const d={"v-8daa1a0e":(0,t.RC)((()=>i.e(509).then(i.bind(i,1443)))),"v-fffb8e28":(0,t.RC)((()=>i.e(807).then(i.bind(i,5195)))),"v-85fa9b2a":(0,t.RC)((()=>i.e(445).then(i.bind(i,5942)))),"v-d7fa887a":(0,t.RC)((()=>i.e(617).then(i.bind(i,2526)))),"v-884fd4bc":(0,t.RC)((()=>i.e(229).then(i.bind(i,8568)))),"v-040800dc":(0,t.RC)((()=>i.e(256).then(i.bind(i,1842)))),"v-ef8c5e10":(0,t.RC)((()=>i.e(276).then(i.bind(i,3559)))),"v-37e1c06f":(0,t.RC)((()=>i.e(600).then(i.bind(i,4708)))),"v-fb0f0066":(0,t.RC)((()=>i.e(170).then(i.bind(i,7217)))),"v-528b8b6c":(0,t.RC)((()=>i.e(972).then(i.bind(i,2682)))),"v-00cf7e23":(0,t.RC)((()=>i.e(754).then(i.bind(i,5808)))),"v-1d14d5cc":(0,t.RC)((()=>i.e(507).then(i.bind(i,9959)))),"v-7b96e3a4":(0,t.RC)((()=>i.e(278).then(i.bind(i,6430)))),"v-6320961c":(0,t.RC)((()=>i.e(626).then(i.bind(i,7570)))),"v-3dba8814":(0,t.RC)((()=>i.e(448).then(i.bind(i,74)))),"v-7b48519a":(0,t.RC)((()=>i.e(938).then(i.bind(i,5213)))),"v-a1a49808":(0,t.RC)((()=>i.e(943).then(i.bind(i,3364)))),"v-a951be94":(0,t.RC)((()=>i.e(65).then(i.bind(i,5173)))),"v-76cd065c":(0,t.RC)((()=>i.e(476).then(i.bind(i,5930)))),"v-76cb52e8":(0,t.RC)((()=>i.e(872).then(i.bind(i,3670)))),"v-2c05b6e0":(0,t.RC)((()=>i.e(960).then(i.bind(i,502)))),"v-d61a9282":(0,t.RC)((()=>i.e(783).then(i.bind(i,671)))),"v-494b840e":(0,t.RC)((()=>i.e(861).then(i.bind(i,9987)))),"v-c5618810":(0,t.RC)((()=>i.e(287).then(i.bind(i,3221)))),"v-2fe128e7":(0,t.RC)((()=>i.e(484).then(i.bind(i,5364)))),"v-323bda7e":(0,t.RC)((()=>i.e(230).then(i.bind(i,5846)))),"v-c253c956":(0,t.RC)((()=>i.e(673).then(i.bind(i,9533)))),"v-0a0e491c":(0,t.RC)((()=>i.e(312).then(i.bind(i,8645)))),"v-3cd5a4ef":(0,t.RC)((()=>i.e(977).then(i.bind(i,6116)))),"v-355ee23e":(0,t.RC)((()=>i.e(475).then(i.bind(i,2891)))),"v-411c0c9e":(0,t.RC)((()=>i.e(496).then(i.bind(i,6347)))),"v-3c4e521e":(0,t.RC)((()=>i.e(925).then(i.bind(i,7746)))),"v-6f2f6a5a":(0,t.RC)((()=>i.e(658).then(i.bind(i,1437)))),"v-b15becb0":(0,t.RC)((()=>i.e(172).then(i.bind(i,5574)))),"v-41dee210":(0,t.RC)((()=>i.e(919).then(i.bind(i,8648)))),"v-5bf80046":(0,t.RC)((()=>i.e(463).then(i.bind(i,5310)))),"v-5f4c684e":(0,t.RC)((()=>i.e(132).then(i.bind(i,4565)))),"v-1c0edac3":(0,t.RC)((()=>i.e(835).then(i.bind(i,5243)))),"v-392e58ee":(0,t.RC)((()=>i.e(802).then(i.bind(i,9673)))),"v-3706649a":(0,t.RC)((()=>i.e(88).then(i.bind(i,8109))))}},9706:(e,n,i)=>{i.d(n,{T:()=>t});const t={"v-8daa1a0e":()=>i.e(509).then(i.bind(i,6464)).then((({data:e})=>e)),"v-fffb8e28":()=>i.e(807).then(i.bind(i,9570)).then((({data:e})=>e)),"v-85fa9b2a":()=>i.e(445).then(i.bind(i,1759)).then((({data:e})=>e)),"v-d7fa887a":()=>i.e(617).then(i.bind(i,4148)).then((({data:e})=>e)),"v-884fd4bc":()=>i.e(229).then(i.bind(i,7657)).then((({data:e})=>e)),"v-040800dc":()=>i.e(256).then(i.bind(i,8145)).then((({data:e})=>e)),"v-ef8c5e10":()=>i.e(276).then(i.bind(i,9812)).then((({data:e})=>e)),"v-37e1c06f":()=>i.e(600).then(i.bind(i,4384)).then((({data:e})=>e)),"v-fb0f0066":()=>i.e(170).then(i.bind(i,3866)).then((({data:e})=>e)),"v-528b8b6c":()=>i.e(972).then(i.bind(i,2296)).then((({data:e})=>e)),"v-00cf7e23":()=>i.e(754).then(i.bind(i,6285)).then((({data:e})=>e)),"v-1d14d5cc":()=>i.e(507).then(i.bind(i,494)).then((({data:e})=>e)),"v-7b96e3a4":()=>i.e(278).then(i.bind(i,4731)).then((({data:e})=>e)),"v-6320961c":()=>i.e(626).then(i.bind(i,6254)).then((({data:e})=>e)),"v-3dba8814":()=>i.e(448).then(i.bind(i,1427)).then((({data:e})=>e)),"v-7b48519a":()=>i.e(938).then(i.bind(i,1362)).then((({data:e})=>e)),"v-a1a49808":()=>i.e(943).then(i.bind(i,5710)).then((({data:e})=>e)),"v-a951be94":()=>i.e(65).then(i.bind(i,8007)).then((({data:e})=>e)),"v-76cd065c":()=>i.e(476).then(i.bind(i,436)).then((({data:e})=>e)),"v-76cb52e8":()=>i.e(872).then(i.bind(i,7937)).then((({data:e})=>e)),"v-2c05b6e0":()=>i.e(960).then(i.bind(i,5822)).then((({data:e})=>e)),"v-d61a9282":()=>i.e(783).then(i.bind(i,6811)).then((({data:e})=>e)),"v-494b840e":()=>i.e(861).then(i.bind(i,4794)).then((({data:e})=>e)),"v-c5618810":()=>i.e(287).then(i.bind(i,4020)).then((({data:e})=>e)),"v-2fe128e7":()=>i.e(484).then(i.bind(i,2639)).then((({data:e})=>e)),"v-323bda7e":()=>i.e(230).then(i.bind(i,6062)).then((({data:e})=>e)),"v-c253c956":()=>i.e(673).then(i.bind(i,9073)).then((({data:e})=>e)),"v-0a0e491c":()=>i.e(312).then(i.bind(i,3442)).then((({data:e})=>e)),"v-3cd5a4ef":()=>i.e(977).then(i.bind(i,5393)).then((({data:e})=>e)),"v-355ee23e":()=>i.e(475).then(i.bind(i,1783)).then((({data:e})=>e)),"v-411c0c9e":()=>i.e(496).then(i.bind(i,565)).then((({data:e})=>e)),"v-3c4e521e":()=>i.e(925).then(i.bind(i,1371)).then((({data:e})=>e)),"v-6f2f6a5a":()=>i.e(658).then(i.bind(i,9465)).then((({data:e})=>e)),"v-b15becb0":()=>i.e(172).then(i.bind(i,8504)).then((({data:e})=>e)),"v-41dee210":()=>i.e(919).then(i.bind(i,2121)).then((({data:e})=>e)),"v-5bf80046":()=>i.e(463).then(i.bind(i,93)).then((({data:e})=>e)),"v-5f4c684e":()=>i.e(132).then(i.bind(i,8462)).then((({data:e})=>e)),"v-1c0edac3":()=>i.e(835).then(i.bind(i,4710)).then((({data:e})=>e)),"v-392e58ee":()=>i.e(802).then(i.bind(i,6865)).then((({data:e})=>e)),"v-3706649a":()=>i.e(88).then(i.bind(i,1801)).then((({data:e})=>e))}},4634:(e,n,i)=>{i.d(n,{g:()=>d});var t=i(4802);const d=[["v-8daa1a0e","/",{title:"首页"},["/index.html","/README.md"]],["v-fffb8e28","/guide/",{title:"介绍"},["/guide/index.html","/guide/README.md"]],["v-85fa9b2a","/guide/config.html",{title:"配置"},["/guide/config","/guide/config.md"]],["v-d7fa887a","/guide/contributing.html",{title:"贡献指南"},["/guide/contributing","/guide/contributing.md"]],["v-884fd4bc","/guide/css.html",{title:"使用 css"},["/guide/css","/guide/css.md"]],["v-040800dc","/guide/directory-structure.html",{title:"目录结构"},["/guide/directory-structure","/guide/directory-structure.md"]],["v-ef8c5e10","/guide/env.html",{title:"环境变量"},["/guide/env","/guide/env.md"]],["v-37e1c06f","/guide/faq.html",{title:"常见问题"},["/guide/faq","/guide/faq.md"]],["v-fb0f0066","/guide/getting-started.html",{title:"快速上手"},["/guide/getting-started","/guide/getting-started.md"]],["v-528b8b6c","/guide/image.html",{title:"使用图片"},["/guide/image","/guide/image.md"]],["v-00cf7e23","/guide/mock.html",{title:"Mock 数据"},["/guide/mock","/guide/mock.md"]],["v-1d14d5cc","/guide/plugin.html",{title:"插件"},["/guide/plugin","/guide/plugin.md"]],["v-7b96e3a4","/guide/public.html",{title:"静态资源"},["/guide/public","/guide/public.md"]],["v-6320961c","/guide/route.html",{title:"路由"},["/guide/route","/guide/route.md"]],["v-3dba8814","/guide/runtime-config.html",{title:"运行时配置"},["/guide/runtime-config","/guide/runtime-config.md"]],["v-7b48519a","/guide/template.html",{title:"HTML 模板"},["/guide/template","/guide/template.md"]],["v-a1a49808","/reference/api.html",{title:"API"},["/reference/api","/reference/api.md"]],["v-a951be94","/reference/cli.html",{title:"命令行接口"},["/reference/cli","/reference/cli.md"]],["v-76cd065c","/reference/api/",{title:"API"},["/reference/api/index.html","/reference/api/README.md"]],["v-76cb52e8","/reference/cli/",{title:"命令行工具"},["/reference/cli/index.html","/reference/cli/README.md"]],["v-2c05b6e0","/reference/config/",{title:"配置"},["/reference/config/index.html","/reference/config/README.md"]],["v-d61a9282","/reference/plugin/",{title:"介绍"},["/reference/plugin/index.html","/reference/plugin/README.md"]],["v-494b840e","/reference/plugin/dev/",{title:"插件介绍"},["/reference/plugin/dev/index.html","/reference/plugin/dev/README.md"]],["v-c5618810","/reference/plugin/dev/api.html",{title:"插件 API"},["/reference/plugin/dev/api","/reference/plugin/dev/api.md"]],["v-2fe128e7","/reference/plugin/plugins/access.html",{title:"@fesjs/plugin-access"},["/reference/plugin/plugins/access","/reference/plugin/plugins/access.md"]],["v-323bda7e","/reference/plugin/plugins/editor.html",{title:"@fesjs/plugin-monaco-editor"},["/reference/plugin/plugins/editor","/reference/plugin/plugins/editor.md"]],["v-c253c956","/reference/plugin/plugins/enums.html",{title:"@fesjs/plugin-enums"},["/reference/plugin/plugins/enums","/reference/plugin/plugins/enums.md"]],["v-0a0e491c","/reference/plugin/plugins/icon.html",{title:"@fesjs/plugin-icon"},["/reference/plugin/plugins/icon","/reference/plugin/plugins/icon.md"]],["v-3cd5a4ef","/reference/plugin/plugins/jest.html",{title:"@fesjs/plugin-jest"},["/reference/plugin/plugins/jest","/reference/plugin/plugins/jest.md"]],["v-355ee23e","/reference/plugin/plugins/layout.html",{title:"@fesjs/plugin-layout"},["/reference/plugin/plugins/layout","/reference/plugin/plugins/layout.md"]],["v-411c0c9e","/reference/plugin/plugins/locale.html",{title:"@fesjs/plugin-locale"},["/reference/plugin/plugins/locale","/reference/plugin/plugins/locale.md"]],["v-3c4e521e","/reference/plugin/plugins/model.html",{title:"@fesjs/plugin-model"},["/reference/plugin/plugins/model","/reference/plugin/plugins/model.md"]],["v-6f2f6a5a","/reference/plugin/plugins/pinia.html",{title:"@fesjs/plugin-pinia"},["/reference/plugin/plugins/pinia","/reference/plugin/plugins/pinia.md"]],["v-b15becb0","/reference/plugin/plugins/qiankun.html",{title:"@fesjs/plugin-qiankun"},["/reference/plugin/plugins/qiankun","/reference/plugin/plugins/qiankun.md"]],["v-41dee210","/reference/plugin/plugins/request.html",{title:"@fesjs/plugin-request"},["/reference/plugin/plugins/request","/reference/plugin/plugins/request.md"]],["v-5bf80046","/reference/plugin/plugins/sass.html",{title:"@fesjs/plugin-sass"},["/reference/plugin/plugins/sass","/reference/plugin/plugins/sass.md"]],["v-5f4c684e","/reference/plugin/plugins/vuex.html",{title:"@fesjs/plugin-vuex"},["/reference/plugin/plugins/vuex","/reference/plugin/plugins/vuex.md"]],["v-1c0edac3","/reference/plugin/plugins/watermark.html",{title:"@fesjs/plugin-watermark"},["/reference/plugin/plugins/watermark","/reference/plugin/plugins/watermark.md"]],["v-392e58ee","/reference/plugin/plugins/windicss.html",{title:"@fesjs/plugin-windicss"},["/reference/plugin/plugins/windicss","/reference/plugin/plugins/windicss.md"]],["v-3706649a","/404.html",{},["/404"]]].reduce(((e,[n,i,d,l])=>(e.push({name:n,path:i,component:t.Y,meta:d},...l.map((e=>({path:e,redirect:i})))),e)),[{name:"404",path:"/:catchAll(.*)",component:t.Y}])},5220:(e,n,i)=>{i.d(n,{H:()=>t});const t={base:"/fes.js/",lang:"en-US",title:"",description:"",head:[["link",{rel:"manifest",href:"/manifest.webmanifest"}],["link",{rel:"icon",href:"/logo.png"}]],locales:{"/":{lang:"zh-CN",title:"Fes.js",description:"一个好用的前端应用解决方案"}}}},2232:(e,n,i)=>{i.d(n,{f:()=>t});const t={logo:"/logo.png",repo:"WeBankFinTech/fes.js",docsDir:"docs",docsBranch:"master",locales:{"/":{navbar:[{text:"指南",link:"/guide/"},{text:"配置",link:"/reference/config/"},{text:"API",link:"/reference/api/"},{text:"插件",link:"/reference/plugin/"},{text:"CLI",link:"/reference/cli/"},{text:"版本",children:[{text:"next(3.0)",link:"https://fesjs.mumblefe.cn/next"},{text:"1.0",link:"https://fesjs.mumblefe.cn/1.0"}]},{text:"了解更多",children:[{text:"更新日志",link:"https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md"},{text:"fes-design",link:"http://fes-design.mumblefe.cn/"}]}],selectLanguageName:"简体中文",selectLanguageText:"选择语言",selectLanguageAriaLabel:"选择语言",sidebar:{"/guide/":[{text:"介绍",children:["/guide/README.md","/guide/getting-started.md"]},{text:"基础",children:["/guide/directory-structure.md","/guide/config.md","/guide/runtime-config.md","/guide/env.md","/guide/route.md","/guide/plugin.md","/guide/template.md","/guide/mock.md"]},{text:"样式和资源文件",children:["/guide/image.md","/guide/css.md","/guide/public.md"]},"/guide/contributing.md","/guide/faq.md"],"/reference/config/":["/reference/config/README.md"],"/reference/api/":["/reference/api/README.md"],"/reference/plugin/":["/reference/plugin/README.md",{text:"Plugins",children:["/reference/plugin/plugins/access.md","/reference/plugin/plugins/enums.md","/reference/plugin/plugins/icon.md","/reference/plugin/plugins/jest.md","/reference/plugin/plugins/layout.md","/reference/plugin/plugins/locale.md","/reference/plugin/plugins/model.md","/reference/plugin/plugins/request.md","/reference/plugin/plugins/vuex.md","/reference/plugin/plugins/qiankun.md","/reference/plugin/plugins/windicss.md","/reference/plugin/plugins/sass.md","/reference/plugin/plugins/editor.md","/reference/plugin/plugins/pinia.md","/reference/plugin/plugins/watermark.md"]},{text:"插件开发",children:["/reference/plugin/dev/README.md","/reference/plugin/dev/api.md"]}],"/reference/cli/":["/reference/cli/README.md"]},editLinkText:"在 GitHub 上编辑此页",lastUpdatedText:"上次更新",contributorsText:"贡献者",tip:"提示",warning:"注意",danger:"警告",notFound:["这里什么都没有","我们怎么到这来了？","这是一个 404 页面","看起来我们进入了错误的链接"],backToHome:"返回首页",openInNewWindow:"在新窗口打开"}},navbar:[],darkMode:!0,selectLanguageText:"Languages",selectLanguageAriaLabel:"Select language",sidebar:"auto",sidebarDepth:2,editLink:!0,editLinkText:"Edit this page",lastUpdated:!0,lastUpdatedText:"Last Updated",contributors:!0,contributorsText:"Contributors",notFound:["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],backToHome:"Take me home",openInNewWindow:"open in new window",toggleDarkMode:"toggle dark mode",toggleSidebar:"toggle sidebar"}}},e=>{e.O(0,[885,399],(()=>(5698,e(e.s=5698)))),e.O()}]); \ No newline at end of file diff --git a/assets/js/app.b7179385.js b/assets/js/app.b7179385.js deleted file mode 100644 index 3c4aa7f0..00000000 --- a/assets/js/app.b7179385.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[143],{3131:(e,n,i)=>{i.d(n,{g:()=>c});var t=i(2009),d=i(6971),l=i(1598),r=i(6934);const c=[t.Z,d.Z,l.Z,r.Z]},9947:(e,n,i)=>{i.d(n,{p:()=>l});var t=i(3051),d=i(8341);const l=[t.Z,d.Z]},4611:(e,n,i)=>{i.d(n,{l:()=>c});var t=i(8866),d=i(1263),l=i(6243),r=i(4862);const c=[t.Z,d.Z,l.Z,r.Z]},4150:(e,n,i)=>{i.d(n,{Z:()=>d});var t=i(6252);const d={404:(0,t.RC)((()=>i.e(491).then(i.bind(i,8491)))),Layout:(0,t.RC)((()=>i.e(293).then(i.bind(i,3293))))}},6056:(e,n,i)=>{i.d(n,{b:()=>d});var t=i(6252);const d={"v-8daa1a0e":(0,t.RC)((()=>i.e(509).then(i.bind(i,1443)))),"v-fffb8e28":(0,t.RC)((()=>i.e(807).then(i.bind(i,5195)))),"v-85fa9b2a":(0,t.RC)((()=>i.e(445).then(i.bind(i,5942)))),"v-d7fa887a":(0,t.RC)((()=>i.e(617).then(i.bind(i,2526)))),"v-884fd4bc":(0,t.RC)((()=>i.e(229).then(i.bind(i,8568)))),"v-040800dc":(0,t.RC)((()=>i.e(256).then(i.bind(i,1842)))),"v-ef8c5e10":(0,t.RC)((()=>i.e(276).then(i.bind(i,3559)))),"v-37e1c06f":(0,t.RC)((()=>i.e(600).then(i.bind(i,4708)))),"v-fb0f0066":(0,t.RC)((()=>i.e(170).then(i.bind(i,7217)))),"v-528b8b6c":(0,t.RC)((()=>i.e(972).then(i.bind(i,2682)))),"v-00cf7e23":(0,t.RC)((()=>i.e(754).then(i.bind(i,5808)))),"v-1d14d5cc":(0,t.RC)((()=>i.e(507).then(i.bind(i,9959)))),"v-7b96e3a4":(0,t.RC)((()=>i.e(278).then(i.bind(i,6430)))),"v-6320961c":(0,t.RC)((()=>i.e(626).then(i.bind(i,7570)))),"v-3dba8814":(0,t.RC)((()=>i.e(448).then(i.bind(i,74)))),"v-7b48519a":(0,t.RC)((()=>i.e(938).then(i.bind(i,5213)))),"v-a1a49808":(0,t.RC)((()=>i.e(943).then(i.bind(i,3364)))),"v-a951be94":(0,t.RC)((()=>i.e(65).then(i.bind(i,5173)))),"v-76cd065c":(0,t.RC)((()=>i.e(476).then(i.bind(i,5930)))),"v-76cb52e8":(0,t.RC)((()=>i.e(872).then(i.bind(i,3670)))),"v-2c05b6e0":(0,t.RC)((()=>i.e(960).then(i.bind(i,502)))),"v-d61a9282":(0,t.RC)((()=>i.e(783).then(i.bind(i,671)))),"v-494b840e":(0,t.RC)((()=>i.e(861).then(i.bind(i,9987)))),"v-c5618810":(0,t.RC)((()=>i.e(287).then(i.bind(i,3221)))),"v-2fe128e7":(0,t.RC)((()=>i.e(484).then(i.bind(i,5364)))),"v-323bda7e":(0,t.RC)((()=>i.e(230).then(i.bind(i,5846)))),"v-c253c956":(0,t.RC)((()=>i.e(673).then(i.bind(i,9533)))),"v-0a0e491c":(0,t.RC)((()=>i.e(312).then(i.bind(i,8645)))),"v-3cd5a4ef":(0,t.RC)((()=>i.e(977).then(i.bind(i,6116)))),"v-355ee23e":(0,t.RC)((()=>i.e(475).then(i.bind(i,2891)))),"v-411c0c9e":(0,t.RC)((()=>i.e(496).then(i.bind(i,6347)))),"v-3c4e521e":(0,t.RC)((()=>i.e(925).then(i.bind(i,7746)))),"v-6f2f6a5a":(0,t.RC)((()=>i.e(658).then(i.bind(i,1437)))),"v-b15becb0":(0,t.RC)((()=>i.e(172).then(i.bind(i,5574)))),"v-41dee210":(0,t.RC)((()=>i.e(919).then(i.bind(i,797)))),"v-5bf80046":(0,t.RC)((()=>i.e(463).then(i.bind(i,5310)))),"v-5f4c684e":(0,t.RC)((()=>i.e(132).then(i.bind(i,4565)))),"v-1c0edac3":(0,t.RC)((()=>i.e(835).then(i.bind(i,5243)))),"v-392e58ee":(0,t.RC)((()=>i.e(802).then(i.bind(i,9673)))),"v-3706649a":(0,t.RC)((()=>i.e(88).then(i.bind(i,8109))))}},9706:(e,n,i)=>{i.d(n,{T:()=>t});const t={"v-8daa1a0e":()=>i.e(509).then(i.bind(i,6464)).then((({data:e})=>e)),"v-fffb8e28":()=>i.e(807).then(i.bind(i,9570)).then((({data:e})=>e)),"v-85fa9b2a":()=>i.e(445).then(i.bind(i,1759)).then((({data:e})=>e)),"v-d7fa887a":()=>i.e(617).then(i.bind(i,4148)).then((({data:e})=>e)),"v-884fd4bc":()=>i.e(229).then(i.bind(i,7657)).then((({data:e})=>e)),"v-040800dc":()=>i.e(256).then(i.bind(i,8145)).then((({data:e})=>e)),"v-ef8c5e10":()=>i.e(276).then(i.bind(i,9812)).then((({data:e})=>e)),"v-37e1c06f":()=>i.e(600).then(i.bind(i,4384)).then((({data:e})=>e)),"v-fb0f0066":()=>i.e(170).then(i.bind(i,3866)).then((({data:e})=>e)),"v-528b8b6c":()=>i.e(972).then(i.bind(i,2296)).then((({data:e})=>e)),"v-00cf7e23":()=>i.e(754).then(i.bind(i,6285)).then((({data:e})=>e)),"v-1d14d5cc":()=>i.e(507).then(i.bind(i,494)).then((({data:e})=>e)),"v-7b96e3a4":()=>i.e(278).then(i.bind(i,4731)).then((({data:e})=>e)),"v-6320961c":()=>i.e(626).then(i.bind(i,6254)).then((({data:e})=>e)),"v-3dba8814":()=>i.e(448).then(i.bind(i,1427)).then((({data:e})=>e)),"v-7b48519a":()=>i.e(938).then(i.bind(i,1362)).then((({data:e})=>e)),"v-a1a49808":()=>i.e(943).then(i.bind(i,5710)).then((({data:e})=>e)),"v-a951be94":()=>i.e(65).then(i.bind(i,8007)).then((({data:e})=>e)),"v-76cd065c":()=>i.e(476).then(i.bind(i,436)).then((({data:e})=>e)),"v-76cb52e8":()=>i.e(872).then(i.bind(i,7937)).then((({data:e})=>e)),"v-2c05b6e0":()=>i.e(960).then(i.bind(i,5822)).then((({data:e})=>e)),"v-d61a9282":()=>i.e(783).then(i.bind(i,6811)).then((({data:e})=>e)),"v-494b840e":()=>i.e(861).then(i.bind(i,4794)).then((({data:e})=>e)),"v-c5618810":()=>i.e(287).then(i.bind(i,4020)).then((({data:e})=>e)),"v-2fe128e7":()=>i.e(484).then(i.bind(i,2639)).then((({data:e})=>e)),"v-323bda7e":()=>i.e(230).then(i.bind(i,6062)).then((({data:e})=>e)),"v-c253c956":()=>i.e(673).then(i.bind(i,9073)).then((({data:e})=>e)),"v-0a0e491c":()=>i.e(312).then(i.bind(i,3442)).then((({data:e})=>e)),"v-3cd5a4ef":()=>i.e(977).then(i.bind(i,5393)).then((({data:e})=>e)),"v-355ee23e":()=>i.e(475).then(i.bind(i,1783)).then((({data:e})=>e)),"v-411c0c9e":()=>i.e(496).then(i.bind(i,565)).then((({data:e})=>e)),"v-3c4e521e":()=>i.e(925).then(i.bind(i,1371)).then((({data:e})=>e)),"v-6f2f6a5a":()=>i.e(658).then(i.bind(i,9465)).then((({data:e})=>e)),"v-b15becb0":()=>i.e(172).then(i.bind(i,8504)).then((({data:e})=>e)),"v-41dee210":()=>i.e(919).then(i.bind(i,2121)).then((({data:e})=>e)),"v-5bf80046":()=>i.e(463).then(i.bind(i,93)).then((({data:e})=>e)),"v-5f4c684e":()=>i.e(132).then(i.bind(i,8462)).then((({data:e})=>e)),"v-1c0edac3":()=>i.e(835).then(i.bind(i,4710)).then((({data:e})=>e)),"v-392e58ee":()=>i.e(802).then(i.bind(i,6865)).then((({data:e})=>e)),"v-3706649a":()=>i.e(88).then(i.bind(i,1801)).then((({data:e})=>e))}},4634:(e,n,i)=>{i.d(n,{g:()=>d});var t=i(4802);const d=[["v-8daa1a0e","/",{title:"首页"},["/index.html","/README.md"]],["v-fffb8e28","/guide/",{title:"介绍"},["/guide/index.html","/guide/README.md"]],["v-85fa9b2a","/guide/config.html",{title:"配置"},["/guide/config","/guide/config.md"]],["v-d7fa887a","/guide/contributing.html",{title:"贡献指南"},["/guide/contributing","/guide/contributing.md"]],["v-884fd4bc","/guide/css.html",{title:"使用 css"},["/guide/css","/guide/css.md"]],["v-040800dc","/guide/directory-structure.html",{title:"目录结构"},["/guide/directory-structure","/guide/directory-structure.md"]],["v-ef8c5e10","/guide/env.html",{title:"环境变量"},["/guide/env","/guide/env.md"]],["v-37e1c06f","/guide/faq.html",{title:"常见问题"},["/guide/faq","/guide/faq.md"]],["v-fb0f0066","/guide/getting-started.html",{title:"快速上手"},["/guide/getting-started","/guide/getting-started.md"]],["v-528b8b6c","/guide/image.html",{title:"使用图片"},["/guide/image","/guide/image.md"]],["v-00cf7e23","/guide/mock.html",{title:"Mock 数据"},["/guide/mock","/guide/mock.md"]],["v-1d14d5cc","/guide/plugin.html",{title:"插件"},["/guide/plugin","/guide/plugin.md"]],["v-7b96e3a4","/guide/public.html",{title:"静态资源"},["/guide/public","/guide/public.md"]],["v-6320961c","/guide/route.html",{title:"路由"},["/guide/route","/guide/route.md"]],["v-3dba8814","/guide/runtime-config.html",{title:"运行时配置"},["/guide/runtime-config","/guide/runtime-config.md"]],["v-7b48519a","/guide/template.html",{title:"HTML 模板"},["/guide/template","/guide/template.md"]],["v-a1a49808","/reference/api.html",{title:"API"},["/reference/api","/reference/api.md"]],["v-a951be94","/reference/cli.html",{title:"命令行接口"},["/reference/cli","/reference/cli.md"]],["v-76cd065c","/reference/api/",{title:"API"},["/reference/api/index.html","/reference/api/README.md"]],["v-76cb52e8","/reference/cli/",{title:"命令行工具"},["/reference/cli/index.html","/reference/cli/README.md"]],["v-2c05b6e0","/reference/config/",{title:"配置"},["/reference/config/index.html","/reference/config/README.md"]],["v-d61a9282","/reference/plugin/",{title:"介绍"},["/reference/plugin/index.html","/reference/plugin/README.md"]],["v-494b840e","/reference/plugin/dev/",{title:"插件介绍"},["/reference/plugin/dev/index.html","/reference/plugin/dev/README.md"]],["v-c5618810","/reference/plugin/dev/api.html",{title:"插件 API"},["/reference/plugin/dev/api","/reference/plugin/dev/api.md"]],["v-2fe128e7","/reference/plugin/plugins/access.html",{title:"@fesjs/plugin-access"},["/reference/plugin/plugins/access","/reference/plugin/plugins/access.md"]],["v-323bda7e","/reference/plugin/plugins/editor.html",{title:"@fesjs/plugin-monaco-editor"},["/reference/plugin/plugins/editor","/reference/plugin/plugins/editor.md"]],["v-c253c956","/reference/plugin/plugins/enums.html",{title:"@fesjs/plugin-enums"},["/reference/plugin/plugins/enums","/reference/plugin/plugins/enums.md"]],["v-0a0e491c","/reference/plugin/plugins/icon.html",{title:"@fesjs/plugin-icon"},["/reference/plugin/plugins/icon","/reference/plugin/plugins/icon.md"]],["v-3cd5a4ef","/reference/plugin/plugins/jest.html",{title:"@fesjs/plugin-jest"},["/reference/plugin/plugins/jest","/reference/plugin/plugins/jest.md"]],["v-355ee23e","/reference/plugin/plugins/layout.html",{title:"@fesjs/plugin-layout"},["/reference/plugin/plugins/layout","/reference/plugin/plugins/layout.md"]],["v-411c0c9e","/reference/plugin/plugins/locale.html",{title:"@fesjs/plugin-locale"},["/reference/plugin/plugins/locale","/reference/plugin/plugins/locale.md"]],["v-3c4e521e","/reference/plugin/plugins/model.html",{title:"@fesjs/plugin-model"},["/reference/plugin/plugins/model","/reference/plugin/plugins/model.md"]],["v-6f2f6a5a","/reference/plugin/plugins/pinia.html",{title:"@fesjs/plugin-pinia"},["/reference/plugin/plugins/pinia","/reference/plugin/plugins/pinia.md"]],["v-b15becb0","/reference/plugin/plugins/qiankun.html",{title:"@fesjs/plugin-qiankun"},["/reference/plugin/plugins/qiankun","/reference/plugin/plugins/qiankun.md"]],["v-41dee210","/reference/plugin/plugins/request.html",{title:"@fesjs/plugin-request"},["/reference/plugin/plugins/request","/reference/plugin/plugins/request.md"]],["v-5bf80046","/reference/plugin/plugins/sass.html",{title:"@fesjs/plugin-sass"},["/reference/plugin/plugins/sass","/reference/plugin/plugins/sass.md"]],["v-5f4c684e","/reference/plugin/plugins/vuex.html",{title:"@fesjs/plugin-vuex"},["/reference/plugin/plugins/vuex","/reference/plugin/plugins/vuex.md"]],["v-1c0edac3","/reference/plugin/plugins/watermark.html",{title:"@fesjs/plugin-watermark"},["/reference/plugin/plugins/watermark","/reference/plugin/plugins/watermark.md"]],["v-392e58ee","/reference/plugin/plugins/windicss.html",{title:"@fesjs/plugin-windicss"},["/reference/plugin/plugins/windicss","/reference/plugin/plugins/windicss.md"]],["v-3706649a","/404.html",{},["/404"]]].reduce(((e,[n,i,d,l])=>(e.push({name:n,path:i,component:t.Y,meta:d},...l.map((e=>({path:e,redirect:i})))),e)),[{name:"404",path:"/:catchAll(.*)",component:t.Y}])},5220:(e,n,i)=>{i.d(n,{H:()=>t});const t={base:"/fes.js/",lang:"en-US",title:"",description:"",head:[["link",{rel:"manifest",href:"/manifest.webmanifest"}],["link",{rel:"icon",href:"/logo.png"}]],locales:{"/":{lang:"zh-CN",title:"Fes.js",description:"一个好用的前端应用解决方案"}}}},2232:(e,n,i)=>{i.d(n,{f:()=>t});const t={logo:"/logo.png",repo:"WeBankFinTech/fes.js",docsDir:"docs",docsBranch:"master",locales:{"/":{navbar:[{text:"指南",link:"/guide/"},{text:"配置",link:"/reference/config/"},{text:"API",link:"/reference/api/"},{text:"插件",link:"/reference/plugin/"},{text:"CLI",link:"/reference/cli/"},{text:"版本",children:[{text:"next(3.0)",link:"https://fesjs.mumblefe.cn/next"},{text:"1.0",link:"https://fesjs.mumblefe.cn/1.0"}]},{text:"了解更多",children:[{text:"更新日志",link:"https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md"},{text:"fes-design",link:"http://fes-design.mumblefe.cn/"}]}],selectLanguageName:"简体中文",selectLanguageText:"选择语言",selectLanguageAriaLabel:"选择语言",sidebar:{"/guide/":[{text:"介绍",children:["/guide/README.md","/guide/getting-started.md"]},{text:"基础",children:["/guide/directory-structure.md","/guide/config.md","/guide/runtime-config.md","/guide/env.md","/guide/route.md","/guide/plugin.md","/guide/template.md","/guide/mock.md"]},{text:"样式和资源文件",children:["/guide/image.md","/guide/css.md","/guide/public.md"]},"/guide/contributing.md","/guide/faq.md"],"/reference/config/":["/reference/config/README.md"],"/reference/api/":["/reference/api/README.md"],"/reference/plugin/":["/reference/plugin/README.md",{text:"Plugins",children:["/reference/plugin/plugins/access.md","/reference/plugin/plugins/enums.md","/reference/plugin/plugins/icon.md","/reference/plugin/plugins/jest.md","/reference/plugin/plugins/layout.md","/reference/plugin/plugins/locale.md","/reference/plugin/plugins/model.md","/reference/plugin/plugins/request.md","/reference/plugin/plugins/vuex.md","/reference/plugin/plugins/qiankun.md","/reference/plugin/plugins/windicss.md","/reference/plugin/plugins/sass.md","/reference/plugin/plugins/editor.md","/reference/plugin/plugins/pinia.md","/reference/plugin/plugins/watermark.md"]},{text:"插件开发",children:["/reference/plugin/dev/README.md","/reference/plugin/dev/api.md"]}],"/reference/cli/":["/reference/cli/README.md"]},editLinkText:"在 GitHub 上编辑此页",lastUpdatedText:"上次更新",contributorsText:"贡献者",tip:"提示",warning:"注意",danger:"警告",notFound:["这里什么都没有","我们怎么到这来了？","这是一个 404 页面","看起来我们进入了错误的链接"],backToHome:"返回首页",openInNewWindow:"在新窗口打开"}},navbar:[],darkMode:!0,selectLanguageText:"Languages",selectLanguageAriaLabel:"Select language",sidebar:"auto",sidebarDepth:2,editLink:!0,editLinkText:"Edit this page",lastUpdated:!0,lastUpdatedText:"Last Updated",contributors:!0,contributorsText:"Contributors",notFound:["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],backToHome:"Take me home",openInNewWindow:"open in new window",toggleDarkMode:"toggle dark mode",toggleSidebar:"toggle sidebar"}}},e=>{e.O(0,[885,399],(()=>(5698,e(e.s=5698)))),e.O()}]); \ No newline at end of file diff --git a/assets/js/runtime~app.1026dc20.js b/assets/js/runtime~app.1026dc20.js deleted file mode 100644 index c425072f..00000000 --- a/assets/js/runtime~app.1026dc20.js +++ /dev/null @@ -1 +0,0 @@ -(()=>{"use strict";var e,a,r,t={},f={};function c(e){var a=f[e];if(void 0!==a)return a.exports;var r=f[e]={exports:{}};return t[e].call(r.exports,r,r.exports,c),r.exports}c.m=t,e=[],c.O=(a,r,t,f)=>{if(!r){var d=1/0;for(n=0;n=f)&&Object.keys(c.O).every((e=>c.O[e](r[b])))?r.splice(b--,1):(o=!1,f0&&e[n-1][2]>f;n--)e[n]=e[n-1];e[n]=[r,t,f]},c.d=(e,a)=>{for(var r in a)c.o(a,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:a[r]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((a,r)=>(c.f[r](e,a),a)),[])),c.u=e=>"assets/js/"+({65:"v-a951be94",88:"v-3706649a",132:"v-5f4c684e",170:"v-fb0f0066",172:"v-b15becb0",229:"v-884fd4bc",230:"v-323bda7e",256:"v-040800dc",276:"v-ef8c5e10",278:"v-7b96e3a4",287:"v-c5618810",312:"v-0a0e491c",445:"v-85fa9b2a",448:"v-3dba8814",463:"v-5bf80046",475:"v-355ee23e",476:"v-76cd065c",484:"v-2fe128e7",496:"v-411c0c9e",507:"v-1d14d5cc",509:"v-8daa1a0e",600:"v-37e1c06f",617:"v-d7fa887a",626:"v-6320961c",658:"v-6f2f6a5a",673:"v-c253c956",754:"v-00cf7e23",783:"v-d61a9282",802:"v-392e58ee",807:"v-fffb8e28",835:"v-1c0edac3",861:"v-494b840e",872:"v-76cb52e8",919:"v-41dee210",925:"v-3c4e521e",938:"v-7b48519a",943:"v-a1a49808",960:"v-2c05b6e0",972:"v-528b8b6c",977:"v-3cd5a4ef"}[e]||e)+"."+{65:"41f553e3",88:"59a2e6ca",132:"7bcd03a9",170:"6793fab9",172:"2238f6b4",205:"8a8b2972",229:"b11306f9",230:"d242a4bd",256:"2b5600c8",276:"2a7afead",278:"6fb5c9db",287:"b2070b54",293:"f9b4a116",312:"4121ff67",445:"ba9d63a7",448:"07fd1b26",463:"7ad59e6f",475:"b3d3c1c5",476:"3f7c8653",484:"782fc13f",491:"b1c8b635",496:"777bb6b3",507:"76c0c25f",509:"a60e9a6c",600:"8d253062",617:"f0824947",626:"0e6d7c4c",658:"defd4698",673:"52b824f1",754:"c350b3b4",783:"74365e2e",802:"69c1f8fb",807:"e9aa5ea4",835:"a294f3d9",861:"30afdc7f",872:"da6ef2dc",919:"2cfda563",925:"18cc70ef",938:"15d5a129",943:"61922fb2",960:"a2dac609",972:"4a83c4cf",977:"bad45ebb"}[e]+".js",c.miniCssF=e=>{},c.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),a={},r="fes.js:",c.l=(e,t,f,d)=>{if(a[e])a[e].push(t);else{var o,b;if(void 0!==f)for(var v=document.getElementsByTagName("script"),n=0;n{o.onerror=o.onload=null,clearTimeout(l);var f=a[e];if(delete a[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((e=>e(t))),r)return r(t)},l=setTimeout(s.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=s.bind(null,o.onerror),o.onload=s.bind(null,o.onload),b&&document.head.appendChild(o)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/fes.js/",(()=>{var e={523:0,885:0};c.f.j=(a,r)=>{var t=c.o(e,a)?e[a]:void 0;if(0!==t)if(t)r.push(t[2]);else if(/^(523|885)$/.test(a))e[a]=0;else{var f=new Promise(((r,f)=>t=e[a]=[r,f]));r.push(t[2]=f);var d=c.p+c.u(a),o=new Error;c.l(d,(r=>{if(c.o(e,a)&&(0!==(t=e[a])&&(e[a]=void 0),t)){var f=r&&("load"===r.type?"missing":r.type),d=r&&r.target&&r.target.src;o.message="Loading chunk "+a+" failed.\n("+f+": "+d+")",o.name="ChunkLoadError",o.type=f,o.request=d,t[1](o)}}),"chunk-"+a,a)}},c.O.j=a=>0===e[a];var a=(a,r)=>{var t,f,[d,o,b]=r,v=0;if(d.some((a=>0!==e[a]))){for(t in o)c.o(o,t)&&(c.m[t]=o[t]);if(b)var n=b(c)}for(a&&a(r);v{"use strict";var e,a,r,t={},f={};function c(e){var a=f[e];if(void 0!==a)return a.exports;var r=f[e]={exports:{}};return t[e].call(r.exports,r,r.exports,c),r.exports}c.m=t,e=[],c.O=(a,r,t,f)=>{if(!r){var o=1/0;for(b=0;b=f)&&Object.keys(c.O).every((e=>c.O[e](r[d])))?r.splice(d--,1):(v=!1,f0&&e[b-1][2]>f;b--)e[b]=e[b-1];e[b]=[r,t,f]},c.d=(e,a)=>{for(var r in a)c.o(a,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:a[r]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((a,r)=>(c.f[r](e,a),a)),[])),c.u=e=>"assets/js/"+({65:"v-a951be94",88:"v-3706649a",132:"v-5f4c684e",170:"v-fb0f0066",172:"v-b15becb0",229:"v-884fd4bc",230:"v-323bda7e",256:"v-040800dc",276:"v-ef8c5e10",278:"v-7b96e3a4",287:"v-c5618810",312:"v-0a0e491c",445:"v-85fa9b2a",448:"v-3dba8814",463:"v-5bf80046",475:"v-355ee23e",476:"v-76cd065c",484:"v-2fe128e7",496:"v-411c0c9e",507:"v-1d14d5cc",509:"v-8daa1a0e",600:"v-37e1c06f",617:"v-d7fa887a",626:"v-6320961c",658:"v-6f2f6a5a",673:"v-c253c956",754:"v-00cf7e23",783:"v-d61a9282",802:"v-392e58ee",807:"v-fffb8e28",835:"v-1c0edac3",861:"v-494b840e",872:"v-76cb52e8",919:"v-41dee210",925:"v-3c4e521e",938:"v-7b48519a",943:"v-a1a49808",960:"v-2c05b6e0",972:"v-528b8b6c",977:"v-3cd5a4ef"}[e]||e)+"."+{65:"a8a07ea0",88:"59a2e6ca",132:"f6943605",170:"a34cf364",172:"7180a292",205:"8a8b2972",229:"ce71af97",230:"5673f3fb",256:"60e8c646",276:"46a2d838",278:"61113f81",287:"35ab6284",293:"f9b4a116",312:"05225417",445:"c339d8e4",448:"5f5441b1",463:"a0181eee",475:"8fe1c5c4",476:"ae1ec0a2",484:"1aab1529",491:"b1c8b635",496:"7075c1f2",507:"7b2fa19f",509:"f2418152",600:"c8dccecf",617:"29c9fa16",626:"3276e1b8",658:"fa087967",673:"385acd14",754:"f492db06",783:"8c1c86a1",802:"dff8ff10",807:"5eb4adfe",835:"7b2b44ff",861:"110782a4",872:"d00f653f",919:"050504fd",925:"1559638b",938:"0316d1cc",943:"2c87d1c7",960:"77f454c7",972:"3d914205",977:"3f70c0f3"}[e]+".js",c.miniCssF=e=>{},c.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),a={},r="fes.js:",c.l=(e,t,f,o)=>{if(a[e])a[e].push(t);else{var v,d;if(void 0!==f)for(var n=document.getElementsByTagName("script"),b=0;b{v.onerror=v.onload=null,clearTimeout(l);var f=a[e];if(delete a[e],v.parentNode&&v.parentNode.removeChild(v),f&&f.forEach((e=>e(t))),r)return r(t)},l=setTimeout(s.bind(null,void 0,{type:"timeout",target:v}),12e4);v.onerror=s.bind(null,v.onerror),v.onload=s.bind(null,v.onload),d&&document.head.appendChild(v)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/fes.js/",(()=>{var e={523:0,885:0};c.f.j=(a,r)=>{var t=c.o(e,a)?e[a]:void 0;if(0!==t)if(t)r.push(t[2]);else if(/^(523|885)$/.test(a))e[a]=0;else{var f=new Promise(((r,f)=>t=e[a]=[r,f]));r.push(t[2]=f);var o=c.p+c.u(a),v=new Error;c.l(o,(r=>{if(c.o(e,a)&&(0!==(t=e[a])&&(e[a]=void 0),t)){var f=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;v.message="Loading chunk "+a+" failed.\n("+f+": "+o+")",v.name="ChunkLoadError",v.type=f,v.request=o,t[1](v)}}),"chunk-"+a,a)}},c.O.j=a=>0===e[a];var a=(a,r)=>{var t,f,[o,v,d]=r,n=0;if(o.some((a=>0!==e[a]))){for(t in v)c.o(v,t)&&(c.m[t]=v[t]);if(d)var b=d(c)}for(a&&a(r);n{a.r(s),a.d(s,{data:()=>p});const p={key:"v-00cf7e23",path:"/guide/mock.html",title:"Mock 数据",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"约定式 Mock 文件",slug:"约定式-mock-文件",children:[]},{level:2,title:"编写 Mock 文件",slug:"编写-mock-文件",children:[{level:3,title:"cgiMock \b参数",slug:"cgimock-参数",children:[]},{level:3,title:"mockjs 参数",slug:"mockjs-参数",children:[]},{level:3,title:"utils 参数",slug:"utils-参数",children:[]}]},{level:2,title:"配置 Mock",slug:"配置-mock",children:[]},{level:2,title:"关闭 Mock",slug:"关闭-mock",children:[]}],filePathRelative:"guide/mock.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5808:(n,s,a)=>{a.r(s),a.d(s,{default:()=>m});var p=a(6252);const t=(0,p.uE)('

Mock 数据

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。

约定式 Mock 文件

Fes.js 约定 ./mock.js 为 mock 文件。

比如：

.\n├── mock.js\n└── src\n    └── pages\n        └── index.vue\n
1
2
3
4
5

编写 Mock 文件

可以参考如下 🌰：

export default function ({ cgiMock, mockjs, utils }) {\n    const { Random } = mockjs;\n\n    // 测试 proxy 与 mock 用例集合\n    cgiMock('/movie/in_theaters_mock', (req, res) => {\n        res.send(JSON.stringify({\n            code: '0',\n            msg: '',\n            result: {\n                text: 'movie:  movie/in_theaters_mock ~~~~~'\n            }\n        }));\n    });\n    cgiMock('/movie/test_mock', (req, res) => {\n        res.send(JSON.stringify({\n            code: '0',\n            msg: '',\n            result: {\n                text: 'mock:  movie/test_mock'\n            }\n        }));\n    });\n\n    // 测试用例: mock.js change，重现请求，需要能拉最新的数据\n    cgiMock('/watchtest', (req, res) => {\n        res.send(JSON.stringify({\n            code: '0',\n            msg: '',\n            result: {\n                text: '通过 register 测试 mock watch: 初始状态'\n            }\n        }));\n    });\n\n    // 返回一个数字\n    // cgiMock('/number', 666);\n    cgiMock('/number', 999);\n\n    // 返回一个json\n    cgiMock({\n        url: '/json',\n        result: {\n            code: '400101', msg: "不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String", transactionTime: '20170309171146', success: false\n        }\n    });\n\n    // 利用 mock.js 产生随机文本\n    cgiMock('/text', Random.cparagraph());\n\n    // 返回一个字符串 利用 mock.js 产生随机字符\n    cgiMock('/random', mockjs.mock({\n        'string|1-10': '★'\n    }));\n\n    // 正则匹配url, 返回一个字符串\n    cgiMock(/\\/abc|\\/xyz/, 'regexp test!');\n\n    // option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.\n    cgiMock(/\\/function$/, (req, res) => {\n        res.send('function test');\n    });\n\n    // 返回文本 readFileSync\n    cgiMock('/file', utils.file('./package.json'));\n\n    // 更复杂的规则配置\n    cgiMock({\n        url: /\\/who/,\n        method: 'GET',\n        result(req, res) {\n            if (req.query.name === 'kwan') {\n                res.json({ kwan: '孤独患者' });\n            } else {\n                res.send('Nooooooooooo');\n            }\n        },\n        headers: {\n            'Content-Type': 'text/plain',\n            'Content-Length': '123',\n            ETag: '12345'\n        },\n        cookies: [\n            {\n                name: 'myname', value: 'kwan', maxAge: 900000, httpOnly: true\n            }\n        ]\n    });\n\n    // 携带参数的请求\n    cgiMock('/v2/audit/list', (req, res) => {\n        const {\n            currentPage, pageSize, isAudited\n        } = req.body;\n        res.send({\n            code: '0',\n            msg: '',\n            data: {\n                currentPage,\n                pageSize,\n                totalPage: 2,\n                totalCount: 12,\n                pageData: Array.from({ length: pageSize }, () => ({\n                    title: Random.title(),\n                    authorName: Random.cname(),\n                    authorId: Random.name(),\n                    createTime: Date.now(),\n                    updateTime: Date.now(),\n                    readCount: Random.integer(60, 1000),\n                    favoriteCount: Random.integer(1, 50),\n                    postId: '12323',\n                    serviceTag: '业务类型',\n                    productTag: '产品类型',\n                    requestTag: '需求类型',\n                    handleTag: '已采纳',\n                    postType: 'voice',\n                    postStatus: isAudited ? 'pass' : 'auditing',\n                    auditStatus: 'audit1'\n                }))\n            }\n        });\n    });\n\n    // multipart/form-data 类型\n    cgiMock('/v2/upload', (req, res) => {\n        res.send({\n            code: '0',\n            msg: '文件上传成功'\n        });\n    });\n};\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

cgiMock \b参数

创建一个 mock 接口，参数非常灵活，参考上面的 demo 即可。

mockjs 参数

',12),e={href:"http://mockjs.com/",target:"_blank",rel:"noopener noreferrer"},o=(0,p.Uk)("Mock.js"),c=(0,p.Uk)(" 是常用的辅助生成模拟数据的三方库，借助他可以提升我们的 mock 数据能力。"),l=(0,p.uE)('

比如：

export default function ({ cgiMock, mockjs, utils }) {\n    cgiMock('/random', mockjs.mock({\n        'string|1-10': '★'\n    }));\n}\n
1
2
3
4
5

utils 参数

工具函数：

  • utils.file(path)，从项目根目录根据path寻找文件，返回文件流。

配置 Mock

',6),r=(0,p.Uk)("详见配置 "),u=(0,p.Uk)("mock"),i=(0,p.Uk)("。"),k=(0,p.uE)('

关闭 Mock

可以通过配置关闭。

export default {\n    mock: false,\n};\n
1
2
3
',3),b={},m=(0,a(3744).Z)(b,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),b=(0,p.up)("RouterLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[(0,p._)("a",e,[o,(0,p.Wm)(a)]),c]),l,(0,p._)("p",null,[r,(0,p.Wm)(b,{to:"/reference/config/#mock"},{default:(0,p.w5)((()=>[u])),_:1}),i]),k],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-00cf7e23.f492db06.js b/assets/js/v-00cf7e23.f492db06.js new file mode 100644 index 00000000..8eb2921a --- /dev/null +++ b/assets/js/v-00cf7e23.f492db06.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[754],{6285:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-00cf7e23",path:"/guide/mock.html",title:"Mock 数据",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"约定式 Mock 文件",slug:"约定式-mock-文件",children:[]},{level:2,title:"编写 Mock 文件",slug:"编写-mock-文件",children:[{level:3,title:"cgiMock \b参数",slug:"cgimock-参数",children:[]},{level:3,title:"mockjs 参数",slug:"mockjs-参数",children:[]},{level:3,title:"utils 参数",slug:"utils-参数",children:[]}]},{level:2,title:"配置 Mock",slug:"配置-mock",children:[]},{level:2,title:"关闭 Mock",slug:"关闭-mock",children:[]}],filePathRelative:"guide/mock.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5808:(n,s,a)=>{a.r(s),a.d(s,{default:()=>m});var p=a(6252);const t=(0,p.uE)('

Mock 数据

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。

约定式 Mock 文件

Fes.js 约定 ./mock.js 为 mock 文件。

比如：

.\n├── mock.js\n└── src\n    └── pages\n        └── index.vue\n
1
2
3
4
5

编写 Mock 文件

可以参考如下 🌰：

export default function ({ cgiMock, mockjs, utils }) {\n    const { Random } = mockjs;\n\n    // 测试 proxy 与 mock 用例集合\n    cgiMock('/movie/in_theaters_mock', (req, res) => {\n        res.send(JSON.stringify({\n            code: '0',\n            msg: '',\n            result: {\n                text: 'movie:  movie/in_theaters_mock ~~~~~'\n            }\n        }));\n    });\n    cgiMock('/movie/test_mock', (req, res) => {\n        res.send(JSON.stringify({\n            code: '0',\n            msg: '',\n            result: {\n                text: 'mock:  movie/test_mock'\n            }\n        }));\n    });\n\n    // 测试用例: mock.js change，重现请求，需要能拉最新的数据\n    cgiMock('/watchtest', (req, res) => {\n        res.send(JSON.stringify({\n            code: '0',\n            msg: '',\n            result: {\n                text: '通过 register 测试 mock watch: 初始状态'\n            }\n        }));\n    });\n\n    // 返回一个数字\n    // cgiMock('/number', 666);\n    cgiMock('/number', 999);\n\n    // 返回一个json\n    cgiMock({\n        url: '/json',\n        result: {\n            code: '400101', msg: "不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String", transactionTime: '20170309171146', success: false\n        }\n    });\n\n    // 利用 mock.js 产生随机文本\n    cgiMock('/text', Random.cparagraph());\n\n    // 返回一个字符串 利用 mock.js 产生随机字符\n    cgiMock('/random', mockjs.mock({\n        'string|1-10': '★'\n    }));\n\n    // 正则匹配url, 返回一个字符串\n    cgiMock(/\\/abc|\\/xyz/, 'regexp test!');\n\n    // option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.\n    cgiMock(/\\/function$/, (req, res) => {\n        res.send('function test');\n    });\n\n    // 返回文本 readFileSync\n    cgiMock('/file', utils.file('./package.json'));\n\n    // 更复杂的规则配置\n    cgiMock({\n        url: /\\/who/,\n        method: 'GET',\n        result(req, res) {\n            if (req.query.name === 'kwan') {\n                res.json({ kwan: '孤独患者' });\n            } else {\n                res.send('Nooooooooooo');\n            }\n        },\n        headers: {\n            'Content-Type': 'text/plain',\n            'Content-Length': '123',\n            ETag: '12345'\n        },\n        cookies: [\n            {\n                name: 'myname', value: 'kwan', maxAge: 900000, httpOnly: true\n            }\n        ]\n    });\n\n    // 携带参数的请求\n    cgiMock('/v2/audit/list', (req, res) => {\n        const {\n            currentPage, pageSize, isAudited\n        } = req.body;\n        res.send({\n            code: '0',\n            msg: '',\n            data: {\n                currentPage,\n                pageSize,\n                totalPage: 2,\n                totalCount: 12,\n                pageData: Array.from({ length: pageSize }, () => ({\n                    title: Random.title(),\n                    authorName: Random.cname(),\n                    authorId: Random.name(),\n                    createTime: Date.now(),\n                    updateTime: Date.now(),\n                    readCount: Random.integer(60, 1000),\n                    favoriteCount: Random.integer(1, 50),\n                    postId: '12323',\n                    serviceTag: '业务类型',\n                    productTag: '产品类型',\n                    requestTag: '需求类型',\n                    handleTag: '已采纳',\n                    postType: 'voice',\n                    postStatus: isAudited ? 'pass' : 'auditing',\n                    auditStatus: 'audit1'\n                }))\n            }\n        });\n    });\n\n    // multipart/form-data 类型\n    cgiMock('/v2/upload', (req, res) => {\n        res.send({\n            code: '0',\n            msg: '文件上传成功'\n        });\n    });\n};\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

cgiMock \b参数

创建一个 mock 接口，参数非常灵活，参考上面的 demo 即可。

mockjs 参数

',12),e={href:"http://mockjs.com/",target:"_blank",rel:"noopener noreferrer"},o=(0,p.Uk)("Mock.js"),c=(0,p.Uk)(" 是常用的辅助生成模拟数据的三方库，借助他可以提升我们的 mock 数据能力。"),l=(0,p.uE)('

比如：

export default function ({ cgiMock, mockjs, utils }) {\n    cgiMock('/random', mockjs.mock({\n        'string|1-10': '★'\n    }));\n}\n
1
2
3
4
5

utils 参数

工具函数：

  • utils.file(path)，从项目根目录根据path寻找文件，返回文件流。

配置 Mock

',6),r=(0,p.Uk)("详见配置 "),u=(0,p.Uk)("mock"),i=(0,p.Uk)("。"),k=(0,p.uE)('

关闭 Mock

可以通过配置关闭。

export default {\n    mock: false,\n};\n
1
2
3
',3),b={},m=(0,a(3744).Z)(b,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),b=(0,p.up)("RouterLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[(0,p._)("a",e,[o,(0,p.Wm)(a)]),c]),l,(0,p._)("p",null,[r,(0,p.Wm)(b,{to:"/reference/config/#mock"},{default:(0,p.w5)((()=>[u])),_:1}),i]),k],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-040800dc.2b5600c8.js b/assets/js/v-040800dc.2b5600c8.js deleted file mode 100644 index 46bd9701..00000000 --- a/assets/js/v-040800dc.2b5600c8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[256],{8145:(s,n,a)=>{a.r(n),a.d(n,{data:()=>e});const e={key:"v-040800dc",path:"/guide/directory-structure.html",title:"目录结构",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:3,title:"package.json",slug:"package-json",children:[]},{level:3,title:"tsconfig.json",slug:"tsconfig-json",children:[]},{level:3,title:".fes.js",slug:"fes-js",children:[]},{level:3,title:"mock.js",slug:"mock-js",children:[]},{level:3,title:".env",slug:"env",children:[]},{level:3,title:"dist 目录",slug:"dist-目录",children:[]},{level:2,title:"public 目录",slug:"public-目录",children:[{level:3,title:"index.html",slug:"index-html",children:[]}]},{level:2,title:"src 目录",slug:"src-目录",children:[{level:3,title:".fes 目录",slug:"fes-目录",children:[]},{level:3,title:"pages 目录",slug:"pages-目录",children:[]},{level:3,title:"app.js",slug:"app-js",children:[]}]}],filePathRelative:"guide/directory-structure.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},1842:(s,n,a)=>{a.r(n),a.d(n,{default:()=>k});var e=a(6252);const p=(0,e._)("h1",{id:"目录结构",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#目录结构","aria-hidden":"true"},"#"),(0,e.Uk)(" 目录结构")],-1),t=(0,e.Uk)("在"),o=(0,e.Uk)("快速上手"),r=(0,e.Uk)("中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 "),l=(0,e._)("code",null,"约定优于配置",-1),c=(0,e.Uk)(" 的原则，一个基础的 Fes.js 项目大致是这样的："),u=(0,e.uE)('
fes-template\n├── package.json\n├── tsconfig.json\n├── mock.js\n├── .fes.js\n├── .env\n├── dist\n├── public\n│   └── index.html\n└── src\n    ├── .fes\n    └── pages\n    │    └── index.vue\n    └── app.js\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14

package.json

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

其中@fesjs/fes是 Fes.js 核心依赖，另外以 @fesjs/preset-、@fesjs/plugin-、@webank/fes-preset-、@webank/fes-plugin-、fes-preset- 和 fes-plugin- 开头的依赖会被自动注册为插件或插件集。

tsconfig.json

解决 @fesjs/fes 和使用 @ 的 API 提示

.fes.js

配置文件，包含 Fes.js 内置功能和安装的其他插件配置。

mock.js

mock 数据的配置文件。

.env

定义环境变量。

比如 .env 文件内容如下：

PORT=8888\nFES_ENV=prod\n
1
2

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

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

dist 目录

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

public 目录

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

index.html

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

src 目录

.fes 目录

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

注意

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

pages 目录

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

app.js

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

',30),i={},k=(0,a(3744).Z)(i,[["render",function(s,n){const a=(0,e.up)("RouterLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("p",null,[t,(0,e.Wm)(a,{to:"/guide/getting-started.html"},{default:(0,e.w5)((()=>[o])),_:1}),r,l,c]),u],64)}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,e]of n)a[s]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-040800dc.60e8c646.js b/assets/js/v-040800dc.60e8c646.js new file mode 100644 index 00000000..ab00e76f --- /dev/null +++ b/assets/js/v-040800dc.60e8c646.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[256],{8145:(s,n,a)=>{a.r(n),a.d(n,{data:()=>e});const e={key:"v-040800dc",path:"/guide/directory-structure.html",title:"目录结构",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:3,title:"package.json",slug:"package-json",children:[]},{level:3,title:"tsconfig.json",slug:"tsconfig-json",children:[]},{level:3,title:".fes.js",slug:"fes-js",children:[]},{level:3,title:"mock.js",slug:"mock-js",children:[]},{level:3,title:".env",slug:"env",children:[]},{level:3,title:"dist 目录",slug:"dist-目录",children:[]},{level:2,title:"public 目录",slug:"public-目录",children:[{level:3,title:"index.html",slug:"index-html",children:[]}]},{level:2,title:"src 目录",slug:"src-目录",children:[{level:3,title:".fes 目录",slug:"fes-目录",children:[]},{level:3,title:"pages 目录",slug:"pages-目录",children:[]},{level:3,title:"app.js",slug:"app-js",children:[]}]}],filePathRelative:"guide/directory-structure.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},1842:(s,n,a)=>{a.r(n),a.d(n,{default:()=>k});var e=a(6252);const p=(0,e._)("h1",{id:"目录结构",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#目录结构","aria-hidden":"true"},"#"),(0,e.Uk)(" 目录结构")],-1),t=(0,e.Uk)("在"),o=(0,e.Uk)("快速上手"),r=(0,e.Uk)("中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 "),l=(0,e._)("code",null,"约定优于配置",-1),c=(0,e.Uk)(" 的原则，一个基础的 Fes.js 项目大致是这样的："),u=(0,e.uE)('
fes-template\n├── package.json\n├── tsconfig.json\n├── mock.js\n├── .fes.js\n├── .env\n├── dist\n├── public\n│   └── index.html\n└── src\n    ├── .fes\n    └── pages\n    │    └── index.vue\n    └── app.js\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14

package.json

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

其中@fesjs/fes是 Fes.js 核心依赖，另外以 @fesjs/preset-、@fesjs/plugin-、@webank/fes-preset-、@webank/fes-plugin-、fes-preset- 和 fes-plugin- 开头的依赖会被自动注册为插件或插件集。

tsconfig.json

解决 @fesjs/fes 和使用 @ 的 API 提示

.fes.js

配置文件，包含 Fes.js 内置功能和安装的其他插件配置。

mock.js

mock 数据的配置文件。

.env

定义环境变量。

比如 .env 文件内容如下：

PORT=8888\nFES_ENV=prod\n
1
2

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

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

dist 目录

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

public 目录

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

index.html

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

src 目录

.fes 目录

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

注意

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

pages 目录

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

app.js

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

',30),i={},k=(0,a(3744).Z)(i,[["render",function(s,n){const a=(0,e.up)("RouterLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("p",null,[t,(0,e.Wm)(a,{to:"/guide/getting-started.html"},{default:(0,e.w5)((()=>[o])),_:1}),r,l,c]),u],64)}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,e]of n)a[s]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-0a0e491c.05225417.js b/assets/js/v-0a0e491c.05225417.js new file mode 100644 index 00000000..152935cc --- /dev/null +++ b/assets/js/v-0a0e491c.05225417.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[312],{3442:(e,n,t)=>{t.r(n),t.d(n,{data:()=>s});const s={key:"v-0a0e491c",path:"/reference/plugin/plugins/icon.html",title:"@fesjs/plugin-icon",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"使用",slug:"使用",children:[{level:3,title:"属性",slug:"属性",children:[]}]}],filePathRelative:"reference/plugin/plugins/icon.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},8645:(e,n,t)=>{t.r(n),t.d(n,{default:()=>l});const s=(0,t(6252).uE)('

@fesjs/plugin-icon

介绍

提供以 component 的方式，直接使用 svg icon 的能力。

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-icon": "^2.0.0"\n    },\n}\n
1
2
3
4
5
6

使用

新建 src/icons 目录，将 svg 文件放入其中，在 component 中引用：

<fes-icon type="iconName" />\n
1

属性

属性说明类型
typesvg 文件名string
spin是否无限旋转boolean
rotate旋转角度number
',11),a={},l=(0,t(3744).Z)(a,[["render",function(e,n){return s}]])},3744:(e,n)=>{n.Z=(e,n)=>{const t=e.__vccOpts||e;for(const[e,s]of n)t[e]=s;return t}}}]); \ No newline at end of file diff --git a/assets/js/v-0a0e491c.4121ff67.js b/assets/js/v-0a0e491c.4121ff67.js deleted file mode 100644 index ec85b2eb..00000000 --- a/assets/js/v-0a0e491c.4121ff67.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[312],{3442:(e,n,t)=>{t.r(n),t.d(n,{data:()=>s});const s={key:"v-0a0e491c",path:"/reference/plugin/plugins/icon.html",title:"@fesjs/plugin-icon",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"使用",slug:"使用",children:[{level:3,title:"属性",slug:"属性",children:[]}]}],filePathRelative:"reference/plugin/plugins/icon.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},8645:(e,n,t)=>{t.r(n),t.d(n,{default:()=>l});const s=(0,t(6252).uE)('

@fesjs/plugin-icon

介绍

提供以 component 的方式，直接使用 svg icon 的能力。

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-icon": "^2.0.0"\n    },\n}\n
1
2
3
4
5
6

使用

新建 src/icons 目录，将 svg 文件放入其中，在 component 中引用：

<fes-icon type="iconName" />\n
1

属性

属性说明类型
typesvg 文件名string
spin是否无限旋转boolean
rotate旋转角度number
',11),a={},l=(0,t(3744).Z)(a,[["render",function(e,n){return s}]])},3744:(e,n)=>{n.Z=(e,n)=>{const t=e.__vccOpts||e;for(const[e,s]of n)t[e]=s;return t}}}]); \ No newline at end of file diff --git a/assets/js/v-1c0edac3.7b2b44ff.js b/assets/js/v-1c0edac3.7b2b44ff.js new file mode 100644 index 00000000..c7980c6d --- /dev/null +++ b/assets/js/v-1c0edac3.7b2b44ff.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[835],{4710:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-1c0edac3",path:"/reference/plugin/plugins/watermark.html",title:"@fesjs/plugin-watermark",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"disabled",slug:"disabled",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"createWatermark",slug:"createwatermark",children:[]}]}],filePathRelative:"reference/plugin/plugins/watermark.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5243:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const e=(0,a(6252).uE)('

@fesjs/plugin-watermark

介绍

给页面添加水印效果

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-watermark": "^2.0.0"\n    }\n}\n
1
2
3
4
5
6

编译时配置

export default {\n    watermark: {\n        disabled: false\n    },\n}\n
1
2
3
4
5

disabled

是否禁用水印，默认是false。

可以在开发环境关闭水印：

export default {\n    watermark: {\n        disabled: true\n    },\n}\n
1
2
3
4
5

API

createWatermark

创建水印功能，通过 @fesjs/fes 导入 API：

import { createWatermark, destroyWatermark } from '@fesjs/fes';\n\ncreateWatermark({ content: '我是水印' }); // 生成水印\ndestroyWatermark(); // 销毁水印\n
1
2
3
4

默认参数是：

{\n    content = '请勿外传',\n    container = document.body,\n    width = 300,\n    height = 300,\n    textAlign = 'center',\n    textBaseline = 'middle',\n    fontSize = '14px',\n    fontFamily = 'Microsoft Yahei',\n    fillStyle = 'rgba(184, 184, 184, 0.3)',\n    rotate = 25,\n    zIndex = 99999,\n    timestamp = 'YYYY-MM-DD HH:mm'\n}\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如果不需要时间戳，则可以设置timestamp为false。

',19),p={},t=(0,a(3744).Z)(p,[["render",function(n,s){return e}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-1c0edac3.a294f3d9.js b/assets/js/v-1c0edac3.a294f3d9.js deleted file mode 100644 index 1bca1ed8..00000000 --- a/assets/js/v-1c0edac3.a294f3d9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[835],{4710:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-1c0edac3",path:"/reference/plugin/plugins/watermark.html",title:"@fesjs/plugin-watermark",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"disabled",slug:"disabled",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"createWatermark",slug:"createwatermark",children:[]}]}],filePathRelative:"reference/plugin/plugins/watermark.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5243:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const e=(0,a(6252).uE)('

@fesjs/plugin-watermark

介绍

给页面添加水印效果

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-watermark": "^2.0.0"\n    }\n}\n
1
2
3
4
5
6

编译时配置

export default {\n    watermark: {\n        disabled: false\n    },\n}\n
1
2
3
4
5

disabled

是否禁用水印，默认是false。

可以在开发环境关闭水印：

export default {\n    watermark: {\n        disabled: true\n    },\n}\n
1
2
3
4
5

API

createWatermark

创建水印功能，通过 @fesjs/fes 导入 API：

import { createWatermark, destroyWatermark } from '@fesjs/fes';\n\ncreateWatermark({ content: '我是水印' }); // 生成水印\ndestroyWatermark(); // 销毁水印\n
1
2
3
4

默认参数是：

{\n    content = '请勿外传',\n    container = document.body,\n    width = 300,\n    height = 300,\n    textAlign = 'center',\n    textBaseline = 'middle',\n    fontSize = '14px',\n    fontFamily = 'Microsoft Yahei',\n    fillStyle = 'rgba(184, 184, 184, 0.3)',\n    rotate = 25,\n    zIndex = 99999,\n    timestamp = 'YYYY-MM-DD HH:mm'\n}\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如果不需要时间戳，则可以设置timestamp为false。

',19),p={},t=(0,a(3744).Z)(p,[["render",function(n,s){return e}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-1d14d5cc.76c0c25f.js b/assets/js/v-1d14d5cc.76c0c25f.js deleted file mode 100644 index 3bd3af92..00000000 --- a/assets/js/v-1d14d5cc.76c0c25f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[507],{494:(s,e,n)=>{n.r(e),n.d(e,{data:()=>a});const a={key:"v-1d14d5cc",path:"/guide/plugin.html",title:"插件",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"插件的 id 和 key",slug:"插件的-id-和-key",children:[]},{level:2,title:"启动插件",slug:"启动插件",children:[{level:3,title:"package.json 依赖",slug:"package-json-依赖",children:[]},{level:3,title:"配置",slug:"配置",children:[]},{level:3,title:"环境变量",slug:"环境变量",children:[]}]},{level:2,title:"禁用插件",slug:"禁用插件",children:[]},{level:2,title:"配置插件",slug:"配置插件",children:[]}],filePathRelative:"guide/plugin.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},9959:(s,e,n)=>{n.r(e),n.d(e,{default:()=>o});const a=(0,n(6252).uE)('

插件

插件的 id 和 key

每个插件都会对应一个 id 和一个 key，id 是路径的简写，key 是进一步简化后用于配置的唯一值。

比如插件 /node_modules/@fesjs/plugin-foo/index.js，通常来说，其 id 为 @fesjs/plugin-foo，key 为 foo。

提示

id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。

启动插件

有多种方式引入插件

package.json 依赖

Fes.js 会自动检测 dependencies 和 devDependencies 里的 fes 插件，比如：

{\n  "dependencies": {\n    "@fesjs/plugin-request": "^2.0.0"\n  }\n}\n
1
2
3
4
5

那么 @fesjs/plugin-request 会自动被注册，无需在配置里重复声明。

配置

在配置里可通过 presets 和 plugins 配置插件，比如：

export default {\n    presets: ['./preset', 'foo/presets'],\n    plugins: ['./plugin'],\n}\n
1
2
3
4

通常用于几种情况：

  1. 项目相对路径的插件
  2. 非 npm 包入口文件的插件

注意

请不要配置 npm 包的插件，否则会报重复注册的错误

环境变量

还可通过环境变量 FES_PRESETS 和 FES_PLUGINS 注册额外插件。

比如：

FES_PRESETS=/a/b/preset.js fes dev\n
1

禁用插件

通过配置插件的 key 为 false，比如：

export default {\n    mock: false,\n}\n
1
2
3

Mock 插件的 key 是 mock，我们在配置文件中配置 mock 为 false，则会禁用 Mock 插件及其功能。

配置插件

通过插件的 key 来配置插件，比如：

export default {\n    mock: { \n        prefix: '/v2'\n    }\n}\n
1
2
3
4
5

这里的 mock 是 Mock插件 的 key。

',29),p={},o=(0,n(3744).Z)(p,[["render",function(s,e){return a}]])},3744:(s,e)=>{e.Z=(s,e)=>{const n=s.__vccOpts||s;for(const[s,a]of e)n[s]=a;return n}}}]); \ No newline at end of file diff --git a/assets/js/v-1d14d5cc.7b2fa19f.js b/assets/js/v-1d14d5cc.7b2fa19f.js new file mode 100644 index 00000000..ce9d4f24 --- /dev/null +++ b/assets/js/v-1d14d5cc.7b2fa19f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[507],{494:(s,e,n)=>{n.r(e),n.d(e,{data:()=>a});const a={key:"v-1d14d5cc",path:"/guide/plugin.html",title:"插件",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"插件的 id 和 key",slug:"插件的-id-和-key",children:[]},{level:2,title:"启动插件",slug:"启动插件",children:[{level:3,title:"package.json 依赖",slug:"package-json-依赖",children:[]},{level:3,title:"配置",slug:"配置",children:[]},{level:3,title:"环境变量",slug:"环境变量",children:[]}]},{level:2,title:"禁用插件",slug:"禁用插件",children:[]},{level:2,title:"配置插件",slug:"配置插件",children:[]}],filePathRelative:"guide/plugin.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},9959:(s,e,n)=>{n.r(e),n.d(e,{default:()=>o});const a=(0,n(6252).uE)('

插件

插件的 id 和 key

每个插件都会对应一个 id 和一个 key，id 是路径的简写，key 是进一步简化后用于配置的唯一值。

比如插件 /node_modules/@fesjs/plugin-foo/index.js，通常来说，其 id 为 @fesjs/plugin-foo，key 为 foo。

提示

id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。

启动插件

有多种方式引入插件

package.json 依赖

Fes.js 会自动检测 dependencies 和 devDependencies 里的 fes 插件，比如：

{\n  "dependencies": {\n    "@fesjs/plugin-request": "^2.0.0"\n  }\n}\n
1
2
3
4
5

那么 @fesjs/plugin-request 会自动被注册，无需在配置里重复声明。

配置

在配置里可通过 presets 和 plugins 配置插件，比如：

export default {\n    presets: ['./preset', 'foo/presets'],\n    plugins: ['./plugin'],\n}\n
1
2
3
4

通常用于几种情况：

  1. 项目相对路径的插件
  2. 非 npm 包入口文件的插件

注意

请不要配置 npm 包的插件，否则会报重复注册的错误

环境变量

还可通过环境变量 FES_PRESETS 和 FES_PLUGINS 注册额外插件。

比如：

FES_PRESETS=/a/b/preset.js fes dev\n
1

禁用插件

通过配置插件的 key 为 false，比如：

export default {\n    mock: false,\n}\n
1
2
3

Mock 插件的 key 是 mock，我们在配置文件中配置 mock 为 false，则会禁用 Mock 插件及其功能。

配置插件

通过插件的 key 来配置插件，比如：

export default {\n    mock: { \n        prefix: '/v2'\n    }\n}\n
1
2
3
4
5

这里的 mock 是 Mock插件 的 key。

',29),p={},o=(0,n(3744).Z)(p,[["render",function(s,e){return a}]])},3744:(s,e)=>{e.Z=(s,e)=>{const n=s.__vccOpts||s;for(const[s,a]of e)n[s]=a;return n}}}]); \ No newline at end of file diff --git a/assets/js/v-2c05b6e0.77f454c7.js b/assets/js/v-2c05b6e0.77f454c7.js new file mode 100644 index 00000000..518a95ed --- /dev/null +++ b/assets/js/v-2c05b6e0.77f454c7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[960],{5822:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-2c05b6e0",path:"/reference/config/",title:"配置",lang:"zh-CN",frontmatter:{sidebar:"auto"},excerpt:"",headers:[{level:2,title:"alias",slug:"alias",children:[]},{level:2,title:"analyze",slug:"analyze",children:[]},{level:2,title:"autoprefixer",slug:"autoprefixer",children:[]},{level:2,title:"base",slug:"base",children:[]},{level:2,title:"chainWebpack",slug:"chainwebpack",children:[]},{level:2,title:"cssLoader",slug:"cssloader",children:[]},{level:2,title:"copy",slug:"copy",children:[]},{level:2,title:"define",slug:"define",children:[]},{level:2,title:"devServer",slug:"devserver",children:[]},{level:2,title:"devtool",slug:"devtool",children:[]},{level:2,title:"dynamicImport",slug:"dynamicimport",children:[]},{level:2,title:"exportStatic",slug:"exportstatic",children:[]},{level:2,title:"externals",slug:"externals",children:[]},{level:2,title:"extraBabelPlugins",slug:"extrababelplugins",children:[]},{level:2,title:"extraBabelPresets",slug:"extrababelpresets",children:[]},{level:2,title:"extraPostCSSPlugins",slug:"extrapostcssplugins",children:[]},{level:2,title:"html",slug:"html",children:[]},{level:2,title:"inlineLimit",slug:"inlinelimit",children:[]},{level:2,title:"lessLoader",slug:"lessloader",children:[]},{level:2,title:"mock",slug:"mock",children:[]},{level:2,title:"mountElementId",slug:"mountelementid",children:[]},{level:2,title:"nodeModulesTransform",slug:"nodemodulestransform",children:[]},{level:2,title:"outputPath",slug:"outputpath",children:[]},{level:2,title:"plugins",slug:"plugins",children:[]},{level:2,title:"postcssLoader",slug:"postcssloader",children:[]},{level:2,title:"proxy",slug:"proxy",children:[]},{level:2,title:"publicPath",slug:"publicpath",children:[]},{level:2,title:"router",slug:"router",children:[]},{level:2,title:"singular",slug:"singular",children:[]},{level:2,title:"targets",slug:"targets",children:[]},{level:2,title:"terserOptions",slug:"terseroptions",children:[]},{level:2,title:"vueLoader",slug:"vueloader",children:[]},{level:2,title:"更多配置项",slug:"更多配置项",children:[]}],filePathRelative:"reference/config/README.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},502:(n,s,a)=>{a.r(s),a.d(s,{default:()=>On});var e=a(6252);const p=(0,e.uE)('

配置

以下配置项通过字母排序。

alias

  • 类型： object

  • 默认值： {}

  • 详情：

    配置别名，对引用路径进行映射。

  • 示例：

export default {\n    alias: {\n       main: 'src/assets/styles/main'\n    }\n}\n
1
2
3
4
5

然后 import('main')，实际上是 import('src/assets/styles/main')。

analyze

  • 类型： object
  • 默认值：
{\n    analyzerMode: process.env.ANALYZE_MODE || 'server',\n    analyzerPort: process.env.ANALYZE_PORT || 8888,\n    openAnalyzer: process.env.ANALYZE_OPEN !== 'none',\n    // generate stats file while ANALYZE_DUMP exist\n    generateStatsFile: !!process.env.ANALYZE_DUMP,\n    statsFilename: process.env.ANALYZE_DUMP || 'stats.json',\n    logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',\n    defaultSizes: 'parsed' // stat  // gzip\n}\n
1
2
3
4
5
6
7
8
9
10

  • 详情：

    构建结果分析，当配置 process.env.ANALYZE 时开启，例如执行ANALYZE=1 fes build

autoprefixer

  • 类型： object
  • 默认值：
{\n    flexbox: 'no-2009'\n}\n
1
2
3
',13),l=(0,e._)("p",null,"详情：",-1),t={href:"https://github.com/postcss/autoprefixer#options",target:"_blank",rel:"noopener noreferrer"},o=(0,e.Uk)("postcss autoprefixer 插件"),r=(0,e.Uk)(" 配置。"),c=(0,e.uE)('

base

  • 类型： string

  • 默认值： ''

  • 详情：

    设置路由前缀，通常用于部署到非根目录。比如你有路由 /pageA、/pageB，然后设置了 base 为 /manage/，那么就可以通过 /manage/pageA、/manage/pageB 访问到它们。

chainWebpack

',3),i=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型："),(0,e._)("code",null,"function")])],-1),u=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值："),(0,e._)("code",null,"null")])],-1),d=(0,e._)("p",null,"详情：",-1),k=(0,e.Uk)("通过 "),b={href:"https://github.com/neutrinojs/webpack-chain",target:"_blank",rel:"noopener noreferrer"},h=(0,e.Uk)("webpack-chain"),m=(0,e.Uk)(" 的 API 修改 webpack 配置。"),g=(0,e.uE)('

示例：

export default {\n    chainWebpack(memo, { env, webpack }) {\n        // 删除 fes 内置插件\n        memo.plugins.delete('copy');\n    },\n}\n
1
2
3
4
5
6

cssLoader

',3),v=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"object")])],-1),y=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"''")])],-1),_=(0,e._)("p",null,"详情：",-1),f=(0,e.Uk)("设置 "),x={href:"https://github.com/webpack-contrib/css-loader#options",target:"_blank",rel:"noopener noreferrer"},j=(0,e.Uk)("css-loader 配置项"),U=(0,e.Uk)("。"),w=(0,e.uE)('

copy

  • 类型： Array(string) || Array(object)

  • 默认值： []

  • 详情：

    设置要复制到输出目录的文件、文件夹。

    配置约定 from-to 规则， 其中 from 是相对于 cwd 的路径，to 是相对于输出路径的路径。

  • 示例：

export default {\n    copy: {\n        from: '/src/assets/images',\n        to: 'assets/images'\n    }\n}\n
1
2
3
4
5
6

上面示例中，实现了将 cwd 路径中的 /src/assets/images 文件夹，在编译完成后，copy 到输出路径下的 assets/images 文件夹。

define

  • 类型： object

  • 默认值： {}

  • 详情：

    用于提供给代码中可用的变量。

  • 示例：

export default {\n    define: {\n        __DEV__: 'development'\n    }\n}\n
1
2
3
4
5

然后你代码里写 console.log(__DEV__)，会被编译成 console.log('development')。

devServer

  • 类型： object

  • 默认值： {}

  • 详情：

    配置开发服务器。支持以下子配置项：

    • port，端口号，默认 8000
    • host，默认 localhost
    • https，是否启用 https server，同时也会开启 HTTP/2

    启用 port 和 host 也可以通过环境变量 PORT 和 HOST 临时指定。

devtool

',11),E=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"string")])],-1),A=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"cheap-module-source-map"),(0,e.Uk)(" in dev, "),(0,e._)("code",null,"undefined"),(0,e.Uk)(" in build")])],-1),L=(0,e._)("p",null,"详情：",-1),P=(0,e.Uk)("用户配置 sourcemap 类型。详见 "),N={href:"https://webpack.js.org/configuration/devtool/#devtool",target:"_blank",rel:"noopener noreferrer"},S=(0,e.Uk)(" webpack#devtool 配置"),W=(0,e.Uk)("。"),z=(0,e.uE)('

dynamicImport

  • 类型： boolean

  • 默认值： false

  • 详情：

    路由是否按需加载

exportStatic

  • 类型： object
  • 默认值： {}
  • 详情：

配置 html 的输出形式，默认只输出 index.html。

如果开启 exportStatic，则会针对每个路由输出 html 文件。

比如以下路由，

/\n/users\n/list\n
1
2
3

不开启 exportStatic 时，输出，

- index.html\n
1

设置 exportStatic: {} 后，输出，

- index.html\n- users.html\n- list.html\n
1
2
3

externals

  • 类型：object

  • 默认值：{}

  • 详情：

    设置哪些模块可以不被打包，通过 <script> 或其他方式引入。

示例：

export default {\n    externals: {\n      vue: 'window.Vue',\n    },\n}\n
1
2
3
4
5

extraBabelPlugins

  • 类型： array
  • 默认值： []
  • 详情：

配置额外的 babel 插件。

  • 示例：
export default {\n    extraBabelPlugins: [\n        ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }],\n    ],\n}\n
1
2
3
4
5

extraBabelPresets

  • 类型： array
  • 默认值： []
  • 详情：

配置额外的 babel 插件集。

extraPostCSSPlugins

',25),O=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"array")])],-1),D=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"[]")])],-1),Z=(0,e._)("p",null,"详情：",-1),T=(0,e.Uk)("设置额外的 "),Y={href:"https://github.com/postcss/postcss/blob/master/docs/plugins.md",target:"_blank",rel:"noopener noreferrer"},M=(0,e.Uk)("postcss 插件"),B=(0,e.Uk)("。"),C=(0,e._)("h2",{id:"html",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#html","aria-hidden":"true"},"#"),(0,e.Uk)(" html")],-1),I=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"object")])],-1),V=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"{}")])],-1),H=(0,e._)("p",null,"详情：",-1),R=(0,e.Uk)("设置"),q={href:"https://github.com/jantimon/html-webpack-plugin#options",target:"_blank",rel:"noopener noreferrer"},F=(0,e.Uk)("html-webpack-plugin"),G=(0,e.Uk)("。"),$=(0,e.uE)('

inlineLimit

  • 类型： number

  • 默认值： 8192(8k)

  • 详情：

    配置图片文件是否走 base64 编译的阈值。默认是 8192 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。

lessLoader

',3),J=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"object")])],-1),K=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"{}")])],-1),Q=(0,e._)("p",null,"详情：",-1),X=(0,e.Uk)("设置 "),nn={href:"https://github.com/webpack-contrib/less-loader",target:"_blank",rel:"noopener noreferrer"},sn=(0,e.Uk)("less-loader 配置项"),an=(0,e.Uk)("。"),en=(0,e.uE)('

mock

  • 类型： object || boolean

  • 默认值： {}

  • 详情：

    配置 mock 属性。

    • 当 mock 为 boolean 类型时，true 表示打开 mock，false 表示关闭 mock。
    • 当 mock 为 object 类型时，默认打开 mock。也可以通过子属性 prefix 添加过滤条件，满足条件的走 mock 文件。

  • 示例：

export default {\n    mock: {\n        prefix: '/api/auth'\n    }\n}\n
1
2
3
4
5

然后所有以 /api/users 开始的请求，就能进入 mock.js 文件处理。

mountElementId

  • 类型： string

  • 默认值： app

  • 详情：

    指定渲染到的 HTML 元素 id。

nodeModulesTransform

  • 类型： object

  • 默认值： { exclude: [] }

  • 详情：

    默认编译所有 node_modules 下的包，可以通过配置 exclude 来跳过某些包，以提高编译速度。

outputPath

  • 类型： string

  • 默认值： dist

  • 详情：

    指定输出路径。

提示

不允许设定为 src、public、pages 等约定目录。

plugins

  • 类型： Array(string)

  • 默认值： []

  • 详情：

    配置额外的 fes 插件。 数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。

  • 示例：

export default {\n  plugins: [\n    // npm 依赖\n    'fes-plugin-hello',\n    // 相对路径\n    './plugin',\n    // 绝对路径\n    `${__dirname}/plugin.js`,\n  ],\n};\n
1
2
3
4
5
6
7
8
9
10

postcssLoader

',15),pn=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"object")])],-1),ln=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"{}")])],-1),tn=(0,e._)("p",null,"详情：",-1),on=(0,e.Uk)("设置 "),rn={href:"https://github.com/postcss/postcss-loader#options",target:"_blank",rel:"noopener noreferrer"},cn=(0,e.Uk)("postcss-loader 配置项"),un=(0,e.Uk)("。"),dn=(0,e.uE)('

proxy

  • 类型： object

  • 默认值： {}

  • 详情：

    配置代理能力。

  • 示例：

export default {\n    proxy: {\n        '/v2': {\n            'target': 'https://api.douban.com/',\n            'changeOrigin': true, \n        }\n    }\n}\n
1
2
3
4
5
6
7
8
',3),kn=(0,e.Uk)("然后访问 "),bn=(0,e._)("code",null,"/v2/movie/in_theaters_proxy",-1),hn=(0,e.Uk)(" 就能访问到 "),mn={href:"http://api.douban.com/v2/movie/in_theaters_proxy",target:"_blank",rel:"noopener noreferrer"},gn=(0,e.Uk)("http://api.douban.com/v2/movie/in_theaters_proxy"),vn=(0,e.Uk)(" 的数据。"),yn=(0,e.uE)('

publicPath

  • 类型： string

  • 默认值： /

  • 详情：

    配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 publicPath 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 publicPath 的值设为 CDN 的值就可以。

router

  • 类型： object

  • 默认值： { mode: 'hash' }

  • 详情：

    配置路由，具体请查看指南中关于路由的介绍

singular

  • 类型： boolean

  • 默认值： false

  • 详情：

    配置是否启用单数模式的目录。 比如 src/pages 的约定在开启后为 src/page 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。

targets

  • 类型： object

  • 默认值： {}

  • 详情：

    配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。

terserOptions

  • 类型： object
  • 默认值：
const defaultTerserOptions = {\n    compress: {\n        // turn off flags with small gains to speed up minification\n        arrows: false,\n        collapse_vars: false, // 0.3kb\n        comparisons: false,\n        computed_props: false,\n        hoist_funs: false,\n        hoist_props: false,\n        hoist_vars: false,\n        inline: false,\n        loops: false,\n        negate_iife: false,\n        properties: false,\n        reduce_funcs: false,\n        reduce_vars: false,\n        switches: false,\n        toplevel: false,\n        typeofs: false,\n\n        // a few flags with noticeable gains/speed ratio\n        // numbers based on out of the box vendor bundle\n        booleans: true, // 0.7kb\n        if_return: true, // 0.4kb\n        sequences: true, // 0.7kb\n        unused: true, // 2.3kb\n\n        // required features to drop conditional branches\n        conditionals: true,\n        dead_code: true,\n        evaluate: true\n    },\n    mangle: {\n        safari10: true\n    }\n}\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
',11),_n=(0,e._)("p",null,"详情：",-1),fn=(0,e.Uk)("配置 "),xn={href:"https://github.com/terser/terser#minify-options",target:"_blank",rel:"noopener noreferrer"},jn=(0,e.Uk)("压缩器 terser 的配置项"),Un=(0,e._)("h2",{id:"vueloader",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#vueloader","aria-hidden":"true"},"#"),(0,e.Uk)(" vueLoader")],-1),wn=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"object")])],-1),En=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值："),(0,e._)("code",null,"{}")])],-1),An=(0,e._)("p",null,"详情：",-1),Ln=(0,e.Uk)("配置 "),Pn={href:"https://vue-loader.vuejs.org/zh/options.html",target:"_blank",rel:"noopener noreferrer"},Nn=(0,e.Uk)("Vue Loader"),Sn=(0,e._)("h2",{id:"更多配置项",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#更多配置项","aria-hidden":"true"},"#"),(0,e.Uk)(" 更多配置项")],-1),Wn=(0,e._)("p",null,"Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。",-1),zn={},On=(0,a(3744).Z)(zn,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("ul",null,[(0,e._)("li",null,[l,(0,e._)("p",null,[(0,e._)("a",t,[o,(0,e.Wm)(a)]),r])])]),c,(0,e._)("ul",null,[i,u,(0,e._)("li",null,[d,(0,e._)("p",null,[k,(0,e._)("a",b,[h,(0,e.Wm)(a)]),m])])]),g,(0,e._)("ul",null,[v,y,(0,e._)("li",null,[_,(0,e._)("p",null,[f,(0,e._)("a",x,[j,(0,e.Wm)(a)]),U])])]),w,(0,e._)("ul",null,[E,A,(0,e._)("li",null,[L,(0,e._)("p",null,[P,(0,e._)("a",N,[S,(0,e.Wm)(a)]),W])])]),z,(0,e._)("ul",null,[O,D,(0,e._)("li",null,[Z,(0,e._)("p",null,[T,(0,e._)("a",Y,[M,(0,e.Wm)(a)]),B])])]),C,(0,e._)("ul",null,[I,V,(0,e._)("li",null,[H,(0,e._)("p",null,[R,(0,e._)("a",q,[F,(0,e.Wm)(a)]),G])])]),$,(0,e._)("ul",null,[J,K,(0,e._)("li",null,[Q,(0,e._)("p",null,[X,(0,e._)("a",nn,[sn,(0,e.Wm)(a)]),an])])]),en,(0,e._)("ul",null,[pn,ln,(0,e._)("li",null,[tn,(0,e._)("p",null,[on,(0,e._)("a",rn,[cn,(0,e.Wm)(a)]),un])])]),dn,(0,e._)("p",null,[kn,bn,hn,(0,e._)("a",mn,[gn,(0,e.Wm)(a)]),vn]),yn,(0,e._)("ul",null,[(0,e._)("li",null,[_n,(0,e._)("p",null,[fn,(0,e._)("a",xn,[jn,(0,e.Wm)(a)])])])]),Un,(0,e._)("ul",null,[wn,En,(0,e._)("li",null,[An,(0,e._)("p",null,[Ln,(0,e._)("a",Pn,[Nn,(0,e.Wm)(a)])])])]),Sn,Wn],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-2c05b6e0.a2dac609.js b/assets/js/v-2c05b6e0.a2dac609.js deleted file mode 100644 index e7bef41e..00000000 --- a/assets/js/v-2c05b6e0.a2dac609.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[960],{5822:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-2c05b6e0",path:"/reference/config/",title:"配置",lang:"zh-CN",frontmatter:{sidebar:"auto"},excerpt:"",headers:[{level:2,title:"alias",slug:"alias",children:[]},{level:2,title:"analyze",slug:"analyze",children:[]},{level:2,title:"autoprefixer",slug:"autoprefixer",children:[]},{level:2,title:"base",slug:"base",children:[]},{level:2,title:"chainWebpack",slug:"chainwebpack",children:[]},{level:2,title:"cssLoader",slug:"cssloader",children:[]},{level:2,title:"copy",slug:"copy",children:[]},{level:2,title:"define",slug:"define",children:[]},{level:2,title:"devServer",slug:"devserver",children:[]},{level:2,title:"devtool",slug:"devtool",children:[]},{level:2,title:"dynamicImport",slug:"dynamicimport",children:[]},{level:2,title:"exportStatic",slug:"exportstatic",children:[]},{level:2,title:"externals",slug:"externals",children:[]},{level:2,title:"extraBabelPlugins",slug:"extrababelplugins",children:[]},{level:2,title:"extraBabelPresets",slug:"extrababelpresets",children:[]},{level:2,title:"extraPostCSSPlugins",slug:"extrapostcssplugins",children:[]},{level:2,title:"html",slug:"html",children:[]},{level:2,title:"inlineLimit",slug:"inlinelimit",children:[]},{level:2,title:"lessLoader",slug:"lessloader",children:[]},{level:2,title:"mock",slug:"mock",children:[]},{level:2,title:"mountElementId",slug:"mountelementid",children:[]},{level:2,title:"nodeModulesTransform",slug:"nodemodulestransform",children:[]},{level:2,title:"outputPath",slug:"outputpath",children:[]},{level:2,title:"plugins",slug:"plugins",children:[]},{level:2,title:"postcssLoader",slug:"postcssloader",children:[]},{level:2,title:"proxy",slug:"proxy",children:[]},{level:2,title:"publicPath",slug:"publicpath",children:[]},{level:2,title:"router",slug:"router",children:[]},{level:2,title:"singular",slug:"singular",children:[]},{level:2,title:"targets",slug:"targets",children:[]},{level:2,title:"terserOptions",slug:"terseroptions",children:[]},{level:2,title:"vueLoader",slug:"vueloader",children:[]},{level:2,title:"更多配置项",slug:"更多配置项",children:[]}],filePathRelative:"reference/config/README.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},502:(n,s,a)=>{a.r(s),a.d(s,{default:()=>On});var e=a(6252);const p=(0,e.uE)('

配置

以下配置项通过字母排序。

alias

  • 类型： object

  • 默认值： {}

  • 详情：

    配置别名，对引用路径进行映射。

  • 示例：

export default {\n    alias: {\n       main: 'src/assets/styles/main'\n    }\n}\n
1
2
3
4
5

然后 import('main')，实际上是 import('src/assets/styles/main')。

analyze

  • 类型： object
  • 默认值：
{\n    analyzerMode: process.env.ANALYZE_MODE || 'server',\n    analyzerPort: process.env.ANALYZE_PORT || 8888,\n    openAnalyzer: process.env.ANALYZE_OPEN !== 'none',\n    // generate stats file while ANALYZE_DUMP exist\n    generateStatsFile: !!process.env.ANALYZE_DUMP,\n    statsFilename: process.env.ANALYZE_DUMP || 'stats.json',\n    logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',\n    defaultSizes: 'parsed' // stat  // gzip\n}\n
1
2
3
4
5
6
7
8
9
10

  • 详情：

    构建结果分析，当配置 process.env.ANALYZE 时开启，例如执行ANALYZE=1 fes build

autoprefixer

  • 类型： object
  • 默认值：
{\n    flexbox: 'no-2009'\n}\n
1
2
3
',13),l=(0,e._)("p",null,"详情：",-1),t={href:"https://github.com/postcss/autoprefixer#options",target:"_blank",rel:"noopener noreferrer"},o=(0,e.Uk)("postcss autoprefixer 插件"),r=(0,e.Uk)(" 配置。"),c=(0,e.uE)('

base

  • 类型： string

  • 默认值： ''

  • 详情：

    设置路由前缀，通常用于部署到非根目录。比如你有路由 /pageA、/pageB，然后设置了 base 为 /manage/，那么就可以通过 /manage/pageA、/manage/pageB 访问到它们。

chainWebpack

',3),i=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型："),(0,e._)("code",null,"function")])],-1),u=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值："),(0,e._)("code",null,"null")])],-1),d=(0,e._)("p",null,"详情：",-1),k=(0,e.Uk)("通过 "),b={href:"https://github.com/neutrinojs/webpack-chain",target:"_blank",rel:"noopener noreferrer"},h=(0,e.Uk)("webpack-chain"),m=(0,e.Uk)(" 的 API 修改 webpack 配置。"),g=(0,e.uE)('

示例：

export default {\n    chainWebpack(memo, { env, webpack }) {\n        // 删除 fes 内置插件\n        memo.plugins.delete('copy');\n    },\n}\n
1
2
3
4
5
6

cssLoader

',3),v=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"object")])],-1),y=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"''")])],-1),_=(0,e._)("p",null,"详情：",-1),f=(0,e.Uk)("设置 "),x={href:"https://github.com/webpack-contrib/css-loader#options",target:"_blank",rel:"noopener noreferrer"},j=(0,e.Uk)("css-loader 配置项"),U=(0,e.Uk)("。"),w=(0,e.uE)('

copy

  • 类型： Array(string) || Array(object)

  • 默认值： []

  • 详情：

    设置要复制到输出目录的文件、文件夹。

    配置约定 from-to 规则， 其中 from 是相对于 cwd 的路径，to 是相对于输出路径的路径。

  • 示例：

export default {\n    copy: {\n        from: '/src/assets/images',\n        to: 'assets/images'\n    }\n}\n
1
2
3
4
5
6

上面示例中，实现了将 cwd 路径中的 /src/assets/images 文件夹，在编译完成后，copy 到输出路径下的 assets/images 文件夹。

define

  • 类型： object

  • 默认值： {}

  • 详情：

    用于提供给代码中可用的变量。

  • 示例：

export default {\n    define: {\n        __DEV__: 'development'\n    }\n}\n
1
2
3
4
5

然后你代码里写 console.log(__DEV__)，会被编译成 console.log('development')。

devServer

  • 类型： object

  • 默认值： {}

  • 详情：

    配置开发服务器。支持以下子配置项：

    • port，端口号，默认 8000
    • host，默认 localhost
    • https，是否启用 https server，同时也会开启 HTTP/2

    启用 port 和 host 也可以通过环境变量 PORT 和 HOST 临时指定。

devtool

',11),E=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"string")])],-1),A=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"cheap-module-source-map"),(0,e.Uk)(" in dev, "),(0,e._)("code",null,"undefined"),(0,e.Uk)(" in build")])],-1),L=(0,e._)("p",null,"详情：",-1),P=(0,e.Uk)("用户配置 sourcemap 类型。详见 "),N={href:"https://webpack.js.org/configuration/devtool/#devtool",target:"_blank",rel:"noopener noreferrer"},S=(0,e.Uk)(" webpack#devtool 配置"),W=(0,e.Uk)("。"),z=(0,e.uE)('

dynamicImport

  • 类型： boolean

  • 默认值： false

  • 详情：

    路由是否按需加载

exportStatic

  • 类型： object
  • 默认值： {}
  • 详情：

配置 html 的输出形式，默认只输出 index.html。

如果开启 exportStatic，则会针对每个路由输出 html 文件。

比如以下路由，

/\n/users\n/list\n
1
2
3

不开启 exportStatic 时，输出，

- index.html\n
1

设置 exportStatic: {} 后，输出，

- index.html\n- users.html\n- list.html\n
1
2
3

externals

  • 类型：object

  • 默认值：{}

  • 详情：

    设置哪些模块可以不被打包，通过 <script> 或其他方式引入。

示例：

export default {\n    externals: {\n      vue: 'window.Vue',\n    },\n}\n
1
2
3
4
5

extraBabelPlugins

  • 类型： array
  • 默认值： []
  • 详情：

配置额外的 babel 插件。

  • 示例：
export default {\n    extraBabelPlugins: [\n        ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }],\n    ],\n}\n
1
2
3
4
5

extraBabelPresets

  • 类型： array
  • 默认值： []
  • 详情：

配置额外的 babel 插件集。

extraPostCSSPlugins

',25),O=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"array")])],-1),D=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"[]")])],-1),Z=(0,e._)("p",null,"详情：",-1),T=(0,e.Uk)("设置额外的 "),Y={href:"https://github.com/postcss/postcss/blob/master/docs/plugins.md",target:"_blank",rel:"noopener noreferrer"},M=(0,e.Uk)("postcss 插件"),B=(0,e.Uk)("。"),C=(0,e._)("h2",{id:"html",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#html","aria-hidden":"true"},"#"),(0,e.Uk)(" html")],-1),I=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"object")])],-1),V=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"{}")])],-1),H=(0,e._)("p",null,"详情：",-1),R=(0,e.Uk)("设置"),F={href:"https://github.com/jantimon/html-webpack-plugin#options",target:"_blank",rel:"noopener noreferrer"},q=(0,e.Uk)("html-webpack-plugin"),G=(0,e.Uk)("。"),$=(0,e.uE)('

inlineLimit

  • 类型： number

  • 默认值： 8192(8k)

  • 详情：

    配置图片文件是否走 base64 编译的阈值。默认是 8192 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。

lessLoader

',3),J=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"object")])],-1),K=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"{}")])],-1),Q=(0,e._)("p",null,"详情：",-1),X=(0,e.Uk)("设置 "),nn={href:"https://github.com/webpack-contrib/less-loader",target:"_blank",rel:"noopener noreferrer"},sn=(0,e.Uk)("less-loader 配置项"),an=(0,e.Uk)("。"),en=(0,e.uE)('

mock

  • 类型： object || boolean

  • 默认值： {}

  • 详情：

    配置 mock 属性。

    • 当 mock 为 boolean 类型时，true 表示打开 mock，false 表示关闭 mock。
    • 当 mock 为 object 类型时，默认打开 mock。也可以通过子属性 prefix 添加过滤条件，满足条件的走 mock 文件。

  • 示例：

export default {\n    mock: {\n        prefix: '/api/auth'\n    }\n}\n
1
2
3
4
5

然后所有以 /api/users 开始的请求，就能进入 mock.js 文件处理。

mountElementId

  • 类型： string

  • 默认值： app

  • 详情：

    指定渲染到的 HTML 元素 id。

nodeModulesTransform

  • 类型： object

  • 默认值： { exclude: [] }

  • 详情：

    默认编译所有 node_modules 下的包，可以通过配置 exclude 来跳过某些包，以提高编译速度。

outputPath

  • 类型： string

  • 默认值： dist

  • 详情：

    指定输出路径。

提示

不允许设定为 src、public、pages 等约定目录。

plugins

  • 类型： Array(string)

  • 默认值： []

  • 详情：

    配置额外的 fes 插件。 数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。

  • 示例：

export default {\n  plugins: [\n    // npm 依赖\n    'fes-plugin-hello',\n    // 相对路径\n    './plugin',\n    // 绝对路径\n    `${__dirname}/plugin.js`,\n  ],\n};\n
1
2
3
4
5
6
7
8
9
10

postcssLoader

',15),pn=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"object")])],-1),ln=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值： "),(0,e._)("code",null,"{}")])],-1),tn=(0,e._)("p",null,"详情：",-1),on=(0,e.Uk)("设置 "),rn={href:"https://github.com/postcss/postcss-loader#options",target:"_blank",rel:"noopener noreferrer"},cn=(0,e.Uk)("postcss-loader 配置项"),un=(0,e.Uk)("。"),dn=(0,e.uE)('

proxy

  • 类型： object

  • 默认值： {}

  • 详情：

    配置代理能力。

  • 示例：

export default {\n    proxy: {\n        '/v2': {\n            'target': 'https://api.douban.com/',\n            'changeOrigin': true, \n        }\n    }\n}\n
1
2
3
4
5
6
7
8
',3),kn=(0,e.Uk)("然后访问 "),bn=(0,e._)("code",null,"/v2/movie/in_theaters_proxy",-1),hn=(0,e.Uk)(" 就能访问到 "),mn={href:"http://api.douban.com/v2/movie/in_theaters_proxy",target:"_blank",rel:"noopener noreferrer"},gn=(0,e.Uk)("http://api.douban.com/v2/movie/in_theaters_proxy"),vn=(0,e.Uk)(" 的数据。"),yn=(0,e.uE)('

publicPath

  • 类型： string

  • 默认值： /

  • 详情：

    配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 publicPath 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 publicPath 的值设为 CDN 的值就可以。

router

  • 类型： object

  • 默认值： { mode: 'hash' }

  • 详情：

    配置路由，具体请查看指南中关于路由的介绍

singular

  • 类型： boolean

  • 默认值： false

  • 详情：

    配置是否启用单数模式的目录。 比如 src/pages 的约定在开启后为 src/page 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。

targets

  • 类型： object

  • 默认值： {}

  • 详情：

    配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。

terserOptions

  • 类型： object
  • 默认值：
const defaultTerserOptions = {\n    compress: {\n        // turn off flags with small gains to speed up minification\n        arrows: false,\n        collapse_vars: false, // 0.3kb\n        comparisons: false,\n        computed_props: false,\n        hoist_funs: false,\n        hoist_props: false,\n        hoist_vars: false,\n        inline: false,\n        loops: false,\n        negate_iife: false,\n        properties: false,\n        reduce_funcs: false,\n        reduce_vars: false,\n        switches: false,\n        toplevel: false,\n        typeofs: false,\n\n        // a few flags with noticeable gains/speed ratio\n        // numbers based on out of the box vendor bundle\n        booleans: true, // 0.7kb\n        if_return: true, // 0.4kb\n        sequences: true, // 0.7kb\n        unused: true, // 2.3kb\n\n        // required features to drop conditional branches\n        conditionals: true,\n        dead_code: true,\n        evaluate: true\n    },\n    mangle: {\n        safari10: true\n    }\n}\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
',11),_n=(0,e._)("p",null,"详情：",-1),fn=(0,e.Uk)("配置 "),xn={href:"https://github.com/terser/terser#minify-options",target:"_blank",rel:"noopener noreferrer"},jn=(0,e.Uk)("压缩器 terser 的配置项"),Un=(0,e._)("h2",{id:"vueloader",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#vueloader","aria-hidden":"true"},"#"),(0,e.Uk)(" vueLoader")],-1),wn=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型： "),(0,e._)("code",null,"object")])],-1),En=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值："),(0,e._)("code",null,"{}")])],-1),An=(0,e._)("p",null,"详情：",-1),Ln=(0,e.Uk)("配置 "),Pn={href:"https://vue-loader.vuejs.org/zh/options.html",target:"_blank",rel:"noopener noreferrer"},Nn=(0,e.Uk)("Vue Loader"),Sn=(0,e._)("h2",{id:"更多配置项",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#更多配置项","aria-hidden":"true"},"#"),(0,e.Uk)(" 更多配置项")],-1),Wn=(0,e._)("p",null,"Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。",-1),zn={},On=(0,a(3744).Z)(zn,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("ul",null,[(0,e._)("li",null,[l,(0,e._)("p",null,[(0,e._)("a",t,[o,(0,e.Wm)(a)]),r])])]),c,(0,e._)("ul",null,[i,u,(0,e._)("li",null,[d,(0,e._)("p",null,[k,(0,e._)("a",b,[h,(0,e.Wm)(a)]),m])])]),g,(0,e._)("ul",null,[v,y,(0,e._)("li",null,[_,(0,e._)("p",null,[f,(0,e._)("a",x,[j,(0,e.Wm)(a)]),U])])]),w,(0,e._)("ul",null,[E,A,(0,e._)("li",null,[L,(0,e._)("p",null,[P,(0,e._)("a",N,[S,(0,e.Wm)(a)]),W])])]),z,(0,e._)("ul",null,[O,D,(0,e._)("li",null,[Z,(0,e._)("p",null,[T,(0,e._)("a",Y,[M,(0,e.Wm)(a)]),B])])]),C,(0,e._)("ul",null,[I,V,(0,e._)("li",null,[H,(0,e._)("p",null,[R,(0,e._)("a",F,[q,(0,e.Wm)(a)]),G])])]),$,(0,e._)("ul",null,[J,K,(0,e._)("li",null,[Q,(0,e._)("p",null,[X,(0,e._)("a",nn,[sn,(0,e.Wm)(a)]),an])])]),en,(0,e._)("ul",null,[pn,ln,(0,e._)("li",null,[tn,(0,e._)("p",null,[on,(0,e._)("a",rn,[cn,(0,e.Wm)(a)]),un])])]),dn,(0,e._)("p",null,[kn,bn,hn,(0,e._)("a",mn,[gn,(0,e.Wm)(a)]),vn]),yn,(0,e._)("ul",null,[(0,e._)("li",null,[_n,(0,e._)("p",null,[fn,(0,e._)("a",xn,[jn,(0,e.Wm)(a)])])])]),Un,(0,e._)("ul",null,[wn,En,(0,e._)("li",null,[An,(0,e._)("p",null,[Ln,(0,e._)("a",Pn,[Nn,(0,e.Wm)(a)])])])]),Sn,Wn],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-2fe128e7.1aab1529.js b/assets/js/v-2fe128e7.1aab1529.js new file mode 100644 index 00000000..e8491f66 --- /dev/null +++ b/assets/js/v-2fe128e7.1aab1529.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[484],{2639:(s,n,a)=>{a.r(n),a.d(n,{data:()=>p});const p={key:"v-2fe128e7",path:"/reference/plugin/plugins/access.html",title:"@fesjs/plugin-access",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[{level:3,title:"资源",slug:"资源",children:[]},{level:3,title:"匹配规则",slug:"匹配规则",children:[]},{level:3,title:"角色",slug:"角色",children:[]}]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"roles",slug:"roles",children:[]}]},{level:2,title:"运行时配置",slug:"运行时配置",children:[{level:3,title:"unAccessHandler",slug:"unaccesshandler",children:[]},{level:3,title:"noFoundHandler",slug:"nofoundhandler",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"access",slug:"access",children:[]},{level:3,title:"useAccess",slug:"useaccess",children:[]},{level:3,title:"v-access",slug:"v-access",children:[]},{level:3,title:"组件 Access",slug:"组件-access",children:[]}]}],filePathRelative:"reference/plugin/plugins/access.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5364:(s,n,a)=>{a.r(n),a.d(n,{default:()=>w});var p=a(6252);const e=(0,p.uE)('

@fesjs/plugin-access

介绍

对于前端应用来说，权限就是页面、页面元素是否可见。

资源

Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分他们：

  • 页面的资源 ID 默认是页面的路由 path 。比如页面 pages/a.vue 的路由 path 是 /a。当页面访问 /a 时会渲染当前页面，/a 也就是页面的 accessId。

  • 页面元素的资源 ID 没有默认值，需要自定义。

<template>\n    <access :id="accessId"> accessOnepicess1 <input /> </access>\n    <div v-access="accessId"> accessOnepicess2 </div>\n</template>\n<script>\nexport default {\n    setup(){\n        return {\n            accessId: 'accessOnepicess'\n        }\n    }\n}\n</script>\n
1
2
3
4
5
6
7
8
9
10
11
12
13

匹配规则

全等匹配

资源的匹配规则默认是使用全等匹配，比如页面 pages/a.vue 对应路由 path 是 /a，则 /a 就是页面的资源ID。如果我们设置：

access.setAccess(['/a'])\n
1

由于权限列表中包含/a，则表示拥有此页面权限。

模糊匹配

页面@id.vue会映射为动态路由/:id，想匹配此页面有两种办法：

  • access.setAccess(['/:id'])
  • access.setAccess(['/*'])

第二种是模糊匹配，*表示任意路径。比如角色admin需要全部权限，则可以：

export default {\n    access: {\n        roles: {\n            admin: ["*"]\n        }\n    }\n}\n
1
2
3
4
5
6
7

角色

通常我们会用角色来控制权限，相应的Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。

当然有时候业务比较复杂，角色对应的权限是动态的。不要怕！插件提供粒度更细的 API 来设置当前用户能访问的资源。

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-access": "^2.0.0"\n    },\n}\n
1
2
3
4
5
6

编译时配置

在执行 fes dev 或者 fes build 时，通过此配置生成运行时的代码，在配置文件.fes.js 中配置：

export default {\n    access: {\n        roles: {\n            admin: ["/", "/onepiece", '/store']\n        }\n    }\n}\n
1
2
3
4
5
6
7

roles

  • 类型：对象

  • 默认值：{}

  • 详情：

    角色预定义列表。key 是角色 Id ，value是角色 Id 对应的资源列表。

运行时配置

在 app.js 中配置

unAccessHandler

',31),t=(0,p.uE)("

  • 类型：Function

  • 默认值：null

  • 详情：

    当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 unAccessHandler 函数。

    • ",3),c=(0,p._)("p",null,[(0,p._)("strong",null,"参数")],-1),o=(0,p._)("li",null,"router：createRouter 创建的路由实例",-1),l=(0,p._)("li",null,"to： 准备进入的路由",-1),u=(0,p._)("li",null,"from：离开的路由",-1),i=(0,p.Uk)("next： "),r={href:"https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next",target:"_blank",rel:"noopener noreferrer"},k=(0,p.Uk)("next函数"),d=(0,p.uE)('

    比如：

    export const access = {\n    unAccessHandler({ to, next }) {\n        const accesssIds = accessApi.getAccess();\n        if (to.path === '/404') {\n            accessApi.setAccess(accesssIds.concat(['/404']));\n            return next('/404');\n        }\n        if (!accesssIds.includes('/403')) {\n            accessApi.setAccess(accesssIds.concat(['/403']));\n        }\n        next('/403');\n    }\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    noFoundHandler

    ',3),g=(0,p.uE)("

  • 类型：Function

  • 默认值：null

  • 详情：

    当进入某个路由时，如果路由对应的页面不存在，则会调用 noFoundHandler 函数。

    • ",3),b=(0,p._)("p",null,[(0,p._)("strong",null,"参数")],-1),m=(0,p._)("li",null,"router：createRouter 创建的路由实例",-1),h=(0,p._)("li",null,"to： 准备进入的路由",-1),v=(0,p._)("li",null,"from：离开的路由",-1),f=(0,p.Uk)("next： "),y={href:"https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next",target:"_blank",rel:"noopener noreferrer"},j=(0,p.Uk)("next函数"),x=(0,p.uE)('

    比如：

    export const access = {\n    noFoundHandler({ next }) {\n        const accesssIds = accessApi.getAccess();\n        if (!accesssIds.includes('/404')) {\n            accessApi.setAccess(accesssIds.concat(['/404']));\n        }\n        next('/404');\n    }\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    API

    access

    插件 API 通过 @fesjs/fes 导出：

    import { access } from '@fesjs/fes'\n
    1

    access.hasAccess

    • 类型：( accessId: string | number ) => Promise<boolean>

    • 详情: 判断某个资源是否可见。

    • 参数：

      • accessId，资源Id

    • 返回值：是否有权限

    access.isDataReady

    • 类型：() => boolean

    • 详情：可以用异步数据来设置权限，isDataReady 用来判断异步数据是否已经加载完毕。

    • 参数：null

    • 返回值：Boolean

    import { access } from '@fesjs/fes';\nconsole.log(access.isDataReady())\n
    1
    2

    access.setRole

    • 类型：函数

    • 详情：设置当前的角色。

    • 参数：

      • roleId，角色Id，有两种类型：
        • String，对应着 roles 配置对象中的 key。
        • Promise，Promise resolve 的结果应对应着 roles 配置对象中的 key。
    import { access } from '@fesjs/fes';\naccess.setRole('admin')\n
    1
    2

    access.setAccess

    • 类型：函数

    • 详情：设置当前的角色。

    • 参数：

      • accessIds，资源Id数组，有两种类型：
        • Array，数组项对应着 roles 配置对象中的 key。
        • Promise，Promise resolve 的结果应该是Array<accessId>。
    import { access } from '@fesjs/fes';\naccess.setAccess(['/a', '/b', '/c'])\n
    1
    2

    access.getAccess

    • 类型：函数

    • 详情：返回当前可见的资源列表。

    • 参数：null

    import { access } from '@fesjs/fes';\naccess.getAccess();\n
    1
    2

    useAccess

    • 类型：composition 函数

    • 详情：判断某个资源是否可见。

    • 参数：

      • accessId，资源Id

    • 返回值：ref

    <template>\n    <div v-if="accessOnepicess">accessOnepicess</div>\n</template>\n<script>\nimport { useAccess } from '@fesjs/fes';\nexport default {\n    setup(){\n        const accessOnepicess = useAccess('/onepiece1');\n        return {\n            accessOnepicess\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    v-access

    在指令 v-access 中传入 accessId，则当 accessId 拥有权限时显示DOM，当没有权限时隐藏此DOM。

    <template>\n    <div v-access="accessId"> accessOnepicess </div>\n</template>\n<script>\nexport default {\n    setup(){\n        return {\n            accessId: 'accessOnepicess'\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    组件 Access

    组件 Access 中传入 accessId，则当 accessId 拥有权限时渲染此组件，当没有权限时隐藏此组件。

    <template>\n    <access :id="accessId"> accessOnepicess </access>\n</template>\n<script>\nexport default {\n    setup(){\n        return {\n            accessId: 'accessOnepicess'\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ',29),A={},w=(0,a(3744).Z)(A,[["render",function(s,n){const a=(0,p.up)("OutboundLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[e,(0,p._)("ul",null,[t,(0,p._)("li",null,[c,(0,p._)("ul",null,[o,l,u,(0,p._)("li",null,[i,(0,p._)("a",r,[k,(0,p.Wm)(a)])])])])]),d,(0,p._)("ul",null,[g,(0,p._)("li",null,[b,(0,p._)("ul",null,[m,h,v,(0,p._)("li",null,[f,(0,p._)("a",y,[j,(0,p.Wm)(a)])])])])]),x],64)}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,p]of n)a[s]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-2fe128e7.782fc13f.js b/assets/js/v-2fe128e7.782fc13f.js deleted file mode 100644 index bf273073..00000000 --- a/assets/js/v-2fe128e7.782fc13f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[484],{2639:(s,n,a)=>{a.r(n),a.d(n,{data:()=>p});const p={key:"v-2fe128e7",path:"/reference/plugin/plugins/access.html",title:"@fesjs/plugin-access",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[{level:3,title:"资源",slug:"资源",children:[]},{level:3,title:"匹配规则",slug:"匹配规则",children:[]},{level:3,title:"角色",slug:"角色",children:[]}]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"roles",slug:"roles",children:[]}]},{level:2,title:"运行时配置",slug:"运行时配置",children:[{level:3,title:"unAccessHandler",slug:"unaccesshandler",children:[]},{level:3,title:"noFoundHandler",slug:"nofoundhandler",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"access",slug:"access",children:[]},{level:3,title:"useAccess",slug:"useaccess",children:[]},{level:3,title:"v-access",slug:"v-access",children:[]},{level:3,title:"组件 Access",slug:"组件-access",children:[]}]}],filePathRelative:"reference/plugin/plugins/access.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5364:(s,n,a)=>{a.r(n),a.d(n,{default:()=>w});var p=a(6252);const e=(0,p.uE)('

    @fesjs/plugin-access

    介绍

    对于前端应用来说，权限就是页面、页面元素是否可见。

    资源

    Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分他们：

    • 页面的资源 ID 默认是页面的路由 path 。比如页面 pages/a.vue 的路由 path 是 /a。当页面访问 /a 时会渲染当前页面，/a 也就是页面的 accessId。

    • 页面元素的资源 ID 没有默认值，需要自定义。

    <template>\n    <access :id="accessId"> accessOnepicess1 <input /> </access>\n    <div v-access="accessId"> accessOnepicess2 </div>\n</template>\n<script>\nexport default {\n    setup(){\n        return {\n            accessId: 'accessOnepicess'\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    匹配规则

    全等匹配

    资源的匹配规则默认是使用全等匹配，比如页面 pages/a.vue 对应路由 path 是 /a，则 /a 就是页面的资源ID。如果我们设置：

    access.setAccess(['/a'])\n
    1

    由于权限列表中包含/a，则表示拥有此页面权限。

    模糊匹配

    页面@id.vue会映射为动态路由/:id，想匹配此页面有两种办法：

    • access.setAccess(['/:id'])
    • access.setAccess(['/*'])

    第二种是模糊匹配，*表示任意路径。比如角色admin需要全部权限，则可以：

    export default {\n    access: {\n        roles: {\n            admin: ["*"]\n        }\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7

    角色

    通常我们会用角色来控制权限，相应的Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。

    当然有时候业务比较复杂，角色对应的权限是动态的。不要怕！插件提供粒度更细的 API 来设置当前用户能访问的资源。

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-access": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    编译时配置

    在执行 fes dev 或者 fes build 时，通过此配置生成运行时的代码，在配置文件.fes.js 中配置：

    export default {\n    access: {\n        roles: {\n            admin: ["/", "/onepiece", '/store']\n        }\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7

    roles

    • 类型：对象

    • 默认值：{}

    • 详情：

      角色预定义列表。key 是角色 Id ，value是角色 Id 对应的资源列表。

    运行时配置

    在 app.js 中配置

    unAccessHandler

    ',31),t=(0,p.uE)("

  • 类型：Function

  • 默认值：null

  • 详情：

    当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 unAccessHandler 函数。

    • ",3),c=(0,p._)("p",null,[(0,p._)("strong",null,"参数")],-1),o=(0,p._)("li",null,"router：createRouter 创建的路由实例",-1),l=(0,p._)("li",null,"to： 准备进入的路由",-1),u=(0,p._)("li",null,"from：离开的路由",-1),i=(0,p.Uk)("next： "),r={href:"https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next",target:"_blank",rel:"noopener noreferrer"},k=(0,p.Uk)("next函数"),d=(0,p.uE)('

    比如：

    export const access = {\n    unAccessHandler({ to, next }) {\n        const accesssIds = accessApi.getAccess();\n        if (to.path === '/404') {\n            accessApi.setAccess(accesssIds.concat(['/404']));\n            return next('/404');\n        }\n        if (!accesssIds.includes('/403')) {\n            accessApi.setAccess(accesssIds.concat(['/403']));\n        }\n        next('/403');\n    }\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    noFoundHandler

    ',3),g=(0,p.uE)("

  • 类型：Function

  • 默认值：null

  • 详情：

    当进入某个路由时，如果路由对应的页面不存在，则会调用 noFoundHandler 函数。

    • ",3),b=(0,p._)("p",null,[(0,p._)("strong",null,"参数")],-1),m=(0,p._)("li",null,"router：createRouter 创建的路由实例",-1),h=(0,p._)("li",null,"to： 准备进入的路由",-1),v=(0,p._)("li",null,"from：离开的路由",-1),f=(0,p.Uk)("next： "),y={href:"https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next",target:"_blank",rel:"noopener noreferrer"},j=(0,p.Uk)("next函数"),x=(0,p.uE)('

    比如：

    export const access = {\n    noFoundHandler({ next }) {\n        const accesssIds = accessApi.getAccess();\n        if (!accesssIds.includes('/404')) {\n            accessApi.setAccess(accesssIds.concat(['/404']));\n        }\n        next('/404');\n    }\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    API

    access

    插件 API 通过 @fesjs/fes 导出：

    import { access } from '@fesjs/fes'\n
    1

    access.hasAccess

    • 类型：( accessId: string | number ) => Promise<boolean>

    • 详情: 判断某个资源是否可见。

    • 参数：

      • accessId，资源Id

    • 返回值：是否有权限

    access.isDataReady

    • 类型：() => boolean

    • 详情：可以用异步数据来设置权限，isDataReady 用来判断异步数据是否已经加载完毕。

    • 参数：null

    • 返回值：Boolean

    import { access } from '@fesjs/fes';\nconsole.log(access.isDataReady())\n
    1
    2

    access.setRole

    • 类型：函数

    • 详情：设置当前的角色。

    • 参数：

      • roleId，角色Id，有两种类型：
        • String，对应着 roles 配置对象中的 key。
        • Promise，Promise resolve 的结果应对应着 roles 配置对象中的 key。
    import { access } from '@fesjs/fes';\naccess.setRole('admin')\n
    1
    2

    access.setAccess

    • 类型：函数

    • 详情：设置当前的角色。

    • 参数：

      • accessIds，资源Id数组，有两种类型：
        • Array，数组项对应着 roles 配置对象中的 key。
        • Promise，Promise resolve 的结果应该是Array<accessId>。
    import { access } from '@fesjs/fes';\naccess.setAccess(['/a', '/b', '/c'])\n
    1
    2

    access.getAccess

    • 类型：函数

    • 详情：返回当前可见的资源列表。

    • 参数：null

    import { access } from '@fesjs/fes';\naccess.getAccess();\n
    1
    2

    useAccess

    • 类型：composition 函数

    • 详情：判断某个资源是否可见。

    • 参数：

      • accessId，资源Id

    • 返回值：ref

    <template>\n    <div v-if="accessOnepicess">accessOnepicess</div>\n</template>\n<script>\nimport { useAccess } from '@fesjs/fes';\nexport default {\n    setup(){\n        const accessOnepicess = useAccess('/onepiece1');\n        return {\n            accessOnepicess\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    v-access

    在指令 v-access 中传入 accessId，则当 accessId 拥有权限时显示DOM，当没有权限时隐藏此DOM。

    <template>\n    <div v-access="accessId"> accessOnepicess </div>\n</template>\n<script>\nexport default {\n    setup(){\n        return {\n            accessId: 'accessOnepicess'\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    组件 Access

    组件 Access 中传入 accessId，则当 accessId 拥有权限时渲染此组件，当没有权限时隐藏此组件。

    <template>\n    <access :id="accessId"> accessOnepicess </access>\n</template>\n<script>\nexport default {\n    setup(){\n        return {\n            accessId: 'accessOnepicess'\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ',29),A={},w=(0,a(3744).Z)(A,[["render",function(s,n){const a=(0,p.up)("OutboundLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[e,(0,p._)("ul",null,[t,(0,p._)("li",null,[c,(0,p._)("ul",null,[o,l,u,(0,p._)("li",null,[i,(0,p._)("a",r,[k,(0,p.Wm)(a)])])])])]),d,(0,p._)("ul",null,[g,(0,p._)("li",null,[b,(0,p._)("ul",null,[m,h,v,(0,p._)("li",null,[f,(0,p._)("a",y,[j,(0,p.Wm)(a)])])])])]),x],64)}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,p]of n)a[s]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-323bda7e.5673f3fb.js b/assets/js/v-323bda7e.5673f3fb.js new file mode 100644 index 00000000..9d0331db --- /dev/null +++ b/assets/js/v-323bda7e.5673f3fb.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[230],{6062:(n,s,a)=>{a.r(s),a.d(s,{data:()=>t});const t={key:"v-323bda7e",path:"/reference/plugin/plugins/editor.html",title:"@fesjs/plugin-monaco-editor",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"filename",slug:"filename",children:[]},{level:3,title:"publicPath",slug:"publicpath",children:[]},{level:3,title:"languages",slug:"languages",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"monaco",slug:"monaco",children:[]},{level:3,title:"组件 MonacoEditor",slug:"组件-monacoeditor",children:[]}]}],filePathRelative:"reference/plugin/plugins/editor.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5846:(n,s,a)=>{a.r(s),a.d(s,{default:()=>L});var t=a(6252);const e=(0,t._)("h1",{id:"fesjs-plugin-monaco-editor",tabindex:"-1"},[(0,t._)("a",{class:"header-anchor",href:"#fesjs-plugin-monaco-editor","aria-hidden":"true"},"#"),(0,t.Uk)(" @fesjs/plugin-monaco-editor")],-1),p=(0,t._)("h2",{id:"介绍",tabindex:"-1"},[(0,t._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,t.Uk)(" 介绍")],-1),o=(0,t.Uk)("我们会遇到需要编辑代码的场景，比如编辑"),l=(0,t._)("code",null,"json",-1),r=(0,t.Uk)("、"),c=(0,t._)("code",null,"javascript",-1),i=(0,t.Uk)("、"),u=(0,t._)("code",null,"python",-1),d=(0,t.Uk)("等等，"),k={href:"https://github.com/Microsoft/monaco-editor",target:"_blank",rel:"noopener noreferrer"},b=(0,t.Uk)("Monaco Editor"),h=(0,t.Uk)(" 是\b一个好用而且强大的的代码编辑器库，引入"),m=(0,t._)("code",null,"Monaco Editor",-1),g=(0,t.Uk)("有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 "),f=(0,t._)("code",null,"Monaco Editor",-1),y=(0,t.Uk)(" 版本是 "),v=(0,t._)("code",null,"1.9.1",-1),j=(0,t.Uk)("。"),q=(0,t.uE)('

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-monaco-editor": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    编译时配置

    在执行 fes dev 或者 fes build 时，通过此配置生成运行时的代码，在配置文件.fes.js 中配置：

    export default {\n    monacoEditor: {\n        languages: ['javascript', 'typescript', 'html', 'json']\n    }\n}\n
    1
    2
    3
    4
    5
    ',6),x=(0,t.Uk)("我们通过 "),w=(0,t._)("code",null,"monaco-editor-webpack-plugin",-1),_=(0,t.Uk)(" 集成 "),U=(0,t._)("code",null,"Monaco Editor",-1),E=(0,t.Uk)(" 的 "),M=(0,t._)("code",null,"ESM",-1),P=(0,t.Uk)("版本，所以编辑时其实就是 "),C=(0,t._)("code",null,"monaco-editor-webpack-plugin",-1),T=(0,t.Uk)(" 的配置，具体配置项参考"),z={href:"https://github.com/Microsoft/monaco-editor-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},A=(0,t.Uk)("文档"),I=(0,t.Uk)("。"),O=(0,t.uE)('

    filename

    • 类型：自定义worker脚本名称

    • 默认值：'[name].worker.js'

    publicPath

    • 类型：自定义worker脚本的路径

    • 默认值：''

    languages

    • 类型：需要支持的语言类型

    • 默认值：['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']

    • 详情：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如javascript依赖typescript，需要使用javascript时需要配置为：

    export default {\n    monacoEditor: {\n        languages: ['javascript', 'typescript']\n    }\n}\n
    1
    2
    3
    4
    5

    API

    monaco

    ',9),W=(0,t.Uk)("编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看"),F={href:"https://microsoft.github.io/monaco-editor/",target:"_blank",rel:"noopener noreferrer"},S=(0,t.Uk)("monaco"),Z=(0,t.Uk)("官方文档。"),D=(0,t.uE)('
    import { monaco } from '@fesjs/fes';\n\nmonaco.editor.defineTheme('myCoolTheme', {\n\tbase: 'vs',\n\tinherit: false,\n\trules: [\n\t\t{ token: 'custom-info', foreground: '808080' },\n\t\t{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },\n\t\t{ token: 'custom-notice', foreground: 'FFA500' },\n\t\t{ token: 'custom-date', foreground: '008800' },\n\t]\n});\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    组件 MonacoEditor

    <template>\n    <MonacoEditor \n        v-model="json"\n        language="json"\n        height="400px"\n        check>\n    </MonacoEditor>\n</template>\n<script>\nimport { MonacoEditor } from '@fesjs/fes';\nexport default {\n    components: {\n        MonacoEditor\n    },\n    setup(){\n        const json = ref('');\n        return {\n            json\n        };\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    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
    ',7),H={},L=(0,a(3744).Z)(H,[["render",function(n,s){const a=(0,t.up)("OutboundLink");return(0,t.wg)(),(0,t.iD)(t.HY,null,[e,p,(0,t._)("p",null,[o,l,r,c,i,u,d,(0,t._)("a",k,[b,(0,t.Wm)(a)]),h,m,g,f,y,v,j]),q,(0,t._)("p",null,[x,w,_,U,E,M,P,C,T,(0,t._)("a",z,[A,(0,t.Wm)(a)]),I]),O,(0,t._)("p",null,[W,(0,t._)("a",F,[S,(0,t.Wm)(a)]),Z]),D],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,t]of s)a[n]=t;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-323bda7e.d242a4bd.js b/assets/js/v-323bda7e.d242a4bd.js deleted file mode 100644 index 2c87ccbd..00000000 --- a/assets/js/v-323bda7e.d242a4bd.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[230],{6062:(n,s,a)=>{a.r(s),a.d(s,{data:()=>t});const t={key:"v-323bda7e",path:"/reference/plugin/plugins/editor.html",title:"@fesjs/plugin-monaco-editor",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"filename",slug:"filename",children:[]},{level:3,title:"publicPath",slug:"publicpath",children:[]},{level:3,title:"languages",slug:"languages",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"monaco",slug:"monaco",children:[]},{level:3,title:"组件 MonacoEditor",slug:"组件-monacoeditor",children:[]}]}],filePathRelative:"reference/plugin/plugins/editor.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5846:(n,s,a)=>{a.r(s),a.d(s,{default:()=>L});var t=a(6252);const e=(0,t._)("h1",{id:"fesjs-plugin-monaco-editor",tabindex:"-1"},[(0,t._)("a",{class:"header-anchor",href:"#fesjs-plugin-monaco-editor","aria-hidden":"true"},"#"),(0,t.Uk)(" @fesjs/plugin-monaco-editor")],-1),p=(0,t._)("h2",{id:"介绍",tabindex:"-1"},[(0,t._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,t.Uk)(" 介绍")],-1),o=(0,t.Uk)("我们会遇到需要编辑代码的场景，比如编辑"),l=(0,t._)("code",null,"json",-1),r=(0,t.Uk)("、"),c=(0,t._)("code",null,"javascript",-1),i=(0,t.Uk)("、"),u=(0,t._)("code",null,"python",-1),d=(0,t.Uk)("等等，"),k={href:"https://github.com/Microsoft/monaco-editor",target:"_blank",rel:"noopener noreferrer"},b=(0,t.Uk)("Monaco Editor"),h=(0,t.Uk)(" 是\b一个好用而且强大的的代码编辑器库，引入"),m=(0,t._)("code",null,"Monaco Editor",-1),g=(0,t.Uk)("有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 "),f=(0,t._)("code",null,"Monaco Editor",-1),y=(0,t.Uk)(" 版本是 "),v=(0,t._)("code",null,"1.9.1",-1),j=(0,t.Uk)("。"),x=(0,t.uE)('

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-monaco-editor": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    编译时配置

    在执行 fes dev 或者 fes build 时，通过此配置生成运行时的代码，在配置文件.fes.js 中配置：

    export default {\n    monacoEditor: {\n        languages: ['javascript', 'typescript', 'html', 'json']\n    }\n}\n
    1
    2
    3
    4
    5
    ',6),w=(0,t.Uk)("我们通过 "),q=(0,t._)("code",null,"monaco-editor-webpack-plugin",-1),_=(0,t.Uk)(" 集成 "),U=(0,t._)("code",null,"Monaco Editor",-1),E=(0,t.Uk)(" 的 "),M=(0,t._)("code",null,"ESM",-1),P=(0,t.Uk)("版本，所以编辑时其实就是 "),C=(0,t._)("code",null,"monaco-editor-webpack-plugin",-1),T=(0,t.Uk)(" 的配置，具体配置项参考"),z={href:"https://github.com/Microsoft/monaco-editor-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},A=(0,t.Uk)("文档"),I=(0,t.Uk)("。"),O=(0,t.uE)('

    filename

    • 类型：自定义worker脚本名称

    • 默认值：'[name].worker.js'

    publicPath

    • 类型：自定义worker脚本的路径

    • 默认值：''

    languages

    • 类型：需要支持的语言类型

    • 默认值：['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']

    • 详情：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如javascript依赖typescript，需要使用javascript时需要配置为：

    export default {\n    monacoEditor: {\n        languages: ['javascript', 'typescript']\n    }\n}\n
    1
    2
    3
    4
    5

    API

    monaco

    ',9),W=(0,t.Uk)("编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看"),F={href:"https://microsoft.github.io/monaco-editor/",target:"_blank",rel:"noopener noreferrer"},S=(0,t.Uk)("monaco"),Z=(0,t.Uk)("官方文档。"),D=(0,t.uE)('
    import { monaco } from '@fesjs/fes';\n\nmonaco.editor.defineTheme('myCoolTheme', {\n\tbase: 'vs',\n\tinherit: false,\n\trules: [\n\t\t{ token: 'custom-info', foreground: '808080' },\n\t\t{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },\n\t\t{ token: 'custom-notice', foreground: 'FFA500' },\n\t\t{ token: 'custom-date', foreground: '008800' },\n\t]\n});\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    组件 MonacoEditor

    <template>\n    <MonacoEditor \n        v-model="json"\n        language="json"\n        height="400px"\n        check>\n    </MonacoEditor>\n</template>\n<script>\nimport { MonacoEditor } from '@fesjs/fes';\nexport default {\n    components: {\n        MonacoEditor\n    },\n    setup(){\n        const json = ref('');\n        return {\n            json\n        };\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    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
    ',7),H={},L=(0,a(3744).Z)(H,[["render",function(n,s){const a=(0,t.up)("OutboundLink");return(0,t.wg)(),(0,t.iD)(t.HY,null,[e,p,(0,t._)("p",null,[o,l,r,c,i,u,d,(0,t._)("a",k,[b,(0,t.Wm)(a)]),h,m,g,f,y,v,j]),x,(0,t._)("p",null,[w,q,_,U,E,M,P,C,T,(0,t._)("a",z,[A,(0,t.Wm)(a)]),I]),O,(0,t._)("p",null,[W,(0,t._)("a",F,[S,(0,t.Wm)(a)]),Z]),D],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,t]of s)a[n]=t;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-355ee23e.8fe1c5c4.js b/assets/js/v-355ee23e.8fe1c5c4.js new file mode 100644 index 00000000..8b61e9db --- /dev/null +++ b/assets/js/v-355ee23e.8fe1c5c4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[475],{1783:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-355ee23e",path:"/reference/plugin/plugins/layout.html",title:"@fesjs/plugin-layout",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"布局类型",slug:"布局类型",children:[{level:3,title:"side",slug:"side",children:[]},{level:3,title:"top",slug:"top",children:[]},{level:3,title:"mixin",slug:"mixin",children:[]},{level:3,title:"页面禁用布局",slug:"页面禁用布局",children:[]}]},{level:2,title:"keep-alive",slug:"keep-alive",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"footer",slug:"footer",children:[]},{level:3,title:"theme",slug:"theme",children:[]},{level:3,title:"navigation",slug:"navigation",children:[]},{level:3,title:"fixedHeader",slug:"fixedheader",children:[]},{level:3,title:"fixedSideBar",slug:"fixedsidebar",children:[]},{level:3,title:"title",slug:"title",children:[]},{level:3,title:"logo",slug:"logo",children:[]},{level:3,title:"multiTabs",slug:"multitabs",children:[]},{level:3,title:"menus",slug:"menus",children:[]},{level:3,title:"menusConfig",slug:"menusconfig",children:[]}]},{level:2,title:"运行时配置",slug:"运行时配置",children:[{level:3,title:"menus",slug:"menus-1",children:[]},{level:3,title:"header",slug:"header",children:[]},{level:3,title:"sidebar",slug:"sidebar",children:[]},{level:3,title:"logo",slug:"logo-1",children:[]},{level:3,title:"customHeader",slug:"customheader",children:[]},{level:3,title:"unAccessHandler",slug:"unaccesshandler",children:[]},{level:3,title:"noFoundHandler",slug:"nofoundhandler",children:[]},{level:3,title:"logoUrl",slug:"logourl",children:[]},{level:3,title:"其他运行时配置 (> 4.1.0)",slug:"其他运行时配置-4-1-0",children:[]}]}],filePathRelative:"reference/plugin/plugins/layout.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},2891:(n,s,a)=>{a.r(s),a.d(s,{default:()=>wn});var e=a(6252);const p=(0,e._)("h1",{id:"fesjs-plugin-layout",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#fesjs-plugin-layout","aria-hidden":"true"},"#"),(0,e.Uk)(" @fesjs/plugin-layout")],-1),t=(0,e._)("h2",{id:"介绍",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,e.Uk)(" 介绍")],-1),l=(0,e._)("p",null,"为了进一步降低研发成本，我们尝试将布局通过 fes 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。",-1),o=(0,e.uE)("

  • 侧边栏菜单数据根据路由中的配置自动生成。

  • 布局，提供 side、 top、mixin 三种布局。

  • 主题，提供 light、dark 两种主题。

  • 默认实现对路由的 404、403 处理。

    • ",4),c=(0,e.Uk)("搭配 "),r=(0,e.Uk)("@fesjs/plugin-access"),i=(0,e.Uk)(" 插件使用，可以完成对路由的权限控制。"),u=(0,e.Uk)("搭配 "),d=(0,e.Uk)("@fesjs/plugin-locale"),k=(0,e.Uk)(" 插件使用，提供切换语言的能力。"),g=(0,e._)("li",null,[(0,e._)("p",null,"支持自定义头部区域。")],-1),b=(0,e._)("li",null,[(0,e._)("p",null,"菜单支持配置icon")],-1),m=(0,e._)("li",null,[(0,e._)("p",null,"菜单标题支持国际化")],-1),h=(0,e._)("li",null,[(0,e._)("p",null,"可配置页面是否需要 layout。")],-1),f=(0,e.uE)('

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-layout": "^4.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    布局类型

    配置参数是 navigation, 布局有三种类型 side、mixin 和 top， 默认是 side：

    export default {\n    layout: {\n        navigation: 'side'\n    }\n}\n
    1
    2
    3
    4
    5

    side

    ',7),v=["src"],y=(0,e._)("h3",{id:"top",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#top","aria-hidden":"true"},"#"),(0,e.Uk)(" top")],-1),x=["src"],_=(0,e._)("h3",{id:"mixin",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#mixin","aria-hidden":"true"},"#"),(0,e.Uk)(" mixin")],-1),j=["src"],U=(0,e.uE)('

    页面禁用布局

    布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的.vue中添加如下配置：

    <config lang="json">\n{\n    "layout": false\n}\n</config>\n
    1
    2
    3
    4
    5

    如果只是不想展示sidebar，则：

    <config lang="json">\n{\n    "layout": {\n        "sidebar": false\n    }\n}\n</config>\n
    1
    2
    3
    4
    5
    6
    7

    layout的可选配置有：

    • sidebar： 左侧区域，从v4.0.0开始，之前名称叫side

    • header： 头部区域，从v4.0.0开始，之前名称叫top

    • logo：logo和标题区域。

    keep-alive

    从 4.0.7 开始支持配置路由页面缓存：

    <config lang="json">\n{\n    "keep-alive": true\n}\n</config>\n
    1
    2
    3
    4
    5

    编译时配置

    在 .fes.js 中配置：

    export default {\n    layout: {\n        // 标题\n        title: "Fes.js",\n        // 底部文字\n        footer: 'Created by MumbleFE',\n        // 主题light\n        theme: 'dark'\n        // 是否开启 tabs\n        multiTabs: false,\n        // 布局类型\n        navigation: 'side',\n        // 是否固定头部\n        fixedHeader: false,\n        // 是否固定sidebar\n        fixedSideBar: true,\n        // sidebar的宽度\n        sideWidth: 200,\n        menus: [{\n            name: 'index'\n        }, {\n            name: 'onepiece'\n        }, {\n            name: 'store'\n        }, {\n            name: 'simpleList'\n        }],\n        menuConfig: {\n            defaultExpandAll: false,\n            expandedKeys: [],\n            accordion: false\n        }\n    },\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33

    • 类型：String

    • 默认值：null

    • 详情：页面底部的文字。

    theme

    • 类型：String

    • 默认值：dark

    • 详情：主题，可选有 dark、light

    • 类型：String

    • 默认值：side

    • 详情：页面布局类型，可选有 side、 top、 mixin

    fixedHeader

    • 类型：Boolean

    • 默认值：false

    • 详情：是否固定头部，不跟随页面滚动。

    fixedSideBar

    • 类型：Boolean

    • 默认值：true

    • 详情：是否固定sidebar，不跟随页面滚动。

    title

    • 类型：String

    • 默认值：name in package.json

    • 详情：产品名，会显示在 Logo 旁边。

    • 类型：String

    • 默认值：默认提供 fes.js 的 Logo

    • 详情：Logo的链接

    multiTabs

    • 类型：boolean

    • 默认值：false

    • 详情：是否开启多页。

    ',30),w=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"类型"),(0,e.Uk)("："),(0,e._)("code",null,"Array")])],-1),E=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"默认值"),(0,e.Uk)("："),(0,e._)("code",null,"[]")])],-1),A=(0,e._)("p",null,[(0,e._)("strong",null,"详情"),(0,e.Uk)("：菜单配置，子项具体配置如下：")],-1),q=(0,e._)("strong",null,"name",-1),C=(0,e.Uk)("：菜单的名称。通过匹配 "),B=(0,e._)("code",null,"name",-1),F=(0,e.Uk)(" 和路由元信息 "),H=(0,e.Uk)("meta"),S=(0,e.Uk)(" 中的 "),R=(0,e._)("code",null,"name",-1),L=(0,e.Uk)("，把菜单和路由关联起来，\b然后使用路由元信息补充菜单配置，比如 "),W=(0,e._)("code",null,"title",-1),I=(0,e.Uk)("、"),O=(0,e._)("code",null,"path",-1),z=(0,e.Uk)(" \b等。"),$=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"path"),(0,e.Uk)("：菜单的路径，可配置第三方地址。")])],-1),M=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"match"),(0,e.Uk)("：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）")])],-1),T=(0,e.uE)('
    {\n    path: '/product',\n    match: ['/product/*', '/product/create']\n}\n
    1
    2
    3
    4
    ',1),D=(0,e._)("strong",null,"title",-1),K=(0,e.Uk)("：菜单的标题，如果同时使用"),N=(0,e.Uk)("国际化插件"),Z=(0,e.Uk)("，而且"),P=(0,e._)("code",null,"title",-1),V=(0,e.Uk)("的值以"),Y=(0,e._)("code",null,"$",-1),G=(0,e.Uk)("开头，则使用"),J=(0,e._)("code",null,"$",-1),Q=(0,e.Uk)("后面的内容去匹配语言设置。"),X=(0,e._)("p",null,[(0,e._)("strong",null,"icon"),(0,e.Uk)(": 菜单的图标，只有一级标题展示图标。")],-1),nn=(0,e.Uk)("图标使用"),sn={href:"https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html",target:"_blank",rel:"noopener noreferrer"},an=(0,e.Uk)("fes-design icon"),en=(0,e.Uk)("，在这里使用组件名称。"),pn=(0,e.uE)('
    {\n    icon: "AppstoreOutlined"\n}\n
    1
    2
    3
    - 图标使用本地或者远程svg图片。\n
    {\n    icon: "/wine-outline.svg"\n}\n
    1
    2
    3
    • children：子菜单配置。

    • 类型：Object

    • 默认值：{}

    • 详情：菜单的配置：

      • defaultExpandAll：是否默认展开全部菜单。

      • expandedKeys：配置默认展开的菜单，需要传子项是菜单路径的数组。

      • accordion：是否只保持一个子菜单的展开。

    运行时配置

    在 app.js 中配置：

    import UserCenter from '@/components/UserCenter';\nexport const layout = {\n    customHeader: <UserCenter />\n};\n\n
    1
    2
    3
    4
    5

    • 类型：(defaultMenus: [] )=> Ref | []

    • 详情：运行时修改菜单，入参是默认菜单配置（.fes.js中的menu配置），需要返回一个Ref或者数组。

    import { ClusterOutlined } from '@fesjs/fes-design/icon'\nexport const layout = layoutConfig => ({\n    ...layoutConfig,\n    customHeader: <UserCenter />,\n    menus: (defaultMenuData) => {\n        const menusRef = ref(defaultMenuData);\n        watch(() => layoutConfig.initialState.userName, () => {\n            menusRef.value = [{\n                name: 'store',\n                icon: <ClusterOutlined />\n            }];\n        });\n        return menusRef;\n    }\n});\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    layoutConfig.initialState 是 beforeRender.action执行后创建的应用初始状态数据。

    如果菜单需要根据某些状态动态改变，则返回Ref，否则只需要返回数组。

    提示

    在运行时配置菜单中的icon，需要传组件本身，而不是组件的名称。

    • 类型：String

    • 默认值：true

    • 详情：是否显示 header 区域。

    • 类型：String

    • 默认值：true

    • 详情：是否显示 sidebar 区域。

    logo

    • 类型：String

    • 默认值：true

    • 详情：是否显示 logo 区域。

    customHeader

    • 类型：Vue Component

    • 默认值：null

    • 详情：top的区域部分位置提供组件自定义功能。

    unAccessHandler

    ',24),tn=(0,e.uE)("

  • 类型：Function

  • 默认值：null

  • 详情：

    当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 unAccessHandler 函数。

    • ",3),ln=(0,e._)("p",null,[(0,e._)("strong",null,"参数")],-1),on=(0,e._)("li",null,"router：createRouter 创建的路由实例",-1),cn=(0,e._)("li",null,"to： 准备进入的路由",-1),rn=(0,e._)("li",null,"from：离开的路由",-1),un=(0,e.Uk)("next： "),dn={href:"https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next",target:"_blank",rel:"noopener noreferrer"},kn=(0,e.Uk)("next函数"),gn=(0,e.uE)('

    比如：

    export const access = {\n    unAccessHandler({ to, next }) {\n        const accesssIds = accessApi.getAccess();\n        if (to.path === '/404') {\n            accessApi.setAccess(accesssIds.concat(['/404']));\n            return next('/404');\n        }\n        if (!accesssIds.includes('/403')) {\n            accessApi.setAccess(accesssIds.concat(['/403']));\n        }\n        next('/403');\n    }\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    noFoundHandler

    ',3),bn=(0,e.uE)("

  • 类型：函数

  • 默认值：null

  • 详情：

    当进入某个路由时，如果路由对应的页面不存在，则会调用 noFoundHandler 函数。

    • ",3),mn=(0,e._)("p",null,[(0,e._)("strong",null,"参数")],-1),hn=(0,e._)("li",null,"router：createRouter 创建的路由实例",-1),fn=(0,e._)("li",null,"to： 准备进入的路由",-1),vn=(0,e._)("li",null,"from：离开的路由",-1),yn=(0,e.Uk)("next： "),xn={href:"https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next",target:"_blank",rel:"noopener noreferrer"},_n=(0,e.Uk)("next函数"),jn=(0,e.uE)('

    比如：

    export const access = {\n    noFoundHandler({ next }) {\n        const accesssIds = accessApi.getAccess();\n        if (!accesssIds.includes('/404')) {\n            accessApi.setAccess(accesssIds.concat(['/404']));\n        }\n        next('/404');\n    }\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    logoUrl

    • 类型：String

    • 默认值：默认提供 fes.js 的 Logo

    • 详情：Logo的链接。

    其他运行时配置 (> 4.1.0)

    编译时配置的内容同样支持在运行时配置，但是logo除外，用logoUrl替代。

    ',6),Un={},wn=(0,a(3744).Z)(Un,[["render",function(n,s){const a=(0,e.up)("RouterLink"),Un=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,t,l,(0,e._)("ul",null,[o,(0,e._)("li",null,[(0,e._)("p",null,[c,(0,e.Wm)(a,{to:"/reference/plugin/plugins/access.html"},{default:(0,e.w5)((()=>[r])),_:1}),i])]),(0,e._)("li",null,[(0,e._)("p",null,[u,(0,e.Wm)(a,{to:"/reference/plugin/plugins/locale.html"},{default:(0,e.w5)((()=>[d])),_:1}),k])]),g,b,m,h]),f,(0,e._)("img",{src:n.$withBase("side.png"),alt:"side"},null,8,v),y,(0,e._)("img",{src:n.$withBase("top.png"),alt:"top"},null,8,x),_,(0,e._)("img",{src:n.$withBase("mixin.png"),alt:"mixin"},null,8,j),U,(0,e._)("ul",null,[w,E,(0,e._)("li",null,[A,(0,e._)("ul",null,[(0,e._)("li",null,[(0,e._)("p",null,[q,C,B,F,(0,e.Wm)(a,{to:"/guide/route.html#%E6%89%A9%E5%B1%95%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF"},{default:(0,e.w5)((()=>[H])),_:1}),S,R,L,W,I,O,z])]),$,M])])]),T,(0,e._)("ul",null,[(0,e._)("li",null,[(0,e._)("p",null,[D,K,(0,e.Wm)(a,{to:"/reference/plugin/plugins/locale.html"},{default:(0,e.w5)((()=>[N])),_:1}),Z,P,V,Y,G,J,Q])]),(0,e._)("li",null,[X,(0,e._)("ul",null,[(0,e._)("li",null,[nn,(0,e._)("a",sn,[an,(0,e.Wm)(Un)]),en])])])]),pn,(0,e._)("ul",null,[tn,(0,e._)("li",null,[ln,(0,e._)("ul",null,[on,cn,rn,(0,e._)("li",null,[un,(0,e._)("a",dn,[kn,(0,e.Wm)(Un)])])])])]),gn,(0,e._)("ul",null,[bn,(0,e._)("li",null,[mn,(0,e._)("ul",null,[hn,fn,vn,(0,e._)("li",null,[yn,(0,e._)("a",xn,[_n,(0,e.Wm)(Un)])])])])]),jn],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-355ee23e.b3d3c1c5.js b/assets/js/v-355ee23e.b3d3c1c5.js deleted file mode 100644 index 637d633b..00000000 --- a/assets/js/v-355ee23e.b3d3c1c5.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[475],{1783:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-355ee23e",path:"/reference/plugin/plugins/layout.html",title:"@fesjs/plugin-layout",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"布局类型",slug:"布局类型",children:[{level:3,title:"side",slug:"side",children:[]},{level:3,title:"top",slug:"top",children:[]},{level:3,title:"mixin",slug:"mixin",children:[]},{level:3,title:"页面禁用布局",slug:"页面禁用布局",children:[]}]},{level:2,title:"keep-alive",slug:"keep-alive",children:[]},{level:2,title:"编译时配置",slug:"编译时配置",children:[{level:3,title:"footer",slug:"footer",children:[]},{level:3,title:"theme",slug:"theme",children:[]},{level:3,title:"navigation",slug:"navigation",children:[]},{level:3,title:"fixedHeader",slug:"fixedheader",children:[]},{level:3,title:"fixedSideBar",slug:"fixedsidebar",children:[]},{level:3,title:"title",slug:"title",children:[]},{level:3,title:"logo",slug:"logo",children:[]},{level:3,title:"multiTabs",slug:"multitabs",children:[]},{level:3,title:"menus",slug:"menus",children:[]},{level:3,title:"menusConfig",slug:"menusconfig",children:[]}]},{level:2,title:"运行时配置",slug:"运行时配置",children:[{level:3,title:"menus",slug:"menus-1",children:[]},{level:3,title:"header",slug:"header",children:[]},{level:3,title:"sidebar",slug:"sidebar",children:[]},{level:3,title:"logo",slug:"logo-1",children:[]},{level:3,title:"customHeader",slug:"customheader",children:[]},{level:3,title:"unAccessHandler",slug:"unaccesshandler",children:[]},{level:3,title:"noFoundHandler",slug:"nofoundhandler",children:[]},{level:3,title:"logoUrl",slug:"logourl",children:[]},{level:3,title:"其他运行时配置 (> 4.1.0)",slug:"其他运行时配置-4-1-0",children:[]}]}],filePathRelative:"reference/plugin/plugins/layout.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},2891:(n,s,a)=>{a.r(s),a.d(s,{default:()=>wn});var e=a(6252);const p=(0,e._)("h1",{id:"fesjs-plugin-layout",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#fesjs-plugin-layout","aria-hidden":"true"},"#"),(0,e.Uk)(" @fesjs/plugin-layout")],-1),t=(0,e._)("h2",{id:"介绍",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,e.Uk)(" 介绍")],-1),l=(0,e._)("p",null,"为了进一步降低研发成本，我们尝试将布局通过 fes 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。",-1),o=(0,e.uE)("

  • 侧边栏菜单数据根据路由中的配置自动生成。

  • 布局，提供 side、 top、mixin 三种布局。

  • 主题，提供 light、dark 两种主题。

  • 默认实现对路由的 404、403 处理。

    • ",4),c=(0,e.Uk)("搭配 "),r=(0,e.Uk)("@fesjs/plugin-access"),i=(0,e.Uk)(" 插件使用，可以完成对路由的权限控制。"),u=(0,e.Uk)("搭配 "),d=(0,e.Uk)("@fesjs/plugin-locale"),k=(0,e.Uk)(" 插件使用，提供切换语言的能力。"),g=(0,e._)("li",null,[(0,e._)("p",null,"支持自定义头部区域。")],-1),b=(0,e._)("li",null,[(0,e._)("p",null,"菜单支持配置icon")],-1),m=(0,e._)("li",null,[(0,e._)("p",null,"菜单标题支持国际化")],-1),h=(0,e._)("li",null,[(0,e._)("p",null,"可配置页面是否需要 layout。")],-1),f=(0,e.uE)('

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-layout": "^4.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    布局类型

    配置参数是 navigation, 布局有三种类型 side、mixin 和 top， 默认是 side：

    export default {\n    layout: {\n        navigation: 'side'\n    }\n}\n
    1
    2
    3
    4
    5

    side

    ',7),v=["src"],y=(0,e._)("h3",{id:"top",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#top","aria-hidden":"true"},"#"),(0,e.Uk)(" top")],-1),x=["src"],_=(0,e._)("h3",{id:"mixin",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#mixin","aria-hidden":"true"},"#"),(0,e.Uk)(" mixin")],-1),j=["src"],U=(0,e.uE)('

    页面禁用布局

    布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的.vue中添加如下配置：

    <config lang="json">\n{\n    "layout": false\n}\n</config>\n
    1
    2
    3
    4
    5

    如果只是不想展示sidebar，则：

    <config lang="json">\n{\n    "layout": {\n        "sidebar": false\n    }\n}\n</config>\n
    1
    2
    3
    4
    5
    6
    7

    layout的可选配置有：

    • sidebar： 左侧区域，从v4.0.0开始，之前名称叫side

    • header： 头部区域，从v4.0.0开始，之前名称叫top

    • logo：logo和标题区域。

    keep-alive

    从 4.0.7 开始支持配置路由页面缓存：

    <config lang="json">\n{\n    "keep-alive": true\n}\n</config>\n
    1
    2
    3
    4
    5

    编译时配置

    在 .fes.js 中配置：

    export default {\n    layout: {\n        // 标题\n        title: "Fes.js",\n        // 底部文字\n        footer: 'Created by MumbleFE',\n        // 主题light\n        theme: 'dark'\n        // 是否开启 tabs\n        multiTabs: false,\n        // 布局类型\n        navigation: 'side',\n        // 是否固定头部\n        fixedHeader: false,\n        // 是否固定sidebar\n        fixedSideBar: true,\n        // sidebar的宽度\n        sideWidth: 200,\n        menus: [{\n            name: 'index'\n        }, {\n            name: 'onepiece'\n        }, {\n            name: 'store'\n        }, {\n            name: 'simpleList'\n        }],\n        menuConfig: {\n            defaultExpandAll: false,\n            expandedKeys: [],\n            accordion: false\n        }\n    },\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33

    • 类型：String

    • 默认值：null

    • 详情：页面底部的文字。

    theme

    • 类型：String

    • 默认值：dark

    • 详情：主题，可选有 dark、light

    • 类型：String

    • 默认值：side

    • 详情：页面布局类型，可选有 side、 top、 mixin

    fixedHeader

    • 类型：Boolean

    • 默认值：false

    • 详情：是否固定头部，不跟随页面滚动。

    fixedSideBar

    • 类型：Boolean

    • 默认值：true

    • 详情：是否固定sidebar，不跟随页面滚动。

    title

    • 类型：String

    • 默认值：name in package.json

    • 详情：产品名，会显示在 Logo 旁边。

    • 类型：String

    • 默认值：默认提供 fes.js 的 Logo

    • 详情：Logo的链接

    multiTabs

    • 类型：boolean

    • 默认值：false

    • 详情：是否开启多页。

    ',30),w=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"类型"),(0,e.Uk)("："),(0,e._)("code",null,"Array")])],-1),E=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"默认值"),(0,e.Uk)("："),(0,e._)("code",null,"[]")])],-1),A=(0,e._)("p",null,[(0,e._)("strong",null,"详情"),(0,e.Uk)("：菜单配置，子项具体配置如下：")],-1),q=(0,e._)("strong",null,"name",-1),C=(0,e.Uk)("：菜单的名称。通过匹配 "),B=(0,e._)("code",null,"name",-1),F=(0,e.Uk)(" 和路由元信息 "),H=(0,e.Uk)("meta"),S=(0,e.Uk)(" 中的 "),R=(0,e._)("code",null,"name",-1),L=(0,e.Uk)("，把菜单和路由关联起来，\b然后使用路由元信息补充菜单配置，比如 "),W=(0,e._)("code",null,"title",-1),I=(0,e.Uk)("、"),O=(0,e._)("code",null,"path",-1),z=(0,e.Uk)(" \b等。"),$=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"path"),(0,e.Uk)("：菜单的路径，可配置第三方地址。")])],-1),M=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"match"),(0,e.Uk)("：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）")])],-1),T=(0,e.uE)('
    {\n    path: '/product',\n    match: ['/product/*', '/product/create']\n}\n
    1
    2
    3
    4
    ',1),D=(0,e._)("strong",null,"title",-1),K=(0,e.Uk)("：菜单的标题，如果同时使用"),N=(0,e.Uk)("国际化插件"),Z=(0,e.Uk)("，而且"),P=(0,e._)("code",null,"title",-1),V=(0,e.Uk)("的值以"),Y=(0,e._)("code",null,"$",-1),G=(0,e.Uk)("开头，则使用"),J=(0,e._)("code",null,"$",-1),Q=(0,e.Uk)("后面的内容去匹配语言设置。"),X=(0,e._)("p",null,[(0,e._)("strong",null,"icon"),(0,e.Uk)(": 菜单的图标，只有一级标题展示图标。")],-1),nn=(0,e.Uk)("图标使用"),sn={href:"https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html",target:"_blank",rel:"noopener noreferrer"},an=(0,e.Uk)("fes-design icon"),en=(0,e.Uk)("，在这里使用组件名称。"),pn=(0,e.uE)('
    {\n    icon: "AppstoreOutlined"\n}\n
    1
    2
    3
    - 图标使用本地或者远程svg图片。\n
    {\n    icon: "/wine-outline.svg"\n}\n
    1
    2
    3
    • children：子菜单配置。

    • 类型：Object

    • 默认值：{}

    • 详情：菜单的配置：

      • defaultExpandAll：是否默认展开全部菜单。

      • expandedKeys：配置默认展开的菜单，需要传子项是菜单路径的数组。

      • accordion：是否只保持一个子菜单的展开。

    运行时配置

    在 app.js 中配置：

    import UserCenter from '@/components/UserCenter';\nexport const layout = {\n    customHeader: <UserCenter />\n};\n\n
    1
    2
    3
    4
    5

    • 类型：(defaultMenus: [] )=> Ref | []

    • 详情：运行时修改菜单，入参是默认菜单配置（.fes.js中的menu配置），需要返回一个Ref或者数组。

    import { ClusterOutlined } from '@fesjs/fes-design/icon'\nexport const layout = layoutConfig => ({\n    ...layoutConfig,\n    customHeader: <UserCenter />,\n    menus: (defaultMenuData) => {\n        const menusRef = ref(defaultMenuData);\n        watch(() => layoutConfig.initialState.userName, () => {\n            menusRef.value = [{\n                name: 'store',\n                icon: <ClusterOutlined />\n            }];\n        });\n        return menusRef;\n    }\n});\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    layoutConfig.initialState 是 beforeRender.action执行后创建的应用初始状态数据。

    如果菜单需要根据某些状态动态改变，则返回Ref，否则只需要返回数组。

    提示

    在运行时配置菜单中的icon，需要传组件本身，而不是组件的名称。

    • 类型：String

    • 默认值：true

    • 详情：是否显示 header 区域。

    • 类型：String

    • 默认值：true

    • 详情：是否显示 sidebar 区域。

    logo

    • 类型：String

    • 默认值：true

    • 详情：是否显示 logo 区域。

    customHeader

    • 类型：Vue Component

    • 默认值：null

    • 详情：top的区域部分位置提供组件自定义功能。

    unAccessHandler

    ',24),tn=(0,e.uE)("

  • 类型：Function

  • 默认值：null

  • 详情：

    当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 unAccessHandler 函数。

    • ",3),ln=(0,e._)("p",null,[(0,e._)("strong",null,"参数")],-1),on=(0,e._)("li",null,"router：createRouter 创建的路由实例",-1),cn=(0,e._)("li",null,"to： 准备进入的路由",-1),rn=(0,e._)("li",null,"from：离开的路由",-1),un=(0,e.Uk)("next： "),dn={href:"https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next",target:"_blank",rel:"noopener noreferrer"},kn=(0,e.Uk)("next函数"),gn=(0,e.uE)('

    比如：

    export const access = {\n    unAccessHandler({ to, next }) {\n        const accesssIds = accessApi.getAccess();\n        if (to.path === '/404') {\n            accessApi.setAccess(accesssIds.concat(['/404']));\n            return next('/404');\n        }\n        if (!accesssIds.includes('/403')) {\n            accessApi.setAccess(accesssIds.concat(['/403']));\n        }\n        next('/403');\n    }\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    noFoundHandler

    ',3),bn=(0,e.uE)("

  • 类型：函数

  • 默认值：null

  • 详情：

    当进入某个路由时，如果路由对应的页面不存在，则会调用 noFoundHandler 函数。

    • ",3),mn=(0,e._)("p",null,[(0,e._)("strong",null,"参数")],-1),hn=(0,e._)("li",null,"router：createRouter 创建的路由实例",-1),fn=(0,e._)("li",null,"to： 准备进入的路由",-1),vn=(0,e._)("li",null,"from：离开的路由",-1),yn=(0,e.Uk)("next： "),xn={href:"https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next",target:"_blank",rel:"noopener noreferrer"},_n=(0,e.Uk)("next函数"),jn=(0,e.uE)('

    比如：

    export const access = {\n    noFoundHandler({ next }) {\n        const accesssIds = accessApi.getAccess();\n        if (!accesssIds.includes('/404')) {\n            accessApi.setAccess(accesssIds.concat(['/404']));\n        }\n        next('/404');\n    }\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    logoUrl

    • 类型：String

    • 默认值：默认提供 fes.js 的 Logo

    • 详情：Logo的链接。

    其他运行时配置 (> 4.1.0)

    编译时配置的内容同样支持在运行时配置，但是logo除外，用logoUrl替代。

    ',6),Un={},wn=(0,a(3744).Z)(Un,[["render",function(n,s){const a=(0,e.up)("RouterLink"),Un=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,t,l,(0,e._)("ul",null,[o,(0,e._)("li",null,[(0,e._)("p",null,[c,(0,e.Wm)(a,{to:"/reference/plugin/plugins/access.html"},{default:(0,e.w5)((()=>[r])),_:1}),i])]),(0,e._)("li",null,[(0,e._)("p",null,[u,(0,e.Wm)(a,{to:"/reference/plugin/plugins/locale.html"},{default:(0,e.w5)((()=>[d])),_:1}),k])]),g,b,m,h]),f,(0,e._)("img",{src:n.$withBase("side.png"),alt:"side"},null,8,v),y,(0,e._)("img",{src:n.$withBase("top.png"),alt:"top"},null,8,x),_,(0,e._)("img",{src:n.$withBase("mixin.png"),alt:"mixin"},null,8,j),U,(0,e._)("ul",null,[w,E,(0,e._)("li",null,[A,(0,e._)("ul",null,[(0,e._)("li",null,[(0,e._)("p",null,[q,C,B,F,(0,e.Wm)(a,{to:"/guide/route.html#%E6%89%A9%E5%B1%95%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF"},{default:(0,e.w5)((()=>[H])),_:1}),S,R,L,W,I,O,z])]),$,M])])]),T,(0,e._)("ul",null,[(0,e._)("li",null,[(0,e._)("p",null,[D,K,(0,e.Wm)(a,{to:"/reference/plugin/plugins/locale.html"},{default:(0,e.w5)((()=>[N])),_:1}),Z,P,V,Y,G,J,Q])]),(0,e._)("li",null,[X,(0,e._)("ul",null,[(0,e._)("li",null,[nn,(0,e._)("a",sn,[an,(0,e.Wm)(Un)]),en])])])]),pn,(0,e._)("ul",null,[tn,(0,e._)("li",null,[ln,(0,e._)("ul",null,[on,cn,rn,(0,e._)("li",null,[un,(0,e._)("a",dn,[kn,(0,e.Wm)(Un)])])])])]),gn,(0,e._)("ul",null,[bn,(0,e._)("li",null,[mn,(0,e._)("ul",null,[hn,fn,vn,(0,e._)("li",null,[yn,(0,e._)("a",xn,[_n,(0,e.Wm)(Un)])])])])]),jn],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-37e1c06f.8d253062.js b/assets/js/v-37e1c06f.8d253062.js deleted file mode 100644 index 9338bb01..00000000 --- a/assets/js/v-37e1c06f.8d253062.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[600],{4384:(e,t,a)=>{a.r(t),a.d(t,{data:()=>r});const r={key:"v-37e1c06f",path:"/guide/faq.html",title:"常见问题",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[],filePathRelative:"guide/faq.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},4708:(e,t,a)=>{a.r(t),a.d(t,{default:()=>c});var r=a(6252);const i={id:"常见问题",tabindex:"-1"},n=[(0,r._)("a",{class:"header-anchor",href:"#常见问题","aria-hidden":"true"},"#",-1),(0,r.Uk)(" 常见问题")],s={},c=(0,a(3744).Z)(s,[["render",function(e,t){return(0,r.wg)(),(0,r.iD)("h1",i,n)}]])},3744:(e,t)=>{t.Z=(e,t)=>{const a=e.__vccOpts||e;for(const[e,r]of t)a[e]=r;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-37e1c06f.c8dccecf.js b/assets/js/v-37e1c06f.c8dccecf.js new file mode 100644 index 00000000..65801727 --- /dev/null +++ b/assets/js/v-37e1c06f.c8dccecf.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[600],{4384:(e,t,a)=>{a.r(t),a.d(t,{data:()=>r});const r={key:"v-37e1c06f",path:"/guide/faq.html",title:"常见问题",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[],filePathRelative:"guide/faq.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},4708:(e,t,a)=>{a.r(t),a.d(t,{default:()=>c});var r=a(6252);const i={id:"常见问题",tabindex:"-1"},n=[(0,r._)("a",{class:"header-anchor",href:"#常见问题","aria-hidden":"true"},"#",-1),(0,r.Uk)(" 常见问题")],s={},c=(0,a(3744).Z)(s,[["render",function(e,t){return(0,r.wg)(),(0,r.iD)("h1",i,n)}]])},3744:(e,t)=>{t.Z=(e,t)=>{const a=e.__vccOpts||e;for(const[e,r]of t)a[e]=r;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-392e58ee.69c1f8fb.js b/assets/js/v-392e58ee.69c1f8fb.js deleted file mode 100644 index a7644cbb..00000000 --- a/assets/js/v-392e58ee.69c1f8fb.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[802],{6865:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-392e58ee",path:"/reference/plugin/plugins/windicss.html",title:"@fesjs/plugin-windicss",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[]}],filePathRelative:"reference/plugin/plugins/windicss.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},9673:(n,s,a)=>{a.r(s),a.d(s,{default:()=>h});var e=a(6252);const p=(0,e.uE)('

    @fesjs/plugin-windicss

    介绍

    windicss 支持

    启用方式

    在 package.json 中引入依赖：

    {\n    "devDependencies": {\n        "@fesjs/plugin-windicss": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5

    配置

    ',7),t=(0,e.Uk)("在 "),r=(0,e._)("code",null,".fes.js",-1),i=(0,e.Uk)(" 配置文件中添加自定义配置，详细配置"),l={href:"https://windicss.org/integrations/webpack.html",target:"_blank",rel:"noopener noreferrer"},c=(0,e.Uk)("请看"),o=(0,e.Uk)("："),u=(0,e.uE)('
    export default {\n    windicss: {\n        root: './',\n    }\n}\n
    1
    2
    3
    4
    5
    ',1),d={},h=(0,a(3744).Z)(d,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("p",null,[t,r,i,(0,e._)("a",l,[c,(0,e.Wm)(a)]),o]),u],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-392e58ee.dff8ff10.js b/assets/js/v-392e58ee.dff8ff10.js new file mode 100644 index 00000000..a7a8dc5b --- /dev/null +++ b/assets/js/v-392e58ee.dff8ff10.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[802],{6865:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-392e58ee",path:"/reference/plugin/plugins/windicss.html",title:"@fesjs/plugin-windicss",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[]}],filePathRelative:"reference/plugin/plugins/windicss.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},9673:(n,s,a)=>{a.r(s),a.d(s,{default:()=>h});var e=a(6252);const p=(0,e.uE)('

    @fesjs/plugin-windicss

    介绍

    windicss 支持

    启用方式

    在 package.json 中引入依赖：

    {\n    "devDependencies": {\n        "@fesjs/plugin-windicss": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5

    配置

    ',7),t=(0,e.Uk)("在 "),r=(0,e._)("code",null,".fes.js",-1),l=(0,e.Uk)(" 配置文件中添加自定义配置，详细配置"),i={href:"https://windicss.org/integrations/webpack.html",target:"_blank",rel:"noopener noreferrer"},c=(0,e.Uk)("请看"),o=(0,e.Uk)("："),u=(0,e.uE)('
    export default {\n    windicss: {\n        root: './',\n    }\n}\n
    1
    2
    3
    4
    5
    ',1),d={},h=(0,a(3744).Z)(d,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("p",null,[t,r,l,(0,e._)("a",i,[c,(0,e.Wm)(a)]),o]),u],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-3c4e521e.1559638b.js b/assets/js/v-3c4e521e.1559638b.js new file mode 100644 index 00000000..90a2b2ad --- /dev/null +++ b/assets/js/v-3c4e521e.1559638b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[925],{1371:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-3c4e521e",path:"/reference/plugin/plugins/model.html",title:"@fesjs/plugin-model",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"介绍",slug:"介绍",children:[{level:3,title:"Model 文件",slug:"model-文件",children:[]},{level:3,title:"在组件中使用 Model",slug:"在组件中使用-model",children:[]},{level:3,title:"@@initialState",slug:"initialstate",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"useModel",slug:"usemodel",children:[]}]}],filePathRelative:"reference/plugin/plugins/model.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},7746:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('

    @fesjs/plugin-model

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-model": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    介绍

    一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新，提供 reactive 、 ref 等API把数据变成响应式的。我们使用Provide / Inject特性，在应用实例中共享响应式数据。

    我们约定src/models 目录下的文件为项目定义的 model 文件。每个文件需要默认导出一个 function。

    文件名则对应最终 model 的 name，你可以通过插件提供的 API 来消费 model 中的数据。

    Model 文件

    src/models/useAuthModel.js

    import { reactive } from 'vue'\n\nexport default function useAuthModel() {\n  const user = reactive({});\n\n  const signin = ()=>{\n      // todo\n  }\n\n  const signout = ()=>{\n      // todo\n  }\n\n  return {\n    user,\n    signin,\n    signout\n  }\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    在组件中使用 Model

    <script>\nimport { useModel } from "@fesjs/fes"\nexport default {\n    setup(){\n        const { user, signin, signout } = useModel("useAuthModel")\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8

    @@initialState

    在beforeRender的返回的内容会写入@@initialState

    export const beforeRender = {\n    loading: <PageLoading />,\n    action() {\n        const { setRole } = access;\n        return new Promise((resolve) => {\n            setTimeout(() => {\n                setRole('admin');\n                // 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件\n                resolve({\n                    userName: 'harrywan'\n                });\n            }, 1000);\n        });\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    然后我们可以在其他组件中使用：

    <template>\n    <div class="right">{{initialState.userName}}</div>\n</template>\n<script>\nimport { useModel } from '@fesjs/fes';\n\nexport default {\n    setup() {\n        const initialState = useModel('@@initialState');\n        return {\n            initialState\n        };\n    }\n};\n</script>\n<style scope>\n</style>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    API

    useModel

    useModel(name)

    • 类型：函数

    • 详情: 获取 Model 数据，\b也就是 Model 文件默认导出函数执行的结果。

    • 参数：

      • name，传入 Model 文件名
    ',22),e={},t=(0,a(3744).Z)(e,[["render",function(n,s){return p}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-3c4e521e.18cc70ef.js b/assets/js/v-3c4e521e.18cc70ef.js deleted file mode 100644 index 7d6dc5df..00000000 --- a/assets/js/v-3c4e521e.18cc70ef.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[925],{1371:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-3c4e521e",path:"/reference/plugin/plugins/model.html",title:"@fesjs/plugin-model",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"介绍",slug:"介绍",children:[{level:3,title:"Model 文件",slug:"model-文件",children:[]},{level:3,title:"在组件中使用 Model",slug:"在组件中使用-model",children:[]},{level:3,title:"@@initialState",slug:"initialstate",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"useModel",slug:"usemodel",children:[]}]}],filePathRelative:"reference/plugin/plugins/model.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},7746:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('

    @fesjs/plugin-model

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-model": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    介绍

    一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新，提供 reactive 、 ref 等API把数据变成响应式的。我们使用Provide / Inject特性，在应用实例中共享响应式数据。

    我们约定src/models 目录下的文件为项目定义的 model 文件。每个文件需要默认导出一个 function。

    文件名则对应最终 model 的 name，你可以通过插件提供的 API 来消费 model 中的数据。

    Model 文件

    src/models/useAuthModel.js

    import { reactive } from 'vue'\n\nexport default function useAuthModel() {\n  const user = reactive({});\n\n  const signin = ()=>{\n      // todo\n  }\n\n  const signout = ()=>{\n      // todo\n  }\n\n  return {\n    user,\n    signin,\n    signout\n  }\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    在组件中使用 Model

    <script>\nimport { useModel } from "@fesjs/fes"\nexport default {\n    setup(){\n        const { user, signin, signout } = useModel("useAuthModel")\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8

    @@initialState

    在beforeRender的返回的内容会写入@@initialState

    export const beforeRender = {\n    loading: <PageLoading />,\n    action() {\n        const { setRole } = access;\n        return new Promise((resolve) => {\n            setTimeout(() => {\n                setRole('admin');\n                // 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件\n                resolve({\n                    userName: 'harrywan'\n                });\n            }, 1000);\n        });\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    然后我们可以在其他组件中使用：

    <template>\n    <div class="right">{{initialState.userName}}</div>\n</template>\n<script>\nimport { useModel } from '@fesjs/fes';\n\nexport default {\n    setup() {\n        const initialState = useModel('@@initialState');\n        return {\n            initialState\n        };\n    }\n};\n</script>\n<style scope>\n</style>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    API

    useModel

    useModel(name)

    • 类型：函数

    • 详情: 获取 Model 数据，\b也就是 Model 文件默认导出函数执行的结果。

    • 参数：

      • name，传入 Model 文件名
    ',22),e={},t=(0,a(3744).Z)(e,[["render",function(n,s){return p}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-3cd5a4ef.3f70c0f3.js b/assets/js/v-3cd5a4ef.3f70c0f3.js new file mode 100644 index 00000000..f70b5e65 --- /dev/null +++ b/assets/js/v-3cd5a4ef.3f70c0f3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[977],{5393:(n,s,e)=>{e.r(s),e.d(s,{data:()=>a});const a={key:"v-3cd5a4ef",path:"/reference/plugin/plugins/jest.html",title:"@fesjs/plugin-jest",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"约定",slug:"约定",children:[]},{level:2,title:"命令",slug:"命令",children:[]},{level:2,title:"配置",slug:"配置",children:[{level:3,title:"args 变量",slug:"args-变量",children:[]},{level:3,title:"配置文件",slug:"配置文件",children:[]},{level:3,title:"优先级",slug:"优先级",children:[]}]}],filePathRelative:"reference/plugin/plugins/jest.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},6116:(n,s,e)=>{e.r(s),e.d(s,{default:()=>v});var a=e(6252);const r=(0,a._)("h1",{id:"fesjs-plugin-jest",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#fesjs-plugin-jest","aria-hidden":"true"},"#"),(0,a.Uk)(" @fesjs/plugin-jest")],-1),t=(0,a.Uk)("集成 "),l={href:"https://www.jestjs.cn/",target:"_blank",rel:"noopener noreferrer"},i=(0,a.Uk)("Jest"),p=(0,a.Uk)(" 测试框架，目前只支持单元测试和覆盖测试。"),o=(0,a.uE)('

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-jest": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    约定

    • 项目根目录下 tests 和 __tests__ 文件夹中的 js 或者 jsx 文件为测试文件。
    • 需要覆盖测试的文件范围是src/index.{js,jsx,ts,tsx,vue}

    例如测试文件 add.js：

    fes-template\n├── __tests__\n│   └── add.js\n└── src\n    ├── .fes\n    └── utils\n        └── sum.js\n
    1
    2
    3
    4
    5
    6
    7

    内容如下：

    import sum from '@/utils/sum';\ntest('adds 1 + 2 to equal 3', () => {\n    expect(sum(1, 2)).toBe(3);\n});\n\n
    1
    2
    3
    4
    5

    命令

    在 fes 上注册 test 命令：

    $ fes test\n
    1

    配置

    ',13),c=(0,a.Uk)("插件实现 Jest 的全部配置，具体请查看 "),u={href:"https://www.jestjs.cn/docs/configuration#reference",target:"_blank",rel:"noopener noreferrer"},b=(0,a.Uk)("文档-configuration"),m=(0,a.Uk)("。 也可以使用 "),h=(0,a._)("code",null,"-h",-1),d=(0,a.Uk)(" 打印配置帮助信息："),f=(0,a.uE)('

    args 变量

    $ fes test -h\n
    1

    打印配置帮助信息:

    $ fes test -h\nUsage: fes test [options]\n\nrun unit tests with jest\n\nOptions:\n  --all                         The opposite of `onlyChanged`. If `onlyChanged`\n                                is set by default, running jest with `--all`\n                                will force Jest to run all tests instead of\n                                running only tests related to changed files.\n  --automock                    Automock all files by default.\n  -b --bail                     Exit the test suite immediately after `n`\n                                number of failing tests.\n  --browser                     Respect the "browser" field in package.json\n                                when resolving modules. Some packages export\n                                different versions based on whether they are\n                                operating in node.js or a browser.\n  --cache                       Whether to use the transform cache. Disable the\n                                cache using --no-cache.\n  --cacheDirectory              The directory where Jest should store its\n                                cached  dependency information.\n  --changedFilesWithAncestor    Runs tests related to the current changes and\n                                the changes made in the last commit. Behaves\n                                similarly to `--onlyChanged`.\n  --changedSince                Runs tests related to the changes since the\n                                provided branch. If the current branch has\n                                diverged from the given branch, then only\n                                changes made locally will be tested. Behaves\n                                similarly to `--onlyChanged`.\n  --ci                          Whether to run Jest in continuous integration\n                                (CI) mode. This option is on by default in most\n                                popular CI environments. It will prevent\n                                snapshots from being written unless explicitly\n                                requested.\n  --clearCache                  Clears the configured Jest cache directory and\n                                then exits. Default directory can be found by\n                                calling jest --showConfig\n  --clearMocks                  Automatically clear mock calls and instances\n                                between every test. Equivalent to calling\n                                jest.clearAllMocks() between each test.\n  --collectCoverage             Alias for --coverage.\n  --collectCoverageFrom         A glob pattern relative to <rootDir> matching\n                                the files that coverage info needs to be\n                                collected from.\n  --collectCoverageOnlyFrom     Explicit list of paths coverage will be\n                                restricted to.\n  --color                       Forces test results output color highlighting\n                                (even if stdout is not a TTY). Set to false if\n                                you would like to have no colors.\n  --colors                      Alias for `--color`.\n  -c --config                   The path to a jest config file specifying how\n                                to find and execute tests. If no rootDir is set\n                                in the config, the directory containing the\n                                config file is assumed to be the rootDir for\n                                the project.This can also be a JSON encoded\n                                value which Jest will use as configuration.\n  --coverage                    Indicates that test coverage information should\n                                be collected and reported in the output.\n  --coverageDirectory           The directory where Jest should output its\n                                coverage files.\n  --coveragePathIgnorePatterns  An array of regexp pattern strings that are\n                                matched against all file paths before executing\n                                the test. If the file pathmatches any of the\n                                patterns, coverage information will be skipped.\n  --coverageProvider            Select between Babel and V8 to collect coverage\n  --coverageReporters           A list of reporter names that Jest uses when\n                                writing coverage reports. Any istanbul reporter\n                                can be used.\n  --coverageThreshold           A JSON string with which will be used to\n                                configure minimum threshold enforcement for\n                                coverage results\n  --debug                       Print debugging info about your jest config.\n  --detectLeaks                 **EXPERIMENTAL**: Detect memory leaks in tests.\n                                After executing a test, it will try to garbage\n                                collect the global object used, and fail if it\n                                was leaked\n  --detectOpenHandles           Print out remaining open handles preventing\n                                Jest from exiting at the end of a test run.\n                                Implies `runInBand`.\n  --env                         The test environment used for all tests. This\n                                can point to any file or node module. Examples:\n                                `jsdom`, `node` or `path/to/my-environment.js`\n  --errorOnDeprecated           Make calling deprecated APIs throw helpful\n                                error messages.\n  -e --expand                   Use this flag to show full diffs instead of a\n                                patch.\n  --filter                      Path to a module exporting a filtering\n                                function. This method receives a list of tests\n                                which can be manipulated to exclude tests from\n                                running. Especially useful when used in\n                                conjunction with a testing infrastructure to\n                                filter known broken tests.\n  --findRelatedTests            Find related tests for a list of source files\n                                that were passed in as arguments. Useful for\n                                pre-commit hook integration to run the minimal\n                                amount of tests necessary.\n  --forceExit                   Force Jest to exit after all tests have\n                                completed running. This is useful when\n                                resources set up by test code cannot be\n                                adequately cleaned up.\n  --globalSetup                 The path to a module that runs before All\n                                Tests.\n  --globalTeardown              The path to a module that runs after All Tests.\n  --globals                     A JSON string with map of global variables that\n                                need to be available in all test environments.\n  --haste                       A JSON string with map of variables for the\n                                haste module system\n  --init                        Generate a basic configuration file\n  --injectGlobals               Should Jest inject global variables or not\n  --json                        Prints the test results in JSON. This mode will\n                                send all other test output and user messages to\n                                stderr.\n  --lastCommit                  Run all tests affected by file changes in the\n                                last commit made. Behaves similarly to\n                                `--onlyChanged`.\n  --listTests                   Lists all tests Jest will run given the\n                                arguments and exits. Most useful in a CI system\n                                together with `--findRelatedTests` to determine\n                                the tests Jest will run based on specific files\n  --logHeapUsage                Logs the heap usage after every test. Useful to\n                                debug memory leaks. Use together with\n                                `--runInBand` and `--expose-gc` in node.\n  --mapCoverage                 Maps code coverage reports against original source code when transformers supply source maps.\n\n  DEPRECATED\n  --maxConcurrency              Specifies the maximum number of tests that are\n                                allowed to runconcurrently. This only affects\n                                tests using `test.concurrent`.\n  -w --maxWorkers               Specifies the maximum number of workers the\n                                worker-pool will spawn for running tests. This\n                                defaults to the number of the cores available\n                                on your machine. (its usually best not to\n                                override this default)\n  --moduleDirectories           An array of directory names to be searched\n                                recursively up from the requiring module's\n                                location.\n  --moduleFileExtensions        An array of file extensions your modules use.\n                                If you require modules without specifying a\n                                file extension, these are the extensions Jest\n                                will look for.\n  --moduleNameMapper            A JSON string with a map from regular\n                                expressions to module names or to arrays of\n                                module names that allow to stub out resources,\n                                like images or styles with a single module\n  --modulePathIgnorePatterns    An array of regexp pattern strings that are\n                                matched against all module paths before those\n                                paths are to be considered "visible" to the\n                                module loader.\n  --modulePaths                 An alternative API to setting the NODE_PATH env\n                                variable, modulePaths is an array of absolute\n                                paths to additional locations to search when\n                                resolving modules.\n  --noStackTrace                Disables stack trace in test results output\n  --notify                      Activates notifications for test results.\n  --notifyMode                  Specifies when notifications will appear for\n                                test results.\n  -o --onlyChanged              Attempts to identify which tests to run based\n                                on which files have changed in the current\n                                repository. Only works if you're running tests\n                                in a git or hg repository at the moment.\n  -f --onlyFailures             Run tests that failed in the previous\n                                execution.\n  --outputFile                  Write test results to a file when the --json\n                                option is also specified.\n  --passWithNoTests             Will not fail if no tests are found (for\n                                example while using `--testPathPattern`.)\n  --preset                      A preset that is used as a base for Jest's\n                                configuration.\n  --prettierPath                The path to the "prettier" module used for\n                                inline snapshots.\n  --projects                    A list of projects that use Jest to run all\n                                tests of all projects in a single instance of\n                                Jest.\n  --reporters                   A list of custom reporters for the test suite.\n  --resetMocks                  Automatically reset mock state between every\n                                test. Equivalent to calling\n                                jest.resetAllMocks() between each test.\n  --resetModules                If enabled, the module registry for every test\n                                file will be reset before running each\n                                individual test.\n  --resolver                    A JSON string which allows the use of a custom\n                                resolver.\n  --restoreMocks                Automatically restore mock state and\n                                implementation between every test. Equivalent\n                                to calling jest.restoreAllMocks() between each\n                                test.\n  --rootDir                     The root directory that Jest should scan for\n                                tests and modules within.\n  --roots                       A list of paths to directories that Jest should\n                                use to search for files in.\n  -i --runInBand                Run all tests serially in the current process\n                                (rather than creating a worker pool of child\n                                processes that run tests). This is sometimes\n                                useful for debugging, but such use cases are\n                                pretty rare.\n  --runTestsByPath              Used when provided patterns are exact file\n                                paths. This avoids converting them into a\n                                regular expression and matching it against\n                                every single file.\n  --runner                      Allows to use a custom runner instead of Jest's\n                                default test runner.\n  --selectProjects              Run only the tests of the specified\n                                projects.Jest uses the attribute `displayName`\n                                in the configuration to identify each project.\n  --setupFiles                  A list of paths to modules that run some code\n                                to configure or set up the testing environment\n                                before each test.\n  --setupFilesAfterEnv          A list of paths to modules that run some code\n                                to configure or set up the testing framework\n                                before each test\n  --showConfig                  Print your jest config and then exits.\n  --silent                      Prevent tests from printing messages through\n                                the console.\n  --skipFilter                  Disables the filter provided by --filter.\n                                Useful for CI jobs, or local enforcement when\n                                fixing tests.\n  --snapshotSerializers         A list of paths to snapshot serializer modules\n                                Jest should use for snapshot testing.\n  --testEnvironment             Alias for --env\n  --testEnvironmentOptions      Test environment options that will be passed to\n                                the testEnvironment. The relevant options\n                                depend on the environment.\n  --testFailureExitCode         Exit code of `jest` command if the test run\n                                failed\n  --testLocationInResults       Add `location` information to the test results\n  --testMatch                   The glob patterns Jest uses to detect test\n                                files.\n  -t --testNamePattern          Run only tests with a name that matches the\n                                regex pattern.\n  --testPathIgnorePatterns      An array of regexp pattern strings that are\n                                matched against all test paths before executing\n                                the test. If the test path matches any of the\n                                patterns, it will be skipped.\n  --testPathPattern             A regexp pattern string that is matched against\n                                all tests paths before executing the test.\n  --testRegex                   A string or array of string regexp patterns\n                                that Jest uses to detect test files.\n  --testResultsProcessor        Allows the use of a custom results processor.\n                                This processor must be a node module that\n                                exports a function expecting as the first\n                                argument the result object.\n  --testRunner                  Allows to specify a custom test runner. The\n                                default is  `jasmine2`. A path to a custom test\n                                runner can be provided:\n                                `<rootDir>/path/to/testRunner.js`.\n  --testSequencer               Allows to specify a custom test sequencer. The\n                                default is `@jest/test-sequencer`. A path to a\n                                custom test sequencer can be provided:\n                                `<rootDir>/path/to/testSequencer.js`\n  --testTimeout                 This option sets the default timeouts of test\n                                cases.\n  --testURL                     This option sets the URL for the jsdom\n                                environment.\n  --timers                      Setting this value to fake allows the use of\n                                fake timers for functions such as setTimeout.\n  --transform                   A JSON string which maps from regular\n                                expressions to paths to transformers.\n  --transformIgnorePatterns     An array of regexp pattern strings that are\n                                matched against all source file paths before\n                                transformation.\n  --unmockedModulePathPatterns  An array of regexp pattern strings that are\n                                matched against all modules before the module\n                                loader will automatically return a mock for\n                                them.\n  -u --updateSnapshot           Use this flag to re-record snapshots. Can be\n                                used together with a test suite pattern or with\n                                `--testNamePattern` to re-record snapshot for\n                                test matching the pattern\n  --useStderr                   Divert all output to stderr.\n  --verbose                     Display individual test results with the test\n                                suite hierarchy.\n  --watch                       Watch files for changes and rerun tests related\n                                to changed files. If you want to re-run all\n                                tests when a file has changed, use the\n                                `--watchAll` option.\n  --watchAll                    Watch files for changes and rerun all tests. If\n                                you want to re-run only the tests related to\n                                the changed files, use the `--watch` option.\n  --watchPathIgnorePatterns     An array of regexp pattern strings that are\n                                matched against all paths before trigger test\n                                re-run in watch mode. If the test path matches\n                                any of the patterns, it will be skipped.\n  --watchman                    Whether to use watchman for file crawling.\n                                Disable using --no-watchman.\n  -h, --help                    display help for command\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286

    比如覆盖测试：

    fes test --coverage\n
    1

    配置文件

    除了插件内置的默认配置之外，插件遵循 Jest的配置文件规范，约定项目根目录下的 jest.config.js 为用户配置文件，约定 packages.json 的 jest 属性内容也是配置。

    优先级

    args 配置 > package.json中的 jest > jest.config.js > 默认配置

    ',10),g={},v=(0,e(3744).Z)(g,[["render",function(n,s){const e=(0,a.up)("OutboundLink");return(0,a.wg)(),(0,a.iD)(a.HY,null,[r,(0,a._)("p",null,[t,(0,a._)("a",l,[i,(0,a.Wm)(e)]),p]),o,(0,a._)("p",null,[c,(0,a._)("a",u,[b,(0,a.Wm)(e)]),m,h,d]),f],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const e=n.__vccOpts||n;for(const[n,a]of s)e[n]=a;return e}}}]); \ No newline at end of file diff --git a/assets/js/v-3cd5a4ef.bad45ebb.js b/assets/js/v-3cd5a4ef.bad45ebb.js deleted file mode 100644 index 525da56a..00000000 --- a/assets/js/v-3cd5a4ef.bad45ebb.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[977],{5393:(n,s,e)=>{e.r(s),e.d(s,{data:()=>a});const a={key:"v-3cd5a4ef",path:"/reference/plugin/plugins/jest.html",title:"@fesjs/plugin-jest",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"约定",slug:"约定",children:[]},{level:2,title:"命令",slug:"命令",children:[]},{level:2,title:"配置",slug:"配置",children:[{level:3,title:"args 变量",slug:"args-变量",children:[]},{level:3,title:"配置文件",slug:"配置文件",children:[]},{level:3,title:"优先级",slug:"优先级",children:[]}]}],filePathRelative:"reference/plugin/plugins/jest.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},6116:(n,s,e)=>{e.r(s),e.d(s,{default:()=>v});var a=e(6252);const r=(0,a._)("h1",{id:"fesjs-plugin-jest",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#fesjs-plugin-jest","aria-hidden":"true"},"#"),(0,a.Uk)(" @fesjs/plugin-jest")],-1),t=(0,a.Uk)("集成 "),l={href:"https://www.jestjs.cn/",target:"_blank",rel:"noopener noreferrer"},i=(0,a.Uk)("Jest"),p=(0,a.Uk)(" 测试框架，目前只支持单元测试和覆盖测试。"),o=(0,a.uE)('

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-jest": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    约定

    • 项目根目录下 tests 和 __tests__ 文件夹中的 js 或者 jsx 文件为测试文件。
    • 需要覆盖测试的文件范围是src/index.{js,jsx,ts,tsx,vue}

    例如测试文件 add.js：

    fes-template\n├── __tests__\n│   └── add.js\n└── src\n    ├── .fes\n    └── utils\n        └── sum.js\n
    1
    2
    3
    4
    5
    6
    7

    内容如下：

    import sum from '@/utils/sum';\ntest('adds 1 + 2 to equal 3', () => {\n    expect(sum(1, 2)).toBe(3);\n});\n\n
    1
    2
    3
    4
    5

    命令

    在 fes 上注册 test 命令：

    $ fes test\n
    1

    配置

    ',13),c=(0,a.Uk)("插件实现 Jest 的全部配置，具体请查看 "),u={href:"https://www.jestjs.cn/docs/configuration#reference",target:"_blank",rel:"noopener noreferrer"},b=(0,a.Uk)("文档-configuration"),m=(0,a.Uk)("。 也可以使用 "),h=(0,a._)("code",null,"-h",-1),d=(0,a.Uk)(" 打印配置帮助信息："),f=(0,a.uE)('

    args 变量

    $ fes test -h\n
    1

    打印配置帮助信息:

    $ fes test -h\nUsage: fes test [options]\n\nrun unit tests with jest\n\nOptions:\n  --all                         The opposite of `onlyChanged`. If `onlyChanged`\n                                is set by default, running jest with `--all`\n                                will force Jest to run all tests instead of\n                                running only tests related to changed files.\n  --automock                    Automock all files by default.\n  -b --bail                     Exit the test suite immediately after `n`\n                                number of failing tests.\n  --browser                     Respect the "browser" field in package.json\n                                when resolving modules. Some packages export\n                                different versions based on whether they are\n                                operating in node.js or a browser.\n  --cache                       Whether to use the transform cache. Disable the\n                                cache using --no-cache.\n  --cacheDirectory              The directory where Jest should store its\n                                cached  dependency information.\n  --changedFilesWithAncestor    Runs tests related to the current changes and\n                                the changes made in the last commit. Behaves\n                                similarly to `--onlyChanged`.\n  --changedSince                Runs tests related to the changes since the\n                                provided branch. If the current branch has\n                                diverged from the given branch, then only\n                                changes made locally will be tested. Behaves\n                                similarly to `--onlyChanged`.\n  --ci                          Whether to run Jest in continuous integration\n                                (CI) mode. This option is on by default in most\n                                popular CI environments. It will prevent\n                                snapshots from being written unless explicitly\n                                requested.\n  --clearCache                  Clears the configured Jest cache directory and\n                                then exits. Default directory can be found by\n                                calling jest --showConfig\n  --clearMocks                  Automatically clear mock calls and instances\n                                between every test. Equivalent to calling\n                                jest.clearAllMocks() between each test.\n  --collectCoverage             Alias for --coverage.\n  --collectCoverageFrom         A glob pattern relative to <rootDir> matching\n                                the files that coverage info needs to be\n                                collected from.\n  --collectCoverageOnlyFrom     Explicit list of paths coverage will be\n                                restricted to.\n  --color                       Forces test results output color highlighting\n                                (even if stdout is not a TTY). Set to false if\n                                you would like to have no colors.\n  --colors                      Alias for `--color`.\n  -c --config                   The path to a jest config file specifying how\n                                to find and execute tests. If no rootDir is set\n                                in the config, the directory containing the\n                                config file is assumed to be the rootDir for\n                                the project.This can also be a JSON encoded\n                                value which Jest will use as configuration.\n  --coverage                    Indicates that test coverage information should\n                                be collected and reported in the output.\n  --coverageDirectory           The directory where Jest should output its\n                                coverage files.\n  --coveragePathIgnorePatterns  An array of regexp pattern strings that are\n                                matched against all file paths before executing\n                                the test. If the file pathmatches any of the\n                                patterns, coverage information will be skipped.\n  --coverageProvider            Select between Babel and V8 to collect coverage\n  --coverageReporters           A list of reporter names that Jest uses when\n                                writing coverage reports. Any istanbul reporter\n                                can be used.\n  --coverageThreshold           A JSON string with which will be used to\n                                configure minimum threshold enforcement for\n                                coverage results\n  --debug                       Print debugging info about your jest config.\n  --detectLeaks                 **EXPERIMENTAL**: Detect memory leaks in tests.\n                                After executing a test, it will try to garbage\n                                collect the global object used, and fail if it\n                                was leaked\n  --detectOpenHandles           Print out remaining open handles preventing\n                                Jest from exiting at the end of a test run.\n                                Implies `runInBand`.\n  --env                         The test environment used for all tests. This\n                                can point to any file or node module. Examples:\n                                `jsdom`, `node` or `path/to/my-environment.js`\n  --errorOnDeprecated           Make calling deprecated APIs throw helpful\n                                error messages.\n  -e --expand                   Use this flag to show full diffs instead of a\n                                patch.\n  --filter                      Path to a module exporting a filtering\n                                function. This method receives a list of tests\n                                which can be manipulated to exclude tests from\n                                running. Especially useful when used in\n                                conjunction with a testing infrastructure to\n                                filter known broken tests.\n  --findRelatedTests            Find related tests for a list of source files\n                                that were passed in as arguments. Useful for\n                                pre-commit hook integration to run the minimal\n                                amount of tests necessary.\n  --forceExit                   Force Jest to exit after all tests have\n                                completed running. This is useful when\n                                resources set up by test code cannot be\n                                adequately cleaned up.\n  --globalSetup                 The path to a module that runs before All\n                                Tests.\n  --globalTeardown              The path to a module that runs after All Tests.\n  --globals                     A JSON string with map of global variables that\n                                need to be available in all test environments.\n  --haste                       A JSON string with map of variables for the\n                                haste module system\n  --init                        Generate a basic configuration file\n  --injectGlobals               Should Jest inject global variables or not\n  --json                        Prints the test results in JSON. This mode will\n                                send all other test output and user messages to\n                                stderr.\n  --lastCommit                  Run all tests affected by file changes in the\n                                last commit made. Behaves similarly to\n                                `--onlyChanged`.\n  --listTests                   Lists all tests Jest will run given the\n                                arguments and exits. Most useful in a CI system\n                                together with `--findRelatedTests` to determine\n                                the tests Jest will run based on specific files\n  --logHeapUsage                Logs the heap usage after every test. Useful to\n                                debug memory leaks. Use together with\n                                `--runInBand` and `--expose-gc` in node.\n  --mapCoverage                 Maps code coverage reports against original source code when transformers supply source maps.\n\n  DEPRECATED\n  --maxConcurrency              Specifies the maximum number of tests that are\n                                allowed to runconcurrently. This only affects\n                                tests using `test.concurrent`.\n  -w --maxWorkers               Specifies the maximum number of workers the\n                                worker-pool will spawn for running tests. This\n                                defaults to the number of the cores available\n                                on your machine. (its usually best not to\n                                override this default)\n  --moduleDirectories           An array of directory names to be searched\n                                recursively up from the requiring module's\n                                location.\n  --moduleFileExtensions        An array of file extensions your modules use.\n                                If you require modules without specifying a\n                                file extension, these are the extensions Jest\n                                will look for.\n  --moduleNameMapper            A JSON string with a map from regular\n                                expressions to module names or to arrays of\n                                module names that allow to stub out resources,\n                                like images or styles with a single module\n  --modulePathIgnorePatterns    An array of regexp pattern strings that are\n                                matched against all module paths before those\n                                paths are to be considered "visible" to the\n                                module loader.\n  --modulePaths                 An alternative API to setting the NODE_PATH env\n                                variable, modulePaths is an array of absolute\n                                paths to additional locations to search when\n                                resolving modules.\n  --noStackTrace                Disables stack trace in test results output\n  --notify                      Activates notifications for test results.\n  --notifyMode                  Specifies when notifications will appear for\n                                test results.\n  -o --onlyChanged              Attempts to identify which tests to run based\n                                on which files have changed in the current\n                                repository. Only works if you're running tests\n                                in a git or hg repository at the moment.\n  -f --onlyFailures             Run tests that failed in the previous\n                                execution.\n  --outputFile                  Write test results to a file when the --json\n                                option is also specified.\n  --passWithNoTests             Will not fail if no tests are found (for\n                                example while using `--testPathPattern`.)\n  --preset                      A preset that is used as a base for Jest's\n                                configuration.\n  --prettierPath                The path to the "prettier" module used for\n                                inline snapshots.\n  --projects                    A list of projects that use Jest to run all\n                                tests of all projects in a single instance of\n                                Jest.\n  --reporters                   A list of custom reporters for the test suite.\n  --resetMocks                  Automatically reset mock state between every\n                                test. Equivalent to calling\n                                jest.resetAllMocks() between each test.\n  --resetModules                If enabled, the module registry for every test\n                                file will be reset before running each\n                                individual test.\n  --resolver                    A JSON string which allows the use of a custom\n                                resolver.\n  --restoreMocks                Automatically restore mock state and\n                                implementation between every test. Equivalent\n                                to calling jest.restoreAllMocks() between each\n                                test.\n  --rootDir                     The root directory that Jest should scan for\n                                tests and modules within.\n  --roots                       A list of paths to directories that Jest should\n                                use to search for files in.\n  -i --runInBand                Run all tests serially in the current process\n                                (rather than creating a worker pool of child\n                                processes that run tests). This is sometimes\n                                useful for debugging, but such use cases are\n                                pretty rare.\n  --runTestsByPath              Used when provided patterns are exact file\n                                paths. This avoids converting them into a\n                                regular expression and matching it against\n                                every single file.\n  --runner                      Allows to use a custom runner instead of Jest's\n                                default test runner.\n  --selectProjects              Run only the tests of the specified\n                                projects.Jest uses the attribute `displayName`\n                                in the configuration to identify each project.\n  --setupFiles                  A list of paths to modules that run some code\n                                to configure or set up the testing environment\n                                before each test.\n  --setupFilesAfterEnv          A list of paths to modules that run some code\n                                to configure or set up the testing framework\n                                before each test\n  --showConfig                  Print your jest config and then exits.\n  --silent                      Prevent tests from printing messages through\n                                the console.\n  --skipFilter                  Disables the filter provided by --filter.\n                                Useful for CI jobs, or local enforcement when\n                                fixing tests.\n  --snapshotSerializers         A list of paths to snapshot serializer modules\n                                Jest should use for snapshot testing.\n  --testEnvironment             Alias for --env\n  --testEnvironmentOptions      Test environment options that will be passed to\n                                the testEnvironment. The relevant options\n                                depend on the environment.\n  --testFailureExitCode         Exit code of `jest` command if the test run\n                                failed\n  --testLocationInResults       Add `location` information to the test results\n  --testMatch                   The glob patterns Jest uses to detect test\n                                files.\n  -t --testNamePattern          Run only tests with a name that matches the\n                                regex pattern.\n  --testPathIgnorePatterns      An array of regexp pattern strings that are\n                                matched against all test paths before executing\n                                the test. If the test path matches any of the\n                                patterns, it will be skipped.\n  --testPathPattern             A regexp pattern string that is matched against\n                                all tests paths before executing the test.\n  --testRegex                   A string or array of string regexp patterns\n                                that Jest uses to detect test files.\n  --testResultsProcessor        Allows the use of a custom results processor.\n                                This processor must be a node module that\n                                exports a function expecting as the first\n                                argument the result object.\n  --testRunner                  Allows to specify a custom test runner. The\n                                default is  `jasmine2`. A path to a custom test\n                                runner can be provided:\n                                `<rootDir>/path/to/testRunner.js`.\n  --testSequencer               Allows to specify a custom test sequencer. The\n                                default is `@jest/test-sequencer`. A path to a\n                                custom test sequencer can be provided:\n                                `<rootDir>/path/to/testSequencer.js`\n  --testTimeout                 This option sets the default timeouts of test\n                                cases.\n  --testURL                     This option sets the URL for the jsdom\n                                environment.\n  --timers                      Setting this value to fake allows the use of\n                                fake timers for functions such as setTimeout.\n  --transform                   A JSON string which maps from regular\n                                expressions to paths to transformers.\n  --transformIgnorePatterns     An array of regexp pattern strings that are\n                                matched against all source file paths before\n                                transformation.\n  --unmockedModulePathPatterns  An array of regexp pattern strings that are\n                                matched against all modules before the module\n                                loader will automatically return a mock for\n                                them.\n  -u --updateSnapshot           Use this flag to re-record snapshots. Can be\n                                used together with a test suite pattern or with\n                                `--testNamePattern` to re-record snapshot for\n                                test matching the pattern\n  --useStderr                   Divert all output to stderr.\n  --verbose                     Display individual test results with the test\n                                suite hierarchy.\n  --watch                       Watch files for changes and rerun tests related\n                                to changed files. If you want to re-run all\n                                tests when a file has changed, use the\n                                `--watchAll` option.\n  --watchAll                    Watch files for changes and rerun all tests. If\n                                you want to re-run only the tests related to\n                                the changed files, use the `--watch` option.\n  --watchPathIgnorePatterns     An array of regexp pattern strings that are\n                                matched against all paths before trigger test\n                                re-run in watch mode. If the test path matches\n                                any of the patterns, it will be skipped.\n  --watchman                    Whether to use watchman for file crawling.\n                                Disable using --no-watchman.\n  -h, --help                    display help for command\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286

    比如覆盖测试：

    fes test --coverage\n
    1

    配置文件

    除了插件内置的默认配置之外，插件遵循 Jest的配置文件规范，约定项目根目录下的 jest.config.js 为用户配置文件，约定 packages.json 的 jest 属性内容也是配置。

    优先级

    args 配置 > package.json中的 jest > jest.config.js > 默认配置

    ',10),g={},v=(0,e(3744).Z)(g,[["render",function(n,s){const e=(0,a.up)("OutboundLink");return(0,a.wg)(),(0,a.iD)(a.HY,null,[r,(0,a._)("p",null,[t,(0,a._)("a",l,[i,(0,a.Wm)(e)]),p]),o,(0,a._)("p",null,[c,(0,a._)("a",u,[b,(0,a.Wm)(e)]),m,h,d]),f],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const e=n.__vccOpts||n;for(const[n,a]of s)e[n]=a;return e}}}]); \ No newline at end of file diff --git a/assets/js/v-3dba8814.07fd1b26.js b/assets/js/v-3dba8814.07fd1b26.js deleted file mode 100644 index fbc22a9f..00000000 --- a/assets/js/v-3dba8814.07fd1b26.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[448],{1427:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-3dba8814",path:"/guide/runtime-config.html",title:"运行时配置",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"运行时为啥需要配置？",slug:"运行时为啥需要配置",children:[]},{level:2,title:"配置项",slug:"配置项",children:[{level:3,title:"beforeRender",slug:"beforerender",children:[]},{level:3,title:"patchRoutes",slug:"patchroutes",children:[]},{level:3,title:"modifyClientRenderOpts",slug:"modifyclientrenderopts",children:[]},{level:3,title:"rootContainer",slug:"rootcontainer",children:[]},{level:3,title:"onAppCreated",slug:"onappcreated",children:[]},{level:3,title:"render",slug:"render",children:[]},{level:3,title:"onRouterCreated",slug:"onroutercreated",children:[]}]},{level:2,title:"更多配置项",slug:"更多配置项",children:[]}],filePathRelative:"guide/runtime-config.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},74:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('

    运行时配置

    Fes.js 约定 src/app.js 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端，因此我们可以在这里写函数、引入浏览器端依赖项等等，注意不要引入 node 端依赖项。

    运行时为啥需要配置？

    Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件，而 Fes.js 中 entry 文件由框架生成，用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。

    例如：

    plugin-acess插件定义运行时配置项：

    api.addRuntimePluginKey(() => 'access');\n
    1

    plugin-acess插件读取配置项：

    const runtimeConfig = plugin.applyPlugins({\n    key: 'access',\n    type: ApplyPluginsType.modify,\n    initialValue: {}\n});\n
    1
    2
    3
    4
    5

    而用户则只需要配置：

    // app.js\nexport const access = memo => ({\n    ...memo\n    unAccessHandler({\n        router, to, from, next\n    }) {\n        // 处理逻辑\n    },\n    noFoundHandler({\n        router, to, from, next\n    }) {\n        // 处理逻辑\n    },\n});\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    配置项

    beforeRender

    beforeRender(lastOpts)

    在渲染之前执行，执行action过程中显示 loading 配置的组件，执行结果作为参数 initialState 传给 modifyClientRenderOpts。

    示例：

    // app.js\nimport { access } from '@fesjs/fes';\nimport PageLoading from '@/components/PageLoading';\nimport UserCenter from '@/components/UserCenter';\n\nexport function beforeRender(lastOpts) {\n    return {\n        ...lastOpts,\n        loading: <PageLoading />,\n        action() {\n            const { setRole } = access;\n            return new Promise((resolve) => {\n                setTimeout(() => {\n                    setRole('admin');\n                    resolve({\n                        userName: 'harrywan'\n                    });\n                }, 1000);\n            });\n        }\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    patchRoutes

    patchRoutes({routes })

    修改路由。

    比如在最前面添加一个 /foo 路由：

    export function patchRoutes({ routes }) {\n  routes.unshift({\n    path: '/foo',\n    component: require('@/extraRoutes/foo').default,\n  });\n}\n
    1
    2
    3
    4
    5
    6

    提示

    直接修改 routes, 不需要返回

    modifyClientRenderOpts

    modifyClientRenderOpts(lastOpts)

    修改 clientRender 参数。参数是一个对象：

    • routes，路由配置信息
    • rootElement， 渲染的根节点，默认是 #app，可通过配置 mountElementId 修改。
    • initialState， 初始化数据，beforeRender 运行得到的数据。

    比如在微前端里动态修改渲染根节点：

    let isSubApp = false;\nexport function modifyClientRenderOpts(lastOpts) {\n  return {\n    ...lastOpts,\n    rootElement: isSubApp ? 'sub-root' : lastOpts.rootElement,    \n  };\n}\n
    1
    2
    3
    4
    5
    6
    7

    rootContainer

    rootContainer(LastRootContainer, args)

    修改交给 Vue 渲染时的根组件，默认是 <RouterView></RouterView>。

    • LastRootContainer，上一个插件修改后的结果。
    • args，包含：
      • routes，全量路由配置
      • plugin，运行时插件机制

    比如在可以包一层DIV：

    export function rootContainer(container) {\n    return () => {\n        return (\n            <div>\n                <RouterView></RouterView>\n            </div>\n        )\n  }\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9

    onAppCreated

    onAppCreated({app})

    创建 app 实例后触发。

    比如用于安装 Vue 插件：

    import { createRouter } from "vue-router";\n\nexport function onAppCreated({ app }) {\n    const router = createRouter();\n    app.use(router);\n}\n\n
    1
    2
    3
    4
    5
    6
    7

    render

    render(oldRender: Function)

    覆写 render。

    比如用于渲染之前做权限校验。

    onRouterCreated

    onRouterCreated({router})

    生成router时触发。

    比如用于收集切换路由的记录：

    export function onRouterCreated({ router }) {\n    router.afterEach((to, from) => {\n        console.log(to)\n    });\n}\n
    1
    2
    3
    4
    5

    更多配置项

    Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。

    ',51),e={},t=(0,a(3744).Z)(e,[["render",function(n,s){return p}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-3dba8814.5f5441b1.js b/assets/js/v-3dba8814.5f5441b1.js new file mode 100644 index 00000000..5769614f --- /dev/null +++ b/assets/js/v-3dba8814.5f5441b1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[448],{1427:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-3dba8814",path:"/guide/runtime-config.html",title:"运行时配置",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"运行时为啥需要配置？",slug:"运行时为啥需要配置",children:[]},{level:2,title:"配置项",slug:"配置项",children:[{level:3,title:"beforeRender",slug:"beforerender",children:[]},{level:3,title:"patchRoutes",slug:"patchroutes",children:[]},{level:3,title:"modifyClientRenderOpts",slug:"modifyclientrenderopts",children:[]},{level:3,title:"rootContainer",slug:"rootcontainer",children:[]},{level:3,title:"onAppCreated",slug:"onappcreated",children:[]},{level:3,title:"render",slug:"render",children:[]},{level:3,title:"onRouterCreated",slug:"onroutercreated",children:[]}]},{level:2,title:"更多配置项",slug:"更多配置项",children:[]}],filePathRelative:"guide/runtime-config.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},74:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('

    运行时配置

    Fes.js 约定 src/app.js 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端，因此我们可以在这里写函数、引入浏览器端依赖项等等，注意不要引入 node 端依赖项。

    运行时为啥需要配置？

    Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件，而 Fes.js 中 entry 文件由框架生成，用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。

    例如：

    plugin-acess插件定义运行时配置项：

    api.addRuntimePluginKey(() => 'access');\n
    1

    plugin-acess插件读取配置项：

    const runtimeConfig = plugin.applyPlugins({\n    key: 'access',\n    type: ApplyPluginsType.modify,\n    initialValue: {}\n});\n
    1
    2
    3
    4
    5

    而用户则只需要配置：

    // app.js\nexport const access = memo => ({\n    ...memo\n    unAccessHandler({\n        router, to, from, next\n    }) {\n        // 处理逻辑\n    },\n    noFoundHandler({\n        router, to, from, next\n    }) {\n        // 处理逻辑\n    },\n});\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    配置项

    beforeRender

    beforeRender(lastOpts)

    在渲染之前执行，执行action过程中显示 loading 配置的组件，执行结果作为参数 initialState 传给 modifyClientRenderOpts。

    示例：

    // app.js\nimport { access } from '@fesjs/fes';\nimport PageLoading from '@/components/PageLoading';\nimport UserCenter from '@/components/UserCenter';\n\nexport function beforeRender(lastOpts) {\n    return {\n        ...lastOpts,\n        loading: <PageLoading />,\n        action() {\n            const { setRole } = access;\n            return new Promise((resolve) => {\n                setTimeout(() => {\n                    setRole('admin');\n                    resolve({\n                        userName: 'harrywan'\n                    });\n                }, 1000);\n            });\n        }\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    patchRoutes

    patchRoutes({routes })

    修改路由。

    比如在最前面添加一个 /foo 路由：

    export function patchRoutes({ routes }) {\n  routes.unshift({\n    path: '/foo',\n    component: require('@/extraRoutes/foo').default,\n  });\n}\n
    1
    2
    3
    4
    5
    6

    提示

    直接修改 routes, 不需要返回

    modifyClientRenderOpts

    modifyClientRenderOpts(lastOpts)

    修改 clientRender 参数。参数是一个对象：

    • routes，路由配置信息
    • rootElement， 渲染的根节点，默认是 #app，可通过配置 mountElementId 修改。
    • initialState， 初始化数据，beforeRender 运行得到的数据。

    比如在微前端里动态修改渲染根节点：

    let isSubApp = false;\nexport function modifyClientRenderOpts(lastOpts) {\n  return {\n    ...lastOpts,\n    rootElement: isSubApp ? 'sub-root' : lastOpts.rootElement,    \n  };\n}\n
    1
    2
    3
    4
    5
    6
    7

    rootContainer

    rootContainer(LastRootContainer, args)

    修改交给 Vue 渲染时的根组件，默认是 <RouterView></RouterView>。

    • LastRootContainer，上一个插件修改后的结果。
    • args，包含：
      • routes，全量路由配置
      • plugin，运行时插件机制

    比如在可以包一层DIV：

    export function rootContainer(container) {\n    return () => {\n        return (\n            <div>\n                <RouterView></RouterView>\n            </div>\n        )\n  }\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9

    onAppCreated

    onAppCreated({app})

    创建 app 实例后触发。

    比如用于安装 Vue 插件：

    import { createRouter } from "vue-router";\n\nexport function onAppCreated({ app }) {\n    const router = createRouter();\n    app.use(router);\n}\n\n
    1
    2
    3
    4
    5
    6
    7

    render

    render(oldRender: Function)

    覆写 render。

    比如用于渲染之前做权限校验。

    onRouterCreated

    onRouterCreated({router})

    生成router时触发。

    比如用于收集切换路由的记录：

    export function onRouterCreated({ router }) {\n    router.afterEach((to, from) => {\n        console.log(to)\n    });\n}\n
    1
    2
    3
    4
    5

    更多配置项

    Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。

    ',51),e={},t=(0,a(3744).Z)(e,[["render",function(n,s){return p}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-411c0c9e.7075c1f2.js b/assets/js/v-411c0c9e.7075c1f2.js new file mode 100644 index 00000000..95e1b632 --- /dev/null +++ b/assets/js/v-411c0c9e.7075c1f2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[496],{565:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-411c0c9e",path:"/reference/plugin/plugins/locale.html",title:"@fesjs/plugin-locale",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[{level:3,title:"约定式配置",slug:"约定式配置",children:[]},{level:3,title:"编译时配置",slug:"编译时配置",children:[]},{level:3,title:"运行时配置",slug:"运行时配置",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"locale",slug:"locale-1",children:[]},{level:3,title:"useI18n",slug:"usei18n",children:[]}]}],filePathRelative:"reference/plugin/plugins/locale.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},6347:(n,s,a)=>{a.r(s),a.d(s,{default:()=>O});var e=a(6252);const p=(0,e._)("h1",{id:"fesjs-plugin-locale",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#fesjs-plugin-locale","aria-hidden":"true"},"#"),(0,e.Uk)(" @fesjs/plugin-locale")],-1),t=(0,e._)("h2",{id:"介绍",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,e.Uk)(" 介绍")],-1),l=(0,e.Uk)("国际化插件，基于 "),o={href:"https://github.com/intlify/vue-i18n-next",target:"_blank",rel:"noopener noreferrer"},c=(0,e.Uk)("Vue I18n"),r=(0,e.Uk)("，用于解决 i18n 问题。"),i=(0,e.uE)('

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-locale": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    配置

    约定式配置

    Fes.js 约定如下目录，项目就拥有了 zh-CN 与 en-US 国际化语言切换：

    src\n  ├── locales\n  │    ├── zh-CN.js\n  │    └── en-US.js\n  └── pages\n  │    └── index.vue\n  └── app.js\n
    1
    2
    3
    4
    5
    6
    7

    多语言文件的命名规范：<lang>-<COUNTRY>.js

    多语言文件的内容规范：键值组成的字面量，如下：

    // src/locales/zh-CN.js\nexport default {\n    menu: {\n        interface: '接口'\n    },\n    overview: '概述',\n    i18n: {\n        internationalization: '国际化，基于',\n        achieve: '实现。',\n        ui: 'UI组件'\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // src/locales/en-US.js\nexport default {\n    menu: {\n        interface: 'interface'\n    },\n    overview: 'Overview',\n    i18n: {\n        internationalization: 'internationalization，base on',\n        achieve: 'to achieve.',\n        ui: 'UI components'\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ',11),u=(0,e.Uk)("想了解更多语言信息配置、匹配规则，请参考 "),k={href:"https://vue-i18n.intlify.dev/guide/essentials/syntax.html",target:"_blank",rel:"noopener noreferrer"},d=(0,e.Uk)("Vue I18n"),g=(0,e.Uk)(" 文档。"),b=(0,e.uE)('

    编译时配置

    在执行 fes dev 或者 fes build 时，通过此配置生成运行时的代码，在配置文件.fes.js 中配置：

    export default {\n    locale: {\n    }\n}\n
    1
    2
    3
    4

    默认配置为：

    export default {\n    locale: {\n        locale: 'zh-CN', // default locale\n        fallbackLocale: 'zh-CN', // set fallback locale\n        baseNavigator: true, // 开启浏览器语言检测\n        legacy: true, // 用户是否需要 Legacy API 模式\n    }\n} \n
    1
    2
    3
    4
    5
    6
    7
    8

    所有配置项如下：

    locale

    • 类型：String

    • 默认值：zh-CN

    • 详情：当前的语言。

    fallbackLocale

    • 类型：String

    • 默认值：zh-CN

    • 详情：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。

    baseNavigator

    • 类型：Boolean

    • 默认值：true

    • 详情：开启浏览器语言检测。

    默认情况下，当前语言环境的识别按照：localStorage 中 fes_locale 值 > 浏览器检测 > default 设置的默认语言 > zh-CN 中文。

    legacy

    • 类型：Boolean

    • 默认值：true

    • 详情：用户是否需要 Legacy API 模式

    运行时配置

    暂无。

    API

    locale

    插件 API 通过 @fesjs/fes 导出：

    import { locale } from '@fesjs/fes'\n
    1

    locale.messages

    • 类型：Object

    • 详情：当前的配置的语言信息。

    locale.setLocale

    • 类型：Function

    • 详情：设置当前的语言。

    • 参数：

      • locale，语言的名称，应该是符合 <lang>-<COUNTRY> 规范的名称。

    • 返回值：null

    import { locale } from '@fesjs/fes';\nlocale.setLocale({ locale: 'en-US' });\n
    1
    2

    locale.addLocale

    • 类型：Function

    • 详情：手动添加语言配置。

    • 参数：

      • locale，语言的名称，符合 <lang>-<COUNTRY> 规范的名称。
      • messages, 语言信息。

    • 返回值：null

    import { locale } from '@fesjs/fes'\nlocale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });\n
    1
    2

    locale.getAllLocales

    • 类型：Function

    • 详情：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 en-US.js 文件。

    • 参数：null

    • 返回值：Array

    import { locale } from '@fesjs/fes';\nconsole.log(locale.getAllLocales());\n// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]\n
    1
    2
    3

    useI18n

    ',33),m=(0,e.Uk)("Composition API, 只能在 "),h=(0,e._)("code",null,"setup",-1),v=(0,e.Uk)(" 函数中使用，更多细节参考 "),f={href:"https://vue-i18n.intlify.dev/api/composition.html#usei18n",target:"_blank",rel:"noopener noreferrer"},y=(0,e.Uk)("Vue I18n"),j=(0,e.Uk)("。 \b举个 🌰："),x=(0,e.uE)('
    <template>\n  <form>\n    <label>{{ t('language') }}</label>\n  </form>\n  <p>message: {{ t('hello') }}</p>\n</template>\n\n<script>\nimport { useI18n } from '@fesjs/fes'\n\nexport default {\n setup() {\n   const { t } = useI18n()\n   // Something to do ...\n\n   return { ..., t }\n }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    ',1),w=(0,e._)("code",null,"useI18n()",-1),U=(0,e.Uk)("返回结果是 "),_={href:"https://vue-i18n.intlify.dev/api/composition.html#composer",target:"_blank",rel:"noopener noreferrer"},q=(0,e.Uk)("Composer"),C=(0,e.Uk)("，提供类似 "),I=(0,e._)("code",null,"t",-1),z=(0,e.Uk)("、"),N=(0,e._)("code",null,"n",-1),L=(0,e.Uk)("、"),S=(0,e._)("code",null,"d",-1),A=(0,e.Uk)(" 等转换函数，在模板中使用。"),P={},O=(0,a(3744).Z)(P,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,t,(0,e._)("p",null,[l,(0,e._)("a",o,[c,(0,e.Wm)(a)]),r]),i,(0,e._)("p",null,[u,(0,e._)("a",k,[d,(0,e.Wm)(a)]),g]),b,(0,e._)("p",null,[m,h,v,(0,e._)("a",f,[y,(0,e.Wm)(a)]),j]),x,(0,e._)("p",null,[w,U,(0,e._)("a",_,[q,(0,e.Wm)(a)]),C,I,z,N,L,S,A])],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-411c0c9e.777bb6b3.js b/assets/js/v-411c0c9e.777bb6b3.js deleted file mode 100644 index e048692b..00000000 --- a/assets/js/v-411c0c9e.777bb6b3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[496],{565:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-411c0c9e",path:"/reference/plugin/plugins/locale.html",title:"@fesjs/plugin-locale",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[{level:3,title:"约定式配置",slug:"约定式配置",children:[]},{level:3,title:"编译时配置",slug:"编译时配置",children:[]},{level:3,title:"运行时配置",slug:"运行时配置",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"locale",slug:"locale-1",children:[]},{level:3,title:"useI18n",slug:"usei18n",children:[]}]}],filePathRelative:"reference/plugin/plugins/locale.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},6347:(n,s,a)=>{a.r(s),a.d(s,{default:()=>O});var e=a(6252);const p=(0,e._)("h1",{id:"fesjs-plugin-locale",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#fesjs-plugin-locale","aria-hidden":"true"},"#"),(0,e.Uk)(" @fesjs/plugin-locale")],-1),t=(0,e._)("h2",{id:"介绍",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,e.Uk)(" 介绍")],-1),l=(0,e.Uk)("国际化插件，基于 "),o={href:"https://github.com/intlify/vue-i18n-next",target:"_blank",rel:"noopener noreferrer"},c=(0,e.Uk)("Vue I18n"),r=(0,e.Uk)("，用于解决 i18n 问题。"),i=(0,e.uE)('

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-locale": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    配置

    约定式配置

    Fes.js 约定如下目录，项目就拥有了 zh-CN 与 en-US 国际化语言切换：

    src\n  ├── locales\n  │    ├── zh-CN.js\n  │    └── en-US.js\n  └── pages\n  │    └── index.vue\n  └── app.js\n
    1
    2
    3
    4
    5
    6
    7

    多语言文件的命名规范：<lang>-<COUNTRY>.js

    多语言文件的内容规范：键值组成的字面量，如下：

    // src/locales/zh-CN.js\nexport default {\n    menu: {\n        interface: '接口'\n    },\n    overview: '概述',\n    i18n: {\n        internationalization: '国际化，基于',\n        achieve: '实现。',\n        ui: 'UI组件'\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // src/locales/en-US.js\nexport default {\n    menu: {\n        interface: 'interface'\n    },\n    overview: 'Overview',\n    i18n: {\n        internationalization: 'internationalization，base on',\n        achieve: 'to achieve.',\n        ui: 'UI components'\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ',11),u=(0,e.Uk)("想了解更多语言信息配置、匹配规则，请参考 "),k={href:"https://vue-i18n.intlify.dev/guide/essentials/syntax.html",target:"_blank",rel:"noopener noreferrer"},d=(0,e.Uk)("Vue I18n"),g=(0,e.Uk)(" 文档。"),b=(0,e.uE)('

    编译时配置

    在执行 fes dev 或者 fes build 时，通过此配置生成运行时的代码，在配置文件.fes.js 中配置：

    export default {\n    locale: {\n    }\n}\n
    1
    2
    3
    4

    默认配置为：

    export default {\n    locale: {\n        locale: 'zh-CN', // default locale\n        fallbackLocale: 'zh-CN', // set fallback locale\n        baseNavigator: true, // 开启浏览器语言检测\n        legacy: true, // 用户是否需要 Legacy API 模式\n    }\n} \n
    1
    2
    3
    4
    5
    6
    7
    8

    所有配置项如下：

    locale

    • 类型：String

    • 默认值：zh-CN

    • 详情：当前的语言。

    fallbackLocale

    • 类型：String

    • 默认值：zh-CN

    • 详情：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。

    baseNavigator

    • 类型：Boolean

    • 默认值：true

    • 详情：开启浏览器语言检测。

    默认情况下，当前语言环境的识别按照：localStorage 中 fes_locale 值 > 浏览器检测 > default 设置的默认语言 > zh-CN 中文。

    legacy

    • 类型：Boolean

    • 默认值：true

    • 详情：用户是否需要 Legacy API 模式

    运行时配置

    暂无。

    API

    locale

    插件 API 通过 @fesjs/fes 导出：

    import { locale } from '@fesjs/fes'\n
    1

    locale.messages

    • 类型：Object

    • 详情：当前的配置的语言信息。

    locale.setLocale

    • 类型：Function

    • 详情：设置当前的语言。

    • 参数：

      • locale，语言的名称，应该是符合 <lang>-<COUNTRY> 规范的名称。

    • 返回值：null

    import { locale } from '@fesjs/fes';\nlocale.setLocale({ locale: 'en-US' });\n
    1
    2

    locale.addLocale

    • 类型：Function

    • 详情：手动添加语言配置。

    • 参数：

      • locale，语言的名称，符合 <lang>-<COUNTRY> 规范的名称。
      • messages, 语言信息。

    • 返回值：null

    import { locale } from '@fesjs/fes'\nlocale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });\n
    1
    2

    locale.getAllLocales

    • 类型：Function

    • 详情：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 en-US.js 文件。

    • 参数：null

    • 返回值：Array

    import { locale } from '@fesjs/fes';\nconsole.log(locale.getAllLocales());\n// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]\n
    1
    2
    3

    useI18n

    ',33),m=(0,e.Uk)("Composition API, 只能在 "),h=(0,e._)("code",null,"setup",-1),v=(0,e.Uk)(" 函数中使用，更多细节参考 "),f={href:"https://vue-i18n.intlify.dev/api/composition.html#usei18n",target:"_blank",rel:"noopener noreferrer"},y=(0,e.Uk)("Vue I18n"),j=(0,e.Uk)("。 \b举个 🌰："),x=(0,e.uE)('
    <template>\n  <form>\n    <label>{{ t('language') }}</label>\n  </form>\n  <p>message: {{ t('hello') }}</p>\n</template>\n\n<script>\nimport { useI18n } from '@fesjs/fes'\n\nexport default {\n setup() {\n   const { t } = useI18n()\n   // Something to do ...\n\n   return { ..., t }\n }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    ',1),w=(0,e._)("code",null,"useI18n()",-1),U=(0,e.Uk)("返回结果是 "),_={href:"https://vue-i18n.intlify.dev/api/composition.html#composer",target:"_blank",rel:"noopener noreferrer"},q=(0,e.Uk)("Composer"),C=(0,e.Uk)("，提供类似 "),I=(0,e._)("code",null,"t",-1),z=(0,e.Uk)("、"),N=(0,e._)("code",null,"n",-1),L=(0,e.Uk)("、"),S=(0,e._)("code",null,"d",-1),A=(0,e.Uk)(" 等转换函数，在模板中使用。"),P={},O=(0,a(3744).Z)(P,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,t,(0,e._)("p",null,[l,(0,e._)("a",o,[c,(0,e.Wm)(a)]),r]),i,(0,e._)("p",null,[u,(0,e._)("a",k,[d,(0,e.Wm)(a)]),g]),b,(0,e._)("p",null,[m,h,v,(0,e._)("a",f,[y,(0,e.Wm)(a)]),j]),x,(0,e._)("p",null,[w,U,(0,e._)("a",_,[q,(0,e.Wm)(a)]),C,I,z,N,L,S,A])],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-41dee210.050504fd.js b/assets/js/v-41dee210.050504fd.js new file mode 100644 index 00000000..5b3e98c5 --- /dev/null +++ b/assets/js/v-41dee210.050504fd.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[919],{2121:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-41dee210",path:"/reference/plugin/plugins/request.html",title:"@fesjs/plugin-request",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[{level:3,title:"构建时配置",slug:"构建时配置",children:[]},{level:3,title:"运行时配置",slug:"运行时配置",children:[]}]},{level:2,title:"使用",slug:"使用",children:[{level:3,title:"发起一个普通 post 请求",slug:"发起一个普通-post-请求",children:[]},{level:3,title:"merge 重复请求",slug:"merge-重复请求",children:[]},{level:3,title:"请求节流(即将废弃)",slug:"请求节流-即将废弃",children:[]},{level:3,title:"请求缓存",slug:"请求缓存",children:[]},{level:3,title:"结合 use 使用",slug:"结合-use-使用",children:[]},{level:3,title:"配置拦截器",slug:"配置拦截器",children:[]}]}],filePathRelative:"reference/plugin/plugins/request.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},8648:(n,s,a)=>{a.r(s),a.d(s,{default:()=>f});var p=a(6252);const e=(0,p.uE)('

    @fesjs/plugin-request

    基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-request": "^2.0.0"\n    }\n}\n
    1
    2
    3
    4
    5
    6

    配置

    构建时配置

    export default {\n    request: {\n        dataField: 'result'\n    }\n};\n
    1
    2
    3
    4
    5

    dataField

    • 类型： string

    • 默认值： ''

    • 详情：

      dataField 对应接口统一格式中的数据字段，比如接口如果统一的规范是 { success: boolean, result: any} ，那么就不需要配置，这样你通过 useRequest 消费的时候会生成一个默认的 formatResult，直接返回 result 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 dataField。配置为 ''（空字符串）的时候不做处理。

    base(即将废弃)

    • 类型： string

    • 默认值： ''

    • 详情：

      base 接口前缀。

    ',12),t={class:"custom-container warning"},o=(0,p._)("p",{class:"custom-container-title"},"即将废弃",-1),c=(0,p.Uk)("这个字段将在下个版本废弃，推荐使用 "),l={href:"https://github.com/axios/axios",target:"_blank",rel:"noopener noreferrer"},r=(0,p.Uk)("axios baseURL"),u=(0,p.Uk)("。"),i=(0,p.uE)('

    运行时配置

    在 app.js 中进行运行时配置。

    export const request = {\n    // 格式化 response.data (只有 response.data 类型为 object 才会调用)\n    responseDataAdaptor: (data) => {\n        data.code = data.code === '200' ? '0' : data.code;\n        return data;\n    },\n    // 关闭 response data 校验（只判断 xhr status）\n    closeResDataCheck: false,\n    // 请求拦截器 http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8\n    requestInterceptors: [],\n    // 响应拦截器\n    responseInterceptors: [],\n    // 错误处理\n    // 内部以 reponse.data.code === '0' 判断请求是否成功\n    // 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式\n    errorHandler: {\n        11199(response) {\n            // 特殊 code 处理逻辑\n        },\n        404(error) {},\n        default(error) {\n            // 异常统一处理\n        }\n    },\n    // 其他 axios 配置\n    ...otherConfigs\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

    skipErrorHandler

    • 类型： boolean | string | number | array<string | number>

    • 默认值： ``

    • 详情：

      指定当前请求的某些错误状态不走 errorHandler，单独进行处理。如果设置为 true，当前请求的错误处理都不走 errorHandler。

    • 示列：

    import { request } from '@fesjs/fes';\n\nrequest('/api/login', null, {\n    skipErrorHandler: '110'\n})\n    .then((res) => {\n        // do something\n    })\n    .catch((err) => {\n        // \b这里处理 code 为 110 的异常\n        // 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default\n    });\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    使用

    发起一个普通 post 请求

    import { request } from '@fesjs/fes';\n\nrequest('/api/login', {\n    username: 'robby',\n    password: '123456'\n})\n    .then((res) => {\n        // do something\n    })\n    .catch((err) => {\n        // 处理异常\n    });\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    merge 重复请求

    连续发送多个请求，会被合并成一个请求，不会报 REPEAT 接口错误。

    当发生 REPEAT 请求异常，并且确保自身代码合理的情况下，可以使用该配置。

    import { request } from '@fesjs/fes';\n\nrequest(\n    '/api/login',\n    {\n        username: 'robby',\n        password: '123456'\n    },\n    {\n        mergeRequest: true // 在一个请求没有回来前，重复发送的请求会合并成一个请求\n    }\n)\n    .then((res) => {\n        // do something\n    })\n    .catch((err) => {\n        // 处理异常\n    });\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    请求节流(即将废弃)

    即将废弃

    因为 request 的请求总会有一个 promise 结果，要么成功，要么失败，和防抖、节流的语义不一致，防抖、节流只是函数的不执行

    请求缓存

    import { request } from '@fesjs/fes';\n\nrequest(\n    '/api/login',\n    {\n        username: 'robby',\n        password: '123456'\n    },\n    {\n        cache: {\n            cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage\n            cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min\n        }\n    }\n)\n    .then((res) => {\n        // do something\n    })\n    .catch((err) => {\n        // 处理异常\n    });\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    若 cache 传 true，则默认使用 ram 缓存类型，缓存时间 3min。

    结合 use 使用

    import { useRequest } from '@fesjs/fes';\n\nexport default {\n    setup() {\n        const { loading, data, error } = useRequest('/api/login', {\n            username: 'robby',\n            password: '123456'\n        });\n\n        return {\n            loading,\n            data,\n            error\n        };\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    配置拦截器

    ',21),k=(0,p.Uk)("函数的参数格式："),b={href:"http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8",target:"_blank",rel:"noopener noreferrer"},m=(0,p.Uk)("传送门"),d=(0,p.Uk)(";"),g=(0,p.uE)('
    export const request = {\n    requestInterceptors: [\n        function (config) {\n            // 在发送请求之前做些什么\n            return config;\n        },\n        [\n            function (config) {\n            // 在发送请求之前做些什么\n                return config;\n            }, function (error) {\n                // 对请求错误做些什么\n                return Promise.reject(error);\n            }\n        ]\n    ],\n    // 响应拦截器\n    responseInterceptors: [\n        function (response) {\n            // 对响应数据做点什么\n            return response;\n        },\n        [\n            function (response) {\n                // 对响应数据做点什么\n                return response;\n            }, function (error) {\n                // 对响应错误做点什么\n                return Promise.reject(error);\n            }\n        ]\n    ],\n}\n\n\n## API\n\n### request\n\n- **类型**：函数\n\n- **详情**：请求后端接口\n- **参数**：\n  - url: 后端接口 url\n  - data: 参数\n  - options: \b配置（ 支持 axios 所有配置）\n- **返回值**: Promise\n\n### useRequest\n\nrequest 的封装，返回响应式 `loading`、`error`、 `data`\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    ',1),h={},f=(0,a(3744).Z)(h,[["render",function(n,s){const a=(0,p.up)("OutboundLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[e,(0,p._)("div",t,[o,(0,p._)("p",null,[c,(0,p._)("a",l,[r,(0,p.Wm)(a)]),u])]),i,(0,p._)("p",null,[k,(0,p._)("a",b,[m,(0,p.Wm)(a)]),d]),g],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-41dee210.2cfda563.js b/assets/js/v-41dee210.2cfda563.js deleted file mode 100644 index eccddf6f..00000000 --- a/assets/js/v-41dee210.2cfda563.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[919],{2121:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-41dee210",path:"/reference/plugin/plugins/request.html",title:"@fesjs/plugin-request",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[{level:3,title:"构建时配置",slug:"构建时配置",children:[]},{level:3,title:"运行时配置",slug:"运行时配置",children:[]}]},{level:2,title:"使用",slug:"使用",children:[{level:3,title:"发起一个普通 post 请求",slug:"发起一个普通-post-请求",children:[]},{level:3,title:"merge 重复请求",slug:"merge-重复请求",children:[]},{level:3,title:"请求节流(即将废弃)",slug:"请求节流-即将废弃",children:[]},{level:3,title:"请求缓存",slug:"请求缓存",children:[]},{level:3,title:"结合 use 使用",slug:"结合-use-使用",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"request",slug:"request",children:[]},{level:3,title:"useRequest",slug:"userequest",children:[]}]}],filePathRelative:"reference/plugin/plugins/request.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},797:(n,s,a)=>{a.r(s),a.d(s,{default:()=>d});var p=a(6252);const e=(0,p.uE)('

    @fesjs/plugin-request

    基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-request": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    配置

    构建时配置

    export default {\n    request: {\n        dataField: 'result'\n    },\n}\n
    1
    2
    3
    4
    5

    dataField

    • 类型： string

    • 默认值： ''

    • 详情：

      dataField 对应接口统一格式中的数据字段，比如接口如果统一的规范是 { success: boolean, result: any} ，那么就不需要配置，这样你通过 useRequest 消费的时候会生成一个默认的 formatResult，直接返回 result 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 dataField。配置为 ''（空字符串）的时候不做处理。

    base(即将废弃)

    • 类型： string

    • 默认值： ''

    • 详情：

      base 接口前缀。

    ',12),t={class:"custom-container warning"},o=(0,p._)("p",{class:"custom-container-title"},"即将废弃",-1),c=(0,p.Uk)("这个字段将在下个版本废弃，推荐使用 "),l={href:"https://github.com/axios/axios",target:"_blank",rel:"noopener noreferrer"},r=(0,p.Uk)("axios baseURL"),u=(0,p.Uk)("。"),i=(0,p.uE)('

    运行时配置

    在 app.js 中进行运行时配置。

    export const request = {\n    // 格式化 response.data (只有 response.data 类型为 object 才会调用)\n    responseDataAdaptor: (data) => {\n        data.code = data.code === '200' ? '0' : data.code;\n        return data;\n    },\n    // 关闭 response data 校验（只判断 xhr status）\n    closeResDataCheck: false,\n    // 请求拦截器\n    requestInterceptors: [],\n    // 响应拦截器\n    responseInterceptors: [],\n    // 错误处理\n    // 内部以 reponse.data.code === '0' 判断请求是否成功\n    // 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式\n    errorHandler: {\n        11199(response) {\n            // 特殊 code 处理逻辑\n        },\n        404(error) {\n        },\n        default(error) {\n            // 异常统一处理\n        }\n    },\n    // 其他 axios 配置\n    ...otherConfigs\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    skipErrorHandler

    • 类型： boolean | string | number | array<string | number>

    • 默认值： ``

    • 详情：

      指定当前请求的某些错误状态不走 errorHandler，单独进行处理。如果设置为 true，当前请求的错误处理都不走 errorHandler。

    • 示列：

    import {request} from '@fesjs/fes';\n\nrequest('/api/login', null, {\n    skipErrorHandler: '110'\n}).then((res) => {\n    // do something\n}).catch((err) => {\n    // \b这里处理 code 为 110 的异常\n    // 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default\n})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    使用

    发起一个普通 post 请求

    import {request} from '@fesjs/fes';\n\nrequest('/api/login', {\n    username: 'robby',\n    password: '123456'\n}).then((res) => {\n    // do something\n}).catch((err) => {\n    // 处理异常\n})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    merge 重复请求

    连续发送多个请求，会被合并成一个请求，不会报 REPEAT 接口错误。

    当发生 REPEAT 请求异常，并且确保自身代码合理的情况下，可以使用该配置。

    import {request} from '@fesjs/fes';\n\nrequest('/api/login', {\n    username: 'robby',\n    password: '123456'\n}, {\n    mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求\n}).then((res) => {\n    // do something\n}).catch((err) => {\n    // 处理异常\n})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    请求节流(即将废弃)

    即将废弃

    因为 request 的请求总会有一个 promise 结果，要么成功，要么失败，和防抖、节流的语义不一致，防抖、节流只是函数的不执行

    请求缓存

    import {request} from '@fesjs/fes';\n\nrequest('/api/login', {\n    username: 'robby',\n    password: '123456'\n}, {\n    cache: {\n        cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage\n        cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min\n    },\n}).then((res) => {\n    // do something\n}).catch((err) => {\n    // 处理异常\n})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    若 cache 传 true，则默认使用 ram 缓存类型，缓存时间 3min。

    结合 use 使用

    import {useRequest} from '@fesjs/fes';\n\n\nexport default {\n    setup() {\n        const {loading, data, error} = useRequest('/api/login', {\n            username: 'robby',\n            password: '123456'\n        })\n\n        return {\n            loading,\n            data,\n            error\n        }\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    API

    request

    • 类型：函数

    • 详情：请求后端接口

    • 参数：

      • url: 后端接口 url
      • data: 参数
      • options: \b配置（ 支持 axios 所有配置）

    • 返回值: Promise

    useRequest

    request 的封装，返回响应式 loading、error、 data

    ',25),k={},d=(0,a(3744).Z)(k,[["render",function(n,s){const a=(0,p.up)("OutboundLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[e,(0,p._)("div",t,[o,(0,p._)("p",null,[c,(0,p._)("a",l,[r,(0,p.Wm)(a)]),u])]),i],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-494b840e.110782a4.js b/assets/js/v-494b840e.110782a4.js new file mode 100644 index 00000000..34fd5fa4 --- /dev/null +++ b/assets/js/v-494b840e.110782a4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[861],{4794:(a,n,s)=>{s.r(n),s.d(n,{data:()=>e});const e={key:"v-494b840e",path:"/reference/plugin/dev/",title:"插件介绍",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"开始",slug:"开始",children:[]},{level:2,title:"创建插件",slug:"创建插件",children:[]},{level:2,title:"发布到 npm",slug:"发布到-npm",children:[]}],filePathRelative:"reference/plugin/dev/README.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},9987:(a,n,s)=>{s.r(n),s.d(n,{default:()=>c});const e=(0,s(6252).uE)('

    插件介绍

    开始

    一个插件是一个 npm 包，它能够为 Fes.js 创建的项目添加额外的功能，这些功能包括：

    • 项目的 webpack 配置。
    • 修改项目的 babel 配置。
    • 添加新的 fes 命令 - 例如 @fes/plugin-jest 添加了 fes test 命令，允许开发者运行单元测试。
    • 集成 Vue 的插件。
    • 修改路由配置
    • 提供运行时 API
    • ...

    插件的入口是一个函数，函数会以 API 对象作为第一个参数：

    export default (api)=>{\n    api.describe({\n        key: 'esbuild',\n        config: {\n            schema(joi) {\n                return joi.object();\n            },\n            default: {}\n        },\n        enableBy: api.EnableBy.config,\n    });\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    API 对象是构建流程管理 Service 类的实例，api 提供一些有用的方法帮助你开发插件。

    api.describe用来描述插件：

    • key， 插件的 key，可以理解为插件的名称，在 .fes.js 中用 key 配置此插件。
    • config，插件的配置信息：
      • schema，定义配置的类型
      • default，默认配置
    • enableBy， 是否开启插件，可配置某些场景下禁用插件。

    创建插件

    第一步：安装create-fes-app
    npm i -g @fesjs/create-fes-app\n
    1
    第二步：创建插件项目
    create-fes-app pluginName\n
    1

    在询问Pick an template时选择Plugin!

    第三步：进入插件目录 & 安装依赖
    cd pluginName & yarn\n
    1
    第四步：启动编译
    yarn dev\n
    1
    第五步：使用插件API完成你的插件！（可以参考其他插件理解api用法和场景）

    发布到 npm

    以 @fesjs/preset-、@fesjs/plugin-、@webank/fes-preset-、@webank/fes-plugin-、fes-preset- 和 fes-plugin- 开头的依赖会被 Fes.js 自动注册为插件或插件集。

    所以编写好的插件想发布到 npm 供其他人使用，包名必须是 fes-preset- 和 fes-plugin- 开头。

    ',23),p={},c=(0,s(3744).Z)(p,[["render",function(a,n){return e}]])},3744:(a,n)=>{n.Z=(a,n)=>{const s=a.__vccOpts||a;for(const[a,e]of n)s[a]=e;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-494b840e.30afdc7f.js b/assets/js/v-494b840e.30afdc7f.js deleted file mode 100644 index 2f5d8ff6..00000000 --- a/assets/js/v-494b840e.30afdc7f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[861],{4794:(a,n,s)=>{s.r(n),s.d(n,{data:()=>e});const e={key:"v-494b840e",path:"/reference/plugin/dev/",title:"插件介绍",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"开始",slug:"开始",children:[]},{level:2,title:"创建插件",slug:"创建插件",children:[]},{level:2,title:"发布到 npm",slug:"发布到-npm",children:[]}],filePathRelative:"reference/plugin/dev/README.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},9987:(a,n,s)=>{s.r(n),s.d(n,{default:()=>c});const e=(0,s(6252).uE)('

    插件介绍

    开始

    一个插件是一个 npm 包，它能够为 Fes.js 创建的项目添加额外的功能，这些功能包括：

    • 项目的 webpack 配置。
    • 修改项目的 babel 配置。
    • 添加新的 fes 命令 - 例如 @fes/plugin-jest 添加了 fes test 命令，允许开发者运行单元测试。
    • 集成 Vue 的插件。
    • 修改路由配置
    • 提供运行时 API
    • ...

    插件的入口是一个函数，函数会以 API 对象作为第一个参数：

    export default (api)=>{\n    api.describe({\n        key: 'esbuild',\n        config: {\n            schema(joi) {\n                return joi.object();\n            },\n            default: {}\n        },\n        enableBy: api.EnableBy.config,\n    });\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    API 对象是构建流程管理 Service 类的实例，api 提供一些有用的方法帮助你开发插件。

    api.describe用来描述插件：

    • key， 插件的 key，可以理解为插件的名称，在 .fes.js 中用 key 配置此插件。
    • config，插件的配置信息：
      • schema，定义配置的类型
      • default，默认配置
    • enableBy， 是否开启插件，可配置某些场景下禁用插件。

    创建插件

    第一步：安装create-fes-app
    npm i -g @fesjs/create-fes-app\n
    1
    第二步：创建插件项目
    create-fes-app pluginName\n
    1

    在询问Pick an template时选择Plugin!

    第三步：进入插件目录 & 安装依赖
    cd pluginName & yarn\n
    1
    第四步：启动编译
    yarn dev\n
    1
    第五步：使用插件API完成你的插件！（可以参考其他插件理解api用法和场景）

    发布到 npm

    以 @fesjs/preset-、@fesjs/plugin-、@webank/fes-preset-、@webank/fes-plugin-、fes-preset- 和 fes-plugin- 开头的依赖会被 Fes.js 自动注册为插件或插件集。

    所以编写好的插件想发布到 npm 供其他人使用，包名必须是 fes-preset- 和 fes-plugin- 开头。

    ',23),p={},c=(0,s(3744).Z)(p,[["render",function(a,n){return e}]])},3744:(a,n)=>{n.Z=(a,n)=>{const s=a.__vccOpts||a;for(const[a,e]of n)s[a]=e;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-528b8b6c.3d914205.js b/assets/js/v-528b8b6c.3d914205.js new file mode 100644 index 00000000..dc397080 --- /dev/null +++ b/assets/js/v-528b8b6c.3d914205.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[972],{2296:(a,n,s)=>{s.r(n),s.d(n,{data:()=>e});const e={key:"v-528b8b6c",path:"/guide/image.html",title:"使用图片",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"使用图片",slug:"使用图片-1",children:[{level:3,title:"Vue 里使用图片",slug:"vue-里使用图片",children:[]},{level:3,title:"JS 里使用图片",slug:"js-里使用图片",children:[]},{level:3,title:"CSS 里使用图片",slug:"css-里使用图片",children:[]}]},{level:2,title:"public 文件夹",slug:"public-文件夹",children:[{level:3,title:"在HTML模板中使用",slug:"在html模板中使用",children:[]},{level:3,title:"在.vue 文件中使用",slug:"在-vue-文件中使用",children:[]}]}],filePathRelative:"guide/image.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},2682:(a,n,s)=>{s.r(n),s.d(n,{default:()=>p});const e=(0,s(6252).uE)('

    使用图片

    使用图片

    假设在 src/images 目录下有 logo.png。

    Vue 里使用图片

    <template>\n  <img src="@/images/logo.png`">\n</template>\n
    1
    2
    3

    JS 里使用图片

    import imageUrl from '@/images/logo.png`'\n
    1

    CSS 里使用图片

    .logo {\n    background: url('@/images/logo.png')\n}\n
    1
    2
    3

    注意：

    1. 这是 webpack 的规则，如果切到其他打包工具，可能会有变化
    2. less 中同样适用

    public 文件夹

    有些内容不需要经过 webpack 模块化处理，则可以将这些内容放在 public 文件夹，构建后会直接复制到 dist 目录，所以你需要通过BASE_URL来引入它们。

    在HTML模板中使用

    在 public/index.html 中需要设置：

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">\n
    1

    在.vue 文件中使用

    <template>\n  <img :src="`${publicPath}my-image.png`">\n</template>\n<script>\nexport default {\n  setup() {\n    return {\n      publicPath: process.env.BASE_URL\n    }\n  }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ',18),t={},p=(0,s(3744).Z)(t,[["render",function(a,n){return e}]])},3744:(a,n)=>{n.Z=(a,n)=>{const s=a.__vccOpts||a;for(const[a,e]of n)s[a]=e;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-528b8b6c.4a83c4cf.js b/assets/js/v-528b8b6c.4a83c4cf.js deleted file mode 100644 index 15601bee..00000000 --- a/assets/js/v-528b8b6c.4a83c4cf.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[972],{2296:(a,n,s)=>{s.r(n),s.d(n,{data:()=>e});const e={key:"v-528b8b6c",path:"/guide/image.html",title:"使用图片",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"使用图片",slug:"使用图片-1",children:[{level:3,title:"Vue 里使用图片",slug:"vue-里使用图片",children:[]},{level:3,title:"JS 里使用图片",slug:"js-里使用图片",children:[]},{level:3,title:"CSS 里使用图片",slug:"css-里使用图片",children:[]}]},{level:2,title:"public 文件夹",slug:"public-文件夹",children:[{level:3,title:"在HTML模板中使用",slug:"在html模板中使用",children:[]},{level:3,title:"在.vue 文件中使用",slug:"在-vue-文件中使用",children:[]}]}],filePathRelative:"guide/image.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},2682:(a,n,s)=>{s.r(n),s.d(n,{default:()=>p});const e=(0,s(6252).uE)('

    使用图片

    使用图片

    假设在 src/images 目录下有 logo.png。

    Vue 里使用图片

    <template>\n  <img src="@/images/logo.png`">\n</template>\n
    1
    2
    3

    JS 里使用图片

    import imageUrl from '@/images/logo.png`'\n
    1

    CSS 里使用图片

    .logo {\n    background: url('@/images/logo.png')\n}\n
    1
    2
    3

    注意：

    1. 这是 webpack 的规则，如果切到其他打包工具，可能会有变化
    2. less 中同样适用

    public 文件夹

    有些内容不需要经过 webpack 模块化处理，则可以将这些内容放在 public 文件夹，构建后会直接复制到 dist 目录，所以你需要通过BASE_URL来引入它们。

    在HTML模板中使用

    在 public/index.html 中需要设置：

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">\n
    1

    在.vue 文件中使用

    <template>\n  <img :src="`${publicPath}my-image.png`">\n</template>\n<script>\nexport default {\n  setup() {\n    return {\n      publicPath: process.env.BASE_URL\n    }\n  }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ',18),t={},p=(0,s(3744).Z)(t,[["render",function(a,n){return e}]])},3744:(a,n)=>{n.Z=(a,n)=>{const s=a.__vccOpts||a;for(const[a,e]of n)s[a]=e;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-5bf80046.7ad59e6f.js b/assets/js/v-5bf80046.7ad59e6f.js deleted file mode 100644 index afcf8846..00000000 --- a/assets/js/v-5bf80046.7ad59e6f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[463],{93:(s,a,n)=>{n.r(a),n.d(a,{data:()=>e});const e={key:"v-5bf80046",path:"/reference/plugin/plugins/sass.html",title:"@fesjs/plugin-sass",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"global css",slug:"global-css",children:[]},{level:2,title:"Vue 单文件组件",slug:"vue-单文件组件",children:[]}],filePathRelative:"reference/plugin/plugins/sass.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5310:(s,a,n)=>{n.r(a),n.d(a,{default:()=>l});const e=(0,n(6252).uE)('

    @fesjs/plugin-sass

    介绍

    Fes.js 默认只支持 less，通过此插件扩展支持 sass

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-sass": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    global css

    添加 src/global.scss 和 src/global.sass 为全局CSS入口，添加一些通用样式内容。

    Vue 单文件组件

    Vue 单文件组件的 <style></style> 添加 lang='scss'，例如：

    <style lang="scss">\n</style>\n
    1
    2
    ',11),t={},l=(0,n(3744).Z)(t,[["render",function(s,a){return e}]])},3744:(s,a)=>{a.Z=(s,a)=>{const n=s.__vccOpts||s;for(const[s,e]of a)n[s]=e;return n}}}]); \ No newline at end of file diff --git a/assets/js/v-5bf80046.a0181eee.js b/assets/js/v-5bf80046.a0181eee.js new file mode 100644 index 00000000..d78ca139 --- /dev/null +++ b/assets/js/v-5bf80046.a0181eee.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[463],{93:(s,a,n)=>{n.r(a),n.d(a,{data:()=>e});const e={key:"v-5bf80046",path:"/reference/plugin/plugins/sass.html",title:"@fesjs/plugin-sass",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"global css",slug:"global-css",children:[]},{level:2,title:"Vue 单文件组件",slug:"vue-单文件组件",children:[]}],filePathRelative:"reference/plugin/plugins/sass.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5310:(s,a,n)=>{n.r(a),n.d(a,{default:()=>l});const e=(0,n(6252).uE)('

    @fesjs/plugin-sass

    介绍

    Fes.js 默认只支持 less，通过此插件扩展支持 sass

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-sass": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    global css

    添加 src/global.scss 和 src/global.sass 为全局CSS入口，添加一些通用样式内容。

    Vue 单文件组件

    Vue 单文件组件的 <style></style> 添加 lang='scss'，例如：

    <style lang="scss">\n</style>\n
    1
    2
    ',11),t={},l=(0,n(3744).Z)(t,[["render",function(s,a){return e}]])},3744:(s,a)=>{a.Z=(s,a)=>{const n=s.__vccOpts||s;for(const[s,e]of a)n[s]=e;return n}}}]); \ No newline at end of file diff --git a/assets/js/v-5f4c684e.7bcd03a9.js b/assets/js/v-5f4c684e.7bcd03a9.js deleted file mode 100644 index fcde37f8..00000000 --- a/assets/js/v-5f4c684e.7bcd03a9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[132],{8462:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-5f4c684e",path:"/reference/plugin/plugins/vuex.html",title:"@fesjs/plugin-vuex",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[]},{level:2,title:"场景使用",slug:"场景使用",children:[]},{level:2,title:"vuex插件",slug:"vuex插件",children:[]},{level:2,title:"API",slug:"api",children:[{level:3,title:"store",slug:"store",children:[]},{level:3,title:"MUTATION_TYPES",slug:"mutation-types",children:[]},{level:3,title:"GETTER_TYPES",slug:"getter-types",children:[]},{level:3,title:"ACTION_TYPES",slug:"action-types",children:[]}]}],filePathRelative:"reference/plugin/plugins/vuex.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},4565:(n,s,a)=>{a.r(s),a.d(s,{default:()=>r});var p=a(6252);const t=(0,p.uE)('

    @fesjs/plugin-vuex

    介绍

    集成vuex插件

    增强vuex，导出所有的mutations、actions和getter的事件类型，编辑器提示

    约定模式，module和plugin定义放在stores目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。

    └── src\n    ├── pages\n    │    └── index.vue\n    └── stores \n    │    └── foo\n    │    │    └── bar.js\n    │    ├── counter.js\n    │    ├── plugin-logger.js       \n    │    ├── user.js\n    └── app.js\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    提示

    为了防止fesjs与vuex的export冲突，fesjs不提供导出vuex的任何api。你可以直接使用vuex的api

    import { useStore } from 'vuex';\n
    1

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-vuex": "^2.0.0"\n    }\n}\n
    1
    2
    3
    4
    5
    6

    配置

    在 .fes.js 中配置：

    export default {\n    vuex: {\n        strict: true // 开启严格模式\n    }\n}\n
    1
    2
    3
    4
    5

    场景使用

    先定义在stores下定义user模块，包含嵌套模块

    stores/user.js

    export default {\n    namespaced: true,\n    state: () => ({\n        name: 'aring',\n        age: 20\n    }),\n    actions: {\n        login() {\n            return new Promise((reslove) => {\n                setTimeout(() => {\n                    console.log('login');\n                    reslove('OK');\n                }, 1000);\n            });\n        }\n    },\n    modules: {\n        address: {\n            state: () => ({\n                province: '广东省',\n                city: '深圳市',\n                zone: '南山区'\n            }),\n            getters: {\n                address(state) {\n                    return state.province + state.city + state.zone;\n                }\n            }\n        }\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31

    stores/foo/bar.js

    export default {\n    namespaced: true,\n    state: () => ({\n        count: 0\n    }),\n    mutations: {\n        increment(state) {\n            state.count++;\n        }\n    },\n    getters: {\n        doubleCount(state) {\n            return state.count * 2;\n        }\n    },\n    actions: {\n        asyncIncrement({ commit }) {\n            setTimeout(() => {\n                commit('increment');\n            }, 2000);\n        }\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

    提示

    导出的mutations、actions和getter的事件类型，将会按文件命名；

    如ACTION_TYPES.user.login指向user模块中actions的login方法

    如GETTER_TYPES.user.address指向user模块中嵌套的address getter

    如MUTATION_TYPES.fooBar.increment指向foo/bar模块中mutations的increment方法

    在vue文件中使用store

    <template>\n    <div>\n        <h4>Vuex</h4>\n        <div><button :disabled="disabled" @click="login">async login</button></div>\n        <div><button @click="fooBarIncrement">foo/bar：{{fooBarDoubleCount}}</button></div>\n        <div>{{address}}</div>\n    </div>\n</template>\n<config>\n{\n    "name": "store",\n    "title": "vuex测试"\n}\n</config>\n<script>\nimport { computed, ref } from 'vue';\nimport { useStore } from 'vuex';\nimport { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes';\n\nexport default {\n    setup() {\n        const store = useStore();\n        console.log('store==>', store);\n        const disabled = ref(false);\n        // 可以利用导出的事件类型，不再通过字符传入（store.getters['user/address']）\n        return {\n            address: computed(() => store.getters[GETTER_TYPES.user.address]),\n            disabled,\n            login: () => {\n                disabled.value = true;\n                store.dispatch(ACTION_TYPES.user.login).then((res) => {\n                    window.alert(res);\n                    disabled.value = false;\n                });\n            },\n            fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment), // foo/bar目录会解析成驼峰fooBar\n            fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount])\n        };\n    }\n};\n</script>\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42

    提示

    由于该插件注册在onAppCreated中，如果在onAppCreated及之前使用useStore时，获取不到vuex实例

    fesjs导出了vuex实例store，如在app.js文件中

    import { store, GETTER_TYPES } from '@fesjs/fes';\nconsole.log(store.getters[GETTER_TYPES.user.address])\n
    1
    2

    vuex插件

    ',24),e=(0,p.Uk)("stores文件夹下的文件名包含plugin被解析为插件，vuex插件写法参考"),o={href:"https://next.vuex.vuejs.org/guide/plugins.html",target:"_blank",rel:"noopener noreferrer"},c=(0,p.Uk)("官方文档"),l=(0,p.uE)('

    API

    store

    • 类型 Object
    • vuex实例

    MUTATION_TYPES

    • 类型 Object
    • mutation的所有事件类型

    GETTER_TYPES

    • 类型 Object
    • getter的所有方法名

    ACTION_TYPES

    • 类型 Object
    • action的所有事件类型
    ',9),u={},r=(0,a(3744).Z)(u,[["render",function(n,s){const a=(0,p.up)("OutboundLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[e,(0,p._)("a",o,[c,(0,p.Wm)(a)])]),l],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-5f4c684e.f6943605.js b/assets/js/v-5f4c684e.f6943605.js new file mode 100644 index 00000000..7d2c6265 --- /dev/null +++ b/assets/js/v-5f4c684e.f6943605.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[132],{8462:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-5f4c684e",path:"/reference/plugin/plugins/vuex.html",title:"@fesjs/plugin-vuex",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[]},{level:2,title:"场景使用",slug:"场景使用",children:[]},{level:2,title:"vuex插件",slug:"vuex插件",children:[]},{level:2,title:"API",slug:"api",children:[{level:3,title:"store",slug:"store",children:[]},{level:3,title:"MUTATION_TYPES",slug:"mutation-types",children:[]},{level:3,title:"GETTER_TYPES",slug:"getter-types",children:[]},{level:3,title:"ACTION_TYPES",slug:"action-types",children:[]}]}],filePathRelative:"reference/plugin/plugins/vuex.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},4565:(n,s,a)=>{a.r(s),a.d(s,{default:()=>r});var p=a(6252);const t=(0,p.uE)('

    @fesjs/plugin-vuex

    介绍

    集成vuex插件

    增强vuex，导出所有的mutations、actions和getter的事件类型，编辑器提示

    约定模式，module和plugin定义放在stores目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。

    └── src\n    ├── pages\n    │    └── index.vue\n    └── stores \n    │    └── foo\n    │    │    └── bar.js\n    │    ├── counter.js\n    │    ├── plugin-logger.js       \n    │    ├── user.js\n    └── app.js\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    提示

    为了防止fesjs与vuex的export冲突，fesjs不提供导出vuex的任何api。你可以直接使用vuex的api

    import { useStore } from 'vuex';\n
    1

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-vuex": "^2.0.0"\n    }\n}\n
    1
    2
    3
    4
    5
    6

    配置

    在 .fes.js 中配置：

    export default {\n    vuex: {\n        strict: true // 开启严格模式\n    }\n}\n
    1
    2
    3
    4
    5

    场景使用

    先定义在stores下定义user模块，包含嵌套模块

    stores/user.js

    export default {\n    namespaced: true,\n    state: () => ({\n        name: 'aring',\n        age: 20\n    }),\n    actions: {\n        login() {\n            return new Promise((reslove) => {\n                setTimeout(() => {\n                    console.log('login');\n                    reslove('OK');\n                }, 1000);\n            });\n        }\n    },\n    modules: {\n        address: {\n            state: () => ({\n                province: '广东省',\n                city: '深圳市',\n                zone: '南山区'\n            }),\n            getters: {\n                address(state) {\n                    return state.province + state.city + state.zone;\n                }\n            }\n        }\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31

    stores/foo/bar.js

    export default {\n    namespaced: true,\n    state: () => ({\n        count: 0\n    }),\n    mutations: {\n        increment(state) {\n            state.count++;\n        }\n    },\n    getters: {\n        doubleCount(state) {\n            return state.count * 2;\n        }\n    },\n    actions: {\n        asyncIncrement({ commit }) {\n            setTimeout(() => {\n                commit('increment');\n            }, 2000);\n        }\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

    提示

    导出的mutations、actions和getter的事件类型，将会按文件命名；

    如ACTION_TYPES.user.login指向user模块中actions的login方法

    如GETTER_TYPES.user.address指向user模块中嵌套的address getter

    如MUTATION_TYPES.fooBar.increment指向foo/bar模块中mutations的increment方法

    在vue文件中使用store

    <template>\n    <div>\n        <h4>Vuex</h4>\n        <div><button :disabled="disabled" @click="login">async login</button></div>\n        <div><button @click="fooBarIncrement">foo/bar：{{fooBarDoubleCount}}</button></div>\n        <div>{{address}}</div>\n    </div>\n</template>\n<config>\n{\n    "name": "store",\n    "title": "vuex测试"\n}\n</config>\n<script>\nimport { computed, ref } from 'vue';\nimport { useStore } from 'vuex';\nimport { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes';\n\nexport default {\n    setup() {\n        const store = useStore();\n        console.log('store==>', store);\n        const disabled = ref(false);\n        // 可以利用导出的事件类型，不再通过字符传入（store.getters['user/address']）\n        return {\n            address: computed(() => store.getters[GETTER_TYPES.user.address]),\n            disabled,\n            login: () => {\n                disabled.value = true;\n                store.dispatch(ACTION_TYPES.user.login).then((res) => {\n                    window.alert(res);\n                    disabled.value = false;\n                });\n            },\n            fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment), // foo/bar目录会解析成驼峰fooBar\n            fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount])\n        };\n    }\n};\n</script>\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42

    提示

    由于该插件注册在onAppCreated中，如果在onAppCreated及之前使用useStore时，获取不到vuex实例

    fesjs导出了vuex实例store，如在app.js文件中

    import { store, GETTER_TYPES } from '@fesjs/fes';\nconsole.log(store.getters[GETTER_TYPES.user.address])\n
    1
    2

    vuex插件

    ',24),e=(0,p.Uk)("stores文件夹下的文件名包含plugin被解析为插件，vuex插件写法参考"),o={href:"https://next.vuex.vuejs.org/guide/plugins.html",target:"_blank",rel:"noopener noreferrer"},c=(0,p.Uk)("官方文档"),l=(0,p.uE)('

    API

    store

    • 类型 Object
    • vuex实例

    MUTATION_TYPES

    • 类型 Object
    • mutation的所有事件类型

    GETTER_TYPES

    • 类型 Object
    • getter的所有方法名

    ACTION_TYPES

    • 类型 Object
    • action的所有事件类型
    ',9),u={},r=(0,a(3744).Z)(u,[["render",function(n,s){const a=(0,p.up)("OutboundLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[e,(0,p._)("a",o,[c,(0,p.Wm)(a)])]),l],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-6320961c.0e6d7c4c.js b/assets/js/v-6320961c.0e6d7c4c.js deleted file mode 100644 index 3eda2f61..00000000 --- a/assets/js/v-6320961c.0e6d7c4c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[626],{6254:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-6320961c",path:"/guide/route.html",title:"路由",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"路由配置",slug:"路由配置",children:[{level:3,title:"routes",slug:"routes",children:[]},{level:3,title:"mode",slug:"mode",children:[]}]},{level:2,title:"约定式路由",slug:"约定式路由",children:[{level:3,title:"约定规范",slug:"约定规范",children:[]},{level:3,title:"动态路由",slug:"动态路由",children:[]},{level:3,title:"嵌套路由",slug:"嵌套路由",children:[]},{level:3,title:"模糊匹配",slug:"模糊匹配",children:[]},{level:3,title:"扩展路由元信息",slug:"扩展路由元信息",children:[]},{level:3,title:"智能路由",slug:"智能路由",children:[]}]},{level:2,title:"路由跳转",slug:"路由跳转",children:[{level:3,title:"声明式",slug:"声明式",children:[]},{level:3,title:"命令式",slug:"命令式",children:[]}]}],filePathRelative:"guide/route.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},7570:(n,s,a)=>{a.r(s),a.d(s,{default:()=>an});var p=a(6252);const t=(0,p._)("h1",{id:"路由",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#路由","aria-hidden":"true"},"#"),(0,p.Uk)(" 路由")],-1),e=(0,p.Uk)("像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 "),o=(0,p._)("code",null,"Vue Router",-1),r=(0,p.Uk)(" 实现的路由，想了解更多的同学可以看看"),l={href:"https://next.router.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},c=(0,p.Uk)("官方文档"),u=(0,p.Uk)("。"),i=(0,p.uE)('

    路由配置

    在配置文件 .fes.js中通过 router 进行配置。

    export default {\n    router: {\n        routes: [],\n        mode: 'hash'\n    }\n}\n
    1
    2
    3
    4
    5
    6

    routes

    ',4),k=(0,p._)("code",null,"routes",-1),b=(0,p.Uk)(" 是配置添加到路由的初始路由列表，格式为路由信息的数组。具体使用参考 "),m={href:"https://next.router.vuejs.org/zh/guide/",target:"_blank",rel:"noopener noreferrer"},d=(0,p.Uk)("Vue Router 文档"),g=(0,p.Uk)(" 中关于路由配置、路由匹配相关内容。"),h=(0,p._)("h3",{id:"mode",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#mode","aria-hidden":"true"},"#"),(0,p.Uk)(" mode")],-1),y=(0,p._)("p",null,"创建历史记录的类型：",-1),_=(0,p._)("strong",null,"history",-1),v=(0,p.Uk)("，对应 "),q={href:"https://next.router.vuejs.org/zh/api/#createwebhistory",target:"_blank",rel:"noopener noreferrer"},f=(0,p.Uk)("createWebHistory"),x=(0,p._)("strong",null,"hash",-1),U=(0,p.Uk)("，对应 "),j={href:"https://next.router.vuejs.org/zh/api/#createWebHashHistory",target:"_blank",rel:"noopener noreferrer"},w=(0,p.Uk)("createWebHashHistory"),E=(0,p._)("strong",null,"memory",-1),R=(0,p.Uk)("，对应 "),W={href:"https://next.router.vuejs.org/zh/api/#createWebHashHistory",target:"_blank",rel:"noopener noreferrer"},B=(0,p.Uk)("createMemoryHistory"),H=(0,p.uE)('

    默认是hash模式。

    约定式路由

    约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。

    约定规范

    比如以下文件结构：

    pages\n├── index.vue         # 根路由页面 路径为 /\n├── *.vue             # 模糊匹配 路径为 *\n├── a.vue             # 路径 /a\n├── b                 # 文件夹b\n│   ├── index.vue     # 路径 /b\n│   ├── @id.vue       # 动态路由 /b/:id\n│   ├── c.vue         # 路径 /b/c\n│   └── layout.vue    # /b 路径下所有页面公共的布局组件\n└── layout.vue        # 根路由下所有页面共用的布局组件\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    编译后会得到以下路由配置：

    [\n    {\n        "path": "/",\n        "component": require('@/pages/layout').default,\n        "count": 5,\n        "children": [\n            {\n                "path": "/a",\n                "component": require('@/pages/a').default,\n                "name": "a",\n                "meta": {},\n                "count": 7\n            },\n            {\n                "path": "/b",\n                "component": require('@/pages/b/layout').default,\n                "count": 7,\n                "children": [\n                    {\n                        "path": "/b/c",\n                        "component": require('@/pages/b/c').default,\n                        "name": "b_c",\n                        "meta": {},\n                        "count": 14\n                    },\n                    {\n                        "path": "/b/:id",\n                        "component": require('@/pages/b/@id').default,\n                        "name": "b__id",\n                        "meta": {},\n                        "count": 13\n                    },\n                    {\n                        "path": "/b",\n                        "component": require('@/pages/b/index').default,\n                        "name": "b_index",\n                        "meta": {},\n                        "count": 7\n                    }\n                ]\n            },\n            {\n                "path": "/",\n                "component": require('@/pages/index').default,\n                "name": "index",\n                "meta": {},\n                "count": 5\n            },\n            {\n                "path": "/:pathMatch(.*)",\n                "component": require('@/pages/*').default,\n                "name": "FUZZYMATCH",\n                "meta": {},\n                "count": 3\n            }\n        ]\n    }\n]\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58

    需要注意的是，满足以下任意规则的文件不会被注册为路由：

    • 不是 .vue .jsx 文件
    • components 目录中的文件

    动态路由

    Fes.js 里约定以 @ 开头的文件或文件夹映射为动态路由。 比如：

    • src/pages/users/@id.vue 会成为 /users/:id
    • src/pages/users/@id/settings.vue 会成为 /users/:id/settings

    嵌套路由

    Fes.js 里约定目录下有 layout.vue 时会生成嵌套路由，以 layout.vue 为该目录的公共父组件，layout.vue 中必须实现 RouterView

    比如以下目录结构：

    pages\n└── users\n    ├── layout.vue\n    ├── index.vue\n    └── list.vue\n
    1
    2
    3
    4
    5

    会生成路由：

    [\n    { \n        path: '/users', component: require('@/pages/users/layout').default,\n        children: [\n            { path: '/users', component: require('@/pages/users/index').default },\n            { path: '/users/list', component: require('@/pages/users/list').default },\n        ]\n    }\n]\n
    1
    2
    3
    4
    5
    6
    7
    8
    9

    模糊匹配

    ',20),z=(0,p.Uk)("Fes.js 下约定文件名为 "),F=(0,p._)("code",null,"*",-1),D=(0,p.Uk)(" 的路由是模糊匹配路由，可以用此特性实现 "),M={href:"https://next.router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E8%B7%AF%E7%94%B1%E6%88%96-404-not-found-%E8%B7%AF%E7%94%B1",target:"_blank",rel:"noopener noreferrer"},A=(0,p.Uk)("404 路由"),C=(0,p.Uk)("。"),V=(0,p.uE)('

    比如以下目录结构：

    pages\n├── index.vue         # 根路由页面 路径为 /\n└── *.vue             # 模糊匹配 路径为 *\n
    1
    2
    3

    会生成路由：

    [\n    { \n        path: '/', component: require('@/pages/index').default, count: 5\n    },\n    {\n        path: '/:pathMatch(.*)', component: require('@/pages/**').default, count: 3\n    }\n]\n
    1
    2
    3
    4
    5
    6
    7
    8

    这样，如果访问 /foo，/ 不能匹配，会 fallback 到 * 路由，通过 src/pages/*.vue 进行渲染。

    扩展路由元信息

    我们在定义路由时可以配置meta字段，用来记录一些跟路由相关的信息：

    const router = new VueRouter({\n  routes: [\n    {\n      path: '/foo',\n      component: Foo,\n      children: [\n        {\n          path: 'bar',\n          component: Bar,\n          // a meta field\n          meta: { requiresAuth: true }\n        }\n      ]\n    }\n  ]\n})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    接下来我们来配置 meta：

    ',9),Z=(0,p._)("div",{class:"language-vue ext-vue line-numbers-mode"},[(0,p._)("pre",{class:"language-vue"},[(0,p._)("code",null,[(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token punctuation"},"<"),(0,p.Uk)("config")]),(0,p._)("span",{class:"token punctuation"},">")]),(0,p.Uk)('\n{\n "name": "store",\n "title": "vuex测试"\n}\n'),(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token punctuation"},"")]),(0,p.Uk)("\n")])]),(0,p._)("div",{class:"line-numbers"},[(0,p._)("span",{class:"line-number"},"1"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"2"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"3"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"4"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"5"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"6"),(0,p._)("br")])],-1),I=(0,p._)("div",{class:"language-jsx ext-jsx line-numbers-mode"},[(0,p._)("pre",{class:"language-jsx"},[(0,p._)("code",null,[(0,p._)("span",{class:"token keyword"},"import"),(0,p.Uk)(),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)(" defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)(" useRoute "),(0,p._)("span",{class:"token punctuation"},"}"),(0,p.Uk)(),(0,p._)("span",{class:"token keyword"},"from"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},"'@fesjs/fes'"),(0,p._)("span",{class:"token punctuation"},";"),(0,p.Uk)("\n"),(0,p._)("span",{class:"token function"},"defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},"("),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)("\n "),(0,p._)("span",{class:"token literal-property property"},"name"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"store"'),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)("\n "),(0,p._)("span",{class:"token literal-property property"},"title"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"vuex测试"'),(0,p.Uk)("\n"),(0,p._)("span",{class:"token punctuation"},"}"),(0,p._)("span",{class:"token punctuation"},")"),(0,p.Uk)("\n")])]),(0,p._)("div",{class:"line-numbers"},[(0,p._)("span",{class:"line-number"},"1"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"2"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"3"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"4"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"5"),(0,p._)("br")])],-1),G=(0,p._)("div",{class:"language-tsx ext-tsx line-numbers-mode"},[(0,p._)("pre",{class:"language-tsx"},[(0,p._)("code",null,[(0,p._)("span",{class:"token keyword"},"import"),(0,p.Uk)(),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)(" defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)(" useRoute "),(0,p._)("span",{class:"token punctuation"},"}"),(0,p.Uk)(),(0,p._)("span",{class:"token keyword"},"from"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},"'@fesjs/fes'"),(0,p._)("span",{class:"token punctuation"},";"),(0,p.Uk)("\n"),(0,p._)("span",{class:"token function"},"defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},"("),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)("\n name"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"store"'),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)("\n title"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"vuex测试"'),(0,p.Uk)("\n"),(0,p._)("span",{class:"token punctuation"},"}"),(0,p._)("span",{class:"token punctuation"},")"),(0,p.Uk)("\n")])]),(0,p._)("div",{class:"line-numbers"},[(0,p._)("span",{class:"line-number"},"1"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"2"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"3"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"4"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"5"),(0,p._)("br")])],-1),L=(0,p.uE)('

    则编译后的路由配置为：

    [\n    { \n        path: '/a', \n        component: require('@/pages/a').default, \n        meta: {\n            "name": "store",\n            "title": "vuex测试"\n        }\n    },\n]\n




     
     
     
     


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    智能路由

    可以看到，编译后路由都会有 count 属性，这是我们根据精准匹配优先算法原则设计出路由排名算法，对匹配到的路由打分：

    • 路由的路径每个子项得到4分
    • 子项为静态细分(/list)再加3分
    • 子项为动态细分（/:orderId）再加2分
    • 根段(/)再1分
    • 通配符(*)匹配到的减去1分

    当我们跳转路由时，如果 URL 匹配到多个路由，则选择分数最高的路由。

    路由跳转

    ',7),O=(0,p.Uk)("想学习更多，可以查看 "),P={href:"https://next.router.vuejs.org/zh/guide/essentials/navigation.html#%E6%9B%BF%E6%8D%A2%E5%BD%93%E5%89%8D%E4%BD%8D%E7%BD%AE",target:"_blank",rel:"noopener noreferrer"},T=(0,p.Uk)("Vue Router 官方文档"),Y=(0,p.Uk)("。"),N=(0,p.uE)('

    声明式

    <template>\n    <router-link to="/home">Home</router-link>\n</template>\n
    1
    2
    3

    命令式

    ',3),J=(0,p.Uk)("页面跳转 API 由 "),K=(0,p._)("code",null,"router",-1),Q=(0,p.Uk)(" 实例提供，查看 "),S={href:"https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},X=(0,p.Uk)("Vue Rouer 文档"),$=(0,p.Uk)("了解更多。"),nn=(0,p.uE)('
    import { useRouter } from '@fesjs/fes';\n\nexport default {\n    setup(){\n        const router = useRouter();\n        // 这三种形式是等价的\n        router.push('/users/posva#bio')\n        router.push({ path: '/users/posva', hash: '#bio' })\n        router.push({ name: 'users', params: { username: 'posva' }, hash: '#bio' })\n        // 只改变 hash\n        router.push({ hash: '#bio' })\n        // 只改变 query\n        router.push({ query: { page: '2' } })\n        // 只改变 param\n        router.push({ params: { username: 'jolyne' } })\n\n        // 跳转到上一个路由\n        router.goBack();\n\n        // \b跳转到前一个历史记录\n        router.go(1);\n\n        // 替换历史堆栈中的记录\n        router.replace('/new');\n    }\n}\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    ',1),sn={},an=(0,a(3744).Z)(sn,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),sn=(0,p.up)("CodeGroupItem"),an=(0,p.up)("CodeGroup");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[e,o,r,(0,p._)("a",l,[c,(0,p.Wm)(a)]),u]),i,(0,p._)("p",null,[k,b,(0,p._)("a",m,[d,(0,p.Wm)(a)]),g]),h,y,(0,p._)("ul",null,[(0,p._)("li",null,[_,v,(0,p._)("a",q,[f,(0,p.Wm)(a)])]),(0,p._)("li",null,[x,U,(0,p._)("a",j,[w,(0,p.Wm)(a)])]),(0,p._)("li",null,[E,R,(0,p._)("a",W,[B,(0,p.Wm)(a)])])]),H,(0,p._)("p",null,[z,F,D,(0,p._)("a",M,[A,(0,p.Wm)(a)]),C]),V,(0,p.Wm)(an,null,{default:(0,p.w5)((()=>[(0,p.Wm)(sn,{title:"vue",active:""},{default:(0,p.w5)((()=>[Z])),_:1}),(0,p.Wm)(sn,{title:"jsx"},{default:(0,p.w5)((()=>[I])),_:1}),(0,p.Wm)(sn,{title:"tsx"},{default:(0,p.w5)((()=>[G])),_:1})])),_:1}),L,(0,p._)("p",null,[O,(0,p._)("a",P,[T,(0,p.Wm)(a)]),Y]),N,(0,p._)("p",null,[J,K,Q,(0,p._)("a",S,[X,(0,p.Wm)(a)]),$]),nn],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-6320961c.3276e1b8.js b/assets/js/v-6320961c.3276e1b8.js new file mode 100644 index 00000000..55afea32 --- /dev/null +++ b/assets/js/v-6320961c.3276e1b8.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[626],{6254:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-6320961c",path:"/guide/route.html",title:"路由",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"路由配置",slug:"路由配置",children:[{level:3,title:"routes",slug:"routes",children:[]},{level:3,title:"mode",slug:"mode",children:[]}]},{level:2,title:"约定式路由",slug:"约定式路由",children:[{level:3,title:"约定规范",slug:"约定规范",children:[]},{level:3,title:"动态路由",slug:"动态路由",children:[]},{level:3,title:"嵌套路由",slug:"嵌套路由",children:[]},{level:3,title:"模糊匹配",slug:"模糊匹配",children:[]},{level:3,title:"扩展路由元信息",slug:"扩展路由元信息",children:[]},{level:3,title:"智能路由",slug:"智能路由",children:[]}]},{level:2,title:"路由跳转",slug:"路由跳转",children:[{level:3,title:"声明式",slug:"声明式",children:[]},{level:3,title:"命令式",slug:"命令式",children:[]}]}],filePathRelative:"guide/route.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},7570:(n,s,a)=>{a.r(s),a.d(s,{default:()=>an});var p=a(6252);const t=(0,p._)("h1",{id:"路由",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#路由","aria-hidden":"true"},"#"),(0,p.Uk)(" 路由")],-1),e=(0,p.Uk)("像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 "),o=(0,p._)("code",null,"Vue Router",-1),r=(0,p.Uk)(" 实现的路由，想了解更多的同学可以看看"),l={href:"https://next.router.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},c=(0,p.Uk)("官方文档"),u=(0,p.Uk)("。"),i=(0,p.uE)('

    路由配置

    在配置文件 .fes.js中通过 router 进行配置。

    export default {\n    router: {\n        routes: [],\n        mode: 'hash'\n    }\n}\n
    1
    2
    3
    4
    5
    6

    routes

    ',4),k=(0,p._)("code",null,"routes",-1),b=(0,p.Uk)(" 是配置添加到路由的初始路由列表，格式为路由信息的数组。具体使用参考 "),m={href:"https://next.router.vuejs.org/zh/guide/",target:"_blank",rel:"noopener noreferrer"},d=(0,p.Uk)("Vue Router 文档"),g=(0,p.Uk)(" 中关于路由配置、路由匹配相关内容。"),h=(0,p._)("h3",{id:"mode",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#mode","aria-hidden":"true"},"#"),(0,p.Uk)(" mode")],-1),y=(0,p._)("p",null,"创建历史记录的类型：",-1),_=(0,p._)("strong",null,"history",-1),v=(0,p.Uk)("，对应 "),q={href:"https://next.router.vuejs.org/zh/api/#createwebhistory",target:"_blank",rel:"noopener noreferrer"},f=(0,p.Uk)("createWebHistory"),x=(0,p._)("strong",null,"hash",-1),U=(0,p.Uk)("，对应 "),j={href:"https://next.router.vuejs.org/zh/api/#createWebHashHistory",target:"_blank",rel:"noopener noreferrer"},E=(0,p.Uk)("createWebHashHistory"),w=(0,p._)("strong",null,"memory",-1),R=(0,p.Uk)("，对应 "),W={href:"https://next.router.vuejs.org/zh/api/#createWebHashHistory",target:"_blank",rel:"noopener noreferrer"},B=(0,p.Uk)("createMemoryHistory"),H=(0,p.uE)('

    默认是hash模式。

    约定式路由

    约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。

    约定规范

    比如以下文件结构：

    pages\n├── index.vue         # 根路由页面 路径为 /\n├── *.vue             # 模糊匹配 路径为 *\n├── a.vue             # 路径 /a\n├── b                 # 文件夹b\n│   ├── index.vue     # 路径 /b\n│   ├── @id.vue       # 动态路由 /b/:id\n│   ├── c.vue         # 路径 /b/c\n│   └── layout.vue    # /b 路径下所有页面公共的布局组件\n└── layout.vue        # 根路由下所有页面共用的布局组件\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    编译后会得到以下路由配置：

    [\n    {\n        "path": "/",\n        "component": require('@/pages/layout').default,\n        "count": 5,\n        "children": [\n            {\n                "path": "/a",\n                "component": require('@/pages/a').default,\n                "name": "a",\n                "meta": {},\n                "count": 7\n            },\n            {\n                "path": "/b",\n                "component": require('@/pages/b/layout').default,\n                "count": 7,\n                "children": [\n                    {\n                        "path": "/b/c",\n                        "component": require('@/pages/b/c').default,\n                        "name": "b_c",\n                        "meta": {},\n                        "count": 14\n                    },\n                    {\n                        "path": "/b/:id",\n                        "component": require('@/pages/b/@id').default,\n                        "name": "b__id",\n                        "meta": {},\n                        "count": 13\n                    },\n                    {\n                        "path": "/b",\n                        "component": require('@/pages/b/index').default,\n                        "name": "b_index",\n                        "meta": {},\n                        "count": 7\n                    }\n                ]\n            },\n            {\n                "path": "/",\n                "component": require('@/pages/index').default,\n                "name": "index",\n                "meta": {},\n                "count": 5\n            },\n            {\n                "path": "/:pathMatch(.*)",\n                "component": require('@/pages/*').default,\n                "name": "FUZZYMATCH",\n                "meta": {},\n                "count": 3\n            }\n        ]\n    }\n]\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58

    需要注意的是，满足以下任意规则的文件不会被注册为路由：

    • 不是 .vue .jsx 文件
    • components 目录中的文件

    动态路由

    Fes.js 里约定以 @ 开头的文件或文件夹映射为动态路由。 比如：

    • src/pages/users/@id.vue 会成为 /users/:id
    • src/pages/users/@id/settings.vue 会成为 /users/:id/settings

    嵌套路由

    Fes.js 里约定目录下有 layout.vue 时会生成嵌套路由，以 layout.vue 为该目录的公共父组件，layout.vue 中必须实现 RouterView

    比如以下目录结构：

    pages\n└── users\n    ├── layout.vue\n    ├── index.vue\n    └── list.vue\n
    1
    2
    3
    4
    5

    会生成路由：

    [\n    { \n        path: '/users', component: require('@/pages/users/layout').default,\n        children: [\n            { path: '/users', component: require('@/pages/users/index').default },\n            { path: '/users/list', component: require('@/pages/users/list').default },\n        ]\n    }\n]\n
    1
    2
    3
    4
    5
    6
    7
    8
    9

    模糊匹配

    ',20),z=(0,p.Uk)("Fes.js 下约定文件名为 "),F=(0,p._)("code",null,"*",-1),D=(0,p.Uk)(" 的路由是模糊匹配路由，可以用此特性实现 "),M={href:"https://next.router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E8%B7%AF%E7%94%B1%E6%88%96-404-not-found-%E8%B7%AF%E7%94%B1",target:"_blank",rel:"noopener noreferrer"},A=(0,p.Uk)("404 路由"),C=(0,p.Uk)("。"),V=(0,p.uE)('

    比如以下目录结构：

    pages\n├── index.vue         # 根路由页面 路径为 /\n└── *.vue             # 模糊匹配 路径为 *\n
    1
    2
    3

    会生成路由：

    [\n    { \n        path: '/', component: require('@/pages/index').default, count: 5\n    },\n    {\n        path: '/:pathMatch(.*)', component: require('@/pages/**').default, count: 3\n    }\n]\n
    1
    2
    3
    4
    5
    6
    7
    8

    这样，如果访问 /foo，/ 不能匹配，会 fallback 到 * 路由，通过 src/pages/*.vue 进行渲染。

    扩展路由元信息

    我们在定义路由时可以配置meta字段，用来记录一些跟路由相关的信息：

    const router = new VueRouter({\n  routes: [\n    {\n      path: '/foo',\n      component: Foo,\n      children: [\n        {\n          path: 'bar',\n          component: Bar,\n          // a meta field\n          meta: { requiresAuth: true }\n        }\n      ]\n    }\n  ]\n})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    接下来我们来配置 meta：

    ',9),Z=(0,p._)("div",{class:"language-vue ext-vue line-numbers-mode"},[(0,p._)("pre",{class:"language-vue"},[(0,p._)("code",null,[(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token punctuation"},"<"),(0,p.Uk)("config")]),(0,p._)("span",{class:"token punctuation"},">")]),(0,p.Uk)('\n{\n "name": "store",\n "title": "vuex测试"\n}\n'),(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token tag"},[(0,p._)("span",{class:"token punctuation"},"")]),(0,p.Uk)("\n")])]),(0,p._)("div",{class:"line-numbers"},[(0,p._)("span",{class:"line-number"},"1"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"2"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"3"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"4"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"5"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"6"),(0,p._)("br")])],-1),I=(0,p._)("div",{class:"language-jsx ext-jsx line-numbers-mode"},[(0,p._)("pre",{class:"language-jsx"},[(0,p._)("code",null,[(0,p._)("span",{class:"token keyword"},"import"),(0,p.Uk)(),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)(" defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)(" useRoute "),(0,p._)("span",{class:"token punctuation"},"}"),(0,p.Uk)(),(0,p._)("span",{class:"token keyword"},"from"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},"'@fesjs/fes'"),(0,p._)("span",{class:"token punctuation"},";"),(0,p.Uk)("\n"),(0,p._)("span",{class:"token function"},"defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},"("),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)("\n "),(0,p._)("span",{class:"token literal-property property"},"name"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"store"'),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)("\n "),(0,p._)("span",{class:"token literal-property property"},"title"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"vuex测试"'),(0,p.Uk)("\n"),(0,p._)("span",{class:"token punctuation"},"}"),(0,p._)("span",{class:"token punctuation"},")"),(0,p.Uk)("\n")])]),(0,p._)("div",{class:"line-numbers"},[(0,p._)("span",{class:"line-number"},"1"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"2"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"3"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"4"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"5"),(0,p._)("br")])],-1),G=(0,p._)("div",{class:"language-tsx ext-tsx line-numbers-mode"},[(0,p._)("pre",{class:"language-tsx"},[(0,p._)("code",null,[(0,p._)("span",{class:"token keyword"},"import"),(0,p.Uk)(),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)(" defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)(" useRoute "),(0,p._)("span",{class:"token punctuation"},"}"),(0,p.Uk)(),(0,p._)("span",{class:"token keyword"},"from"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},"'@fesjs/fes'"),(0,p._)("span",{class:"token punctuation"},";"),(0,p.Uk)("\n"),(0,p._)("span",{class:"token function"},"defineRouteMeta"),(0,p._)("span",{class:"token punctuation"},"("),(0,p._)("span",{class:"token punctuation"},"{"),(0,p.Uk)("\n name"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"store"'),(0,p._)("span",{class:"token punctuation"},","),(0,p.Uk)("\n title"),(0,p._)("span",{class:"token operator"},":"),(0,p.Uk)(),(0,p._)("span",{class:"token string"},'"vuex测试"'),(0,p.Uk)("\n"),(0,p._)("span",{class:"token punctuation"},"}"),(0,p._)("span",{class:"token punctuation"},")"),(0,p.Uk)("\n")])]),(0,p._)("div",{class:"line-numbers"},[(0,p._)("span",{class:"line-number"},"1"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"2"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"3"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"4"),(0,p._)("br"),(0,p._)("span",{class:"line-number"},"5"),(0,p._)("br")])],-1),L=(0,p.uE)('

    则编译后的路由配置为：

    [\n    { \n        path: '/a', \n        component: require('@/pages/a').default, \n        meta: {\n            "name": "store",\n            "title": "vuex测试"\n        }\n    },\n]\n




     
     
     
     


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    智能路由

    可以看到，编译后路由都会有 count 属性，这是我们根据精准匹配优先算法原则设计出路由排名算法，对匹配到的路由打分：

    • 路由的路径每个子项得到4分
    • 子项为静态细分(/list)再加3分
    • 子项为动态细分（/:orderId）再加2分
    • 根段(/)再1分
    • 通配符(*)匹配到的减去1分

    当我们跳转路由时，如果 URL 匹配到多个路由，则选择分数最高的路由。

    路由跳转

    ',7),O=(0,p.Uk)("想学习更多，可以查看 "),P={href:"https://next.router.vuejs.org/zh/guide/essentials/navigation.html#%E6%9B%BF%E6%8D%A2%E5%BD%93%E5%89%8D%E4%BD%8D%E7%BD%AE",target:"_blank",rel:"noopener noreferrer"},T=(0,p.Uk)("Vue Router 官方文档"),Y=(0,p.Uk)("。"),N=(0,p.uE)('

    声明式

    <template>\n    <router-link to="/home">Home</router-link>\n</template>\n
    1
    2
    3

    命令式

    ',3),J=(0,p.Uk)("页面跳转 API 由 "),K=(0,p._)("code",null,"router",-1),Q=(0,p.Uk)(" 实例提供，查看 "),S={href:"https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},X=(0,p.Uk)("Vue Rouer 文档"),$=(0,p.Uk)("了解更多。"),nn=(0,p.uE)('
    import { useRouter } from '@fesjs/fes';\n\nexport default {\n    setup(){\n        const router = useRouter();\n        // 这三种形式是等价的\n        router.push('/users/posva#bio')\n        router.push({ path: '/users/posva', hash: '#bio' })\n        router.push({ name: 'users', params: { username: 'posva' }, hash: '#bio' })\n        // 只改变 hash\n        router.push({ hash: '#bio' })\n        // 只改变 query\n        router.push({ query: { page: '2' } })\n        // 只改变 param\n        router.push({ params: { username: 'jolyne' } })\n\n        // 跳转到上一个路由\n        router.goBack();\n\n        // \b跳转到前一个历史记录\n        router.go(1);\n\n        // 替换历史堆栈中的记录\n        router.replace('/new');\n    }\n}\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    ',1),sn={},an=(0,a(3744).Z)(sn,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),sn=(0,p.up)("CodeGroupItem"),an=(0,p.up)("CodeGroup");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[e,o,r,(0,p._)("a",l,[c,(0,p.Wm)(a)]),u]),i,(0,p._)("p",null,[k,b,(0,p._)("a",m,[d,(0,p.Wm)(a)]),g]),h,y,(0,p._)("ul",null,[(0,p._)("li",null,[_,v,(0,p._)("a",q,[f,(0,p.Wm)(a)])]),(0,p._)("li",null,[x,U,(0,p._)("a",j,[E,(0,p.Wm)(a)])]),(0,p._)("li",null,[w,R,(0,p._)("a",W,[B,(0,p.Wm)(a)])])]),H,(0,p._)("p",null,[z,F,D,(0,p._)("a",M,[A,(0,p.Wm)(a)]),C]),V,(0,p.Wm)(an,null,{default:(0,p.w5)((()=>[(0,p.Wm)(sn,{title:"vue",active:""},{default:(0,p.w5)((()=>[Z])),_:1}),(0,p.Wm)(sn,{title:"jsx"},{default:(0,p.w5)((()=>[I])),_:1}),(0,p.Wm)(sn,{title:"tsx"},{default:(0,p.w5)((()=>[G])),_:1})])),_:1}),L,(0,p._)("p",null,[O,(0,p._)("a",P,[T,(0,p.Wm)(a)]),Y]),N,(0,p._)("p",null,[J,K,Q,(0,p._)("a",S,[X,(0,p.Wm)(a)]),$]),nn],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-6f2f6a5a.defd4698.js b/assets/js/v-6f2f6a5a.defd4698.js deleted file mode 100644 index feef0637..00000000 --- a/assets/js/v-6f2f6a5a.defd4698.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[658],{9465:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-6f2f6a5a",path:"/reference/plugin/plugins/pinia.html",title:"@fesjs/plugin-pinia",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"API",slug:"api",children:[{level:3,title:"pinia",slug:"pinia",children:[]}]},{level:2,title:"使用",slug:"使用",children:[{level:3,title:"定义 store",slug:"定义-store",children:[]},{level:3,title:"setup",slug:"setup",children:[]},{level:3,title:"非setup",slug:"非setup",children:[]}]}],filePathRelative:"reference/plugin/plugins/pinia.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},1437:(n,s,a)=>{a.r(s),a.d(s,{default:()=>k});var e=a(6252);const p=(0,e._)("h1",{id:"fesjs-plugin-pinia",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#fesjs-plugin-pinia","aria-hidden":"true"},"#"),(0,e.Uk)(" @fesjs/plugin-pinia")],-1),t=(0,e._)("h2",{id:"介绍",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,e.Uk)(" 介绍")],-1),o=(0,e.Uk)("集成 "),c={href:"https://pinia.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},l=(0,e.Uk)("pinia"),r=(0,e.Uk)(" ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。"),i=(0,e.uE)('

    为了防止 Fes.js 与 pinia 提供的 API 冲突，Fes.js不提供任何 pinia 的API，相关API直接从 pinia 导出：

    import { defineStore } from 'pinia';\n
    1

    约定 plugin 定义放在 stores 目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。

    └── src\n    ├── pages\n    │    └── index.vue\n    └── stores \n    │    ├── plugin-logger.js       \n    │    ├── user.js\n    └── app.js\n
    1
    2
    3
    4
    5
    6
    7

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-pinia": "^2.0.0",\n        "pinia": "^2.0.11"\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7

    API

    pinia

    createPinia执行后创建的实例。

    import { pinia } from '@fesjs/fes'\n
    1

    使用

    定义 store

    我们在 src/store/main.js中：

    import { defineStore } from 'pinia'\n\n// useStore could be anything like useUser, useCart\n// the first argument is a unique id of the store across your application\nexport const useStore = defineStore('main', {\n  // other options...\n})\n
    1
    2
    3
    4
    5
    6
    7

    setup

    import { useStore } from '@/store/main'\nexport default {\n    setup(){\n        const store = useStore()\n    }\n}\n
    1
    2
    3
    4
    5
    6

    非setup

    比如在app.js中:

    import { pinia } from '@fesjs/fes'\n\nexport const beforeRender = {\n    loading: <PageLoading />,\n    action() {\n        const { setRole } = accessApi;\n        return new Promise((resolve) => {\n            setTimeout(() => {\n                const store = useStore(pinia);\n                store.$patch({\n                    userName: '李雷',\n                    role: 'admin'\n                });\n                setRole('admin');\n            }, 1000);\n        });\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    ',20),u={},k=(0,a(3744).Z)(u,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,t,(0,e._)("p",null,[o,(0,e._)("a",c,[l,(0,e.Wm)(a)]),r]),i],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-6f2f6a5a.fa087967.js b/assets/js/v-6f2f6a5a.fa087967.js new file mode 100644 index 00000000..1aae6d8d --- /dev/null +++ b/assets/js/v-6f2f6a5a.fa087967.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[658],{9465:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-6f2f6a5a",path:"/reference/plugin/plugins/pinia.html",title:"@fesjs/plugin-pinia",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"API",slug:"api",children:[{level:3,title:"pinia",slug:"pinia",children:[]}]},{level:2,title:"使用",slug:"使用",children:[{level:3,title:"定义 store",slug:"定义-store",children:[]},{level:3,title:"setup",slug:"setup",children:[]},{level:3,title:"非setup",slug:"非setup",children:[]}]}],filePathRelative:"reference/plugin/plugins/pinia.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},1437:(n,s,a)=>{a.r(s),a.d(s,{default:()=>k});var e=a(6252);const p=(0,e._)("h1",{id:"fesjs-plugin-pinia",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#fesjs-plugin-pinia","aria-hidden":"true"},"#"),(0,e.Uk)(" @fesjs/plugin-pinia")],-1),t=(0,e._)("h2",{id:"介绍",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,e.Uk)(" 介绍")],-1),o=(0,e.Uk)("集成 "),c={href:"https://pinia.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},l=(0,e.Uk)("pinia"),r=(0,e.Uk)(" ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。"),i=(0,e.uE)('

    为了防止 Fes.js 与 pinia 提供的 API 冲突，Fes.js不提供任何 pinia 的API，相关API直接从 pinia 导出：

    import { defineStore } from 'pinia';\n
    1

    约定 plugin 定义放在 stores 目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。

    └── src\n    ├── pages\n    │    └── index.vue\n    └── stores \n    │    ├── plugin-logger.js       \n    │    ├── user.js\n    └── app.js\n
    1
    2
    3
    4
    5
    6
    7

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-pinia": "^2.0.0",\n        "pinia": "^2.0.11"\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7

    API

    pinia

    createPinia执行后创建的实例。

    import { pinia } from '@fesjs/fes'\n
    1

    使用

    定义 store

    我们在 src/store/main.js中：

    import { defineStore } from 'pinia'\n\n// useStore could be anything like useUser, useCart\n// the first argument is a unique id of the store across your application\nexport const useStore = defineStore('main', {\n  // other options...\n})\n
    1
    2
    3
    4
    5
    6
    7

    setup

    import { useStore } from '@/store/main'\nexport default {\n    setup(){\n        const store = useStore()\n    }\n}\n
    1
    2
    3
    4
    5
    6

    非setup

    比如在app.js中:

    import { pinia } from '@fesjs/fes'\n\nexport const beforeRender = {\n    loading: <PageLoading />,\n    action() {\n        const { setRole } = accessApi;\n        return new Promise((resolve) => {\n            setTimeout(() => {\n                const store = useStore(pinia);\n                store.$patch({\n                    userName: '李雷',\n                    role: 'admin'\n                });\n                setRole('admin');\n            }, 1000);\n        });\n    }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    ',20),u={},k=(0,a(3744).Z)(u,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,t,(0,e._)("p",null,[o,(0,e._)("a",c,[l,(0,e.Wm)(a)]),r]),i],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-76cb52e8.d00f653f.js b/assets/js/v-76cb52e8.d00f653f.js new file mode 100644 index 00000000..952e3f7e --- /dev/null +++ b/assets/js/v-76cb52e8.d00f653f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[872],{7937:(e,n,s)=>{s.r(n),s.d(n,{data:()=>a});const a={key:"v-76cb52e8",path:"/reference/cli/",title:"命令行工具",lang:"zh-CN",frontmatter:{sidebar:"auto"},excerpt:"",headers:[{level:2,title:"create-fes-app",slug:"create-fes-app",children:[]},{level:2,title:"fes",slug:"fes",children:[{level:3,title:"fes dev",slug:"fes-dev",children:[]},{level:3,title:"fes build",slug:"fes-build",children:[]},{level:3,title:"fes help",slug:"fes-help",children:[]},{level:3,title:"fes info",slug:"fes-info",children:[]},{level:3,title:"fes webpack",slug:"fes-webpack",children:[]}]}],filePathRelative:"reference/cli/README.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},3670:(e,n,s)=>{s.r(n),s.d(n,{default:()=>d});var a=s(6252);const l=(0,a.uE)('

    命令行工具

    create-fes-app

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

    Usage: create-fes-app <name>\n\nOptions:\n    -v, --version            Output the current version\n    -h, --help               Display help for command   \n    -f, --force              Overwrite target directory if it exists\n    -m, --merge              Merge target directory if it exists\n
    1
    2
    3
    4
    5
    6
    7

    可以在本机安装后使用：

    ',5),r=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 全局安装"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" global "),(0,a._)("span",{class:"token function"},"add"),(0,a.Uk)(" @fesjs/create-fes-app\n\n"),(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\ncreate-fes-app fes-app\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br")])],-1),p=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 全局安装"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" i -g @fesjs/create-fes-app\n\n"),(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\ncreate-fes-app fes-app\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br")])],-1),i=(0,a._)("p",null,[(0,a.Uk)("推荐使用 "),(0,a._)("code",null,"yarn create"),(0,a.Uk)(" 和 "),(0,a._)("code",null,"npx"),(0,a.Uk)(" 方式创建模板，一直使用最新的模板：")],-1),c=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" create @fesjs/fes-app myapp\n\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" \n\n"),(0,a._)("span",{class:"token comment"},"# 运行"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" dev\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br")])],-1),t=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\nnpx @fesjs/create-fes-app myapp\n\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(),(0,a._)("span",{class:"token function"},"install"),(0,a.Uk)(" \n\n"),(0,a._)("span",{class:"token comment"},"# 运行"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" run dev\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br")])],-1),b=(0,a.uE)('

    fes

    需要在项目根目录执行 fes 命令，输入fes -h则可以看到如下信息：

    Usage: fes <command> [options]\n\n一个好用的前端应用解决方案\n\nOptions:\n  -v, --vers         output the current version\n  -h, --help         display help for command\n\nCommands:\n  build              build application for production\n  dev [options]      start a local http service for development\n  help               show command helps\n  info               print debugging information about your environment\n  webpack [options]  inspect webpack configurations\n\n  Run fes <command> --help for detailed usage of given command.\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    fes dev

    启动本地开发服务器进行项目的开发调试。

    Usage: fes dev [options]\n\nstart a local http service for development\n\nOptions:\n  --port      http service port, like 8080\n  --https     whether to turn on the https service\n  -h, --help  display help for command\n
    1
    2
    3
    4
    5
    6
    7
    8

    比如：

    fes dev --port=8080\n
    1

    fes build

    编译构建 web 产物。

    Usage: fes build [options]\n\nbuild application for production\n\nOptions:\n  -h, --help  display help for command\n
    1
    2
    3
    4
    5
    6

    比如：

    fes build\n
    1

    fes help

    打印帮助文档。 比如：

    fes help\n
    1

    fes info

    打印当前项目的有用的环境信息，用来帮助定位问题。

    Usage: fes info [options]\n\nprint debugging information about your environment\n\nOptions:\n  -h, --help  display help for command\n
    1
    2
    3
    4
    5
    6

    比如：

    fes info\n
    1

    fes webpack

    查看项目使用的 webpack 配置。

    Usage: fes webpack [options]\n\ninspect webpack configurations\n\nOptions:\n  --rule <ruleName>      inspect a specific module rule\n  --plugin <pluginName>  inspect a specific plugin\n  --rules                list all module rule names\n  --plugins              list all plugin names\n  --verbose              show full function definitions in output\n  -h, --help             display help for command\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    比如：

    fes webpack\n
    1
    ',26),u={},d=(0,s(3744).Z)(u,[["render",function(e,n){const s=(0,a.up)("CodeGroupItem"),u=(0,a.up)("CodeGroup");return(0,a.wg)(),(0,a.iD)(a.HY,null,[l,(0,a.Wm)(u,null,{default:(0,a.w5)((()=>[(0,a.Wm)(s,{title:"YARN",active:""},{default:(0,a.w5)((()=>[r])),_:1}),(0,a.Wm)(s,{title:"NPM"},{default:(0,a.w5)((()=>[p])),_:1})])),_:1}),i,(0,a.Wm)(u,null,{default:(0,a.w5)((()=>[(0,a.Wm)(s,{title:"YARN",active:""},{default:(0,a.w5)((()=>[c])),_:1}),(0,a.Wm)(s,{title:"NPM"},{default:(0,a.w5)((()=>[t])),_:1})])),_:1}),b],64)}]])},3744:(e,n)=>{n.Z=(e,n)=>{const s=e.__vccOpts||e;for(const[e,a]of n)s[e]=a;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-76cb52e8.da6ef2dc.js b/assets/js/v-76cb52e8.da6ef2dc.js deleted file mode 100644 index d94fdeac..00000000 --- a/assets/js/v-76cb52e8.da6ef2dc.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[872],{7937:(e,n,s)=>{s.r(n),s.d(n,{data:()=>a});const a={key:"v-76cb52e8",path:"/reference/cli/",title:"命令行工具",lang:"zh-CN",frontmatter:{sidebar:"auto"},excerpt:"",headers:[{level:2,title:"create-fes-app",slug:"create-fes-app",children:[]},{level:2,title:"fes",slug:"fes",children:[{level:3,title:"fes dev",slug:"fes-dev",children:[]},{level:3,title:"fes build",slug:"fes-build",children:[]},{level:3,title:"fes help",slug:"fes-help",children:[]},{level:3,title:"fes info",slug:"fes-info",children:[]},{level:3,title:"fes webpack",slug:"fes-webpack",children:[]}]}],filePathRelative:"reference/cli/README.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},3670:(e,n,s)=>{s.r(n),s.d(n,{default:()=>d});var a=s(6252);const l=(0,a.uE)('

    命令行工具

    create-fes-app

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

    Usage: create-fes-app <name>\n\nOptions:\n    -v, --version            Output the current version\n    -h, --help               Display help for command   \n    -f, --force              Overwrite target directory if it exists\n    -m, --merge              Merge target directory if it exists\n
    1
    2
    3
    4
    5
    6
    7

    可以在本机安装后使用：

    ',5),r=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 全局安装"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" global "),(0,a._)("span",{class:"token function"},"add"),(0,a.Uk)(" @fesjs/create-fes-app\n\n"),(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\ncreate-fes-app fes-app\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br")])],-1),p=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 全局安装"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" i -g @fesjs/create-fes-app\n\n"),(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\ncreate-fes-app fes-app\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br")])],-1),i=(0,a._)("p",null,[(0,a.Uk)("推荐使用 "),(0,a._)("code",null,"yarn create"),(0,a.Uk)(" 和 "),(0,a._)("code",null,"npx"),(0,a.Uk)(" 方式创建模板，一直使用最新的模板：")],-1),c=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" create @fesjs/fes-app myapp\n\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" \n\n"),(0,a._)("span",{class:"token comment"},"# 运行"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" dev\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br")])],-1),t=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\nnpx @fesjs/create-fes-app myapp\n\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(),(0,a._)("span",{class:"token function"},"install"),(0,a.Uk)(" \n\n"),(0,a._)("span",{class:"token comment"},"# 运行"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" run dev\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br")])],-1),b=(0,a.uE)('

    fes

    需要在项目根目录执行 fes 命令，输入fes -h则可以看到如下信息：

    Usage: fes <command> [options]\n\n一个好用的前端应用解决方案\n\nOptions:\n  -v, --vers         output the current version\n  -h, --help         display help for command\n\nCommands:\n  build              build application for production\n  dev [options]      start a local http service for development\n  help               show command helps\n  info               print debugging information about your environment\n  webpack [options]  inspect webpack configurations\n\n  Run fes <command> --help for detailed usage of given command.\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    fes dev

    启动本地开发服务器进行项目的开发调试。

    Usage: fes dev [options]\n\nstart a local http service for development\n\nOptions:\n  --port      http service port, like 8080\n  --https     whether to turn on the https service\n  -h, --help  display help for command\n
    1
    2
    3
    4
    5
    6
    7
    8

    比如：

    fes dev --port=8080\n
    1

    fes build

    编译构建 web 产物。

    Usage: fes build [options]\n\nbuild application for production\n\nOptions:\n  -h, --help  display help for command\n
    1
    2
    3
    4
    5
    6

    比如：

    fes build\n
    1

    fes help

    打印帮助文档。 比如：

    fes help\n
    1

    fes info

    打印当前项目的有用的环境信息，用来帮助定位问题。

    Usage: fes info [options]\n\nprint debugging information about your environment\n\nOptions:\n  -h, --help  display help for command\n
    1
    2
    3
    4
    5
    6

    比如：

    fes info\n
    1

    fes webpack

    查看项目使用的 webpack 配置。

    Usage: fes webpack [options]\n\ninspect webpack configurations\n\nOptions:\n  --rule <ruleName>      inspect a specific module rule\n  --plugin <pluginName>  inspect a specific plugin\n  --rules                list all module rule names\n  --plugins              list all plugin names\n  --verbose              show full function definitions in output\n  -h, --help             display help for command\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    比如：

    fes webpack\n
    1
    ',26),u={},d=(0,s(3744).Z)(u,[["render",function(e,n){const s=(0,a.up)("CodeGroupItem"),u=(0,a.up)("CodeGroup");return(0,a.wg)(),(0,a.iD)(a.HY,null,[l,(0,a.Wm)(u,null,{default:(0,a.w5)((()=>[(0,a.Wm)(s,{title:"YARN",active:""},{default:(0,a.w5)((()=>[r])),_:1}),(0,a.Wm)(s,{title:"NPM"},{default:(0,a.w5)((()=>[p])),_:1})])),_:1}),i,(0,a.Wm)(u,null,{default:(0,a.w5)((()=>[(0,a.Wm)(s,{title:"YARN",active:""},{default:(0,a.w5)((()=>[c])),_:1}),(0,a.Wm)(s,{title:"NPM"},{default:(0,a.w5)((()=>[t])),_:1})])),_:1}),b],64)}]])},3744:(e,n)=>{n.Z=(e,n)=>{const s=e.__vccOpts||e;for(const[e,a]of n)s[e]=a;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-76cd065c.3f7c8653.js b/assets/js/v-76cd065c.3f7c8653.js deleted file mode 100644 index d9731ae0..00000000 --- a/assets/js/v-76cd065c.3f7c8653.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[476],{436:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-76cd065c",path:"/reference/api/",title:"API",lang:"zh-CN",frontmatter:{sidebar:"auto"},excerpt:"",headers:[{level:2,title:"基础API",slug:"基础api",children:[{level:3,title:"plugin",slug:"plugin",children:[]},{level:3,title:"ApplyPluginsType",slug:"applypluginstype",children:[]}]},{level:2,title:"路由API",slug:"路由api",children:[{level:3,title:"getRouter",slug:"getrouter",children:[]},{level:3,title:"useRoute",slug:"useroute",children:[]},{level:3,title:"useRouter",slug:"userouter",children:[]},{level:3,title:"onBeforeRouteUpdate",slug:"onbeforerouteupdate",children:[]},{level:3,title:"onBeforeRouteLeave",slug:"onbeforerouteleave",children:[]},{level:3,title:"createWebHashHistory",slug:"createwebhashhistory",children:[]},{level:3,title:"createWebHistory",slug:"createwebhistory",children:[]},{level:3,title:"createMemoryHistory",slug:"creatememoryhistory",children:[]},{level:3,title:"createRouter",slug:"createrouter",children:[]},{level:3,title:"RouterLink",slug:"routerlink",children:[]},{level:3,title:"useLink",slug:"uselink",children:[]},{level:3,title:"RouterView",slug:"routerview",children:[]},{level:3,title:"Router Methods",slug:"router-methods",children:[]}]}],filePathRelative:"reference/api/README.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5930:(n,s,a)=>{a.r(s),a.d(s,{default:()=>F});var e=a(6252);const p=(0,e.uE)('

    API

    Fes.js 统一了API的出口，所有运行时API（包含Fes.js内置API和插件提供的API）全部通过@fesjs/fes导出。

    import { someApi  } from "@fesjs/fes"\n
    1

    基础API

    plugin

    提示

    主要在插件里面使用，项目代码中一般用不到。

    运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。

    import { plugin, ApplyPluginsType } from '@fesjs/fes';\n\n// 注册插件\nplugin.register({\n  apply: { dva: { foo: 1 } },\n  path: 'foo',\n});\nplugin.register({\n  apply: { dva: { bar: 1 } },\n  path: 'bar',\n});\n\n// 执行插件\n// 得到 { foo: 1, bar: 1 }\nplugin.applyPlugins({\n  key: 'dva',\n  type: ApplyPluginsType.modify,\n  initialValue: {},\n  args: {},\n  async: false,\n});\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    plugin.register 参数包含:

    • apply 插件文件导出的内容
    • path 插件文件路径

    plugin.applyPlugins 参数包含:

    • key，坑位的 key
    • type，执行方式类型，详见 ApplyPluginsType
    • initialValue，初始值
    • args，参数
    • async，是否异步执行且返回 Promise

    ApplyPluginsType

    提示

    主要在插件里面使用，项目代码中一般用不到。

    运行时插件执行类型，enum 类型，包含三个属性：

    • compose，用于合并执行多个函数，函数可决定前序函数的执行时机
    • modify，用于修改值
    • event，用于执行事件，前面没有依赖关系

    路由API

    ',17),t=(0,e.Uk)("Fes.js 路由基于 "),o={href:"https://next.router.vuejs.org/introduction.html",target:"_blank",rel:"noopener noreferrer"},r=(0,e.Uk)("Vue Router 4.0"),l=(0,e.Uk)("，想了解更多的同学可以看看官方文档。"),c=(0,e.uE)('

    getRouter

    返回当前 router 实例。

    import { getRouter } from "@fesjs/fes";\nconst router = getRouter();\nrouter.push();\n
    1
    2
    3

    useRoute

    返回当前 route 实例，相当于在模板内使用 $route。必须在 setup 函数内调用。

    import { useRoute } from "@fesjs/fes";\nexport default {\n    setup(){\n        const route = useRoute()\n    }\n}\n
    1
    2
    3
    4
    5
    6

    useRouter

    返回 router 实例，相当于在模板语法中使用 $router。必须在 setup 函数内调用。

    import { useRouter } from "@fesjs/fes";\nexport default {\n    setup(){\n        const router = useRouter()\n    }\n}\n
    1
    2
    3
    4
    5
    6

    onBeforeRouteUpdate

    添加导航守卫，在当前路由即将更新时触发。类似于之前的beforeRouteUpdate，但是可用于任何组件。卸载组件时，将移除守卫。

    import { onBeforeRouteUpdate } from "@fesjs/fes";\nexport default {\n    setup(){\n        onBeforeRouteUpdate((to, from, next)=>{\n        })\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7

    onBeforeRouteLeave

    添加导航守卫，在当前路由即将离开时触发。类似于之前的beforeRouteLeave，但可用于任何组件。卸载组件时，将移除守卫。

    import { onBeforeRouteLeave } from "@fesjs/fes";\nexport default {\n    setup(){\n        onBeforeRouteLeave((to, from, next)=>{\n        })\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7

    createWebHashHistory

    提示

    在开发插件时可能用上，平时一般用不上

    创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意URL时这非常有用。注意：如果 SEO 对你很重要，你应该使用 createWebHistory。

    createWebHistory

    提示

    在开发插件时可能用上，平时一般用不上

    创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。

    createMemoryHistory

    提示

    在开发插件时可能用上，平时一般用不上

    创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。

    createRouter

    ',25),u=(0,e.Uk)("创建一个路由器实例，该实例可用于 Vue 应用程序。查看"),i={href:"https://next.router.vuejs.org/api/#routeroptions",target:"_blank",rel:"noopener noreferrer"},k=(0,e.Uk)("路由器选项"),d=(0,e.Uk)("，了解可以传递的所有属性的列表。"),b=(0,e.uE)('

    使用自定义组件路由器链接来创建链接，而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。

    <router-link to="/about">Go to About</router-link>\n
    1
    ',3),h=(0,e.Uk)("可以查看"),m={href:"https://next.router.vuejs.org/api/#router-link-props",target:"_blank",rel:"noopener noreferrer"},g=(0,e.Uk)("官方文档"),v=(0,e.Uk)("了解更多 RouterLink 的 Porps。查看"),f={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},y=(0,e.Uk)("官方文档"),w=(0,e.Uk)("了解 RouterLink 的作用域插槽。"),x=(0,e._)("h3",{id:"uselink",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#uselink","aria-hidden":"true"},"#"),(0,e.Uk)(" useLink")],-1),j=(0,e.Uk)("返回的结果跟 RouterLink 的作用域插槽的属性一致，查看"),R={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},U=(0,e.Uk)("官方API"),_=(0,e.Uk)("了解更多。"),L=(0,e.uE)('
    import { RouterLink, useLink } from '@fesjs/fes'\n\nexport default {\n  name: 'AppLink',\n\n  props: {\n    // add @ts-ignore if using TypeScript\n    ...RouterLink.props,\n    inactiveClass: String,\n  },\n\n  setup(props) {\n    // `props` contains `to` and any other prop that can be passed to <router-link>\n    const { navigate, href, route, isActive, isExactActive } = useLink(props)\n\n    // profit!\n\n    return { isExternalLink }\n  },\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    RouterView

    router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方，以适应你的布局。

    <router-view></router-view>\n<router-view v-slot="{ Component, route }">\n  <component :is="Component" />\n</router-view>\n
    1
    2
    3
    4
    ',4),A=(0,e.Uk)("可以查看"),P={href:"https://next.router.vuejs.org/api/#router-view-props",target:"_blank",rel:"noopener noreferrer"},q=(0,e.Uk)("官方文档"),W=(0,e.Uk)("了解更多 RouterView 的 Porps。查看"),H={href:"https://next.router.vuejs.org/api/#router-view-s-v-slot",target:"_blank",rel:"noopener noreferrer"},I=(0,e.Uk)("官方文档"),E=(0,e.Uk)("了解 RouterView 的作用域插槽。"),V=(0,e._)("h3",{id:"router-methods",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#router-methods","aria-hidden":"true"},"#"),(0,e.Uk)(" Router Methods")],-1),B=(0,e.Uk)("查看"),T={href:"https://next.router.vuejs.org/api/#router-methods",target:"_blank",rel:"noopener noreferrer"},C=(0,e.Uk)("官方文档"),M=(0,e.Uk)("了解更多"),S={},F=(0,a(3744).Z)(S,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("p",null,[t,(0,e._)("a",o,[r,(0,e.Wm)(a)]),l]),c,(0,e._)("p",null,[u,(0,e._)("a",i,[k,(0,e.Wm)(a)]),d]),b,(0,e._)("p",null,[h,(0,e._)("a",m,[g,(0,e.Wm)(a)]),v,(0,e._)("a",f,[y,(0,e.Wm)(a)]),w]),x,(0,e._)("p",null,[j,(0,e._)("a",R,[U,(0,e.Wm)(a)]),_]),L,(0,e._)("p",null,[A,(0,e._)("a",P,[q,(0,e.Wm)(a)]),W,(0,e._)("a",H,[I,(0,e.Wm)(a)]),E]),V,(0,e._)("p",null,[B,(0,e._)("a",T,[C,(0,e.Wm)(a)]),M])],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-76cd065c.ae1ec0a2.js b/assets/js/v-76cd065c.ae1ec0a2.js new file mode 100644 index 00000000..d8ac94dc --- /dev/null +++ b/assets/js/v-76cd065c.ae1ec0a2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[476],{436:(n,s,a)=>{a.r(s),a.d(s,{data:()=>e});const e={key:"v-76cd065c",path:"/reference/api/",title:"API",lang:"zh-CN",frontmatter:{sidebar:"auto"},excerpt:"",headers:[{level:2,title:"基础API",slug:"基础api",children:[{level:3,title:"plugin",slug:"plugin",children:[]},{level:3,title:"ApplyPluginsType",slug:"applypluginstype",children:[]}]},{level:2,title:"路由API",slug:"路由api",children:[{level:3,title:"getRouter",slug:"getrouter",children:[]},{level:3,title:"useRoute",slug:"useroute",children:[]},{level:3,title:"useRouter",slug:"userouter",children:[]},{level:3,title:"onBeforeRouteUpdate",slug:"onbeforerouteupdate",children:[]},{level:3,title:"onBeforeRouteLeave",slug:"onbeforerouteleave",children:[]},{level:3,title:"createWebHashHistory",slug:"createwebhashhistory",children:[]},{level:3,title:"createWebHistory",slug:"createwebhistory",children:[]},{level:3,title:"createMemoryHistory",slug:"creatememoryhistory",children:[]},{level:3,title:"createRouter",slug:"createrouter",children:[]},{level:3,title:"RouterLink",slug:"routerlink",children:[]},{level:3,title:"useLink",slug:"uselink",children:[]},{level:3,title:"RouterView",slug:"routerview",children:[]},{level:3,title:"Router Methods",slug:"router-methods",children:[]}]}],filePathRelative:"reference/api/README.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5930:(n,s,a)=>{a.r(s),a.d(s,{default:()=>F});var e=a(6252);const p=(0,e.uE)('

    API

    Fes.js 统一了API的出口，所有运行时API（包含Fes.js内置API和插件提供的API）全部通过@fesjs/fes导出。

    import { someApi  } from "@fesjs/fes"\n
    1

    基础API

    plugin

    提示

    主要在插件里面使用，项目代码中一般用不到。

    运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。

    import { plugin, ApplyPluginsType } from '@fesjs/fes';\n\n// 注册插件\nplugin.register({\n  apply: { dva: { foo: 1 } },\n  path: 'foo',\n});\nplugin.register({\n  apply: { dva: { bar: 1 } },\n  path: 'bar',\n});\n\n// 执行插件\n// 得到 { foo: 1, bar: 1 }\nplugin.applyPlugins({\n  key: 'dva',\n  type: ApplyPluginsType.modify,\n  initialValue: {},\n  args: {},\n  async: false,\n});\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    plugin.register 参数包含:

    • apply 插件文件导出的内容
    • path 插件文件路径

    plugin.applyPlugins 参数包含:

    • key，坑位的 key
    • type，执行方式类型，详见 ApplyPluginsType
    • initialValue，初始值
    • args，参数
    • async，是否异步执行且返回 Promise

    ApplyPluginsType

    提示

    主要在插件里面使用，项目代码中一般用不到。

    运行时插件执行类型，enum 类型，包含三个属性：

    • compose，用于合并执行多个函数，函数可决定前序函数的执行时机
    • modify，用于修改值
    • event，用于执行事件，前面没有依赖关系

    路由API

    ',17),t=(0,e.Uk)("Fes.js 路由基于 "),o={href:"https://next.router.vuejs.org/introduction.html",target:"_blank",rel:"noopener noreferrer"},r=(0,e.Uk)("Vue Router 4.0"),l=(0,e.Uk)("，想了解更多的同学可以看看官方文档。"),c=(0,e.uE)('

    getRouter

    返回当前 router 实例。

    import { getRouter } from "@fesjs/fes";\nconst router = getRouter();\nrouter.push();\n
    1
    2
    3

    useRoute

    返回当前 route 实例，相当于在模板内使用 $route。必须在 setup 函数内调用。

    import { useRoute } from "@fesjs/fes";\nexport default {\n    setup(){\n        const route = useRoute()\n    }\n}\n
    1
    2
    3
    4
    5
    6

    useRouter

    返回 router 实例，相当于在模板语法中使用 $router。必须在 setup 函数内调用。

    import { useRouter } from "@fesjs/fes";\nexport default {\n    setup(){\n        const router = useRouter()\n    }\n}\n
    1
    2
    3
    4
    5
    6

    onBeforeRouteUpdate

    添加导航守卫，在当前路由即将更新时触发。类似于之前的beforeRouteUpdate，但是可用于任何组件。卸载组件时，将移除守卫。

    import { onBeforeRouteUpdate } from "@fesjs/fes";\nexport default {\n    setup(){\n        onBeforeRouteUpdate((to, from, next)=>{\n        })\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7

    onBeforeRouteLeave

    添加导航守卫，在当前路由即将离开时触发。类似于之前的beforeRouteLeave，但可用于任何组件。卸载组件时，将移除守卫。

    import { onBeforeRouteLeave } from "@fesjs/fes";\nexport default {\n    setup(){\n        onBeforeRouteLeave((to, from, next)=>{\n        })\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7

    createWebHashHistory

    提示

    在开发插件时可能用上，平时一般用不上

    创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意URL时这非常有用。注意：如果 SEO 对你很重要，你应该使用 createWebHistory。

    createWebHistory

    提示

    在开发插件时可能用上，平时一般用不上

    创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。

    createMemoryHistory

    提示

    在开发插件时可能用上，平时一般用不上

    创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。

    createRouter

    ',25),u=(0,e.Uk)("创建一个路由器实例，该实例可用于 Vue 应用程序。查看"),i={href:"https://next.router.vuejs.org/api/#routeroptions",target:"_blank",rel:"noopener noreferrer"},k=(0,e.Uk)("路由器选项"),d=(0,e.Uk)("，了解可以传递的所有属性的列表。"),b=(0,e.uE)('

    使用自定义组件路由器链接来创建链接，而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。

    <router-link to="/about">Go to About</router-link>\n
    1
    ',3),h=(0,e.Uk)("可以查看"),m={href:"https://next.router.vuejs.org/api/#router-link-props",target:"_blank",rel:"noopener noreferrer"},g=(0,e.Uk)("官方文档"),v=(0,e.Uk)("了解更多 RouterLink 的 Porps。查看"),f={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},y=(0,e.Uk)("官方文档"),w=(0,e.Uk)("了解 RouterLink 的作用域插槽。"),x=(0,e._)("h3",{id:"uselink",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#uselink","aria-hidden":"true"},"#"),(0,e.Uk)(" useLink")],-1),j=(0,e.Uk)("返回的结果跟 RouterLink 的作用域插槽的属性一致，查看"),R={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},U=(0,e.Uk)("官方API"),_=(0,e.Uk)("了解更多。"),L=(0,e.uE)('
    import { RouterLink, useLink } from '@fesjs/fes'\n\nexport default {\n  name: 'AppLink',\n\n  props: {\n    // add @ts-ignore if using TypeScript\n    ...RouterLink.props,\n    inactiveClass: String,\n  },\n\n  setup(props) {\n    // `props` contains `to` and any other prop that can be passed to <router-link>\n    const { navigate, href, route, isActive, isExactActive } = useLink(props)\n\n    // profit!\n\n    return { isExternalLink }\n  },\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    RouterView

    router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方，以适应你的布局。

    <router-view></router-view>\n<router-view v-slot="{ Component, route }">\n  <component :is="Component" />\n</router-view>\n
    1
    2
    3
    4
    ',4),q=(0,e.Uk)("可以查看"),A={href:"https://next.router.vuejs.org/api/#router-view-props",target:"_blank",rel:"noopener noreferrer"},P=(0,e.Uk)("官方文档"),W=(0,e.Uk)("了解更多 RouterView 的 Porps。查看"),H={href:"https://next.router.vuejs.org/api/#router-view-s-v-slot",target:"_blank",rel:"noopener noreferrer"},I=(0,e.Uk)("官方文档"),E=(0,e.Uk)("了解 RouterView 的作用域插槽。"),V=(0,e._)("h3",{id:"router-methods",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#router-methods","aria-hidden":"true"},"#"),(0,e.Uk)(" Router Methods")],-1),B=(0,e.Uk)("查看"),T={href:"https://next.router.vuejs.org/api/#router-methods",target:"_blank",rel:"noopener noreferrer"},C=(0,e.Uk)("官方文档"),M=(0,e.Uk)("了解更多"),S={},F=(0,a(3744).Z)(S,[["render",function(n,s){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("p",null,[t,(0,e._)("a",o,[r,(0,e.Wm)(a)]),l]),c,(0,e._)("p",null,[u,(0,e._)("a",i,[k,(0,e.Wm)(a)]),d]),b,(0,e._)("p",null,[h,(0,e._)("a",m,[g,(0,e.Wm)(a)]),v,(0,e._)("a",f,[y,(0,e.Wm)(a)]),w]),x,(0,e._)("p",null,[j,(0,e._)("a",R,[U,(0,e.Wm)(a)]),_]),L,(0,e._)("p",null,[q,(0,e._)("a",A,[P,(0,e.Wm)(a)]),W,(0,e._)("a",H,[I,(0,e.Wm)(a)]),E]),V,(0,e._)("p",null,[B,(0,e._)("a",T,[C,(0,e.Wm)(a)]),M])],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,e]of s)a[n]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-7b48519a.0316d1cc.js b/assets/js/v-7b48519a.0316d1cc.js new file mode 100644 index 00000000..b1c9d2f3 --- /dev/null +++ b/assets/js/v-7b48519a.0316d1cc.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[938],{1362:(n,a,s)=>{s.r(a),s.d(a,{data:()=>t});const t={key:"v-7b48519a",path:"/guide/template.html",title:"HTML 模板",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"自定义模板",slug:"自定义模板",children:[]},{level:2,title:"模板配置",slug:"模板配置",children:[]},{level:2,title:"模板变量",slug:"模板变量",children:[]}],filePathRelative:"guide/template.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5213:(n,a,s)=>{s.r(a),s.d(a,{default:()=>w});var t=s(6252);const p=(0,t._)("h1",{id:"html-模板",tabindex:"-1"},[(0,t._)("a",{class:"header-anchor",href:"#html-模板","aria-hidden":"true"},"#"),(0,t.Uk)(" HTML 模板")],-1),e=(0,t.Uk)("Fes.js 基于 "),l={href:"https://github.com/jantimon/html-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},o=(0,t.Uk)("html-webpack-plugin"),c=(0,t.Uk)(" 实现的模板功能，默认模板内容是："),u=(0,t.uE)('
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width,initial-scale=1.0">\n    <title><%= htmlWebpackPlugin.options.title %></title>\n  </head>\n  <body>\n    <div id="app"></div>\n  </body>\n</html>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    自定义模板

    在 src/public 文件夹中创建index.html，Fes.js 约定如果这个文件存在，则会替换默认模板。

    模板配置

    ',4),i=(0,t.Uk)("在配置文件（"),r=(0,t._)("code",null,".fes.js",-1),k=(0,t.Uk)("）中配置 "),d=(0,t._)("code",null,"html",-1),g=(0,t.Uk)("，把"),m={href:"https://github.com/jantimon/html-webpack-plugin#options",target:"_blank",rel:"noopener noreferrer"},b=(0,t.Uk)("配置"),h=(0,t.Uk)("的对象作为参数传入 "),v=(0,t._)("code",null,"html-webpack-plugin",-1),q=(0,t.Uk)(" 实例。"),f=(0,t.uE)('

    举个 🌰 ：

    export default {\n    html: {\n        title: '海贼王'\n    }\n}\n
    1
    2
    3
    4
    5

    页面的标题会设置成'海贼王'。

    模板变量

    当然我们也可以手动编写模板，在模板中添加link、link、meta等标签。在我们手动配置模板时，有时候需要用到一些环境变量，模板里可以获取到的变量如下：

    • htmlWebpackPlugin，特定于此插件的数据
    • webpackConfig，用于此编译的webpack配置。例如，它可用于获取publicPath（webpackConfig.output.publicPath）。
    • compilation，webpack编译对象。例如，可以使用它来获取已处理资产的内容，并将其直接内联到页面中compilation.assets[...].source()

    举个 🌰 ：

    <link rel="icon" type="image/x-icon" href="<%= webpackConfig.output.publicPath %>favicon.png" />\n
    1

    除上述 html-webpack-plugin 插件提供的变量外，Fes.js 还把 process.env 中的环境变量添加到模板作用域内：

    • NODE_ENV
    • FES_ENV
    • .env 文件中以 FES_APP_ 开头的变量

    举个 🌰 ：

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">\n
    1
    ',12),_={},w=(0,s(3744).Z)(_,[["render",function(n,a){const s=(0,t.up)("OutboundLink");return(0,t.wg)(),(0,t.iD)(t.HY,null,[p,(0,t._)("p",null,[e,(0,t._)("a",l,[o,(0,t.Wm)(s)]),c]),u,(0,t._)("p",null,[i,r,k,d,g,(0,t._)("a",m,[b,(0,t.Wm)(s)]),h,v,q]),f],64)}]])},3744:(n,a)=>{a.Z=(n,a)=>{const s=n.__vccOpts||n;for(const[n,t]of a)s[n]=t;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-7b48519a.15d5a129.js b/assets/js/v-7b48519a.15d5a129.js deleted file mode 100644 index 180e2d7f..00000000 --- a/assets/js/v-7b48519a.15d5a129.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[938],{1362:(n,a,s)=>{s.r(a),s.d(a,{data:()=>t});const t={key:"v-7b48519a",path:"/guide/template.html",title:"HTML 模板",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"自定义模板",slug:"自定义模板",children:[]},{level:2,title:"模板配置",slug:"模板配置",children:[]},{level:2,title:"模板变量",slug:"模板变量",children:[]}],filePathRelative:"guide/template.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5213:(n,a,s)=>{s.r(a),s.d(a,{default:()=>w});var t=s(6252);const p=(0,t._)("h1",{id:"html-模板",tabindex:"-1"},[(0,t._)("a",{class:"header-anchor",href:"#html-模板","aria-hidden":"true"},"#"),(0,t.Uk)(" HTML 模板")],-1),e=(0,t.Uk)("Fes.js 基于 "),l={href:"https://github.com/jantimon/html-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},o=(0,t.Uk)("html-webpack-plugin"),c=(0,t.Uk)(" 实现的模板功能，默认模板内容是："),u=(0,t.uE)('
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width,initial-scale=1.0">\n    <title><%= htmlWebpackPlugin.options.title %></title>\n  </head>\n  <body>\n    <div id="app"></div>\n  </body>\n</html>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    自定义模板

    在 src/public 文件夹中创建index.html，Fes.js 约定如果这个文件存在，则会替换默认模板。

    模板配置

    ',4),i=(0,t.Uk)("在配置文件（"),r=(0,t._)("code",null,".fes.js",-1),k=(0,t.Uk)("）中配置 "),d=(0,t._)("code",null,"html",-1),g=(0,t.Uk)("，把"),m={href:"https://github.com/jantimon/html-webpack-plugin#options",target:"_blank",rel:"noopener noreferrer"},b=(0,t.Uk)("配置"),h=(0,t.Uk)("的对象作为参数传入 "),v=(0,t._)("code",null,"html-webpack-plugin",-1),q=(0,t.Uk)(" 实例。"),f=(0,t.uE)('

    举个 🌰 ：

    export default {\n    html: {\n        title: '海贼王'\n    }\n}\n
    1
    2
    3
    4
    5

    页面的标题会设置成'海贼王'。

    模板变量

    当然我们也可以手动编写模板，在模板中添加link、link、meta等标签。在我们手动配置模板时，有时候需要用到一些环境变量，模板里可以获取到的变量如下：

    • htmlWebpackPlugin，特定于此插件的数据
    • webpackConfig，用于此编译的webpack配置。例如，它可用于获取publicPath（webpackConfig.output.publicPath）。
    • compilation，webpack编译对象。例如，可以使用它来获取已处理资产的内容，并将其直接内联到页面中compilation.assets[...].source()

    举个 🌰 ：

    <link rel="icon" type="image/x-icon" href="<%= webpackConfig.output.publicPath %>favicon.png" />\n
    1

    除上述 html-webpack-plugin 插件提供的变量外，Fes.js 还把 process.env 中的环境变量添加到模板作用域内：

    • NODE_ENV
    • FES_ENV
    • .env 文件中以 FES_APP_ 开头的变量

    举个 🌰 ：

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">\n
    1
    ',12),_={},w=(0,s(3744).Z)(_,[["render",function(n,a){const s=(0,t.up)("OutboundLink");return(0,t.wg)(),(0,t.iD)(t.HY,null,[p,(0,t._)("p",null,[e,(0,t._)("a",l,[o,(0,t.Wm)(s)]),c]),u,(0,t._)("p",null,[i,r,k,d,g,(0,t._)("a",m,[b,(0,t.Wm)(s)]),h,v,q]),f],64)}]])},3744:(n,a)=>{a.Z=(n,a)=>{const s=n.__vccOpts||n;for(const[n,t]of a)s[n]=t;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-7b96e3a4.61113f81.js b/assets/js/v-7b96e3a4.61113f81.js new file mode 100644 index 00000000..ec9b7add --- /dev/null +++ b/assets/js/v-7b96e3a4.61113f81.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[278],{4731:(n,a,s)=>{s.r(a),s.d(a,{data:()=>t});const t={key:"v-7b96e3a4",path:"/guide/public.html",title:"静态资源",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:3,title:"在HTML模板中使用",slug:"在html模板中使用",children:[]},{level:3,title:"在.vue 和 js 文件中使用",slug:"在-vue-和-js-文件中使用",children:[]}],filePathRelative:"guide/public.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},6430:(n,a,s)=>{s.r(a),s.d(a,{default:()=>p});const t=(0,s(6252).uE)('

    静态资源

    有些内容不需要经过 webpack 模块化处理，则可以将这些内容放在 public 文件夹，构建后会直接复制到 dist 目录，所以你需要通过BASE_URL来引入它们。

    在HTML模板中使用

    在 public/index.html 中需要设置：

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">\n
    1

    在.vue 和 js 文件中使用

    <template>\n  <img :src="`${publicPath}my-image.png`">\n</template>\n<script>\nexport default {\n  setup() {\n    return {\n      publicPath: process.env.BASE_URL\n    }\n  }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ',7),e={},p=(0,s(3744).Z)(e,[["render",function(n,a){return t}]])},3744:(n,a)=>{a.Z=(n,a)=>{const s=n.__vccOpts||n;for(const[n,t]of a)s[n]=t;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-7b96e3a4.6fb5c9db.js b/assets/js/v-7b96e3a4.6fb5c9db.js deleted file mode 100644 index 604952f2..00000000 --- a/assets/js/v-7b96e3a4.6fb5c9db.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[278],{4731:(n,a,s)=>{s.r(a),s.d(a,{data:()=>t});const t={key:"v-7b96e3a4",path:"/guide/public.html",title:"静态资源",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:3,title:"在HTML模板中使用",slug:"在html模板中使用",children:[]},{level:3,title:"在.vue 和 js 文件中使用",slug:"在-vue-和-js-文件中使用",children:[]}],filePathRelative:"guide/public.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},6430:(n,a,s)=>{s.r(a),s.d(a,{default:()=>p});const t=(0,s(6252).uE)('

    静态资源

    有些内容不需要经过 webpack 模块化处理，则可以将这些内容放在 public 文件夹，构建后会直接复制到 dist 目录，所以你需要通过BASE_URL来引入它们。

    在HTML模板中使用

    在 public/index.html 中需要设置：

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">\n
    1

    在.vue 和 js 文件中使用

    <template>\n  <img :src="`${publicPath}my-image.png`">\n</template>\n<script>\nexport default {\n  setup() {\n    return {\n      publicPath: process.env.BASE_URL\n    }\n  }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    ',7),e={},p=(0,s(3744).Z)(e,[["render",function(n,a){return t}]])},3744:(n,a)=>{a.Z=(n,a)=>{const s=n.__vccOpts||n;for(const[n,t]of a)s[n]=t;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-85fa9b2a.ba9d63a7.js b/assets/js/v-85fa9b2a.ba9d63a7.js deleted file mode 100644 index be72c5a1..00000000 --- a/assets/js/v-85fa9b2a.ba9d63a7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[445],{1759:(s,n,a)=>{a.r(n),a.d(n,{data:()=>p});const p={key:"v-85fa9b2a",path:"/guide/config.html",title:"配置",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"本地临时配置文件",slug:"本地临时配置文件",children:[]},{level:2,title:"多环境多份配置",slug:"多环境多份配置",children:[]},{level:2,title:"优先级",slug:"优先级",children:[]}],filePathRelative:"guide/config.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5942:(s,n,a)=>{a.r(n),a.d(n,{default:()=>t});const p=(0,a(6252).uE)('

    配置

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

    一份常见的配置示例如下：

    export default {\n    base: '/foo/',\n    publicPath: '/',\n    devServer: {\n        port: 8080\n    },\n    mock: {\n        prefix: '/v2'\n    },\n    proxy: {\n        '/v2': {\n            'target': 'https://api.douban.com/',\n            'changeOrigin': true, \n        },\n    },\n    layout: {\n        title: "Fes.js",\n        footer: 'Created by MumbelFe',\n        multiTabs: false,\n        menus: [{\n            name: 'index'\n        }, {\n            name: 'onepiece'\n        }, {\n            name: 'store'\n        }, {\n            name: 'simpleList'\n        }]\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30

    本地临时配置文件

    可以新建 .fes.local.js 作为本地临时配置文件。这份配置会和 .fes.js 做 deep merge 后形成最终配置。

    // .fes.js\nexport default { mock: false };\n\n// .fes.local.js\nexport default { \n    mock: true,\n    devServer: { port: 8080 }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8

    最终的配置是：

    { \n    mock: true,\n    devServer: { port: 8080 }\n};\n
    1
    2
    3
    4

    注意

    .fes.local.js 是本地验证使用的临时配置，仅在 fes dev 时有效，请将其添加到 .gitignore，务必不要提交到 git 仓库中。

    多环境多份配置

    可以通过环境变量 FES_ENV 区分不同环境，来指定当前环境的配置文件，这份配置会和 .fes.js 做 deep merge 后形成最终配。

    比如配置如下：

    // .fes.js\nexport default { mock: false };\n\n// .fes.uat.js\nexport default { \n    mock: true,\n    devServer: { port: 8080 }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8

    当我们运行：

    FES_ENV=uat fes dev\n
    1

    这时候会命中 .fes.uat.js 这份环境配置，最终配置是：

    { \n    mock: true,\n    devServer: { port: 8080 }\n};\n
    1
    2
    3
    4

    优先级

    本地临时配置 > 环境配置 > 基础配置

    提示

    如果多份配置中存在相同的配置项，则优先级高的会覆盖优先级低的。

    ',21),e={},t=(0,a(3744).Z)(e,[["render",function(s,n){return p}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,p]of n)a[s]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-85fa9b2a.c339d8e4.js b/assets/js/v-85fa9b2a.c339d8e4.js new file mode 100644 index 00000000..0a53c935 --- /dev/null +++ b/assets/js/v-85fa9b2a.c339d8e4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[445],{1759:(s,n,a)=>{a.r(n),a.d(n,{data:()=>p});const p={key:"v-85fa9b2a",path:"/guide/config.html",title:"配置",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"本地临时配置文件",slug:"本地临时配置文件",children:[]},{level:2,title:"多环境多份配置",slug:"多环境多份配置",children:[]},{level:2,title:"优先级",slug:"优先级",children:[]}],filePathRelative:"guide/config.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5942:(s,n,a)=>{a.r(n),a.d(n,{default:()=>t});const p=(0,a(6252).uE)('

    配置

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

    一份常见的配置示例如下：

    export default {\n    base: '/foo/',\n    publicPath: '/',\n    devServer: {\n        port: 8080\n    },\n    mock: {\n        prefix: '/v2'\n    },\n    proxy: {\n        '/v2': {\n            'target': 'https://api.douban.com/',\n            'changeOrigin': true, \n        },\n    },\n    layout: {\n        title: "Fes.js",\n        footer: 'Created by MumbelFe',\n        multiTabs: false,\n        menus: [{\n            name: 'index'\n        }, {\n            name: 'onepiece'\n        }, {\n            name: 'store'\n        }, {\n            name: 'simpleList'\n        }]\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30

    本地临时配置文件

    可以新建 .fes.local.js 作为本地临时配置文件。这份配置会和 .fes.js 做 deep merge 后形成最终配置。

    // .fes.js\nexport default { mock: false };\n\n// .fes.local.js\nexport default { \n    mock: true,\n    devServer: { port: 8080 }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8

    最终的配置是：

    { \n    mock: true,\n    devServer: { port: 8080 }\n};\n
    1
    2
    3
    4

    注意

    .fes.local.js 是本地验证使用的临时配置，仅在 fes dev 时有效，请将其添加到 .gitignore，务必不要提交到 git 仓库中。

    多环境多份配置

    可以通过环境变量 FES_ENV 区分不同环境，来指定当前环境的配置文件，这份配置会和 .fes.js 做 deep merge 后形成最终配。

    比如配置如下：

    // .fes.js\nexport default { mock: false };\n\n// .fes.uat.js\nexport default { \n    mock: true,\n    devServer: { port: 8080 }\n};\n
    1
    2
    3
    4
    5
    6
    7
    8

    当我们运行：

    FES_ENV=uat fes dev\n
    1

    这时候会命中 .fes.uat.js 这份环境配置，最终配置是：

    { \n    mock: true,\n    devServer: { port: 8080 }\n};\n
    1
    2
    3
    4

    优先级

    本地临时配置 > 环境配置 > 基础配置

    提示

    如果多份配置中存在相同的配置项，则优先级高的会覆盖优先级低的。

    ',21),e={},t=(0,a(3744).Z)(e,[["render",function(s,n){return p}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,p]of n)a[s]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-884fd4bc.b11306f9.js b/assets/js/v-884fd4bc.b11306f9.js deleted file mode 100644 index d61d57cc..00000000 --- a/assets/js/v-884fd4bc.b11306f9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[229],{7657:(s,n,a)=>{a.r(n),a.d(n,{data:()=>e});const e={key:"v-884fd4bc",path:"/guide/css.html",title:"使用 css",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"全局样式",slug:"全局样式",children:[]},{level:2,title:"组件内样式",slug:"组件内样式",children:[]},{level:2,title:"引入第三方样式",slug:"引入第三方样式",children:[]},{level:2,title:"CSS Modules",slug:"css-modules",children:[]},{level:2,title:"CSS 预处理器",slug:"css-预处理器",children:[]}],filePathRelative:"guide/css.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},8568:(s,n,a)=>{a.r(n),a.d(n,{default:()=>m});var e=a(6252);const t=(0,e.uE)('

    使用 css

    提示

    本文档以 css 为示例，把后缀换成 .less 同样适用。

    全局样式

    Fes.js 中约定 src/global.css 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。

    比如用于覆盖样式，

    .layout-content {\n  max-width: 1000px;\n}\n
    1
    2
    3

    组件内样式

    <style>\n.layout-content {\n  max-width: 1000px;\n}\n</style>\n
    1
    2
    3
    4
    5

    引入第三方样式

    可以直接通过 import 引入第三方组件，当然最好在入口文件app.js中引入

    // src/app.js\nimport 'bootstrap/dist/css/bootstrap.css'\n
    1
    2

    CSS Modules

    ',12),c=(0,e.Uk)("支持 "),l=(0,e._)("code",null,"Vue",-1),p=(0,e.Uk)(" 的 "),o={href:"https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},r=(0,e.Uk)("CSS Modules"),i=(0,e.Uk)(" 用法，可以直接使用："),u=(0,e.uE)('
    <style module>\n.layout-content {\n  max-width: 1000px;\n}\n
    1
    2
    3
    4

    如果想直接引入CSS文件的话，则CSS文件名需要包含.module，比如：

    import style from '@/styles/index.module.css'\nconsole.log(style)\n
    1
    2

    CSS 预处理器

    Fes.js 内置支持 less，不支持 sass 和 stylus，但如果有需求，可以通过 chainWebpack 配置或者 fes-plugin 插件的形式支持。

    ',5),d={},m=(0,a(3744).Z)(d,[["render",function(s,n){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[t,(0,e._)("p",null,[c,l,p,(0,e._)("a",o,[r,(0,e.Wm)(a)]),i]),u],64)}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,e]of n)a[s]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-884fd4bc.ce71af97.js b/assets/js/v-884fd4bc.ce71af97.js new file mode 100644 index 00000000..c57bcd27 --- /dev/null +++ b/assets/js/v-884fd4bc.ce71af97.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[229],{7657:(s,n,a)=>{a.r(n),a.d(n,{data:()=>e});const e={key:"v-884fd4bc",path:"/guide/css.html",title:"使用 css",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"全局样式",slug:"全局样式",children:[]},{level:2,title:"组件内样式",slug:"组件内样式",children:[]},{level:2,title:"引入第三方样式",slug:"引入第三方样式",children:[]},{level:2,title:"CSS Modules",slug:"css-modules",children:[]},{level:2,title:"CSS 预处理器",slug:"css-预处理器",children:[]}],filePathRelative:"guide/css.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},8568:(s,n,a)=>{a.r(n),a.d(n,{default:()=>m});var e=a(6252);const c=(0,e.uE)('

    使用 css

    提示

    本文档以 css 为示例，把后缀换成 .less 同样适用。

    全局样式

    Fes.js 中约定 src/global.css 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。

    比如用于覆盖样式，

    .layout-content {\n  max-width: 1000px;\n}\n
    1
    2
    3

    组件内样式

    <style>\n.layout-content {\n  max-width: 1000px;\n}\n</style>\n
    1
    2
    3
    4
    5

    引入第三方样式

    可以直接通过 import 引入第三方组件，当然最好在入口文件app.js中引入

    // src/app.js\nimport 'bootstrap/dist/css/bootstrap.css'\n
    1
    2

    CSS Modules

    ',12),l=(0,e.Uk)("支持 "),t=(0,e._)("code",null,"Vue",-1),p=(0,e.Uk)(" 的 "),o={href:"https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},r=(0,e.Uk)("CSS Modules"),i=(0,e.Uk)(" 用法，可以直接使用："),u=(0,e.uE)('
    <style module>\n.layout-content {\n  max-width: 1000px;\n}\n
    1
    2
    3
    4

    如果想直接引入CSS文件的话，则CSS文件名需要包含.module，比如：

    import style from '@/styles/index.module.css'\nconsole.log(style)\n
    1
    2

    CSS 预处理器

    Fes.js 内置支持 less，不支持 sass 和 stylus，但如果有需求，可以通过 chainWebpack 配置或者 fes-plugin 插件的形式支持。

    ',5),d={},m=(0,a(3744).Z)(d,[["render",function(s,n){const a=(0,e.up)("OutboundLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[c,(0,e._)("p",null,[l,t,p,(0,e._)("a",o,[r,(0,e.Wm)(a)]),i]),u],64)}]])},3744:(s,n)=>{n.Z=(s,n)=>{const a=s.__vccOpts||s;for(const[s,e]of n)a[s]=e;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-8daa1a0e.a60e9a6c.js b/assets/js/v-8daa1a0e.a60e9a6c.js deleted file mode 100644 index b39df160..00000000 --- a/assets/js/v-8daa1a0e.a60e9a6c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[509],{6464:(e,n,s)=>{s.r(n),s.d(n,{data:()=>a});const a={key:"v-8daa1a0e",path:"/",title:"首页",lang:"zh-CN",frontmatter:{home:!0,title:"首页",heroImage:"/logo.png",actions:[{text:"快速上手",link:"/guide/getting-started.html",type:"primary"},{text:"项目简介",link:"/guide/",type:"secondary"}],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，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}],footer:"MIT Licensed | Copyright © 2020-present Webank"},excerpt:"",headers:[{level:2,title:"像数 1, 2, 3 一样容易",slug:"像数-1-2-3-一样容易",children:[]},{level:2,title:"反馈",slug:"反馈",children:[]}],filePathRelative:"README.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},1443:(e,n,s)=>{s.r(n),s.d(n,{default:()=>d});var a=s(6252);const l=(0,a._)("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-hidden":"true"},"#"),(0,a.Uk)(" 像数 1, 2, 3 一样容易")],-1),t=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" create @fesjs/fes-app myapp\n\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" \n\n"),(0,a._)("span",{class:"token comment"},"# 运行"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" dev\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br")])],-1),i=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\nnpx @fesjs/create-fes-app myapp\n\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(),(0,a._)("span",{class:"token function"},"install"),(0,a.Uk)(" \n\n"),(0,a._)("span",{class:"token comment"},"# 运行"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" run dev\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br")])],-1),r=(0,a._)("h2",{id:"反馈",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#反馈","aria-hidden":"true"},"#"),(0,a.Uk)(" 反馈")],-1),u=(0,a._)("thead",null,[(0,a._)("tr",null,[(0,a._)("th",null,"Github Issue"),(0,a._)("th",null,"微信群"),(0,a._)("th",null,"Fes.js开源运营小助手")])],-1),c={href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noopener noreferrer"},_=(0,a.Uk)("@fesjs/fes.js/issues"),o=(0,a._)("td",null,[(0,a._)("img",{src:"https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png",width:"250"})],-1),p=(0,a._)("td",null,[(0,a._)("img",{src:"https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg",height:"250"})],-1),m={},d=(0,s(3744).Z)(m,[["render",function(e,n){const s=(0,a.up)("CodeGroupItem"),m=(0,a.up)("CodeGroup"),d=(0,a.up)("OutboundLink");return(0,a.wg)(),(0,a.iD)(a.HY,null,[l,(0,a.Wm)(m,null,{default:(0,a.w5)((()=>[(0,a.Wm)(s,{title:"YARN",active:""},{default:(0,a.w5)((()=>[t])),_:1}),(0,a.Wm)(s,{title:"NPM"},{default:(0,a.w5)((()=>[i])),_:1})])),_:1}),r,(0,a._)("table",null,[u,(0,a._)("tbody",null,[(0,a._)("tr",null,[(0,a._)("td",null,[(0,a._)("a",c,[_,(0,a.Wm)(d)])]),o,p])])])],64)}]])},3744:(e,n)=>{n.Z=(e,n)=>{const s=e.__vccOpts||e;for(const[e,a]of n)s[e]=a;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-8daa1a0e.f2418152.js b/assets/js/v-8daa1a0e.f2418152.js new file mode 100644 index 00000000..ad5ab42c --- /dev/null +++ b/assets/js/v-8daa1a0e.f2418152.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[509],{6464:(e,n,s)=>{s.r(n),s.d(n,{data:()=>a});const a={key:"v-8daa1a0e",path:"/",title:"首页",lang:"zh-CN",frontmatter:{home:!0,title:"首页",heroImage:"/logo.png",actions:[{text:"快速上手",link:"/guide/getting-started.html",type:"primary"},{text:"项目简介",link:"/guide/",type:"secondary"}],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，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}],footer:"MIT Licensed | Copyright © 2020-present Webank"},excerpt:"",headers:[{level:2,title:"像数 1, 2, 3 一样容易",slug:"像数-1-2-3-一样容易",children:[]},{level:2,title:"反馈",slug:"反馈",children:[]}],filePathRelative:"README.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},1443:(e,n,s)=>{s.r(n),s.d(n,{default:()=>d});var a=s(6252);const l=(0,a._)("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-hidden":"true"},"#"),(0,a.Uk)(" 像数 1, 2, 3 一样容易")],-1),t=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" create @fesjs/fes-app myapp\n\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" \n\n"),(0,a._)("span",{class:"token comment"},"# 运行"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" dev\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br")])],-1),r=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\nnpx @fesjs/create-fes-app myapp\n\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(),(0,a._)("span",{class:"token function"},"install"),(0,a.Uk)(" \n\n"),(0,a._)("span",{class:"token comment"},"# 运行"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" run dev\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br")])],-1),i=(0,a._)("h2",{id:"反馈",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#反馈","aria-hidden":"true"},"#"),(0,a.Uk)(" 反馈")],-1),u=(0,a._)("thead",null,[(0,a._)("tr",null,[(0,a._)("th",null,"Github Issue"),(0,a._)("th",null,"微信群"),(0,a._)("th",null,"Fes.js开源运营小助手")])],-1),c={href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noopener noreferrer"},_=(0,a.Uk)("@fesjs/fes.js/issues"),o=(0,a._)("td",null,[(0,a._)("img",{src:"https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png",width:"250"})],-1),p=(0,a._)("td",null,[(0,a._)("img",{src:"https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg",height:"250"})],-1),m={},d=(0,s(3744).Z)(m,[["render",function(e,n){const s=(0,a.up)("CodeGroupItem"),m=(0,a.up)("CodeGroup"),d=(0,a.up)("OutboundLink");return(0,a.wg)(),(0,a.iD)(a.HY,null,[l,(0,a.Wm)(m,null,{default:(0,a.w5)((()=>[(0,a.Wm)(s,{title:"YARN",active:""},{default:(0,a.w5)((()=>[t])),_:1}),(0,a.Wm)(s,{title:"NPM"},{default:(0,a.w5)((()=>[r])),_:1})])),_:1}),i,(0,a._)("table",null,[u,(0,a._)("tbody",null,[(0,a._)("tr",null,[(0,a._)("td",null,[(0,a._)("a",c,[_,(0,a.Wm)(d)])]),o,p])])])],64)}]])},3744:(e,n)=>{n.Z=(e,n)=>{const s=e.__vccOpts||e;for(const[e,a]of n)s[e]=a;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-a1a49808.2c87d1c7.js b/assets/js/v-a1a49808.2c87d1c7.js new file mode 100644 index 00000000..8dbfece1 --- /dev/null +++ b/assets/js/v-a1a49808.2c87d1c7.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[943],{5710:(e,a,t)=>{t.r(a),t.d(a,{data:()=>r});const r={key:"v-a1a49808",path:"/reference/api.html",title:"API",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[],filePathRelative:"reference/api.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},3364:(e,a,t)=>{t.r(a),t.d(a,{default:()=>c});var r=t(6252);const i={id:"api",tabindex:"-1"},n=[(0,r._)("a",{class:"header-anchor",href:"#api","aria-hidden":"true"},"#",-1),(0,r.Uk)(" API")],s={},c=(0,t(3744).Z)(s,[["render",function(e,a){return(0,r.wg)(),(0,r.iD)("h1",i,n)}]])},3744:(e,a)=>{a.Z=(e,a)=>{const t=e.__vccOpts||e;for(const[e,r]of a)t[e]=r;return t}}}]); \ No newline at end of file diff --git a/assets/js/v-a1a49808.61922fb2.js b/assets/js/v-a1a49808.61922fb2.js deleted file mode 100644 index fb1f786f..00000000 --- a/assets/js/v-a1a49808.61922fb2.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[943],{5710:(e,a,t)=>{t.r(a),t.d(a,{data:()=>r});const r={key:"v-a1a49808",path:"/reference/api.html",title:"API",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[],filePathRelative:"reference/api.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},3364:(e,a,t)=>{t.r(a),t.d(a,{default:()=>c});var r=t(6252);const i={id:"api",tabindex:"-1"},n=[(0,r._)("a",{class:"header-anchor",href:"#api","aria-hidden":"true"},"#",-1),(0,r.Uk)(" API")],s={},c=(0,t(3744).Z)(s,[["render",function(e,a){return(0,r.wg)(),(0,r.iD)("h1",i,n)}]])},3744:(e,a)=>{a.Z=(e,a)=>{const t=e.__vccOpts||e;for(const[e,r]of a)t[e]=r;return t}}}]); \ No newline at end of file diff --git a/assets/js/v-a951be94.41f553e3.js b/assets/js/v-a951be94.41f553e3.js deleted file mode 100644 index a9a926cd..00000000 --- a/assets/js/v-a951be94.41f553e3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[65],{8007:(n,s,e)=>{e.r(s),e.d(s,{data:()=>a});const a={key:"v-a951be94",path:"/reference/cli.html",title:"命令行接口",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"dev",slug:"dev",children:[]},{level:2,title:"build",slug:"build",children:[]},{level:2,title:"info",slug:"info",children:[]}],filePathRelative:"reference/cli.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5173:(n,s,e)=>{e.r(s),e.d(s,{default:()=>v});var a=e(6252);const p=(0,a._)("h1",{id:"命令行接口",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#命令行接口","aria-hidden":"true"},"#"),(0,a.Uk)(" 命令行接口")],-1),l=(0,a.Uk)("VuePress 命令行接口是由 "),r={href:"https://www.npmjs.com/package/@vuepress/cli",target:"_blank",rel:"noopener noreferrer"},t=(0,a.Uk)("@vuepress/cli"),o=(0,a.Uk)(" 包提供的。它是 "),c={href:"https://www.npmjs.com/package/vuepress",target:"_blank",rel:"noopener noreferrer"},i=(0,a.Uk)("vuepress"),u=(0,a.Uk)(" 包的依赖之一，当然你也可以单独安装它。"),b=(0,a.uE)('

    执行 vuepress --help 来获取下列帮助信息：

    Usage:\n  $ vuepress <command> [options]\n\nCommands:\n  dev [sourceDir]    Start development server\n  build [sourceDir]  Build to static site\n  info               Display environment information\n\nFor more info, run any command with the `--help` flag:\n  $ vuepress dev --help\n  $ vuepress build --help\n  $ vuepress info --help\n\nOptions:\n  -v, --version  Display version number \n  -h, --help     Display this message \n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    dev

    启动一个开发服务器，在本地开发你的 VuePress 站点。

    Usage:\n  $ vuepress dev [sourceDir]\n\nOptions:\n  -c, --config <config>  Set path to config file \n  -p, --port <port>      Use specified port (default: 8080) \n  -t, --temp <temp>      Set the directory of the temporary files \n  --host <host>          Use specified host (default: 0.0.0.0) \n  --cache <cache>        Set the directory of the cache files \n  --clean-temp           Clean the temporary files before dev \n  --clean-cache          Clean the cache files before dev \n  --open                 Open browser when ready \n  --debug                Enable debug mode \n  --no-watch             Disable watching page and config files (default: true)\n  -v, --version          Display version number \n  -h, --help             Display this message\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    提示

    通过命令行设置的配置项，会覆盖你配置文件中的同名配置项。

    build

    ',7),d=(0,a.Uk)("将你的 VuePress 站点构建成静态文件，以便你进行后续"),m=(0,a.Uk)("部署"),h=(0,a.Uk)("。"),k=(0,a.uE)('
    Usage:\n  $ vuepress build [sourceDir]\n\nOptions:\n  -c, --config <config>  Set path to config file \n  -d, --dest <dest>      Set the directory build output (default: .vuepress/dist) \n  -t, --temp <temp>      Set the directory of the temporary files \n  --cache <cache>        Set the directory of the cache files \n  --clean-temp           Clean the temporary files before build \n  --clean-cache          Clean the cache files before build \n  --debug                Enable debug mode \n  -v, --version          Display version number \n  -h, --help             Display this message\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    提示

    通过命令行设置的配置项，会覆盖你配置文件中的同名配置项。

    info

    输出当前系统和依赖相关的信息。

    在你想要检查你的环境，或者提交 Issue 时候，可以使用该命令。

    ',5),f={},v=(0,e(3744).Z)(f,[["render",function(n,s){const e=(0,a.up)("OutboundLink"),f=(0,a.up)("RouterLink");return(0,a.wg)(),(0,a.iD)(a.HY,null,[p,(0,a._)("p",null,[l,(0,a._)("a",r,[t,(0,a.Wm)(e)]),o,(0,a._)("a",c,[i,(0,a.Wm)(e)]),u]),b,(0,a._)("p",null,[d,(0,a.Wm)(f,{to:"/guide/deployment.html"},{default:(0,a.w5)((()=>[m])),_:1}),h]),k],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const e=n.__vccOpts||n;for(const[n,a]of s)e[n]=a;return e}}}]); \ No newline at end of file diff --git a/assets/js/v-a951be94.a8a07ea0.js b/assets/js/v-a951be94.a8a07ea0.js new file mode 100644 index 00000000..f8358e9f --- /dev/null +++ b/assets/js/v-a951be94.a8a07ea0.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[65],{8007:(n,s,e)=>{e.r(s),e.d(s,{data:()=>a});const a={key:"v-a951be94",path:"/reference/cli.html",title:"命令行接口",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"dev",slug:"dev",children:[]},{level:2,title:"build",slug:"build",children:[]},{level:2,title:"info",slug:"info",children:[]}],filePathRelative:"reference/cli.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5173:(n,s,e)=>{e.r(s),e.d(s,{default:()=>v});var a=e(6252);const p=(0,a._)("h1",{id:"命令行接口",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#命令行接口","aria-hidden":"true"},"#"),(0,a.Uk)(" 命令行接口")],-1),l=(0,a.Uk)("VuePress 命令行接口是由 "),r={href:"https://www.npmjs.com/package/@vuepress/cli",target:"_blank",rel:"noopener noreferrer"},t=(0,a.Uk)("@vuepress/cli"),o=(0,a.Uk)(" 包提供的。它是 "),c={href:"https://www.npmjs.com/package/vuepress",target:"_blank",rel:"noopener noreferrer"},i=(0,a.Uk)("vuepress"),u=(0,a.Uk)(" 包的依赖之一，当然你也可以单独安装它。"),b=(0,a.uE)('

    执行 vuepress --help 来获取下列帮助信息：

    Usage:\n  $ vuepress <command> [options]\n\nCommands:\n  dev [sourceDir]    Start development server\n  build [sourceDir]  Build to static site\n  info               Display environment information\n\nFor more info, run any command with the `--help` flag:\n  $ vuepress dev --help\n  $ vuepress build --help\n  $ vuepress info --help\n\nOptions:\n  -v, --version  Display version number \n  -h, --help     Display this message \n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    dev

    启动一个开发服务器，在本地开发你的 VuePress 站点。

    Usage:\n  $ vuepress dev [sourceDir]\n\nOptions:\n  -c, --config <config>  Set path to config file \n  -p, --port <port>      Use specified port (default: 8080) \n  -t, --temp <temp>      Set the directory of the temporary files \n  --host <host>          Use specified host (default: 0.0.0.0) \n  --cache <cache>        Set the directory of the cache files \n  --clean-temp           Clean the temporary files before dev \n  --clean-cache          Clean the cache files before dev \n  --open                 Open browser when ready \n  --debug                Enable debug mode \n  --no-watch             Disable watching page and config files (default: true)\n  -v, --version          Display version number \n  -h, --help             Display this message\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    提示

    通过命令行设置的配置项，会覆盖你配置文件中的同名配置项。

    build

    ',7),d=(0,a.Uk)("将你的 VuePress 站点构建成静态文件，以便你进行后续"),m=(0,a.Uk)("部署"),h=(0,a.Uk)("。"),k=(0,a.uE)('
    Usage:\n  $ vuepress build [sourceDir]\n\nOptions:\n  -c, --config <config>  Set path to config file \n  -d, --dest <dest>      Set the directory build output (default: .vuepress/dist) \n  -t, --temp <temp>      Set the directory of the temporary files \n  --cache <cache>        Set the directory of the cache files \n  --clean-temp           Clean the temporary files before build \n  --clean-cache          Clean the cache files before build \n  --debug                Enable debug mode \n  -v, --version          Display version number \n  -h, --help             Display this message\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    提示

    通过命令行设置的配置项，会覆盖你配置文件中的同名配置项。

    info

    输出当前系统和依赖相关的信息。

    在你想要检查你的环境，或者提交 Issue 时候，可以使用该命令。

    ',5),f={},v=(0,e(3744).Z)(f,[["render",function(n,s){const e=(0,a.up)("OutboundLink"),f=(0,a.up)("RouterLink");return(0,a.wg)(),(0,a.iD)(a.HY,null,[p,(0,a._)("p",null,[l,(0,a._)("a",r,[t,(0,a.Wm)(e)]),o,(0,a._)("a",c,[i,(0,a.Wm)(e)]),u]),b,(0,a._)("p",null,[d,(0,a.Wm)(f,{to:"/guide/deployment.html"},{default:(0,a.w5)((()=>[m])),_:1}),h]),k],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const e=n.__vccOpts||n;for(const[n,a]of s)e[n]=a;return e}}}]); \ No newline at end of file diff --git a/assets/js/v-b15becb0.2238f6b4.js b/assets/js/v-b15becb0.2238f6b4.js deleted file mode 100644 index 347dcb98..00000000 --- a/assets/js/v-b15becb0.2238f6b4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[172],{8504:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-b15becb0",path:"/reference/plugin/plugins/qiankun.html",title:"@fesjs/plugin-qiankun",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"主应用配置",slug:"主应用配置",children:[{level:3,title:"第一步：注册子应用",slug:"第一步-注册子应用",children:[]},{level:3,title:"第二步：装载子应用",slug:"第二步-装载子应用",children:[]}]},{level:2,title:"子应用配置",slug:"子应用配置",children:[{level:3,title:"第一步：插件注册",slug:"第一步-插件注册",children:[]},{level:3,title:"第二步：配置运行时生命周期钩子（可选）",slug:"第二步-配置运行时生命周期钩子-可选",children:[]}]},{level:2,title:"父子应用通讯",slug:"父子应用通讯",children:[{level:3,title:"配合 useModel 使用",slug:"配合-usemodel-使用",children:[]},{level:3,title:"基于 props 传递",slug:"基于-props-传递",children:[]},{level:3,title:"MicroApp",slug:"microapp",children:[]},{level:3,title:"MicroAppWithMemoHistory",slug:"microappwithmemohistory",children:[]}]}],filePathRelative:"reference/plugin/plugins/qiankun.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5574:(n,s,a)=>{a.r(s),a.d(s,{default:()=>v});var p=a(6252);const t=(0,p._)("h1",{id:"fesjs-plugin-qiankun",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#fesjs-plugin-qiankun","aria-hidden":"true"},"#"),(0,p.Uk)(" @fesjs/plugin-qiankun")],-1),e=(0,p.Uk)("Fes.js plugin for "),o={href:"https://qiankun.umijs.org/",target:"_blank",rel:"noopener noreferrer"},c=(0,p.Uk)("qiankun"),l=(0,p.Uk)("，参考"),r={href:"https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp",target:"_blank",rel:"noopener noreferrer"},u=(0,p.Uk)("@umijs/plugin-qiankun"),i=(0,p.Uk)(" 实现，喜欢 React 的同学推荐直接用 Umi。"),k=(0,p.uE)('

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-qiankun": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    介绍

    有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~

    可能目前迁移、升级老项目最好的解决方案就是微前端。plugin-qiankun 是基于 qiankun 实现的 Fes.js 微前端解决方案。

    主应用配置

    第一步：注册子应用

    export default {\n    qiankun: {\n        main: {\n            // 注册子应用信息\n            apps: [\n                {\n                    name: 'app1', // 唯一 id\n                    entry: '//localhost:8001', // html entry\n                    props: {}  // 传递给子应用的数据\n                },\n                {\n                    name: 'app2', // 唯一 id\n                    entry: '//localhost:8002', // html entry\n                },\n            ],\n        },\n    },\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    第二步：装载子应用

    使用路由绑定的方式

    注意

    主应用和子应用需要自行适配路由路径！！！待完善...

    假设我们的系统之前有这样的一些路由：

    export default {\n    router: {\n        routes: [{\n            "path": "/",\n            "component": () => import('@/src/.fes/plugin-layout/index.js'),\n            "children": [\n                {\n                    "path": "/onepiece",\n                    "component": () => import('@/pages/onepiece'),\n                    "name": "onepiece",\n                    "meta": {\n                        "name": "onepiece",\n                        "title": "onepiece"\n                    }\n                }\n            ]\n        }]\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    我们现在想在 /son 加载子应用 app1，只需要增加这样一些配置即可：

    export default {\n    router: {\n        routes: [{\n            "path": "/",\n            "component": () => import('@/src/.fes/plugin-layout/index.js'),\n            "children": [\n                {\n                    "path": "/onepiece",\n                    "component": () => import('@/pages/onepiece'),\n                    "name": "onepiece",\n                    "meta": {\n                        "name": "onepiece",\n                        "title": "onepiece"\n                    }\n                },\n                {\n                    "path": "/son",\n                    "meta": {\n                        "name": "son",\n                        "title": "子应用",\n                        "microApp": "app1"\n                    }\n                }\n            ]\n        }]\n    }\n}\n















     
     
     
     
     
     
     
     




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

    当前我们依然提倡约定路由的方式，在src/pages 目录新建 son.vue：

    <config>\n{\n    "name": "son",\n    "title": "子应用",\n    "microApp": "app1"\n}\n</config>\n
    1
    2
    3
    4
    5
    6
    7

    使用 <MicroApp /> 组件的方式

    提示

    建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。

    <template>\n    <MicroApp :name="name" />\n</template>\n<script>\nimport { MicroApp } from '@fesjs/fes';\n\nexport default {\n    components: { MicroApp },\n    setup(){\n        const name = "app1"\n        return {\n            name\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    使用 <MicroAppWithMemoHistory /> 组件的方式

    如果我们的路由使用 history 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 hash 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，<MicroAppWithMemoHistory /> 出现了，完美解决上面的问题。

    <MicroAppWithMemoHistory /> 相比 <MicroApp /> ，需要多传入 url 参数，用于指定加载子应用什么路由页面。

    <template>\n   <MicroApp :name="name" url="/" />\n</template>\n<script>\nimport { MicroApp } from '@fesjs/fes';\n\nexport default {\n   components: { MicroApp },\n   setup(){\n       const name = "app1"\n       return {\n           name\n       }\n   }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    子应用配置

    第一步：插件注册

    export default {\n    qiankun: {\n        micro: {},\n    }\n};\n
    1
    2
    3
    4
    5

    第二步：配置运行时生命周期钩子（可选）

    插件会自动为你创建好 qiankun 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 src/app.js 里导出 qiankun 对象，并实现每一个生命周期钩子，其中钩子函数的入参 props 由主应用自动注入。

    export const qiankun = {\n    // 应用加载之前\n    async bootstrap(props) {\n        console.log('app1 bootstrap', props);\n    },\n    // 应用 render 之前触发\n    async mount(props) {\n        console.log('app1 mount', props);\n    },\n    // 当 props 更新时触发\n    async update(props){\n        console.log('app1 update', props);\n    },\n    // 应用卸载之后触发\n    async unmount(props) {\n        console.log('app1 unmount', props);\n    },\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    父子应用通讯

    有两种方式实现

    ',33),d={id:"配合-usemodel-使用",tabindex:"-1"},b=(0,p._)("a",{class:"header-anchor",href:"#配合-usemodel-使用","aria-hidden":"true"},"#",-1),m=(0,p.Uk)(" 配合 "),g=(0,p.Uk)("useModel"),h=(0,p.Uk)(" 使用"),y=(0,p.uE)('

    确保已经安装了 @fesjs/plugin-model：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-model": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    主应用传递 props

    • 如果使用 MicroApp 组件模式消费子应用，直接通过 props 传递即可：
    <template>\n    <MicroApp :name="name" :user="user" />\n</template>\n<script>\nimport { MicroApp } from '@fesjs/fes';\n\nexport default {\n    components: { MicroApp },\n    setup(){\n        const name = "app1"\n        const user = ref("")\n        return {\n            name,\n            user\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    • 如果使用路由绑定式消费子应用，那么约定src/models/qiankunStateForMicro.js 的模型数据将作为 props 船体给子应用，如：
    import { reactive } from 'vue';\n\nexport default () => {\n    const state = reactive({ c: 1 });\n    return {\n        state\n    };\n};\n
    1
    2
    3
    4
    5
    6
    7
    8

    子应用消费 props

    子应用中会自动生成一个全局名为 qiankunStateFromMain 的 model， 可以在任意组件中获取主应用透传的 props 的值。

    <script>\nexport default {\n    setup(){\n        const mainState = useModel('qiankunStateFromMain');\n        return {\n            mainState\n        };\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    基于 props 传递

    • 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
    • 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）

    MicroApp

    属性说明类型默认值
    name子应用名称，传入qiankun.main.apps配置中的nameString-
    settings子应用配置信息Object{}
    props传入子应用的参数Object{}
    lifeCycles子应用生命周期钩子Object{}
    cacheName子应用缓存名称，配置后根据name+cacheName缓存子应用实例Object-

    MicroAppWithMemoHistory

    属性说明类型默认值
    name子应用名称，传入qiankun.main.apps配置中的nameString-
    settings子应用配置信息Object{}
    props传入子应用的参数Object{}
    lifeCycles子应用生命周期钩子Object{}
    cacheName子应用缓存名称，配置后根据name+cacheName缓存子应用实例Object-
    url子应用的路由地址String-
    ',16),q={},v=(0,a(3744).Z)(q,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),q=(0,p.up)("RouterLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[e,(0,p._)("a",o,[c,(0,p.Wm)(a)]),l,(0,p._)("a",r,[u,(0,p.Wm)(a)]),i]),k,(0,p._)("h3",d,[b,m,(0,p.Wm)(q,{to:"/reference/plugin/plugins/model.html"},{default:(0,p.w5)((()=>[g])),_:1}),h]),y],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-b15becb0.7180a292.js b/assets/js/v-b15becb0.7180a292.js new file mode 100644 index 00000000..fdd22fcb --- /dev/null +++ b/assets/js/v-b15becb0.7180a292.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[172],{8504:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-b15becb0",path:"/reference/plugin/plugins/qiankun.html",title:"@fesjs/plugin-qiankun",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"主应用配置",slug:"主应用配置",children:[{level:3,title:"第一步：注册子应用",slug:"第一步-注册子应用",children:[]},{level:3,title:"第二步：装载子应用",slug:"第二步-装载子应用",children:[]}]},{level:2,title:"子应用配置",slug:"子应用配置",children:[{level:3,title:"第一步：插件注册",slug:"第一步-插件注册",children:[]},{level:3,title:"第二步：配置运行时生命周期钩子（可选）",slug:"第二步-配置运行时生命周期钩子-可选",children:[]}]},{level:2,title:"父子应用通讯",slug:"父子应用通讯",children:[{level:3,title:"配合 useModel 使用",slug:"配合-usemodel-使用",children:[]},{level:3,title:"基于 props 传递",slug:"基于-props-传递",children:[]},{level:3,title:"MicroApp",slug:"microapp",children:[]},{level:3,title:"MicroAppWithMemoHistory",slug:"microappwithmemohistory",children:[]}]}],filePathRelative:"reference/plugin/plugins/qiankun.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5574:(n,s,a)=>{a.r(s),a.d(s,{default:()=>v});var p=a(6252);const t=(0,p._)("h1",{id:"fesjs-plugin-qiankun",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#fesjs-plugin-qiankun","aria-hidden":"true"},"#"),(0,p.Uk)(" @fesjs/plugin-qiankun")],-1),e=(0,p.Uk)("Fes.js plugin for "),o={href:"https://qiankun.umijs.org/",target:"_blank",rel:"noopener noreferrer"},c=(0,p.Uk)("qiankun"),l=(0,p.Uk)("，参考"),r={href:"https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp",target:"_blank",rel:"noopener noreferrer"},u=(0,p.Uk)("@umijs/plugin-qiankun"),i=(0,p.Uk)(" 实现，喜欢 React 的同学推荐直接用 Umi。"),k=(0,p.uE)('

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-qiankun": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    介绍

    有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~

    可能目前迁移、升级老项目最好的解决方案就是微前端。plugin-qiankun 是基于 qiankun 实现的 Fes.js 微前端解决方案。

    主应用配置

    第一步：注册子应用

    export default {\n    qiankun: {\n        main: {\n            // 注册子应用信息\n            apps: [\n                {\n                    name: 'app1', // 唯一 id\n                    entry: '//localhost:8001', // html entry\n                    props: {}  // 传递给子应用的数据\n                },\n                {\n                    name: 'app2', // 唯一 id\n                    entry: '//localhost:8002', // html entry\n                },\n            ],\n        },\n    },\n};\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    第二步：装载子应用

    使用路由绑定的方式

    注意

    主应用和子应用需要自行适配路由路径！！！待完善...

    假设我们的系统之前有这样的一些路由：

    export default {\n    router: {\n        routes: [{\n            "path": "/",\n            "component": () => import('@/src/.fes/plugin-layout/index.js'),\n            "children": [\n                {\n                    "path": "/onepiece",\n                    "component": () => import('@/pages/onepiece'),\n                    "name": "onepiece",\n                    "meta": {\n                        "name": "onepiece",\n                        "title": "onepiece"\n                    }\n                }\n            ]\n        }]\n    }\n}\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    我们现在想在 /son 加载子应用 app1，只需要增加这样一些配置即可：

    export default {\n    router: {\n        routes: [{\n            "path": "/",\n            "component": () => import('@/src/.fes/plugin-layout/index.js'),\n            "children": [\n                {\n                    "path": "/onepiece",\n                    "component": () => import('@/pages/onepiece'),\n                    "name": "onepiece",\n                    "meta": {\n                        "name": "onepiece",\n                        "title": "onepiece"\n                    }\n                },\n                {\n                    "path": "/son",\n                    "meta": {\n                        "name": "son",\n                        "title": "子应用",\n                        "microApp": "app1"\n                    }\n                }\n            ]\n        }]\n    }\n}\n















     
     
     
     
     
     
     
     




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

    当前我们依然提倡约定路由的方式，在src/pages 目录新建 son.vue：

    <config>\n{\n    "name": "son",\n    "title": "子应用",\n    "microApp": "app1"\n}\n</config>\n
    1
    2
    3
    4
    5
    6
    7

    使用 <MicroApp /> 组件的方式

    提示

    建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。

    <template>\n    <MicroApp :name="name" />\n</template>\n<script>\nimport { MicroApp } from '@fesjs/fes';\n\nexport default {\n    components: { MicroApp },\n    setup(){\n        const name = "app1"\n        return {\n            name\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    使用 <MicroAppWithMemoHistory /> 组件的方式

    如果我们的路由使用 history 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 hash 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，<MicroAppWithMemoHistory /> 出现了，完美解决上面的问题。

    <MicroAppWithMemoHistory /> 相比 <MicroApp /> ，需要多传入 url 参数，用于指定加载子应用什么路由页面。

    <template>\n   <MicroApp :name="name" url="/" />\n</template>\n<script>\nimport { MicroApp } from '@fesjs/fes';\n\nexport default {\n   components: { MicroApp },\n   setup(){\n       const name = "app1"\n       return {\n           name\n       }\n   }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    子应用配置

    第一步：插件注册

    export default {\n    qiankun: {\n        micro: {},\n    }\n};\n
    1
    2
    3
    4
    5

    第二步：配置运行时生命周期钩子（可选）

    插件会自动为你创建好 qiankun 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 src/app.js 里导出 qiankun 对象，并实现每一个生命周期钩子，其中钩子函数的入参 props 由主应用自动注入。

    export const qiankun = {\n    // 应用加载之前\n    async bootstrap(props) {\n        console.log('app1 bootstrap', props);\n    },\n    // 应用 render 之前触发\n    async mount(props) {\n        console.log('app1 mount', props);\n    },\n    // 当 props 更新时触发\n    async update(props){\n        console.log('app1 update', props);\n    },\n    // 应用卸载之后触发\n    async unmount(props) {\n        console.log('app1 unmount', props);\n    },\n};\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    父子应用通讯

    有两种方式实现

    ',33),d={id:"配合-usemodel-使用",tabindex:"-1"},b=(0,p._)("a",{class:"header-anchor",href:"#配合-usemodel-使用","aria-hidden":"true"},"#",-1),m=(0,p.Uk)(" 配合 "),g=(0,p.Uk)("useModel"),h=(0,p.Uk)(" 使用"),y=(0,p.uE)('

    确保已经安装了 @fesjs/plugin-model：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-model": "^2.0.0"\n    },\n}\n
    1
    2
    3
    4
    5
    6

    主应用传递 props

    • 如果使用 MicroApp 组件模式消费子应用，直接通过 props 传递即可：
    <template>\n    <MicroApp :name="name" :user="user" />\n</template>\n<script>\nimport { MicroApp } from '@fesjs/fes';\n\nexport default {\n    components: { MicroApp },\n    setup(){\n        const name = "app1"\n        const user = ref("")\n        return {\n            name,\n            user\n        }\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    • 如果使用路由绑定式消费子应用，那么约定src/models/qiankunStateForMicro.js 的模型数据将作为 props 船体给子应用，如：
    import { reactive } from 'vue';\n\nexport default () => {\n    const state = reactive({ c: 1 });\n    return {\n        state\n    };\n};\n
    1
    2
    3
    4
    5
    6
    7
    8

    子应用消费 props

    子应用中会自动生成一个全局名为 qiankunStateFromMain 的 model， 可以在任意组件中获取主应用透传的 props 的值。

    <script>\nexport default {\n    setup(){\n        const mainState = useModel('qiankunStateFromMain');\n        return {\n            mainState\n        };\n    }\n}\n</script>\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    基于 props 传递

    • 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
    • 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）

    MicroApp

    属性说明类型默认值
    name子应用名称，传入qiankun.main.apps配置中的nameString-
    settings子应用配置信息Object{}
    props传入子应用的参数Object{}
    lifeCycles子应用生命周期钩子Object{}
    cacheName子应用缓存名称，配置后根据name+cacheName缓存子应用实例Object-

    MicroAppWithMemoHistory

    属性说明类型默认值
    name子应用名称，传入qiankun.main.apps配置中的nameString-
    settings子应用配置信息Object{}
    props传入子应用的参数Object{}
    lifeCycles子应用生命周期钩子Object{}
    cacheName子应用缓存名称，配置后根据name+cacheName缓存子应用实例Object-
    url子应用的路由地址String-
    ',16),q={},v=(0,a(3744).Z)(q,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),q=(0,p.up)("RouterLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[e,(0,p._)("a",o,[c,(0,p.Wm)(a)]),l,(0,p._)("a",r,[u,(0,p.Wm)(a)]),i]),k,(0,p._)("h3",d,[b,m,(0,p.Wm)(q,{to:"/reference/plugin/plugins/model.html"},{default:(0,p.w5)((()=>[g])),_:1}),h]),y],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-c253c956.385acd14.js b/assets/js/v-c253c956.385acd14.js new file mode 100644 index 00000000..193168a3 --- /dev/null +++ b/assets/js/v-c253c956.385acd14.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[673],{9073:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-c253c956",path:"/reference/plugin/plugins/enums.html",title:"@fesjs/plugin-enums",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[{level:3,title:"静态配置",slug:"静态配置",children:[]},{level:3,title:"动态配置",slug:"动态配置",children:[]}]},{level:2,title:"场景使用",slug:"场景使用",children:[]},{level:2,title:"API",slug:"api",children:[{level:3,title:"get",slug:"get",children:[]},{level:3,title:"push",slug:"push",children:[]},{level:3,title:"remove",slug:"remove",children:[]},{level:3,title:"concat",slug:"concat",children:[]},{level:3,title:"convert",slug:"convert",children:[]},{level:3,title:"extend配置",slug:"extend配置",children:[]},{level:3,title:"dir规则",slug:"dir规则",children:[]}]}],filePathRelative:"reference/plugin/plugins/enums.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},9533:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('

    @fesjs/plugin-enums

    介绍

    日常业务开发中，有很多场景会使用到枚举值，比如select-options、table-column。

    该插件提供统一的枚举存取及丰富的函数来处理枚举。

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-enums": "^2.0.0"\n    }\n}\n
    1
    2
    3
    4
    5
    6

    配置

    静态配置

    在 .fes.js 中配置：

    // 配置格式：[[key, value], ...]\nexport default {\n    enums: {\n        status: [['0', '无效的'], ['1', '有效的']]\n    }\n}\n
    1
    2
    3
    4
    5
    6

    动态配置

    在业务代码中

    import { enums } from '@fesjs/fes';\n// 动态添加\nenums.push('status', [['0', '无效的'], ['1', '有效的']]\nenums.get('status', '1') // 有效的\n
    1
    2
    3
    4

    场景使用

    • 动态添加的枚举项支持数组和对象

    • 枚举项为对象时，可以指定keyName和valueName属性名

    • 导出枚举值，可指定取值的路径

    • 导出枚举可扩展属性

    <template>\n    <div>\n        <!-- 遍历枚举status -->\n        <div v-for="item in enumsGet('status')" :key="item.key">\n            {{item.value}}：{{item.key}}\n        </div>\n        <!-- 遍历枚举扩展后的roles -->\n        <div v-for="item in roles" :key="item.key">\n            {{item.name}}：{{item.disabled}}\n        </div>\n        <!-- 获取枚举roles为2的英文名 -->\n        <div>{{enumsGet('roles', '2', { dir: 'eName' })}}</div>\n    </div>\n</template>\n<script>\nimport { enums } from '@fesjs/fes';\n\nexport default {\n    setup() {\n        // 动态添加枚举，枚举项是对象，并指定key的属性名为id\n        enums.push('roles', [\n            {\n                id: '1',\n                cName: '系统管理员',\n                eName: 'System',\n                perm: ['1', '2', '3']\n            },\n            {\n                id: '2',\n                cName: '业务管理员',\n                eName: 'Business',\n                perm: ['1', '2']\n            },\n            {\n                id: '3',\n                cName: '普通用户',\n                eName: 'User',\n                perm: ['1']\n            }\n        ], { keyName: 'id' });\n        // 导出定制格式的roles，扩展枚举项新的属性name、disabled\n        const roles = enums.get('roles', {\n            extend: [\n                {\n                    key: 'name',\n                    dir: 'cName' // 指定取值路径，取属性cName的值\n                },\n                {\n                    key: 'disabled',\n                    // 传入函数，获取结果值\n                    transfer: item => item.value.perm.some(i => i >= 2)\n                }\n            ]\n        });\n        console.log(roles);\n        // [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]\n        return {\n            enumsGet: enums.get,\n            roles\n        };\n    }\n};\n</script>\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64

    API

    get

    • get(name: string) 获取指定名字的枚举

    • get(name: string, key: string) 获取指定名字及键枚举默认值

    • get(name: string, opt: {extend: Array<Object>}) 获取指定名字的自定义格式枚举，查看extend配置

    • get(name: string, key: string, opt: {dir: string}) 获取指定名字及键枚举dir规则的值

    get('status')\nget('status', '1')\nget('status', {\n    extend: [\n        {\n            key: 'name',\n            dir: 'value',\n        },\n        {\n            key: 'disabled',\n            transfer: item => item === '0'\n        }\n    ]\n})\nget('status', '1', {dir: 'value'})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    push

    动态添加枚举，重复添加会覆盖

    • push(name: string, _enum: Array<Array>)
    • push(name: string, _enum: Array<Object>, opt?: Object)
      • opt.keyName 指定key的取值属性，默认是key
      • opt.valueName 指定value的取值属性

    枚举项为数组，枚举项的[0]解析为key，枚举项的[1]解析为value

    枚举项为对象时，根据opt配置keyName、valueName取枚举项属性值分别作为key和value，如果valueName未设置则value就是枚举项

    remove

    • remove(name: string)

    移除指定的枚举

    concat

    基于现有的枚举，连接上新的枚举后返回新的枚举

    • concat(name: string, _enum: Array<Array|Object>, opt?: Object))
      • opt.keyName 指定key的取值属性，默认是key
      • opt.valueName 指定value的取值属性
      • opt.before 是否添加在现有的之前，默认是false
      • opt.extend：返回的枚举extend配置

    convert

    将传入的枚举格式转换为{key, value}的形式

    • convert(name: string, _enum: Array<Array|Object>, opt?: Object))
      • opt.keyName 指定key的取值属性，默认是key
      • opt.valueName 指定value的取值属性

    extend配置

    扩展枚举项属性的配置

    • extend: Array<Object>
      • key 指定扩展的属性名
      • dir 指定该属性的取值路径
      • transfer(item: {key: any, value: any}) 转换函数，参数未枚举项，返回就是该属性的值

    提示

    同时设置dir和transfer，transfer优先

    get('status', {\n    extend: [\n        {\n            key: 'name',\n            dir: 'value',\n        },\n        {\n            key: 'disabled',\n            transfer: item => item.key === '0'\n        }\n    ]\n})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    dir规则

    dir是指定枚举项value的取值方式，规则如下：

    • 对象属性 A、A.B
    • 数组 [0]、[0][1]
    • 混合 A[0]、[0].A、A[0].B
    // 假如枚举项value的结构如下\nconst user = {\n    age: 18,\n    name: 'aring',\n    role: [\n        {\n            id: 1,\n            name: '管理员'\n        },\n                    {\n            id: 2,\n            name: '业务操作员'\n        }\n    ]\n}\n// 那么规则解析是：\ndir              value\n'age'        =>  18\n'role[0]'    =>  {id: 1, name: '管理员'}\n'role[1].id' =>  2\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    提示

    枚举项value如果是基本类型，则规则不生效，value就是当前值

    ',45),e={},t=(0,a(3744).Z)(e,[["render",function(n,s){return p}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-c253c956.52b824f1.js b/assets/js/v-c253c956.52b824f1.js deleted file mode 100644 index 0e122790..00000000 --- a/assets/js/v-c253c956.52b824f1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[673],{9073:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-c253c956",path:"/reference/plugin/plugins/enums.html",title:"@fesjs/plugin-enums",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"介绍",slug:"介绍",children:[]},{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[{level:3,title:"静态配置",slug:"静态配置",children:[]},{level:3,title:"动态配置",slug:"动态配置",children:[]}]},{level:2,title:"场景使用",slug:"场景使用",children:[]},{level:2,title:"API",slug:"api",children:[{level:3,title:"get",slug:"get",children:[]},{level:3,title:"push",slug:"push",children:[]},{level:3,title:"remove",slug:"remove",children:[]},{level:3,title:"concat",slug:"concat",children:[]},{level:3,title:"convert",slug:"convert",children:[]},{level:3,title:"extend配置",slug:"extend配置",children:[]},{level:3,title:"dir规则",slug:"dir规则",children:[]}]}],filePathRelative:"reference/plugin/plugins/enums.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},9533:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('

    @fesjs/plugin-enums

    介绍

    日常业务开发中，有很多场景会使用到枚举值，比如select-options、table-column。

    该插件提供统一的枚举存取及丰富的函数来处理枚举。

    启用方式

    在 package.json 中引入依赖：

    {\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-enums": "^2.0.0"\n    }\n}\n
    1
    2
    3
    4
    5
    6

    配置

    静态配置

    在 .fes.js 中配置：

    // 配置格式：[[key, value], ...]\nexport default {\n    enums: {\n        status: [['0', '无效的'], ['1', '有效的']]\n    }\n}\n
    1
    2
    3
    4
    5
    6

    动态配置

    在业务代码中

    import { enums } from '@fesjs/fes';\n// 动态添加\nenums.push('status', [['0', '无效的'], ['1', '有效的']]\nenums.get('status', '1') // 有效的\n
    1
    2
    3
    4

    场景使用

    • 动态添加的枚举项支持数组和对象

    • 枚举项为对象时，可以指定keyName和valueName属性名

    • 导出枚举值，可指定取值的路径

    • 导出枚举可扩展属性

    <template>\n    <div>\n        <!-- 遍历枚举status -->\n        <div v-for="item in enumsGet('status')" :key="item.key">\n            {{item.value}}：{{item.key}}\n        </div>\n        <!-- 遍历枚举扩展后的roles -->\n        <div v-for="item in roles" :key="item.key">\n            {{item.name}}：{{item.disabled}}\n        </div>\n        <!-- 获取枚举roles为2的英文名 -->\n        <div>{{enumsGet('roles', '2', { dir: 'eName' })}}</div>\n    </div>\n</template>\n<script>\nimport { enums } from '@fesjs/fes';\n\nexport default {\n    setup() {\n        // 动态添加枚举，枚举项是对象，并指定key的属性名为id\n        enums.push('roles', [\n            {\n                id: '1',\n                cName: '系统管理员',\n                eName: 'System',\n                perm: ['1', '2', '3']\n            },\n            {\n                id: '2',\n                cName: '业务管理员',\n                eName: 'Business',\n                perm: ['1', '2']\n            },\n            {\n                id: '3',\n                cName: '普通用户',\n                eName: 'User',\n                perm: ['1']\n            }\n        ], { keyName: 'id' });\n        // 导出定制格式的roles，扩展枚举项新的属性name、disabled\n        const roles = enums.get('roles', {\n            extend: [\n                {\n                    key: 'name',\n                    dir: 'cName' // 指定取值路径，取属性cName的值\n                },\n                {\n                    key: 'disabled',\n                    // 传入函数，获取结果值\n                    transfer: item => item.value.perm.some(i => i >= 2)\n                }\n            ]\n        });\n        console.log(roles);\n        // [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]\n        return {\n            enumsGet: enums.get,\n            roles\n        };\n    }\n};\n</script>\n\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64

    API

    get

    • get(name: string) 获取指定名字的枚举

    • get(name: string, key: string) 获取指定名字及键枚举默认值

    • get(name: string, opt: {extend: Array<Object>}) 获取指定名字的自定义格式枚举，查看extend配置

    • get(name: string, key: string, opt: {dir: string}) 获取指定名字及键枚举dir规则的值

    get('status')\nget('status', '1')\nget('status', {\n    extend: [\n        {\n            key: 'name',\n            dir: 'value',\n        },\n        {\n            key: 'disabled',\n            transfer: item => item === '0'\n        }\n    ]\n})\nget('status', '1', {dir: 'value'})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    push

    动态添加枚举，重复添加会覆盖

    • push(name: string, _enum: Array<Array>)
    • push(name: string, _enum: Array<Object>, opt?: Object)
      • opt.keyName 指定key的取值属性，默认是key
      • opt.valueName 指定value的取值属性

    枚举项为数组，枚举项的[0]解析为key，枚举项的[1]解析为value

    枚举项为对象时，根据opt配置keyName、valueName取枚举项属性值分别作为key和value，如果valueName未设置则value就是枚举项

    remove

    • remove(name: string)

    移除指定的枚举

    concat

    基于现有的枚举，连接上新的枚举后返回新的枚举

    • concat(name: string, _enum: Array<Array|Object>, opt?: Object))
      • opt.keyName 指定key的取值属性，默认是key
      • opt.valueName 指定value的取值属性
      • opt.before 是否添加在现有的之前，默认是false
      • opt.extend：返回的枚举extend配置

    convert

    将传入的枚举格式转换为{key, value}的形式

    • convert(name: string, _enum: Array<Array|Object>, opt?: Object))
      • opt.keyName 指定key的取值属性，默认是key
      • opt.valueName 指定value的取值属性

    extend配置

    扩展枚举项属性的配置

    • extend: Array<Object>
      • key 指定扩展的属性名
      • dir 指定该属性的取值路径
      • transfer(item: {key: any, value: any}) 转换函数，参数未枚举项，返回就是该属性的值

    提示

    同时设置dir和transfer，transfer优先

    get('status', {\n    extend: [\n        {\n            key: 'name',\n            dir: 'value',\n        },\n        {\n            key: 'disabled',\n            transfer: item => item.key === '0'\n        }\n    ]\n})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    dir规则

    dir是指定枚举项value的取值方式，规则如下：

    • 对象属性 A、A.B
    • 数组 [0]、[0][1]
    • 混合 A[0]、[0].A、A[0].B
    // 假如枚举项value的结构如下\nconst user = {\n    age: 18,\n    name: 'aring',\n    role: [\n        {\n            id: 1,\n            name: '管理员'\n        },\n                    {\n            id: 2,\n            name: '业务操作员'\n        }\n    ]\n}\n// 那么规则解析是：\ndir              value\n'age'        =>  18\n'role[0]'    =>  {id: 1, name: '管理员'}\n'role[1].id' =>  2\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    提示

    枚举项value如果是基本类型，则规则不生效，value就是当前值

    ',45),e={},t=(0,a(3744).Z)(e,[["render",function(n,s){return p}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-c5618810.35ab6284.js b/assets/js/v-c5618810.35ab6284.js new file mode 100644 index 00000000..fe5ea246 --- /dev/null +++ b/assets/js/v-c5618810.35ab6284.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[287],{4020:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-c5618810",path:"/reference/plugin/dev/api.html",title:"插件 API",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"属性",slug:"属性",children:[{level:3,title:"api.paths",slug:"api-paths",children:[]},{level:3,title:"api.cwd",slug:"api-cwd",children:[]},{level:3,title:"api.pkg",slug:"api-pkg",children:[]},{level:3,title:"api.configInstance",slug:"api-configinstance",children:[]},{level:3,title:"userConfig",slug:"userconfig",children:[]},{level:3,title:"config",slug:"config",children:[]},{level:3,title:"env",slug:"env",children:[]},{level:3,title:"args",slug:"args",children:[]}]},{level:2,title:"核心方法",slug:"核心方法",children:[{level:3,title:"describe",slug:"describe",children:[]},{level:3,title:"register",slug:"register",children:[]},{level:3,title:"applyPlugins",slug:"applyplugins",children:[]},{level:3,title:"registerMethod",slug:"registermethod",children:[]},{level:3,title:"registerCommand",slug:"registercommand",children:[]},{level:3,title:"registerPresets",slug:"registerpresets",children:[]},{level:3,title:"registerPlugins",slug:"registerplugins",children:[]},{level:3,title:"hasPlugins",slug:"hasplugins",children:[]},{level:3,title:"hasPresets",slug:"haspresets",children:[]},{level:3,title:"skipPlugins",slug:"skipplugins",children:[]}]},{level:2,title:"扩展方法",slug:"扩展方法",children:[{level:3,title:"addPluginExports",slug:"addpluginexports",children:[]},{level:3,title:"addCoreExports",slug:"addcoreexports",children:[]},{level:3,title:"addRuntimePlugin",slug:"addruntimeplugin",children:[]},{level:3,title:"addRuntimePluginKey",slug:"addruntimepluginkey",children:[]},{level:3,title:"addEntryImportsAhead",slug:"addentryimportsahead",children:[]},{level:3,title:"addEntryImports",slug:"addentryimports",children:[]},{level:3,title:"addEntryCodeAhead",slug:"addentrycodeahead",children:[]},{level:3,title:"addEntryCode",slug:"addentrycode",children:[]},{level:3,title:"addHTMLHeadScripts",slug:"addhtmlheadscripts",children:[]},{level:3,title:"addBeforeMiddlewares",slug:"addbeforemiddlewares",children:[]},{level:3,title:"addMiddlewares",slug:"addmiddlewares",children:[]},{level:3,title:"addTmpGenerateWatcherPaths",slug:"addtmpgeneratewatcherpaths",children:[]},{level:3,title:"chainWebpack",slug:"chainwebpack",children:[]},{level:3,title:"copyTmpFiles",slug:"copytmpfiles",children:[]},{level:3,title:"getPort",slug:"getport",children:[]},{level:3,title:"getHostname",slug:"gethostname",children:[]},{level:3,title:"getServer",slug:"getserver",children:[]},{level:3,title:"getRoutes",slug:"getroutes",children:[]},{level:3,title:"getRoutesJSON",slug:"getroutesjson",children:[]},{level:3,title:"modifyRoutes",slug:"modifyroutes",children:[]},{level:3,title:"modifyBundleConfigOpts",slug:"modifybundleconfigopts",children:[]},{level:3,title:"modifyBundleConfig",slug:"modifybundleconfig",children:[]},{level:3,title:"modifyBabelOpts",slug:"modifybabelopts",children:[]},{level:3,title:"modifyBabelPresetOpts",slug:"modifybabelpresetopts",children:[]},{level:3,title:"modifyPaths",slug:"modifypaths",children:[]},{level:3,title:"modifyDefaultConfig",slug:"modifydefaultconfig",children:[]},{level:3,title:"modifyConfig",slug:"modifyconfig",children:[]},{level:3,title:"modifyPublicPathStr",slug:"modifypublicpathstr",children:[]},{level:3,title:"onPluginReady",slug:"onpluginready",children:[]},{level:3,title:"onStart",slug:"onstart",children:[]},{level:3,title:"onExit",slug:"onexit",children:[]},{level:3,title:"onGenerateFiles",slug:"ongeneratefiles",children:[]},{level:3,title:"restartServer",slug:"restartserver",children:[]},{level:3,title:"writeTmpFile",slug:"writetmpfile",children:[]}]}],filePathRelative:"reference/plugin/dev/api.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},3221:(n,s,a)=>{a.r(s),a.d(s,{default:()=>T});var p=a(6252);const e=(0,p.uE)('

    插件 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?)

    例如：

     api.describe({\n    key: 'esbuild',\n    config: {\n        schema(joi) {\n            return joi.object();\n        },\n        default: {}\n    },\n    enableBy: api.EnableBy.config,\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    注：

    ',26),t=(0,p._)("li",null,[(0,p._)("code",null,"config.default"),(0,p.Uk)(" 为配置的默认值，用户没有配置时取这个")],-1),o=(0,p._)("code",null,"config.schema",-1),c=(0,p.Uk)(" 用于声明配置的类型，基于 "),l={href:"https://hapi.dev/module/joi",target:"_blank",rel:"noopener noreferrer"},i=(0,p.Uk)("joi"),r=(0,p.Uk)("，如果你希望用户进行配置，这个是必须的，否则用户的配置无效"),u=(0,p._)("li",null,[(0,p._)("code",null,"config.onChange"),(0,p.Uk)(" 是 "),(0,p._)("code",null,"dev"),(0,p.Uk)(" 阶段配置被修改后的处理机制，默认会重启 dev 进程，也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件，还可以通过函数的格式自定义")],-1),d=(0,p._)("li",null,[(0,p._)("code",null,"enableBy"),(0,p.Uk)(" 为启用方式，默认是注册启用，可更改为 "),(0,p._)("code",null,"api.EnableBy.config"),(0,p.Uk)("，还可以用自定义函数的方式决定其启用时机（动态生效）")],-1),k=(0,p.uE)('

    register

    为 api.applyPlugins 注册可供其使用的 hook。

    用法：register({ key: string, fn: Function, pluginId?: string, before?: string, stage?: number })

    参数：

    • key：唯一id
    • fn：hook函数，当执行api.applyPlugins时，此函数被执行。
    • pluginId：插件id，如果配置了插件id，则只有此插件未被禁用时，才会执行。
    // 可同步\napi.register({\n  key: 'foo',\n  fn() {\n    return 'a';\n  },\n});\n\n// 可异步\napi.register({\n  key: 'foo',\n  async fn() {\n    await delay(100);\n    return 'b';\n  },\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    注意：

    • fn 支持同步和异步，异步通过 Promise，返回值为 Promise 即为异步
    • fn 里的内容需结合 api.appyPlugins 的 type 参数来看,如果是 api.ApplyPluginsType.add，需有返回值，这些返回值最终会被合成一个数组。如果是 api.ApplyPluginsType.modify，需对第一个参数做修改，并返回它，它会作为下个hook的参数。 如果是 api.ApplyPluginsType.event，无需返回值
    • stage 和 before 都是用于调整执行顺序的，参考 tapable
    • stage 默认是 0，设为 -1 或更少会提前执行，设为 1 或更多会后置执行

    applyPlugins

    取得 register 注册的 hooks 执行后的数据。

    用法：applyPlugins({ key: string, type: api.ApplyPluginsType, initialValue?: any, args?: any })

    参数：

    • key：唯一id
    • type：hook的类型。
    • initialValue：初始值。
    • args：参数，hook函数执行时，args会作为参数传入。

    例如：

    const foo = await api.applyPlugins({\n  key: 'foo',\n  type: api.ApplyPluginsType.add,\n  initialValue: [],\n});\nconsole.log(foo); // ['a', 'b']\n
    1
    2
    3
    4
    5
    6

    api.ApplyPluginsType

    编译时插件hook执行类型，enum 类型，包含三个属性：

    • compose，用于合并执行多个函数，函数可决定前序函数的执行时机
    • modify，用于修改值
    • event，用于执行事件，前面没有依赖关系

    registerMethod

    往 api 上注册方法。如果有提供 fn，则执行 fn 定义的函数。

    用法：registerMethod({ name: string, fn?: Function, exitsError?: boolean })

    例如：

     api.registerMethod({\n    name: 'writeTmpFile',\n    fn({\n        path,\n        content\n    }) {\n        assert(\n            api.stage >= api.ServiceStage.pluginReady,\n            'api.writeTmpFile() should not execute in register stage.'\n        );\n        const absPath = join(api.paths.absTmpPath, path);\n        api.utils.mkdirp.sync(dirname(absPath));\n        if (!existsSync(absPath) || readFileSync(absPath, 'utf-8') !== content) {\n            writeFileSync(absPath, content, 'utf-8');\n        }\n    }\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    然后在插件中可以使用：

    api.writeTmpFile()\n
    1

    registerCommand

    ',26),b=(0,p.Uk)("注册命令，基于 "),m={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},g=(0,p.Uk)("commander"),h=(0,p.Uk)(" 实现的机制。"),f=(0,p._)("p",null,[(0,p.Uk)("用法："),(0,p._)("strong",null,"registerCommand({ command: string, description: string, fn: Function, options?: Object })")],-1),v=(0,p._)("p",null,"参数：",-1),y=(0,p._)("li",null,"command",-1),j=(0,p._)("li",null,[(0,p.Uk)("description，描述文字，输入 "),(0,p._)("code",null,"--help"),(0,p.Uk)(" 会打印")],-1),x=(0,p._)("li",null,[(0,p.Uk)("fn，命令执行的函数，参数有： "),(0,p._)("ul",null,[(0,p._)("li",null,"rawArgv，原始参数"),(0,p._)("li",null,"args，参数"),(0,p._)("li",null,"options，执行命令时附带的的参数配置"),(0,p._)("li",null,"program，commander对象")])],-1),P=(0,p.Uk)("options，参数配置，基于 "),w={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},_=(0,p.Uk)("commander"),C=(0,p.Uk)(" 。"),E=(0,p.uE)('

    例如：

    api.registerCommand({\n    command: 'webpack',\n    description: 'inspect webpack configurations',\n    options: [{\n        name: '--rule <ruleName>',\n        description: 'inspect a specific module rule'\n    }, {\n        name: '--plugin <pluginName>',\n        description: 'inspect a specific plugin'\n    }, {\n        name: '--rules',\n        description: 'list all module rule names'\n    }, {\n        name: '--plugins',\n        description: 'list all plugin names'\n    }, {\n        name: '--verbose',\n        description: 'show full function definitions in output'\n    }],\n    async fn({ rawArgv, args, options, program}) {\n    }\n})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    当项目引入此插件后，使用：

    fes webpack\n
    1

    registerPresets

    注册插件集，参数为路径数组。

    用法：registerPresets(presets: string[])

    例如：

    api.registerPresets([\n    { id: 'preset_2', key: 'preset2', apply: () => () => {} },\n    require.resolve('./preset_3'),\n]);\n
    1
    2
    3
    4

    registerPlugins

    注册插件，参数为路径数组。

    用法：registerPlugins(plugins: string[])

    例如：

    api.registerPlugins([\n    { id: 'preset_2', key: 'preset2', apply: () => () => {} },\n    require.resolve('./preset_3'),\n]);\n
    1
    2
    3
    4

    hasPlugins

    判断是否有注册某个插件，插件的 id 规则：

    • id 默认为包名
    • 内置插件以 @@ 为前缀，比如 @@/registerMethod

    用法：hasPlugins(pluginIds: string[])

    例如

    // 判断是否有注册 @fesjs/plugin-locale\napi.hasPlugins(['@fesjs/plugin-locale']);\n
    1
    2

    提示

    如果在注册阶段使用，只能判断在他之前是否有注册某个插件。

    hasPresets

    判断是否有注册某个插件集。

    用法：hasPresets(presetIds: string[])

    例如

    // 判断是否有注册\napi.hasPlugins(['@fesjs/preset-xxx']);\n
    1
    2

    提示

    如果在注册阶段使用，只能判断在他之前是否有注册某个插件集。

    skipPlugins

    声明哪些插件需要被禁用，参数为插件 id 的数组。

    用法：hasPresets(presetIds: string[])

    例如：

    // 禁用 plugin-model 插件\napi.skipPlugins(['@fesjs/plugin-model']);\n
    1
    2

    扩展方法

    通过 api.registerMethod() 扩展的方法。

    addPluginExports

    把插件需要导出的运行时 API 写入@fesjs/fes。

    api.addPluginExports(() => [\n    {\n        specifiers: ['access', 'useAccess'],\n        source: absoluteFilePath\n    }\n]);\n
    1
    2
    3
    4
    5
    6

    这样用户使用时：

    import { access, useAccess } from '@fesjs/fes';\n
    1

    addCoreExports

    提供给其他插件运行时需要的 API。

    api.addCoreExports(() => [\n    {\n        specifiers: ['getRoutes'],\n        source: absCoreFilePath\n    }\n]);\n
    1
    2
    3
    4
    5
    6

    使用：

    import { getHistory, destroyRouter } from '@@/core/coreExports';\n
    1

    addRuntimePlugin

    添加运行时插件，返回值格式为表示文件路径的字符串。

    例如：

    api.addRuntimePlugin(() => join(__dirname, './runtime'));\n
    1

    addRuntimePluginKey

    添加插件提供的运行时配置的 key，返回值格式为字符串。

    例如：

    api.addRuntimePluginKey(() => 'some');\n
    1

    则用户可以：

    // app.js\nconst some = function(){\n    return {\n\n    }\n}\n\n
    1
    2
    3
    4
    5
    6
    7

    addEntryImportsAhead

    在入口文件现有 import 的前面添加 import。

    例如：

    api.addEntryImportsAhead(() => [{ source: 'anypackage' }]);\n
    1

    addEntryImports

    在入口文件现有 import 的后面添加 import。

    例如：

    api.addEntryImport(() => {\n  return [\n    {\n      source: '/modulePath/xxx.js',\n      specifier: 'moduleName',\n    }\n  ]\n});\n
    1
    2
    3
    4
    5
    6
    7
    8

    addEntryCodeAhead

    在入口文件最前面（import 之后）添加代码。

    例如：

    api.addEntryCodeAhead(\n    () => `${globalCSSFile\n        .map(file => `require('${winPath(relative(absTmpPath, file))}');`)\n        .join('')}`\n\n
    1
    2
    3
    4
    5

    addEntryCode

    在入口文件最后添加代码。

    例如：

    api.addEntryCode(() => {\n  return `console.log('works!')`\n})\n
    1
    2
    3

    addHTMLHeadScripts

    在 HTML 头部添加脚本。

    例如：

    api.addHTMLHeadScripts(() => {\n  return [\n    {\n      content: '',\n      src: '',\n      // ...attrs\n    },\n  ];\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9

    addBeforeMiddlewares

    添加在 webpack compiler 中间件之前的中间件，返回值格式为 express 中间件。

    例如：

    api.addBeforeMiddlewares(() => {\n  return (req, res, next) => {\n    if (false) {\n      res.end('end');\n    } else {\n      next();\n    }\n  };\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9

    addMiddlewares

    添加在 webpack compiler 中间件之后的中间件，返回值格式为 express 中间件。

    addTmpGenerateWatcherPaths

    添加重新生成临时文件的监听路径。

    例如：

    api.addTmpGenerateWatcherPaths(() => [\n    './app.js',\n]);\n
    1
    2
    3

    chainWebpack

    通过 [webpack-chain] 的方式修改 webpack 配置。

    例如：

    api.chainWebpack((memo) => {\n    memo.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.esm-bundler.js');\n});\n
    1
    2
    3

    copyTmpFiles

    批量写临时文件。

    例如：

     api.copyTmpFiles({\n    namespace,\n    path: join(__dirname, 'runtime'),\n    ignore: ['.tpl']\n});\n
    1
    2
    3
    4
    5

    参数：

    • namespace：复制到临时文件夹下的目标目录
    • path：需要复制的文件目录
    • ignore：需要排除的文件

    提示

    不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译

    getPort

    获取端口号，dev 时有效。

    getHostname

    获取 hostname，dev 时有效。

    getServer

    获取 devServer，dev 时有效。

    getRoutes

    获取 api.modifyRoutes 修改过后的路由信息。

    getRoutesJSON

    获取格式化后的路由信息

    modifyRoutes

    修改路由。

    例如：

    // 把BaseLayout插入到路由配置中，作为根路由\napi.modifyRoutes(routes => [\n    {\n        path: '/',\n        component: winPath(\n            join(api.paths.absTmpPath || '', absFilePath)\n        ),\n        children: routes\n    }\n]);\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    modifyBundleConfigOpts

    修改获取 bundleConfig 的函数参数。

    例如：

    api.modifyBundleConfigOpts(memo => {\n    memo.miniCSSExtractPluginPath = require.resolve('mini-css-extract-plugin');\n    memo.miniCSSExtractPluginLoaderPath = require.resolve(\n    'mini-css-extract-plugin/dist/loader',\n    );\n    return memo;\n});\n\n
    1
    2
    3
    4
    5
    6
    7
    8

    modifyBundleConfig

    修改 bundle 配置。

    api.modifyBundleConfig((bundleConfig) => {\n    // do something\n    return bundleConfig;\n});\n
    1
    2
    3
    4

    modifyBabelOpts

    修改 babel 配置项。

    例如：

    api.modifyBabelOpts((babelOpts) => {\n    if (api.config.babelPluginImport) {\n        api.config.babelPluginImport.forEach((config) => {\n            babelOpts.plugins.push(['import', config]);\n        });\n    }\n    return babelOpts;\n});\n
    1
    2
    3
    4
    5
    6
    7
    8

    modifyBabelPresetOpts

    修改 babel 插件的配置。

    例如：

    api.modifyBabelPresetOpts(opts => {\n    return {\n      ...opts,\n      import: (opts.import || []).concat([\n        { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },\n      ]),\n    };\n});\n
    1
    2
    3
    4
    5
    6
    7
    8

    modifyPaths

    修改 paths 对象。

    modifyDefaultConfig

    修改默认配置。 例如：

    api.modifyDefaultConfig((memo) => {\n  return {\n    ...memo,\n    ...defaultOptions,\n  };\n});\n
    1
    2
    3
    4
    5
    6

    modifyConfig

    修改最终配置。

    例如：

    api.modifyConfig((memo) => {\n  return {\n    ...memo,\n    ...defaultOptions,\n  };\n});\n\n
    1
    2
    3
    4
    5
    6
    7

    modifyPublicPathStr

    修改 publicPath 字符串。

    例如：

    api.modifyPublicPathStr(() => {\n  return api.config.publicPath || '/';\n});\n
    1
    2
    3

    onPluginReady

    在插件初始化完成触发。在 onStart 之前，此时还没有 config 和 paths，他们尚未解析好。

    onStart

    在命令注册函数执行前触发。可以使用 config 和 paths。

    onExit

    dev 退出时触发。

    onGenerateFiles

    生成临时文件，触发时机在 webpack 编译之前。

    restartServer

    重启 devServer，dev 时有效。

    writeTmpFile

    写临时文件。

    例如：

    api.writeTmpFile({\n    path: absoluteFilePath,\n    content: Mustache.render(\n        readFileSync(join(__dirname, 'runtime/core.tpl'), 'utf-8'),\n        {\n            REPLACE_ROLES: JSON.stringify(roles)\n        }\n    )\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9

    参数：

    • path：相对于临时文件夹的路径
    • content：文件内容

    提示

    不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译

    ',154),S={},T=(0,a(3744).Z)(S,[["render",function(n,s){const a=(0,p.up)("OutboundLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[e,(0,p._)("ul",null,[t,(0,p._)("li",null,[o,c,(0,p._)("a",l,[i,(0,p.Wm)(a)]),r]),u,d]),k,(0,p._)("p",null,[b,(0,p._)("a",m,[g,(0,p.Wm)(a)]),h]),f,v,(0,p._)("ul",null,[y,j,x,(0,p._)("li",null,[P,(0,p._)("a",w,[_,(0,p.Wm)(a)]),C])]),E],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-c5618810.b2070b54.js b/assets/js/v-c5618810.b2070b54.js deleted file mode 100644 index 9f86365d..00000000 --- a/assets/js/v-c5618810.b2070b54.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[287],{4020:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-c5618810",path:"/reference/plugin/dev/api.html",title:"插件 API",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"属性",slug:"属性",children:[{level:3,title:"api.paths",slug:"api-paths",children:[]},{level:3,title:"api.cwd",slug:"api-cwd",children:[]},{level:3,title:"api.pkg",slug:"api-pkg",children:[]},{level:3,title:"api.configInstance",slug:"api-configinstance",children:[]},{level:3,title:"userConfig",slug:"userconfig",children:[]},{level:3,title:"config",slug:"config",children:[]},{level:3,title:"env",slug:"env",children:[]},{level:3,title:"args",slug:"args",children:[]}]},{level:2,title:"核心方法",slug:"核心方法",children:[{level:3,title:"describe",slug:"describe",children:[]},{level:3,title:"register",slug:"register",children:[]},{level:3,title:"applyPlugins",slug:"applyplugins",children:[]},{level:3,title:"registerMethod",slug:"registermethod",children:[]},{level:3,title:"registerCommand",slug:"registercommand",children:[]},{level:3,title:"registerPresets",slug:"registerpresets",children:[]},{level:3,title:"registerPlugins",slug:"registerplugins",children:[]},{level:3,title:"hasPlugins",slug:"hasplugins",children:[]},{level:3,title:"hasPresets",slug:"haspresets",children:[]},{level:3,title:"skipPlugins",slug:"skipplugins",children:[]}]},{level:2,title:"扩展方法",slug:"扩展方法",children:[{level:3,title:"addPluginExports",slug:"addpluginexports",children:[]},{level:3,title:"addCoreExports",slug:"addcoreexports",children:[]},{level:3,title:"addRuntimePlugin",slug:"addruntimeplugin",children:[]},{level:3,title:"addRuntimePluginKey",slug:"addruntimepluginkey",children:[]},{level:3,title:"addEntryImportsAhead",slug:"addentryimportsahead",children:[]},{level:3,title:"addEntryImports",slug:"addentryimports",children:[]},{level:3,title:"addEntryCodeAhead",slug:"addentrycodeahead",children:[]},{level:3,title:"addEntryCode",slug:"addentrycode",children:[]},{level:3,title:"addHTMLHeadScripts",slug:"addhtmlheadscripts",children:[]},{level:3,title:"addBeforeMiddlewares",slug:"addbeforemiddlewares",children:[]},{level:3,title:"addMiddlewares",slug:"addmiddlewares",children:[]},{level:3,title:"addTmpGenerateWatcherPaths",slug:"addtmpgeneratewatcherpaths",children:[]},{level:3,title:"chainWebpack",slug:"chainwebpack",children:[]},{level:3,title:"copyTmpFiles",slug:"copytmpfiles",children:[]},{level:3,title:"getPort",slug:"getport",children:[]},{level:3,title:"getHostname",slug:"gethostname",children:[]},{level:3,title:"getServer",slug:"getserver",children:[]},{level:3,title:"getRoutes",slug:"getroutes",children:[]},{level:3,title:"getRoutesJSON",slug:"getroutesjson",children:[]},{level:3,title:"modifyRoutes",slug:"modifyroutes",children:[]},{level:3,title:"modifyBundleConfigOpts",slug:"modifybundleconfigopts",children:[]},{level:3,title:"modifyBundleConfig",slug:"modifybundleconfig",children:[]},{level:3,title:"modifyBabelOpts",slug:"modifybabelopts",children:[]},{level:3,title:"modifyBabelPresetOpts",slug:"modifybabelpresetopts",children:[]},{level:3,title:"modifyPaths",slug:"modifypaths",children:[]},{level:3,title:"modifyDefaultConfig",slug:"modifydefaultconfig",children:[]},{level:3,title:"modifyConfig",slug:"modifyconfig",children:[]},{level:3,title:"modifyPublicPathStr",slug:"modifypublicpathstr",children:[]},{level:3,title:"onPluginReady",slug:"onpluginready",children:[]},{level:3,title:"onStart",slug:"onstart",children:[]},{level:3,title:"onExit",slug:"onexit",children:[]},{level:3,title:"onGenerateFiles",slug:"ongeneratefiles",children:[]},{level:3,title:"restartServer",slug:"restartserver",children:[]},{level:3,title:"writeTmpFile",slug:"writetmpfile",children:[]}]}],filePathRelative:"reference/plugin/dev/api.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},3221:(n,s,a)=>{a.r(s),a.d(s,{default:()=>T});var p=a(6252);const e=(0,p.uE)('

    插件 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?)

    例如：

     api.describe({\n    key: 'esbuild',\n    config: {\n        schema(joi) {\n            return joi.object();\n        },\n        default: {}\n    },\n    enableBy: api.EnableBy.config,\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    注：

    ',26),t=(0,p._)("li",null,[(0,p._)("code",null,"config.default"),(0,p.Uk)(" 为配置的默认值，用户没有配置时取这个")],-1),o=(0,p._)("code",null,"config.schema",-1),c=(0,p.Uk)(" 用于声明配置的类型，基于 "),l={href:"https://hapi.dev/module/joi",target:"_blank",rel:"noopener noreferrer"},i=(0,p.Uk)("joi"),r=(0,p.Uk)("，如果你希望用户进行配置，这个是必须的，否则用户的配置无效"),u=(0,p._)("li",null,[(0,p._)("code",null,"config.onChange"),(0,p.Uk)(" 是 "),(0,p._)("code",null,"dev"),(0,p.Uk)(" 阶段配置被修改后的处理机制，默认会重启 dev 进程，也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件，还可以通过函数的格式自定义")],-1),d=(0,p._)("li",null,[(0,p._)("code",null,"enableBy"),(0,p.Uk)(" 为启用方式，默认是注册启用，可更改为 "),(0,p._)("code",null,"api.EnableBy.config"),(0,p.Uk)("，还可以用自定义函数的方式决定其启用时机（动态生效）")],-1),k=(0,p.uE)('

    register

    为 api.applyPlugins 注册可供其使用的 hook。

    用法：register({ key: string, fn: Function, pluginId?: string, before?: string, stage?: number })

    参数：

    • key：唯一id
    • fn：hook函数，当执行api.applyPlugins时，此函数被执行。
    • pluginId：插件id，如果配置了插件id，则只有此插件未被禁用时，才会执行。
    // 可同步\napi.register({\n  key: 'foo',\n  fn() {\n    return 'a';\n  },\n});\n\n// 可异步\napi.register({\n  key: 'foo',\n  async fn() {\n    await delay(100);\n    return 'b';\n  },\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    注意：

    • fn 支持同步和异步，异步通过 Promise，返回值为 Promise 即为异步
    • fn 里的内容需结合 api.appyPlugins 的 type 参数来看,如果是 api.ApplyPluginsType.add，需有返回值，这些返回值最终会被合成一个数组。如果是 api.ApplyPluginsType.modify，需对第一个参数做修改，并返回它，它会作为下个hook的参数。 如果是 api.ApplyPluginsType.event，无需返回值
    • stage 和 before 都是用于调整执行顺序的，参考 tapable
    • stage 默认是 0，设为 -1 或更少会提前执行，设为 1 或更多会后置执行

    applyPlugins

    取得 register 注册的 hooks 执行后的数据。

    用法：applyPlugins({ key: string, type: api.ApplyPluginsType, initialValue?: any, args?: any })

    参数：

    • key：唯一id
    • type：hook的类型。
    • initialValue：初始值。
    • args：参数，hook函数执行时，args会作为参数传入。

    例如：

    const foo = await api.applyPlugins({\n  key: 'foo',\n  type: api.ApplyPluginsType.add,\n  initialValue: [],\n});\nconsole.log(foo); // ['a', 'b']\n
    1
    2
    3
    4
    5
    6

    api.ApplyPluginsType

    编译时插件hook执行类型，enum 类型，包含三个属性：

    • compose，用于合并执行多个函数，函数可决定前序函数的执行时机
    • modify，用于修改值
    • event，用于执行事件，前面没有依赖关系

    registerMethod

    往 api 上注册方法。如果有提供 fn，则执行 fn 定义的函数。

    用法：registerMethod({ name: string, fn?: Function, exitsError?: boolean })

    例如：

     api.registerMethod({\n    name: 'writeTmpFile',\n    fn({\n        path,\n        content\n    }) {\n        assert(\n            api.stage >= api.ServiceStage.pluginReady,\n            'api.writeTmpFile() should not execute in register stage.'\n        );\n        const absPath = join(api.paths.absTmpPath, path);\n        api.utils.mkdirp.sync(dirname(absPath));\n        if (!existsSync(absPath) || readFileSync(absPath, 'utf-8') !== content) {\n            writeFileSync(absPath, content, 'utf-8');\n        }\n    }\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    然后在插件中可以使用：

    api.writeTmpFile()\n
    1

    registerCommand

    ',26),b=(0,p.Uk)("注册命令，基于 "),m={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},g=(0,p.Uk)("commander"),h=(0,p.Uk)(" 实现的机制。"),f=(0,p._)("p",null,[(0,p.Uk)("用法："),(0,p._)("strong",null,"registerCommand({ command: string, description: string, fn: Function, options?: Object })")],-1),v=(0,p._)("p",null,"参数：",-1),y=(0,p._)("li",null,"command",-1),j=(0,p._)("li",null,[(0,p.Uk)("description，描述文字，输入 "),(0,p._)("code",null,"--help"),(0,p.Uk)(" 会打印")],-1),x=(0,p._)("li",null,[(0,p.Uk)("fn，命令执行的函数，参数有： "),(0,p._)("ul",null,[(0,p._)("li",null,"rawArgv，原始参数"),(0,p._)("li",null,"args，参数"),(0,p._)("li",null,"options，执行命令时附带的的参数配置"),(0,p._)("li",null,"program，commander对象")])],-1),P=(0,p.Uk)("options，参数配置，基于 "),w={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},_=(0,p.Uk)("commander"),C=(0,p.Uk)(" 。"),E=(0,p.uE)('

    例如：

    api.registerCommand({\n    command: 'webpack',\n    description: 'inspect webpack configurations',\n    options: [{\n        name: '--rule <ruleName>',\n        description: 'inspect a specific module rule'\n    }, {\n        name: '--plugin <pluginName>',\n        description: 'inspect a specific plugin'\n    }, {\n        name: '--rules',\n        description: 'list all module rule names'\n    }, {\n        name: '--plugins',\n        description: 'list all plugin names'\n    }, {\n        name: '--verbose',\n        description: 'show full function definitions in output'\n    }],\n    async fn({ rawArgv, args, options, program}) {\n    }\n})\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    当项目引入此插件后，使用：

    fes webpack\n
    1

    registerPresets

    注册插件集，参数为路径数组。

    用法：registerPresets(presets: string[])

    例如：

    api.registerPresets([\n    { id: 'preset_2', key: 'preset2', apply: () => () => {} },\n    require.resolve('./preset_3'),\n]);\n
    1
    2
    3
    4

    registerPlugins

    注册插件，参数为路径数组。

    用法：registerPlugins(plugins: string[])

    例如：

    api.registerPlugins([\n    { id: 'preset_2', key: 'preset2', apply: () => () => {} },\n    require.resolve('./preset_3'),\n]);\n
    1
    2
    3
    4

    hasPlugins

    判断是否有注册某个插件，插件的 id 规则：

    • id 默认为包名
    • 内置插件以 @@ 为前缀，比如 @@/registerMethod

    用法：hasPlugins(pluginIds: string[])

    例如

    // 判断是否有注册 @fesjs/plugin-locale\napi.hasPlugins(['@fesjs/plugin-locale']);\n
    1
    2

    提示

    如果在注册阶段使用，只能判断在他之前是否有注册某个插件。

    hasPresets

    判断是否有注册某个插件集。

    用法：hasPresets(presetIds: string[])

    例如

    // 判断是否有注册\napi.hasPlugins(['@fesjs/preset-xxx']);\n
    1
    2

    提示

    如果在注册阶段使用，只能判断在他之前是否有注册某个插件集。

    skipPlugins

    声明哪些插件需要被禁用，参数为插件 id 的数组。

    用法：hasPresets(presetIds: string[])

    例如：

    // 禁用 plugin-model 插件\napi.skipPlugins(['@fesjs/plugin-model']);\n
    1
    2

    扩展方法

    通过 api.registerMethod() 扩展的方法。

    addPluginExports

    把插件需要导出的运行时 API 写入@fesjs/fes。

    api.addPluginExports(() => [\n    {\n        specifiers: ['access', 'useAccess'],\n        source: absoluteFilePath\n    }\n]);\n
    1
    2
    3
    4
    5
    6

    这样用户使用时：

    import { access, useAccess } from '@fesjs/fes';\n
    1

    addCoreExports

    提供给其他插件运行时需要的 API。

    api.addCoreExports(() => [\n    {\n        specifiers: ['getRoutes'],\n        source: absCoreFilePath\n    }\n]);\n
    1
    2
    3
    4
    5
    6

    使用：

    import { getHistory, destroyRouter } from '@@/core/coreExports';\n
    1

    addRuntimePlugin

    添加运行时插件，返回值格式为表示文件路径的字符串。

    例如：

    api.addRuntimePlugin(() => join(__dirname, './runtime'));\n
    1

    addRuntimePluginKey

    添加插件提供的运行时配置的 key，返回值格式为字符串。

    例如：

    api.addRuntimePluginKey(() => 'some');\n
    1

    则用户可以：

    // app.js\nconst some = function(){\n    return {\n\n    }\n}\n\n
    1
    2
    3
    4
    5
    6
    7

    addEntryImportsAhead

    在入口文件现有 import 的前面添加 import。

    例如：

    api.addEntryImportsAhead(() => [{ source: 'anypackage' }]);\n
    1

    addEntryImports

    在入口文件现有 import 的后面添加 import。

    例如：

    api.addEntryImport(() => {\n  return [\n    {\n      source: '/modulePath/xxx.js',\n      specifier: 'moduleName',\n    }\n  ]\n});\n
    1
    2
    3
    4
    5
    6
    7
    8

    addEntryCodeAhead

    在入口文件最前面（import 之后）添加代码。

    例如：

    api.addEntryCodeAhead(\n    () => `${globalCSSFile\n        .map(file => `require('${winPath(relative(absTmpPath, file))}');`)\n        .join('')}`\n\n
    1
    2
    3
    4
    5

    addEntryCode

    在入口文件最后添加代码。

    例如：

    api.addEntryCode(() => {\n  return `console.log('works!')`\n})\n
    1
    2
    3

    addHTMLHeadScripts

    在 HTML 头部添加脚本。

    例如：

    api.addHTMLHeadScripts(() => {\n  return [\n    {\n      content: '',\n      src: '',\n      // ...attrs\n    },\n  ];\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9

    addBeforeMiddlewares

    添加在 webpack compiler 中间件之前的中间件，返回值格式为 express 中间件。

    例如：

    api.addBeforeMiddlewares(() => {\n  return (req, res, next) => {\n    if (false) {\n      res.end('end');\n    } else {\n      next();\n    }\n  };\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9

    addMiddlewares

    添加在 webpack compiler 中间件之后的中间件，返回值格式为 express 中间件。

    addTmpGenerateWatcherPaths

    添加重新生成临时文件的监听路径。

    例如：

    api.addTmpGenerateWatcherPaths(() => [\n    './app.js',\n]);\n
    1
    2
    3

    chainWebpack

    通过 [webpack-chain] 的方式修改 webpack 配置。

    例如：

    api.chainWebpack((memo) => {\n    memo.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.esm-bundler.js');\n});\n
    1
    2
    3

    copyTmpFiles

    批量写临时文件。

    例如：

     api.copyTmpFiles({\n    namespace,\n    path: join(__dirname, 'runtime'),\n    ignore: ['.tpl']\n});\n
    1
    2
    3
    4
    5

    参数：

    • namespace：复制到临时文件夹下的目标目录
    • path：需要复制的文件目录
    • ignore：需要排除的文件

    提示

    不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译

    getPort

    获取端口号，dev 时有效。

    getHostname

    获取 hostname，dev 时有效。

    getServer

    获取 devServer，dev 时有效。

    getRoutes

    获取 api.modifyRoutes 修改过后的路由信息。

    getRoutesJSON

    获取格式化后的路由信息

    modifyRoutes

    修改路由。

    例如：

    // 把BaseLayout插入到路由配置中，作为根路由\napi.modifyRoutes(routes => [\n    {\n        path: '/',\n        component: winPath(\n            join(api.paths.absTmpPath || '', absFilePath)\n        ),\n        children: routes\n    }\n]);\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    modifyBundleConfigOpts

    修改获取 bundleConfig 的函数参数。

    例如：

    api.modifyBundleConfigOpts(memo => {\n    memo.miniCSSExtractPluginPath = require.resolve('mini-css-extract-plugin');\n    memo.miniCSSExtractPluginLoaderPath = require.resolve(\n    'mini-css-extract-plugin/dist/loader',\n    );\n    return memo;\n});\n\n
    1
    2
    3
    4
    5
    6
    7
    8

    modifyBundleConfig

    修改 bundle 配置。

    api.modifyBundleConfig((bundleConfig) => {\n    // do something\n    return bundleConfig;\n});\n
    1
    2
    3
    4

    modifyBabelOpts

    修改 babel 配置项。

    例如：

    api.modifyBabelOpts((babelOpts) => {\n    if (api.config.babelPluginImport) {\n        api.config.babelPluginImport.forEach((config) => {\n            babelOpts.plugins.push(['import', config]);\n        });\n    }\n    return babelOpts;\n});\n
    1
    2
    3
    4
    5
    6
    7
    8

    modifyBabelPresetOpts

    修改 babel 插件的配置。

    例如：

    api.modifyBabelPresetOpts(opts => {\n    return {\n      ...opts,\n      import: (opts.import || []).concat([\n        { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },\n      ]),\n    };\n});\n
    1
    2
    3
    4
    5
    6
    7
    8

    modifyPaths

    修改 paths 对象。

    modifyDefaultConfig

    修改默认配置。 例如：

    api.modifyDefaultConfig((memo) => {\n  return {\n    ...memo,\n    ...defaultOptions,\n  };\n});\n
    1
    2
    3
    4
    5
    6

    modifyConfig

    修改最终配置。

    例如：

    api.modifyConfig((memo) => {\n  return {\n    ...memo,\n    ...defaultOptions,\n  };\n});\n\n
    1
    2
    3
    4
    5
    6
    7

    modifyPublicPathStr

    修改 publicPath 字符串。

    例如：

    api.modifyPublicPathStr(() => {\n  return api.config.publicPath || '/';\n});\n
    1
    2
    3

    onPluginReady

    在插件初始化完成触发。在 onStart 之前，此时还没有 config 和 paths，他们尚未解析好。

    onStart

    在命令注册函数执行前触发。可以使用 config 和 paths。

    onExit

    dev 退出时触发。

    onGenerateFiles

    生成临时文件，触发时机在 webpack 编译之前。

    restartServer

    重启 devServer，dev 时有效。

    writeTmpFile

    写临时文件。

    例如：

    api.writeTmpFile({\n    path: absoluteFilePath,\n    content: Mustache.render(\n        readFileSync(join(__dirname, 'runtime/core.tpl'), 'utf-8'),\n        {\n            REPLACE_ROLES: JSON.stringify(roles)\n        }\n    )\n});\n
    1
    2
    3
    4
    5
    6
    7
    8
    9

    参数：

    • path：相对于临时文件夹的路径
    • content：文件内容

    提示

    不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译

    ',154),S={},T=(0,a(3744).Z)(S,[["render",function(n,s){const a=(0,p.up)("OutboundLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[e,(0,p._)("ul",null,[t,(0,p._)("li",null,[o,c,(0,p._)("a",l,[i,(0,p.Wm)(a)]),r]),u,d]),k,(0,p._)("p",null,[b,(0,p._)("a",m,[g,(0,p.Wm)(a)]),h]),f,v,(0,p._)("ul",null,[y,j,x,(0,p._)("li",null,[P,(0,p._)("a",w,[_,(0,p.Wm)(a)]),C])]),E],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]); \ No newline at end of file diff --git a/assets/js/v-d61a9282.74365e2e.js b/assets/js/v-d61a9282.74365e2e.js deleted file mode 100644 index c4d84635..00000000 --- a/assets/js/v-d61a9282.74365e2e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[783],{6811:(l,e,n)=>{n.r(e),n.d(e,{data:()=>u});const u={key:"v-d61a9282",path:"/reference/plugin/",title:"介绍",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"插件列表",slug:"插件列表",children:[]},{level:2,title:"架构",slug:"架构",children:[]}],filePathRelative:"reference/plugin/README.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},671:(l,e,n)=>{n.r(e),n.d(e,{default:()=>J});var u=n(6252);const t=(0,u._)("h1",{id:"介绍",tabindex:"-1"},[(0,u._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,u.Uk)(" 介绍")],-1),s=(0,u._)("h2",{id:"插件列表",tabindex:"-1"},[(0,u._)("a",{class:"header-anchor",href:"#插件列表","aria-hidden":"true"},"#"),(0,u.Uk)(" 插件列表")],-1),i=(0,u._)("thead",null,[(0,u._)("tr",null,[(0,u._)("th",null,"插件"),(0,u._)("th",null,"介绍")])],-1),r=(0,u.Uk)("@fesjs/plugin-access"),d=(0,u._)("td",null,"提供对页面资源的权限控制能力",-1),_=(0,u.Uk)("@fesjs/plugin-enums"),a=(0,u._)("td",null,"提供统一的枚举存取及丰富的函数来处理枚举",-1),c=(0,u.Uk)("@fesjs/plugin-icon"),f=(0,u._)("td",null,"svg 文件自动注册为组件",-1),o=(0,u.Uk)("@fesjs/plugin-jest"),p=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Jest"),(0,u.Uk)("，提供单元测试、覆盖测试能力")],-1),g=(0,u.Uk)(" @fesjs/plugin-layout"),m=(0,u._)("td",null,"简单的配置即可拥有布局，包括导航以及侧边栏",-1),k=(0,u.Uk)("@fesjs/plugin-locale"),h=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Vue I18n"),(0,u.Uk)("，提供国际化能力")],-1),U=(0,u.Uk)("@fesjs/plugin-model"),w=(0,u._)("td",null,"简易的数据管理方案",-1),j=(0,u.Uk)("@fesjs/plugin-request"),W=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Axios"),(0,u.Uk)(" 封装的 request，内置防止重复请求、请求节流、错误处理等功能")],-1),v=(0,u.Uk)("@fesjs/plugin-vuex"),x=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Vuex"),(0,u.Uk)(", 提供状态管理能力")],-1),b=(0,u.Uk)("@fesjs/plugin-qiankun"),q=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"qiankun"),(0,u.Uk)("，提供微服务能力")],-1),C=(0,u.Uk)("@fesjs/plugin-sass"),y=(0,u._)("td",null,"样式支持sass",-1),R=(0,u.Uk)("@fesjs/plugin-monaco-editor"),S=(0,u._)("td",null,[(0,u.Uk)("提供代码编辑器能力， 基于"),(0,u._)("code",null,"monaco-editor"),(0,u.Uk)("（VS Code使用的代码编辑器）")],-1),V=(0,u.Uk)("@fesjs/plugin-windicss"),z=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"windicss"),(0,u.Uk)("，提供原子化 CSS 能力")],-1),A=(0,u.Uk)("@fesjs/plugin-pinia"),D=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"pinia"),(0,u.Uk)("，提供状态管理")],-1),E=(0,u.Uk)("@fesjs/plugin-watermark"),F=(0,u._)("td",null,"水印",-1),Z=(0,u._)("h2",{id:"架构",tabindex:"-1"},[(0,u._)("a",{class:"header-anchor",href:"#架构","aria-hidden":"true"},"#"),(0,u.Uk)(" 架构")],-1),B=["src"],H=(0,u._)("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),I={},J=(0,n(3744).Z)(I,[["render",function(l,e){const n=(0,u.up)("RouterLink");return(0,u.wg)(),(0,u.iD)(u.HY,null,[t,s,(0,u._)("table",null,[i,(0,u._)("tbody",null,[(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/access.html"},{default:(0,u.w5)((()=>[r])),_:1})]),d]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/enums.html"},{default:(0,u.w5)((()=>[_])),_:1})]),a]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/icon.html"},{default:(0,u.w5)((()=>[c])),_:1})]),f]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/jest.html"},{default:(0,u.w5)((()=>[o])),_:1})]),p]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/layout.html"},{default:(0,u.w5)((()=>[g])),_:1})]),m]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/locale.html"},{default:(0,u.w5)((()=>[k])),_:1})]),h]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/model.html"},{default:(0,u.w5)((()=>[U])),_:1})]),w]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/request.html"},{default:(0,u.w5)((()=>[j])),_:1})]),W]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/vuex.html"},{default:(0,u.w5)((()=>[v])),_:1})]),x]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/qiankun.html"},{default:(0,u.w5)((()=>[b])),_:1})]),q]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/sass.html"},{default:(0,u.w5)((()=>[C])),_:1})]),y]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/editor.html"},{default:(0,u.w5)((()=>[R])),_:1})]),S]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/windicss.html"},{default:(0,u.w5)((()=>[V])),_:1})]),z]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/pinia.html"},{default:(0,u.w5)((()=>[A])),_:1})]),D]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/watermark.html"},{default:(0,u.w5)((()=>[E])),_:1})]),F])])]),Z,(0,u._)("img",{src:l.$withBase("framework.png"),alt:"架构"},null,8,B),H],64)}]])},3744:(l,e)=>{e.Z=(l,e)=>{const n=l.__vccOpts||l;for(const[l,u]of e)n[l]=u;return n}}}]); \ No newline at end of file diff --git a/assets/js/v-d61a9282.8c1c86a1.js b/assets/js/v-d61a9282.8c1c86a1.js new file mode 100644 index 00000000..45e9dd2a --- /dev/null +++ b/assets/js/v-d61a9282.8c1c86a1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[783],{6811:(l,e,n)=>{n.r(e),n.d(e,{data:()=>u});const u={key:"v-d61a9282",path:"/reference/plugin/",title:"介绍",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"插件列表",slug:"插件列表",children:[]},{level:2,title:"架构",slug:"架构",children:[]}],filePathRelative:"reference/plugin/README.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},671:(l,e,n)=>{n.r(e),n.d(e,{default:()=>J});var u=n(6252);const t=(0,u._)("h1",{id:"介绍",tabindex:"-1"},[(0,u._)("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),(0,u.Uk)(" 介绍")],-1),s=(0,u._)("h2",{id:"插件列表",tabindex:"-1"},[(0,u._)("a",{class:"header-anchor",href:"#插件列表","aria-hidden":"true"},"#"),(0,u.Uk)(" 插件列表")],-1),i=(0,u._)("thead",null,[(0,u._)("tr",null,[(0,u._)("th",null,"插件"),(0,u._)("th",null,"介绍")])],-1),r=(0,u.Uk)("@fesjs/plugin-access"),d=(0,u._)("td",null,"提供对页面资源的权限控制能力",-1),_=(0,u.Uk)("@fesjs/plugin-enums"),a=(0,u._)("td",null,"提供统一的枚举存取及丰富的函数来处理枚举",-1),c=(0,u.Uk)("@fesjs/plugin-icon"),f=(0,u._)("td",null,"svg 文件自动注册为组件",-1),o=(0,u.Uk)("@fesjs/plugin-jest"),p=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Jest"),(0,u.Uk)("，提供单元测试、覆盖测试能力")],-1),g=(0,u.Uk)(" @fesjs/plugin-layout"),m=(0,u._)("td",null,"简单的配置即可拥有布局，包括导航以及侧边栏",-1),k=(0,u.Uk)("@fesjs/plugin-locale"),h=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Vue I18n"),(0,u.Uk)("，提供国际化能力")],-1),U=(0,u.Uk)("@fesjs/plugin-model"),w=(0,u._)("td",null,"简易的数据管理方案",-1),j=(0,u.Uk)("@fesjs/plugin-request"),W=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Axios"),(0,u.Uk)(" 封装的 request，内置防止重复请求、请求节流、错误处理等功能")],-1),v=(0,u.Uk)("@fesjs/plugin-vuex"),b=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Vuex"),(0,u.Uk)(", 提供状态管理能力")],-1),x=(0,u.Uk)("@fesjs/plugin-qiankun"),q=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"qiankun"),(0,u.Uk)("，提供微服务能力")],-1),C=(0,u.Uk)("@fesjs/plugin-sass"),y=(0,u._)("td",null,"样式支持sass",-1),R=(0,u.Uk)("@fesjs/plugin-monaco-editor"),S=(0,u._)("td",null,[(0,u.Uk)("提供代码编辑器能力， 基于"),(0,u._)("code",null,"monaco-editor"),(0,u.Uk)("（VS Code使用的代码编辑器）")],-1),V=(0,u.Uk)("@fesjs/plugin-windicss"),z=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"windicss"),(0,u.Uk)("，提供原子化 CSS 能力")],-1),A=(0,u.Uk)("@fesjs/plugin-pinia"),D=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"pinia"),(0,u.Uk)("，提供状态管理")],-1),E=(0,u.Uk)("@fesjs/plugin-watermark"),F=(0,u._)("td",null,"水印",-1),Z=(0,u._)("h2",{id:"架构",tabindex:"-1"},[(0,u._)("a",{class:"header-anchor",href:"#架构","aria-hidden":"true"},"#"),(0,u.Uk)(" 架构")],-1),B=["src"],H=(0,u._)("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),I={},J=(0,n(3744).Z)(I,[["render",function(l,e){const n=(0,u.up)("RouterLink");return(0,u.wg)(),(0,u.iD)(u.HY,null,[t,s,(0,u._)("table",null,[i,(0,u._)("tbody",null,[(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/access.html"},{default:(0,u.w5)((()=>[r])),_:1})]),d]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/enums.html"},{default:(0,u.w5)((()=>[_])),_:1})]),a]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/icon.html"},{default:(0,u.w5)((()=>[c])),_:1})]),f]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/jest.html"},{default:(0,u.w5)((()=>[o])),_:1})]),p]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/layout.html"},{default:(0,u.w5)((()=>[g])),_:1})]),m]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/locale.html"},{default:(0,u.w5)((()=>[k])),_:1})]),h]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/model.html"},{default:(0,u.w5)((()=>[U])),_:1})]),w]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/request.html"},{default:(0,u.w5)((()=>[j])),_:1})]),W]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/vuex.html"},{default:(0,u.w5)((()=>[v])),_:1})]),b]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/qiankun.html"},{default:(0,u.w5)((()=>[x])),_:1})]),q]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/sass.html"},{default:(0,u.w5)((()=>[C])),_:1})]),y]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/editor.html"},{default:(0,u.w5)((()=>[R])),_:1})]),S]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/windicss.html"},{default:(0,u.w5)((()=>[V])),_:1})]),z]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/pinia.html"},{default:(0,u.w5)((()=>[A])),_:1})]),D]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/watermark.html"},{default:(0,u.w5)((()=>[E])),_:1})]),F])])]),Z,(0,u._)("img",{src:l.$withBase("framework.png"),alt:"架构"},null,8,B),H],64)}]])},3744:(l,e)=>{e.Z=(l,e)=>{const n=l.__vccOpts||l;for(const[l,u]of e)n[l]=u;return n}}}]); \ No newline at end of file diff --git a/assets/js/v-d7fa887a.29c9fa16.js b/assets/js/v-d7fa887a.29c9fa16.js new file mode 100644 index 00000000..940c85f7 --- /dev/null +++ b/assets/js/v-d7fa887a.29c9fa16.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[617],{4148:(e,a,s)=>{s.r(a),s.d(a,{data:()=>n});const n={key:"v-d7fa887a",path:"/guide/contributing.html",title:"贡献指南",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"包概览",slug:"包概览",children:[]},{level:2,title:"开发准备",slug:"开发准备",children:[]},{level:2,title:"贡献文档",slug:"贡献文档",children:[]},{level:2,title:"贡献源码",slug:"贡献源码",children:[]},{level:2,title:"提交PR",slug:"提交pr",children:[]}],filePathRelative:"guide/contributing.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},2526:(e,a,s)=>{s.r(a),s.d(a,{default:()=>I});var n=s(6252);const l=(0,n._)("h1",{id:"贡献指南",tabindex:"-1"},[(0,n._)("a",{class:"header-anchor",href:"#贡献指南","aria-hidden":"true"},"#"),(0,n.Uk)(" 贡献指南")],-1),r=(0,n._)("h2",{id:"包概览",tabindex:"-1"},[(0,n._)("a",{class:"header-anchor",href:"#包概览","aria-hidden":"true"},"#"),(0,n.Uk)(" 包概览")],-1),o=(0,n.Uk)("项目仓库借助于 "),t={href:"https://classic.yarnpkg.com/zh-Hans/docs/workspaces",target:"_blank",rel:"noopener noreferrer"},i=(0,n.Uk)("Yarn 工作区"),c=(0,n.Uk)(" 来实现 "),d={href:"https://en.wikipedia.org/wiki/Monorepo",target:"_blank",rel:"noopener noreferrer"},p=(0,n.Uk)(" Monorepo"),u=(0,n.Uk)(" ，在 "),h=(0,n._)("code",null,"packages",-1),b=(0,n.Uk)(" 目录下存放多个互相关联的独立包。"),f=(0,n.uE)('

    • @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，用户只需要安装此依赖和其他插件。

    开发准备

    开发要求：

    ',3),m={href:"http://nodejs.org",target:"_blank",rel:"noopener noreferrer"},g=(0,n.Uk)("Node.js v14+"),k={href:"https://classic.yarnpkg.com/zh-Hans/docs/install",target:"_blank",rel:"noopener noreferrer"},v=(0,n.Uk)("Yarn v1"),_=(0,n._)("p",null,"本项目开发使用的一些主要工具：",-1),j={href:"https://jestjs.io/",target:"_blank",rel:"noopener noreferrer"},x=(0,n.Uk)("Jest"),U=(0,n.Uk)(" 用于单元测试"),w={href:"https://eslint.org/",target:"_blank",rel:"noopener noreferrer"},y=(0,n.Uk)("ESLint"),W=(0,n.Uk)(" + "),P={href:"https://prettier.io/",target:"_blank",rel:"noopener noreferrer"},q=(0,n.Uk)("Prettier"),z=(0,n.Uk)(" 用于代码检查和格式化"),E=(0,n.uE)('

    克隆仓库：

    git clone https://github.com/WeBankFinTech/fes.js.git\n
    1

    进入fes.js目录，安装依赖：

    yarn\n
    1

    贡献文档

    ',5),C=(0,n.Uk)("文档代码在"),H=(0,n._)("code",null,"docs",-1),R=(0,n.Uk)("目录，基于 "),A={href:"https://v2.vuepress.vuejs.org/zh/",target:"_blank",rel:"noopener noreferrer"},F=(0,n.Uk)("vuepress"),M=(0,n.Uk)(" 实现。"),Y=(0,n.uE)('

    第一步：启动服务

    yarn docs:dev\n
    1

    第二步：修改md文件

    菜单配置在/docs/.vuepress/configs/sidebar/zh.ts中，可以通过此配置找到对应想修改的文档。

    如果想添加图片，则可以先把图片添加至/docs/.vuepress/public，在代码中使用：

    <img :src="$withBase('framework.png')" alt="架构">\n
    1

    第三步：查看更新

    当md文档保存后，文档会自动更新，在http://localhost:8080/查看。

    贡献源码

    Fes.js统一使用ES Module规范编写源码，代码会在 node 端和浏览器端执行，所以源码需要编译后才能发布成包，再被执行。

    启动编译服务

    yarn dev\n
    1

    当我们修改build.config.js中配置的包代码时，会把src目录的源码编译后到lib目录。

    修改源码

    在了解Fes.js设计前提下，修改核心代码或者插件代码。

    验证修改内容

    根据需求选择模板项目来验证修改内容，比如选择fes-template：

    1. 查看需待验证包是否已经添加到模板项目的依赖中，如果没有则在模板项目的 package.json 中添加包依赖，添加后在根目录执行yarn关联依赖
    2. 启动模板项目的开发服务
    cd packages/fes-template\nyarn dev\n
    1
    2
    1. 在项目模板中添加代码验证修改内容
    2. 打开localhost:8000查看结果

    快速调试技巧

    每次修改插件或者核心代码后，等待自动编译完，需要在模板目录重新执行fes dev，比较费时费力。

    可以先在模板的 .fes 目录中找到对应临时代码，更改逻辑，验证完后再将变更逻辑保存到正式文件中。

    注意

    直接修改临时文件切莫重新执行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
    ',26),B={},I=(0,s(3744).Z)(B,[["render",function(e,a){const s=(0,n.up)("OutboundLink");return(0,n.wg)(),(0,n.iD)(n.HY,null,[l,r,(0,n._)("p",null,[o,(0,n._)("a",t,[i,(0,n.Wm)(s)]),c,(0,n._)("a",d,[p,(0,n.Wm)(s)]),u,h,b]),f,(0,n._)("ul",null,[(0,n._)("li",null,[(0,n._)("a",m,[g,(0,n.Wm)(s)])]),(0,n._)("li",null,[(0,n._)("a",k,[v,(0,n.Wm)(s)])])]),_,(0,n._)("ul",null,[(0,n._)("li",null,[(0,n._)("a",j,[x,(0,n.Wm)(s)]),U]),(0,n._)("li",null,[(0,n._)("a",w,[y,(0,n.Wm)(s)]),W,(0,n._)("a",P,[q,(0,n.Wm)(s)]),z])]),E,(0,n._)("p",null,[C,H,R,(0,n._)("a",A,[F,(0,n.Wm)(s)]),M]),Y],64)}]])},3744:(e,a)=>{a.Z=(e,a)=>{const s=e.__vccOpts||e;for(const[e,n]of a)s[e]=n;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-d7fa887a.f0824947.js b/assets/js/v-d7fa887a.f0824947.js deleted file mode 100644 index 6c14309c..00000000 --- a/assets/js/v-d7fa887a.f0824947.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[617],{4148:(e,a,s)=>{s.r(a),s.d(a,{data:()=>n});const n={key:"v-d7fa887a",path:"/guide/contributing.html",title:"贡献指南",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"包概览",slug:"包概览",children:[]},{level:2,title:"开发准备",slug:"开发准备",children:[]},{level:2,title:"贡献文档",slug:"贡献文档",children:[]},{level:2,title:"贡献源码",slug:"贡献源码",children:[]},{level:2,title:"提交PR",slug:"提交pr",children:[]}],filePathRelative:"guide/contributing.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},2526:(e,a,s)=>{s.r(a),s.d(a,{default:()=>I});var n=s(6252);const l=(0,n._)("h1",{id:"贡献指南",tabindex:"-1"},[(0,n._)("a",{class:"header-anchor",href:"#贡献指南","aria-hidden":"true"},"#"),(0,n.Uk)(" 贡献指南")],-1),r=(0,n._)("h2",{id:"包概览",tabindex:"-1"},[(0,n._)("a",{class:"header-anchor",href:"#包概览","aria-hidden":"true"},"#"),(0,n.Uk)(" 包概览")],-1),t=(0,n.Uk)("项目仓库借助于 "),i={href:"https://classic.yarnpkg.com/zh-Hans/docs/workspaces",target:"_blank",rel:"noopener noreferrer"},o=(0,n.Uk)("Yarn 工作区"),c=(0,n.Uk)(" 来实现 "),d={href:"https://en.wikipedia.org/wiki/Monorepo",target:"_blank",rel:"noopener noreferrer"},p=(0,n.Uk)(" Monorepo"),u=(0,n.Uk)(" ，在 "),h=(0,n._)("code",null,"packages",-1),b=(0,n.Uk)(" 目录下存放多个互相关联的独立包。"),f=(0,n.uE)('

    • @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，用户只需要安装此依赖和其他插件。

    开发准备

    开发要求：

    ',3),m={href:"http://nodejs.org",target:"_blank",rel:"noopener noreferrer"},g=(0,n.Uk)("Node.js v14+"),k={href:"https://classic.yarnpkg.com/zh-Hans/docs/install",target:"_blank",rel:"noopener noreferrer"},v=(0,n.Uk)("Yarn v1"),_=(0,n._)("p",null,"本项目开发使用的一些主要工具：",-1),j={href:"https://jestjs.io/",target:"_blank",rel:"noopener noreferrer"},x=(0,n.Uk)("Jest"),U=(0,n.Uk)(" 用于单元测试"),w={href:"https://eslint.org/",target:"_blank",rel:"noopener noreferrer"},y=(0,n.Uk)("ESLint"),W=(0,n.Uk)(" + "),P={href:"https://prettier.io/",target:"_blank",rel:"noopener noreferrer"},q=(0,n.Uk)("Prettier"),z=(0,n.Uk)(" 用于代码检查和格式化"),E=(0,n.uE)('

    克隆仓库：

    git clone https://github.com/WeBankFinTech/fes.js.git\n
    1

    进入fes.js目录，安装依赖：

    yarn\n
    1

    贡献文档

    ',5),C=(0,n.Uk)("文档代码在"),H=(0,n._)("code",null,"docs",-1),R=(0,n.Uk)("目录，基于 "),A={href:"https://v2.vuepress.vuejs.org/zh/",target:"_blank",rel:"noopener noreferrer"},F=(0,n.Uk)("vuepress"),M=(0,n.Uk)(" 实现。"),Y=(0,n.uE)('

    第一步：启动服务

    yarn docs:dev\n
    1

    第二步：修改md文件

    菜单配置在/docs/.vuepress/configs/sidebar/zh.ts中，可以通过此配置找到对应想修改的文档。

    如果想添加图片，则可以先把图片添加至/docs/.vuepress/public，在代码中使用：

    <img :src="$withBase('framework.png')" alt="架构">\n
    1

    第三步：查看更新

    当md文档保存后，文档会自动更新，在http://localhost:8080/查看。

    贡献源码

    Fes.js统一使用ES Module规范编写源码，代码会在 node 端和浏览器端执行，所以源码需要编译后才能发布成包，再被执行。

    启动编译服务

    yarn dev\n
    1

    当我们修改build.config.js中配置的包代码时，会把src目录的源码编译后到lib目录。

    修改源码

    在了解Fes.js设计前提下，修改核心代码或者插件代码。

    验证修改内容

    根据需求选择模板项目来验证修改内容，比如选择fes-template：

    1. 查看需待验证包是否已经添加到模板项目的依赖中，如果没有则在模板项目的 package.json 中添加包依赖，添加后在根目录执行yarn关联依赖
    2. 启动模板项目的开发服务
    cd packages/fes-template\nyarn dev\n
    1
    2
    1. 在项目模板中添加代码验证修改内容
    2. 打开localhost:8000查看结果

    快速调试技巧

    每次修改插件或者核心代码后，等待自动编译完，需要在模板目录重新执行fes dev，比较费时费力。

    可以先在模板的 .fes 目录中找到对应临时代码，更改逻辑，验证完后再将变更逻辑保存到正式文件中。

    注意

    直接修改临时文件切莫重新执行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
    ',26),B={},I=(0,s(3744).Z)(B,[["render",function(e,a){const s=(0,n.up)("OutboundLink");return(0,n.wg)(),(0,n.iD)(n.HY,null,[l,r,(0,n._)("p",null,[t,(0,n._)("a",i,[o,(0,n.Wm)(s)]),c,(0,n._)("a",d,[p,(0,n.Wm)(s)]),u,h,b]),f,(0,n._)("ul",null,[(0,n._)("li",null,[(0,n._)("a",m,[g,(0,n.Wm)(s)])]),(0,n._)("li",null,[(0,n._)("a",k,[v,(0,n.Wm)(s)])])]),_,(0,n._)("ul",null,[(0,n._)("li",null,[(0,n._)("a",j,[x,(0,n.Wm)(s)]),U]),(0,n._)("li",null,[(0,n._)("a",w,[y,(0,n.Wm)(s)]),W,(0,n._)("a",P,[q,(0,n.Wm)(s)]),z])]),E,(0,n._)("p",null,[C,H,R,(0,n._)("a",A,[F,(0,n.Wm)(s)]),M]),Y],64)}]])},3744:(e,a)=>{a.Z=(e,a)=>{const s=e.__vccOpts||e;for(const[e,n]of a)s[e]=n;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-ef8c5e10.2a7afead.js b/assets/js/v-ef8c5e10.2a7afead.js deleted file mode 100644 index 770ebd83..00000000 --- a/assets/js/v-ef8c5e10.2a7afead.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[276],{9812:(e,a,s)=>{s.r(a),s.d(a,{data:()=>n});const n={key:"v-ef8c5e10",path:"/guide/env.html",title:"环境变量",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"配置环境变量",slug:"配置环境变量",children:[{level:3,title:"命令行添加",slug:"命令行添加",children:[]},{level:3,title:".env 文件配置",slug:"env-文件配置",children:[]}]},{level:2,title:"编译时配置列表",slug:"编译时配置列表",children:[{level:3,title:"FES_ENV",slug:"fes-env",children:[]},{level:3,title:"FES_PRESETS",slug:"fes-presets",children:[]},{level:3,title:"FES_PLUGINS",slug:"fes-plugins",children:[]},{level:3,title:"PORT",slug:"port",children:[]},{level:3,title:"HOST",slug:"host",children:[]},{level:3,title:"HTTPS",slug:"https",children:[]},{level:3,title:"WATCH",slug:"watch",children:[]},{level:3,title:"BABEL_CACHE",slug:"babel-cache",children:[]},{level:3,title:"ANALYZE",slug:"analyze",children:[]},{level:3,title:"ANALYZE_MODE",slug:"analyze-mode",children:[]},{level:3,title:"ANALYZE_PORT",slug:"analyze-port",children:[]},{level:3,title:"CLEAR_OUTPUT",slug:"clear-output",children:[]},{level:3,title:"RM_TMPDIR",slug:"rm-tmpdir",children:[]}]},{level:2,title:"process.env",slug:"process-env",children:[]}],filePathRelative:"guide/env.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},3559:(e,a,s)=>{s.r(a),s.d(a,{default:()=>h});var n=s(6252);const l=(0,n.uE)('

    环境变量

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

    配置环境变量

    命令行添加

    比如：

    # OS X, Linux\nPORT=3000 fes dev\n\n# Windows (cmd.exe)\nset PORT=3000 && fes dev\n
    1
    2
    3
    4
    5
    ',6),r=(0,n.Uk)("如果要同时考虑 OS X 和 Windows，可借助三方工具 "),d={href:"https://github.com/kentcdodds/cross-env",target:"_blank",rel:"noopener noreferrer"},c=(0,n.Uk)("cross-env"),t=(0,n._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,n._)("pre",{class:"language-bash"},[(0,n._)("code",null,[(0,n._)("span",{class:"token function"},"yarn"),(0,n.Uk)(),(0,n._)("span",{class:"token function"},"add"),(0,n.Uk)(" cross-env --dev\ncross-env "),(0,n._)("span",{class:"token assign-left variable"},"PORT"),(0,n._)("span",{class:"token operator"},"="),(0,n._)("span",{class:"token number"},"3000"),(0,n.Uk)(" fes dev\n")])]),(0,n._)("div",{class:"line-numbers"},[(0,n._)("span",{class:"line-number"},"1"),(0,n._)("br"),(0,n._)("span",{class:"line-number"},"2"),(0,n._)("br")])],-1),i=(0,n._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,n._)("pre",{class:"language-bash"},[(0,n._)("code",null,[(0,n._)("span",{class:"token function"},"npm"),(0,n.Uk)(" i cross-env --save-dev\ncross-env "),(0,n._)("span",{class:"token assign-left variable"},"PORT"),(0,n._)("span",{class:"token operator"},"="),(0,n._)("span",{class:"token number"},"3000"),(0,n.Uk)(" fes dev\n")])]),(0,n._)("div",{class:"line-numbers"},[(0,n._)("span",{class:"line-number"},"1"),(0,n._)("br"),(0,n._)("span",{class:"line-number"},"2"),(0,n._)("br")])],-1),o=(0,n.uE)('

    .env 文件配置

    Fes.js 中约定根目录下以 .env 开头的文件为环境变量配置文件。

    比如：

    PORT=3000\n
    1

    然后执行

    fes dev\n
    1

    会以 3000 端口启动 dev server。

    本地临时配置

    可以新建 .env.local，这份配置会和 .env 做合并后形成最终配置。

    环境配置

    可以通过环境变量 FES_ENV 区分不同环境来指定配置，这时候必须在执行命令前添加 FES_ENV 保证执行加载环境变量配置文件逻辑前 FES_ENV 已设置。

    举个 🌰 ：

    FES_ENV=sit fes dev\n
    1

    如果存在 .env.sit 文件，则会将 .env.sit 的配置和 .env 做合并后形成最终配置。

    配置优先级

    本地临时配置 > 环境配置 > 基础配置

    提示

    如果多份配置中存在相同的配置项，则优先级高的会覆盖优先级低的。

    编译时配置列表

    编译时配置是在构建过程需要的变量，开放给用户配置。

    FES_ENV

    指定当前的环境，不同环境各自的配置文件。

    提示

    FES_ENV 在会在加载.env前使用，所以只能用命令行方式配置。

    FES_PRESETS

    添加额外的插件集入口

    FES_PLUGINS

    添加额外的插件入口

    PORT

    fes dev 时服务指定的端口号，默认是 8080

    HOST

    默认是 localhost。

    HTTPS

    默认是 false。

    WATCH

    设为 none 时不监听文件变更。比如：

    WATCH=none fes dev\n
    1

    BABEL_CACHE

    默认开启 Babel 编译缓存，值为 none 时禁用缓存。

    ANALYZE

    用于分析 bundle 构成，默认关闭。

    比如：

    ANALYZE=1 fes build\n
    1

    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\n
    1

    在代码中使用：

    console.log(process.env.FES_APP_KEY)\n// 输出 123456789\n
    1
    2

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

    • NODE_ENV：Node 环境变量

    • FES_ENV：Fes.js 环境变量

    • BASE_URL：等同于 publicPath

    ',56),p={},h=(0,s(3744).Z)(p,[["render",function(e,a){const s=(0,n.up)("OutboundLink"),p=(0,n.up)("CodeGroupItem"),h=(0,n.up)("CodeGroup");return(0,n.wg)(),(0,n.iD)(n.HY,null,[l,(0,n._)("p",null,[r,(0,n._)("a",d,[c,(0,n.Wm)(s)])]),(0,n.Wm)(h,null,{default:(0,n.w5)((()=>[(0,n.Wm)(p,{title:"YARN",active:""},{default:(0,n.w5)((()=>[t])),_:1}),(0,n.Wm)(p,{title:"NPM"},{default:(0,n.w5)((()=>[i])),_:1})])),_:1}),o],64)}]])},3744:(e,a)=>{a.Z=(e,a)=>{const s=e.__vccOpts||e;for(const[e,n]of a)s[e]=n;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-ef8c5e10.46a2d838.js b/assets/js/v-ef8c5e10.46a2d838.js new file mode 100644 index 00000000..bddf658f --- /dev/null +++ b/assets/js/v-ef8c5e10.46a2d838.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[276],{9812:(e,a,s)=>{s.r(a),s.d(a,{data:()=>n});const n={key:"v-ef8c5e10",path:"/guide/env.html",title:"环境变量",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"配置环境变量",slug:"配置环境变量",children:[{level:3,title:"命令行添加",slug:"命令行添加",children:[]},{level:3,title:".env 文件配置",slug:"env-文件配置",children:[]}]},{level:2,title:"编译时配置列表",slug:"编译时配置列表",children:[{level:3,title:"FES_ENV",slug:"fes-env",children:[]},{level:3,title:"FES_PRESETS",slug:"fes-presets",children:[]},{level:3,title:"FES_PLUGINS",slug:"fes-plugins",children:[]},{level:3,title:"PORT",slug:"port",children:[]},{level:3,title:"HOST",slug:"host",children:[]},{level:3,title:"HTTPS",slug:"https",children:[]},{level:3,title:"WATCH",slug:"watch",children:[]},{level:3,title:"BABEL_CACHE",slug:"babel-cache",children:[]},{level:3,title:"ANALYZE",slug:"analyze",children:[]},{level:3,title:"ANALYZE_MODE",slug:"analyze-mode",children:[]},{level:3,title:"ANALYZE_PORT",slug:"analyze-port",children:[]},{level:3,title:"CLEAR_OUTPUT",slug:"clear-output",children:[]},{level:3,title:"RM_TMPDIR",slug:"rm-tmpdir",children:[]}]},{level:2,title:"process.env",slug:"process-env",children:[]}],filePathRelative:"guide/env.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},3559:(e,a,s)=>{s.r(a),s.d(a,{default:()=>h});var n=s(6252);const l=(0,n.uE)('

    环境变量

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

    配置环境变量

    命令行添加

    比如：

    # OS X, Linux\nPORT=3000 fes dev\n\n# Windows (cmd.exe)\nset PORT=3000 && fes dev\n
    1
    2
    3
    4
    5
    ',6),r=(0,n.Uk)("如果要同时考虑 OS X 和 Windows，可借助三方工具 "),d={href:"https://github.com/kentcdodds/cross-env",target:"_blank",rel:"noopener noreferrer"},c=(0,n.Uk)("cross-env"),t=(0,n._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,n._)("pre",{class:"language-bash"},[(0,n._)("code",null,[(0,n._)("span",{class:"token function"},"yarn"),(0,n.Uk)(),(0,n._)("span",{class:"token function"},"add"),(0,n.Uk)(" cross-env --dev\ncross-env "),(0,n._)("span",{class:"token assign-left variable"},"PORT"),(0,n._)("span",{class:"token operator"},"="),(0,n._)("span",{class:"token number"},"3000"),(0,n.Uk)(" fes dev\n")])]),(0,n._)("div",{class:"line-numbers"},[(0,n._)("span",{class:"line-number"},"1"),(0,n._)("br"),(0,n._)("span",{class:"line-number"},"2"),(0,n._)("br")])],-1),i=(0,n._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,n._)("pre",{class:"language-bash"},[(0,n._)("code",null,[(0,n._)("span",{class:"token function"},"npm"),(0,n.Uk)(" i cross-env --save-dev\ncross-env "),(0,n._)("span",{class:"token assign-left variable"},"PORT"),(0,n._)("span",{class:"token operator"},"="),(0,n._)("span",{class:"token number"},"3000"),(0,n.Uk)(" fes dev\n")])]),(0,n._)("div",{class:"line-numbers"},[(0,n._)("span",{class:"line-number"},"1"),(0,n._)("br"),(0,n._)("span",{class:"line-number"},"2"),(0,n._)("br")])],-1),o=(0,n.uE)('

    .env 文件配置

    Fes.js 中约定根目录下以 .env 开头的文件为环境变量配置文件。

    比如：

    PORT=3000\n
    1

    然后执行

    fes dev\n
    1

    会以 3000 端口启动 dev server。

    本地临时配置

    可以新建 .env.local，这份配置会和 .env 做合并后形成最终配置。

    环境配置

    可以通过环境变量 FES_ENV 区分不同环境来指定配置，这时候必须在执行命令前添加 FES_ENV 保证执行加载环境变量配置文件逻辑前 FES_ENV 已设置。

    举个 🌰 ：

    FES_ENV=sit fes dev\n
    1

    如果存在 .env.sit 文件，则会将 .env.sit 的配置和 .env 做合并后形成最终配置。

    配置优先级

    本地临时配置 > 环境配置 > 基础配置

    提示

    如果多份配置中存在相同的配置项，则优先级高的会覆盖优先级低的。

    编译时配置列表

    编译时配置是在构建过程需要的变量，开放给用户配置。

    FES_ENV

    指定当前的环境，不同环境各自的配置文件。

    提示

    FES_ENV 在会在加载.env前使用，所以只能用命令行方式配置。

    FES_PRESETS

    添加额外的插件集入口

    FES_PLUGINS

    添加额外的插件入口

    PORT

    fes dev 时服务指定的端口号，默认是 8080

    HOST

    默认是 localhost。

    HTTPS

    默认是 false。

    WATCH

    设为 none 时不监听文件变更。比如：

    WATCH=none fes dev\n
    1

    BABEL_CACHE

    默认开启 Babel 编译缓存，值为 none 时禁用缓存。

    ANALYZE

    用于分析 bundle 构成，默认关闭。

    比如：

    ANALYZE=1 fes build\n
    1

    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\n
    1

    在代码中使用：

    console.log(process.env.FES_APP_KEY)\n// 输出 123456789\n
    1
    2

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

    • NODE_ENV：Node 环境变量

    • FES_ENV：Fes.js 环境变量

    • BASE_URL：等同于 publicPath

    ',56),p={},h=(0,s(3744).Z)(p,[["render",function(e,a){const s=(0,n.up)("OutboundLink"),p=(0,n.up)("CodeGroupItem"),h=(0,n.up)("CodeGroup");return(0,n.wg)(),(0,n.iD)(n.HY,null,[l,(0,n._)("p",null,[r,(0,n._)("a",d,[c,(0,n.Wm)(s)])]),(0,n.Wm)(h,null,{default:(0,n.w5)((()=>[(0,n.Wm)(p,{title:"YARN",active:""},{default:(0,n.w5)((()=>[t])),_:1}),(0,n.Wm)(p,{title:"NPM"},{default:(0,n.w5)((()=>[i])),_:1})])),_:1}),o],64)}]])},3744:(e,a)=>{a.Z=(e,a)=>{const s=e.__vccOpts||e;for(const[e,n]of a)s[e]=n;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-fb0f0066.6793fab9.js b/assets/js/v-fb0f0066.6793fab9.js deleted file mode 100644 index 6ffad4fc..00000000 --- a/assets/js/v-fb0f0066.6793fab9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[170],{3866:(n,s,e)=>{e.r(s),e.d(s,{data:()=>a});const a={key:"v-fb0f0066",path:"/guide/getting-started.html",title:"快速上手",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"依赖环境",slug:"依赖环境",children:[]},{level:2,title:"创建项目",slug:"创建项目",children:[]},{level:2,title:"启动项目",slug:"启动项目",children:[]},{level:2,title:"部署发布",slug:"部署发布",children:[{level:3,title:"构建",slug:"构建",children:[]},{level:3,title:"本地验证",slug:"本地验证",children:[]},{level:3,title:"部署",slug:"部署",children:[]}]}],filePathRelative:"guide/getting-started.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},7217:(n,s,e)=>{e.r(s),e.d(s,{default:()=>X});var a=e(6252);const l=(0,a._)("h1",{id:"快速上手",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#快速上手","aria-hidden":"true"},"#"),(0,a.Uk)(" 快速上手")],-1),r=(0,a._)("h2",{id:"依赖环境",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#依赖环境","aria-hidden":"true"},"#"),(0,a.Uk)(" 依赖环境")],-1),c=(0,a.Uk)("首先得有 "),i={href:"https://nodejs.org/",target:"_blank",rel:"noopener noreferrer"},p=(0,a.Uk)("Node.js"),u=(0,a.Uk)("，并确保 node 版本是 10.13 或以上。"),t=(0,a.uE)('
    # 打印 node 版本\nnode -v\nv10.13.0\n
    1
    2
    3

    推荐使用 yarn 管理 npm 依赖

    # 全局安装 yarn\nnpm i yarn -g\n
    1
    2

    创建项目

    这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。

    步骤1 创建工作空间

    如果工作空间不存在，则先创建：

    # 创建目录 workspace\nmkdir workspace\n# 进入目录 workspace\ncd workspace\n
    1
    2
    3
    4

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

    # 进入目录 workspace\ncd workspace\n
    1
    2
    步骤2 在工作空间创建项目
    ',11),b=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" create @fesjs/fes-app myapp\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br")])],-1),_=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\nnpx @fesjs/create-fes-app myapp\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br")])],-1),d=(0,a._)("p",null,[(0,a.Uk)("如果项目文件夹 "),(0,a._)("code",null,"workspace/myapp"),(0,a.Uk)(" 已经存在，会提示目录已存在：")],-1),o=["src"],m=(0,a._)("p",null,"你可以选择：",-1),k=(0,a._)("ul",null,[(0,a._)("li",null,[(0,a._)("code",null,"Overwrite"),(0,a.Uk)(" 删除项目文件夹，重新创建项目。")]),(0,a._)("li",null,[(0,a._)("code",null,"Merge"),(0,a.Uk)(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),h=(0,a.Uk)("当选择 "),g=(0,a._)("code",null,"Overwrite",-1),f=(0,a.Uk)(" 或者 "),v=(0,a._)("code",null,"Merge",-1),U=(0,a.Uk)(" 或者项目目录 "),w=(0,a._)("code",null,"workspace/myapp",-1),x=(0,a.Uk)(" 不存在，会提示选取一个 "),y=(0,a._)("code",null,"template",-1),W=(0,a.Uk)("： "),C=["src"],N=(0,a._)("p",null,[(0,a.Uk)("你可以选默认适用于中后台前端应用的 "),(0,a._)("code",null,"PC"),(0,a.Uk)(" 类型，也可以选适用于移动端的 "),(0,a._)("code",null,"H5"),(0,a.Uk)(" 类型。")],-1),j=(0,a._)("h5",{id:"步骤3-安装依赖",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#步骤3-安装依赖","aria-hidden":"true"},"#"),(0,a.Uk)(" 步骤3 安装依赖")],-1),M=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 进入项目目录"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token builtin class-name"},"cd"),(0,a.Uk)(" myapp\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" \n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br")])],-1),A=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 进入项目目录"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token builtin class-name"},"cd"),(0,a.Uk)(" myapp\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" i \n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br")])],-1),O=(0,a._)("h2",{id:"启动项目",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#启动项目","aria-hidden":"true"},"#"),(0,a.Uk)(" 启动项目")],-1),P=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 开发调试"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" dev\n\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" run v1.22.4\n$ fes dev\nStarting the development server http://localhost:8080 "),(0,a._)("span",{class:"token punctuation"},".."),(0,a.Uk)(".\n\n✔ Webpack\n Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(),(0,a._)("span",{class:"token number"},"15"),(0,a.Uk)(".91s\n\n DONE Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(" 15917ms "),(0,a._)("span",{class:"token number"},"11"),(0,a.Uk)(":17:08 AM\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"9"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"10"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"11"),(0,a._)("br")])],-1),R=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 开发调试"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" run dev\n\n"),(0,a._)("span",{class:"token operator"},">"),(0,a.Uk)(" fes dev\nStarting the development server http://localhost:8080 "),(0,a._)("span",{class:"token punctuation"},".."),(0,a.Uk)(".\n\n✔ Webpack\n Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(),(0,a._)("span",{class:"token number"},"3"),(0,a.Uk)(".66s\n\n DONE Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(" 3662ms "),(0,a._)("span",{class:"token number"},"11"),(0,a.Uk)(":17:46 AM\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"9"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"10"),(0,a._)("br")])],-1),Y=(0,a.Uk)("Fes.js 会在 "),$={href:"http://localhost:8080",target:"_blank",rel:"noopener noreferrer"},D=(0,a.Uk)("http://localhost:8080"),E=(0,a.Uk)(" 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。"),T=["src"],B=(0,a._)("h2",{id:"部署发布",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#部署发布","aria-hidden":"true"},"#"),(0,a.Uk)(" 部署发布")],-1),z=(0,a._)("h3",{id:"构建",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#构建","aria-hidden":"true"},"#"),(0,a.Uk)(" 构建")],-1),F=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 构建"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" build\n\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" run v1.22.4\n$ fes build\n\n✔ Webpack\n Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(),(0,a._)("span",{class:"token number"},"45"),(0,a.Uk)(".37s\n\n✨ Done "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(),(0,a._)("span",{class:"token number"},"48"),(0,a.Uk)(".87s.\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"9"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"10"),(0,a._)("br")])],-1),G=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 构建"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" run build\n\n"),(0,a._)("span",{class:"token operator"},">"),(0,a.Uk)(" fes build\n\n✔ Webpack\n Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(),(0,a._)("span",{class:"token number"},"45"),(0,a.Uk)(".37s\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br")])],-1),H=(0,a.uE)('

    构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。

    tree ./dist\n\ndist\n├── chunk-vendors.27cd4686.js\n├── chunk-vendors.a5f5de67.css\n├── index.11411d43.css\n├── index.d72f1ba2.js\n├── index.html\n├── logo.png\n└── static\n    └── logo.0f85bba0.png\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    本地验证

    ',3),S=(0,a.Uk)("发布之前，可以通过 "),Z={href:"https://github.com/vercel/serve",target:"_blank",rel:"noopener noreferrer"},I=(0,a.Uk)("serve"),L=(0,a.Uk)(" 做本地验证，验证结果应该跟执行 "),q=(0,a._)("code",null,"fes dev",-1),J=(0,a.Uk)(" 的结果一样。"),K=(0,a._)("h3",{id:"部署",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#部署","aria-hidden":"true"},"#"),(0,a.Uk)(" 部署")],-1),Q=(0,a._)("p",null,"本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。",-1),V={},X=(0,e(3744).Z)(V,[["render",function(n,s){const e=(0,a.up)("OutboundLink"),V=(0,a.up)("CodeGroupItem"),X=(0,a.up)("CodeGroup");return(0,a.wg)(),(0,a.iD)(a.HY,null,[l,r,(0,a._)("p",null,[c,(0,a._)("a",i,[p,(0,a.Wm)(e)]),u]),t,(0,a.Wm)(X,null,{default:(0,a.w5)((()=>[(0,a.Wm)(V,{title:"YARN",active:""},{default:(0,a.w5)((()=>[b])),_:1}),(0,a.Wm)(V,{title:"NPM"},{default:(0,a.w5)((()=>[_])),_:1})])),_:1}),d,(0,a._)("img",{src:n.$withBase("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,o),m,k,(0,a._)("p",null,[h,g,f,v,U,w,x,y,W,(0,a._)("img",{src:n.$withBase("pickTemplate.png"),alt:"选择模板类型"},null,8,C)]),N,j,(0,a.Wm)(X,null,{default:(0,a.w5)((()=>[(0,a.Wm)(V,{title:"YARN",active:""},{default:(0,a.w5)((()=>[M])),_:1}),(0,a.Wm)(V,{title:"NPM"},{default:(0,a.w5)((()=>[A])),_:1})])),_:1}),O,(0,a.Wm)(X,null,{default:(0,a.w5)((()=>[(0,a.Wm)(V,{title:"YARN",active:""},{default:(0,a.w5)((()=>[P])),_:1}),(0,a.Wm)(V,{title:"NPM"},{default:(0,a.w5)((()=>[R])),_:1})])),_:1}),(0,a._)("p",null,[Y,(0,a._)("a",$,[D,(0,a.Wm)(e)]),E]),(0,a._)("img",{src:n.$withBase("home.png"),alt:"home"},null,8,T),B,z,(0,a.Wm)(X,null,{default:(0,a.w5)((()=>[(0,a.Wm)(V,{title:"YARN",active:""},{default:(0,a.w5)((()=>[F])),_:1}),(0,a.Wm)(V,{title:"NPM"},{default:(0,a.w5)((()=>[G])),_:1})])),_:1}),H,(0,a._)("p",null,[S,(0,a._)("a",Z,[I,(0,a.Wm)(e)]),L,q,J]),K,Q],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const e=n.__vccOpts||n;for(const[n,a]of s)e[n]=a;return e}}}]); \ No newline at end of file diff --git a/assets/js/v-fb0f0066.a34cf364.js b/assets/js/v-fb0f0066.a34cf364.js new file mode 100644 index 00000000..533b728f --- /dev/null +++ b/assets/js/v-fb0f0066.a34cf364.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[170],{3866:(n,s,e)=>{e.r(s),e.d(s,{data:()=>a});const a={key:"v-fb0f0066",path:"/guide/getting-started.html",title:"快速上手",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"依赖环境",slug:"依赖环境",children:[]},{level:2,title:"创建项目",slug:"创建项目",children:[]},{level:2,title:"启动项目",slug:"启动项目",children:[]},{level:2,title:"部署发布",slug:"部署发布",children:[{level:3,title:"构建",slug:"构建",children:[]},{level:3,title:"本地验证",slug:"本地验证",children:[]},{level:3,title:"部署",slug:"部署",children:[]}]}],filePathRelative:"guide/getting-started.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},7217:(n,s,e)=>{e.r(s),e.d(s,{default:()=>X});var a=e(6252);const l=(0,a._)("h1",{id:"快速上手",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#快速上手","aria-hidden":"true"},"#"),(0,a.Uk)(" 快速上手")],-1),r=(0,a._)("h2",{id:"依赖环境",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#依赖环境","aria-hidden":"true"},"#"),(0,a.Uk)(" 依赖环境")],-1),c=(0,a.Uk)("首先得有 "),i={href:"https://nodejs.org/",target:"_blank",rel:"noopener noreferrer"},p=(0,a.Uk)("Node.js"),u=(0,a.Uk)("，并确保 node 版本是 10.13 或以上。"),t=(0,a.uE)('
    # 打印 node 版本\nnode -v\nv10.13.0\n
    1
    2
    3

    推荐使用 yarn 管理 npm 依赖

    # 全局安装 yarn\nnpm i yarn -g\n
    1
    2

    创建项目

    这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。

    步骤1 创建工作空间

    如果工作空间不存在，则先创建：

    # 创建目录 workspace\nmkdir workspace\n# 进入目录 workspace\ncd workspace\n
    1
    2
    3
    4

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

    # 进入目录 workspace\ncd workspace\n
    1
    2
    步骤2 在工作空间创建项目
    ',11),b=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" create @fesjs/fes-app myapp\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br")])],-1),_=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 创建模板"),(0,a.Uk)("\nnpx @fesjs/create-fes-app myapp\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br")])],-1),d=(0,a._)("p",null,[(0,a.Uk)("如果项目文件夹 "),(0,a._)("code",null,"workspace/myapp"),(0,a.Uk)(" 已经存在，会提示目录已存在：")],-1),o=["src"],m=(0,a._)("p",null,"你可以选择：",-1),k=(0,a._)("ul",null,[(0,a._)("li",null,[(0,a._)("code",null,"Overwrite"),(0,a.Uk)(" 删除项目文件夹，重新创建项目。")]),(0,a._)("li",null,[(0,a._)("code",null,"Merge"),(0,a.Uk)(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),h=(0,a.Uk)("当选择 "),g=(0,a._)("code",null,"Overwrite",-1),f=(0,a.Uk)(" 或者 "),v=(0,a._)("code",null,"Merge",-1),U=(0,a.Uk)(" 或者项目目录 "),w=(0,a._)("code",null,"workspace/myapp",-1),x=(0,a.Uk)(" 不存在，会提示选取一个 "),y=(0,a._)("code",null,"template",-1),W=(0,a.Uk)("： "),C=["src"],N=(0,a._)("p",null,[(0,a.Uk)("你可以选默认适用于中后台前端应用的 "),(0,a._)("code",null,"PC"),(0,a.Uk)(" 类型，也可以选适用于移动端的 "),(0,a._)("code",null,"H5"),(0,a.Uk)(" 类型。")],-1),j=(0,a._)("h5",{id:"步骤3-安装依赖",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#步骤3-安装依赖","aria-hidden":"true"},"#"),(0,a.Uk)(" 步骤3 安装依赖")],-1),M=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 进入项目目录"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token builtin class-name"},"cd"),(0,a.Uk)(" myapp\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" \n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br")])],-1),A=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 进入项目目录"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token builtin class-name"},"cd"),(0,a.Uk)(" myapp\n"),(0,a._)("span",{class:"token comment"},"# 安装依赖"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" i \n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br")])],-1),O=(0,a._)("h2",{id:"启动项目",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#启动项目","aria-hidden":"true"},"#"),(0,a.Uk)(" 启动项目")],-1),P=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 开发调试"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" dev\n\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" run v1.22.4\n$ fes dev\nStarting the development server http://localhost:8080 "),(0,a._)("span",{class:"token punctuation"},".."),(0,a.Uk)(".\n\n✔ Webpack\n Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(),(0,a._)("span",{class:"token number"},"15"),(0,a.Uk)(".91s\n\n DONE Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(" 15917ms "),(0,a._)("span",{class:"token number"},"11"),(0,a.Uk)(":17:08 AM\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"9"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"10"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"11"),(0,a._)("br")])],-1),R=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 开发调试"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" run dev\n\n"),(0,a._)("span",{class:"token operator"},">"),(0,a.Uk)(" fes dev\nStarting the development server http://localhost:8080 "),(0,a._)("span",{class:"token punctuation"},".."),(0,a.Uk)(".\n\n✔ Webpack\n Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(),(0,a._)("span",{class:"token number"},"3"),(0,a.Uk)(".66s\n\n DONE Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(" 3662ms "),(0,a._)("span",{class:"token number"},"11"),(0,a.Uk)(":17:46 AM\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"9"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"10"),(0,a._)("br")])],-1),Y=(0,a.Uk)("Fes.js 会在 "),$={href:"http://localhost:8080",target:"_blank",rel:"noopener noreferrer"},D=(0,a.Uk)("http://localhost:8080"),E=(0,a.Uk)(" 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。"),T=["src"],B=(0,a._)("h2",{id:"部署发布",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#部署发布","aria-hidden":"true"},"#"),(0,a.Uk)(" 部署发布")],-1),z=(0,a._)("h3",{id:"构建",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#构建","aria-hidden":"true"},"#"),(0,a.Uk)(" 构建")],-1),F=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 构建"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" build\n\n"),(0,a._)("span",{class:"token function"},"yarn"),(0,a.Uk)(" run v1.22.4\n$ fes build\n\n✔ Webpack\n Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(),(0,a._)("span",{class:"token number"},"45"),(0,a.Uk)(".37s\n\n✨ Done "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(),(0,a._)("span",{class:"token number"},"48"),(0,a.Uk)(".87s.\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"8"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"9"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"10"),(0,a._)("br")])],-1),G=(0,a._)("div",{class:"language-bash ext-sh line-numbers-mode"},[(0,a._)("pre",{class:"language-bash"},[(0,a._)("code",null,[(0,a._)("span",{class:"token comment"},"# 构建"),(0,a.Uk)("\n"),(0,a._)("span",{class:"token function"},"npm"),(0,a.Uk)(" run build\n\n"),(0,a._)("span",{class:"token operator"},">"),(0,a.Uk)(" fes build\n\n✔ Webpack\n Compiled successfully "),(0,a._)("span",{class:"token keyword"},"in"),(0,a.Uk)(),(0,a._)("span",{class:"token number"},"45"),(0,a.Uk)(".37s\n")])]),(0,a._)("div",{class:"line-numbers"},[(0,a._)("span",{class:"line-number"},"1"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"2"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"3"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"4"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"5"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"6"),(0,a._)("br"),(0,a._)("span",{class:"line-number"},"7"),(0,a._)("br")])],-1),H=(0,a.uE)('

    构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。

    tree ./dist\n\ndist\n├── chunk-vendors.27cd4686.js\n├── chunk-vendors.a5f5de67.css\n├── index.11411d43.css\n├── index.d72f1ba2.js\n├── index.html\n├── logo.png\n└── static\n    └── logo.0f85bba0.png\n
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    本地验证

    ',3),S=(0,a.Uk)("发布之前，可以通过 "),Z={href:"https://github.com/vercel/serve",target:"_blank",rel:"noopener noreferrer"},q=(0,a.Uk)("serve"),I=(0,a.Uk)(" 做本地验证，验证结果应该跟执行 "),L=(0,a._)("code",null,"fes dev",-1),J=(0,a.Uk)(" 的结果一样。"),K=(0,a._)("h3",{id:"部署",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#部署","aria-hidden":"true"},"#"),(0,a.Uk)(" 部署")],-1),Q=(0,a._)("p",null,"本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。",-1),V={},X=(0,e(3744).Z)(V,[["render",function(n,s){const e=(0,a.up)("OutboundLink"),V=(0,a.up)("CodeGroupItem"),X=(0,a.up)("CodeGroup");return(0,a.wg)(),(0,a.iD)(a.HY,null,[l,r,(0,a._)("p",null,[c,(0,a._)("a",i,[p,(0,a.Wm)(e)]),u]),t,(0,a.Wm)(X,null,{default:(0,a.w5)((()=>[(0,a.Wm)(V,{title:"YARN",active:""},{default:(0,a.w5)((()=>[b])),_:1}),(0,a.Wm)(V,{title:"NPM"},{default:(0,a.w5)((()=>[_])),_:1})])),_:1}),d,(0,a._)("img",{src:n.$withBase("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,o),m,k,(0,a._)("p",null,[h,g,f,v,U,w,x,y,W,(0,a._)("img",{src:n.$withBase("pickTemplate.png"),alt:"选择模板类型"},null,8,C)]),N,j,(0,a.Wm)(X,null,{default:(0,a.w5)((()=>[(0,a.Wm)(V,{title:"YARN",active:""},{default:(0,a.w5)((()=>[M])),_:1}),(0,a.Wm)(V,{title:"NPM"},{default:(0,a.w5)((()=>[A])),_:1})])),_:1}),O,(0,a.Wm)(X,null,{default:(0,a.w5)((()=>[(0,a.Wm)(V,{title:"YARN",active:""},{default:(0,a.w5)((()=>[P])),_:1}),(0,a.Wm)(V,{title:"NPM"},{default:(0,a.w5)((()=>[R])),_:1})])),_:1}),(0,a._)("p",null,[Y,(0,a._)("a",$,[D,(0,a.Wm)(e)]),E]),(0,a._)("img",{src:n.$withBase("home.png"),alt:"home"},null,8,T),B,z,(0,a.Wm)(X,null,{default:(0,a.w5)((()=>[(0,a.Wm)(V,{title:"YARN",active:""},{default:(0,a.w5)((()=>[F])),_:1}),(0,a.Wm)(V,{title:"NPM"},{default:(0,a.w5)((()=>[G])),_:1})])),_:1}),H,(0,a._)("p",null,[S,(0,a._)("a",Z,[q,(0,a.Wm)(e)]),I,L,J]),K,Q],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const e=n.__vccOpts||n;for(const[n,a]of s)e[n]=a;return e}}}]); \ No newline at end of file diff --git a/assets/js/v-fffb8e28.5eb4adfe.js b/assets/js/v-fffb8e28.5eb4adfe.js new file mode 100644 index 00000000..dc3ce138 --- /dev/null +++ b/assets/js/v-fffb8e28.5eb4adfe.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[807],{9570:(e,s,l)=>{l.r(s),l.d(s,{data:()=>i});const i={key:"v-fffb8e28",path:"/guide/",title:"介绍",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"痛点",slug:"痛点",children:[]},{level:2,title:"Fes.js 是什么？",slug:"fes-js-是什么",children:[]},{level:2,title:"Fes.js 如何工作？",slug:"fes-js-如何工作",children:[{level:3,title:"架构",slug:"架构",children:[]},{level:3,title:"插件和插件集",slug:"插件和插件集",children:[]},{level:3,title:".fes 临时文件",slug:"fes-临时文件",children:[]}]},{level:2,title:"为什么不是 ...?",slug:"为什么不是",children:[{level:3,title:"Vue CLI",slug:"vue-cli",children:[]},{level:3,title:"UMI",slug:"umi",children:[]}]}],filePathRelative:"guide/README.md",git:{updatedTime:1659613539e3,contributors:[{name:"qlin",email:"haizekuo@gmail.com",commits:1}]}}},5195:(e,s,l)=>{l.r(s),l.d(s,{default:()=>c});var i=l(6252);const a=(0,i.uE)('

    介绍

    痛点

    在开发一个前端项目之前，我们可能需要做如下准备工作：

    • 搭建开发环境
    • 约定代码规范
    • 封装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 如何工作？

    架构

    ',11),r=["src"],n=(0,i._)("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),t=(0,i._)("h3",{id:"插件和插件集",tabindex:"-1"},[(0,i._)("a",{class:"header-anchor",href:"#插件和插件集","aria-hidden":"true"},"#"),(0,i.Uk)(" 插件和插件集")],-1),d=["src"],h=(0,i.uE)(' Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。

    .fes 临时文件

    .fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。

    你通常会在 .fes 下看到以下目录

    + .fes\n  + core     # 内部插件生成\n  + pluginA  # 外部插件生成\n  + presetB  # 外部插件生成\n  + fes.js   # 入口文件\n
    1
    2
    3
    4
    5

    临时文件是 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。

    ',12),u={},c=(0,l(3744).Z)(u,[["render",function(e,s){return(0,i.wg)(),(0,i.iD)(i.HY,null,[a,(0,i._)("img",{src:e.$withBase("framework.png"),alt:"架构"},null,8,r),n,t,(0,i._)("p",null,[(0,i._)("img",{src:e.$withBase("plugins.png"),alt:"插件",title:"插件",style:{width:"500px"},class:"medium-zoom-image"},null,8,d)]),h],64)}]])},3744:(e,s)=>{s.Z=(e,s)=>{const l=e.__vccOpts||e;for(const[e,i]of s)l[e]=i;return l}}}]); \ No newline at end of file diff --git a/assets/js/v-fffb8e28.e9aa5ea4.js b/assets/js/v-fffb8e28.e9aa5ea4.js deleted file mode 100644 index 9326436d..00000000 --- a/assets/js/v-fffb8e28.e9aa5ea4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[807],{9570:(e,s,i)=>{i.r(s),i.d(s,{data:()=>l});const l={key:"v-fffb8e28",path:"/guide/",title:"介绍",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"痛点",slug:"痛点",children:[]},{level:2,title:"Fes.js 是什么？",slug:"fes-js-是什么",children:[]},{level:2,title:"Fes.js 如何工作？",slug:"fes-js-如何工作",children:[{level:3,title:"架构",slug:"架构",children:[]},{level:3,title:"插件和插件集",slug:"插件和插件集",children:[]},{level:3,title:".fes 临时文件",slug:"fes-临时文件",children:[]}]},{level:2,title:"为什么不是 ...?",slug:"为什么不是",children:[{level:3,title:"Vue CLI",slug:"vue-cli",children:[]},{level:3,title:"UMI",slug:"umi",children:[]}]}],filePathRelative:"guide/README.md",git:{updatedTime:1656663361e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},5195:(e,s,i)=>{i.r(s),i.d(s,{default:()=>c});var l=i(6252);const a=(0,l.uE)('

    介绍

    痛点

    在开发一个前端项目之前，我们可能需要做如下准备工作：

    • 搭建开发环境
    • 约定代码规范
    • 封装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 如何工作？

    架构

    ',11),r=["src"],n=(0,l._)("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),t=(0,l._)("h3",{id:"插件和插件集",tabindex:"-1"},[(0,l._)("a",{class:"header-anchor",href:"#插件和插件集","aria-hidden":"true"},"#"),(0,l.Uk)(" 插件和插件集")],-1),d=["src"],h=(0,l.uE)(' Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。

    .fes 临时文件

    .fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。

    你通常会在 .fes 下看到以下目录

    + .fes\n  + core     # 内部插件生成\n  + pluginA  # 外部插件生成\n  + presetB  # 外部插件生成\n  + fes.js   # 入口文件\n
    1
    2
    3
    4
    5

    临时文件是 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。

    ',12),u={},c=(0,i(3744).Z)(u,[["render",function(e,s){return(0,l.wg)(),(0,l.iD)(l.HY,null,[a,(0,l._)("img",{src:e.$withBase("framework.png"),alt:"架构"},null,8,r),n,t,(0,l._)("p",null,[(0,l._)("img",{src:e.$withBase("plugins.png"),alt:"插件",title:"插件",style:{width:"500px"},class:"medium-zoom-image"},null,8,d)]),h],64)}]])},3744:(e,s)=>{s.Z=(e,s)=>{const i=e.__vccOpts||e;for(const[e,l]of s)i[e]=l;return i}}}]); \ No newline at end of file diff --git a/guide/config.html b/guide/config.html index d46c4b45..5a5db2fa 100644 --- a/guide/config.html +++ b/guide/config.html @@ -5,7 +5,7 @@ 配置 | Fes.js - + @@ -64,7 +64,7 @@ mock: true, devServer: { port: 8080 } }; -
    1
    2
    3
    4

    优先级

    本地临时配置 > 环境配置 > 基础配置

    提示

    如果多份配置中存在相同的配置项，则优先级高的会覆盖优先级低的。

    - +
    1
    2
    3
    4

    优先级

    本地临时配置 > 环境配置 > 基础配置

    提示

    如果多份配置中存在相同的配置项，则优先级高的会覆盖优先级低的。

    + diff --git a/guide/contributing.html b/guide/contributing.html index a98b3034..795e2e28 100644 --- a/guide/contributing.html +++ b/guide/contributing.html @@ -5,7 +5,7 @@ 贡献指南 | Fes.js - + @@ -16,7 +16,7 @@
    1

    第三步：查看更新

    当md文档保存后，文档会自动更新，在http://localhost:8080/查看。

    贡献源码

    Fes.js统一使用ES Module规范编写源码，代码会在 node 端和浏览器端执行，所以源码需要编译后才能发布成包，再被执行。

    启动编译服务

    yarn dev
    1

    当我们修改build.config.js中配置的包代码时，会把src目录的源码编译后到lib目录。

    修改源码

    在了解Fes.js设计前提下，修改核心代码或者插件代码。

    验证修改内容

    根据需求选择模板项目来验证修改内容，比如选择fes-template：

    1. 查看需待验证包是否已经添加到模板项目的依赖中，如果没有则在模板项目的 package.json 中添加包依赖，添加后在根目录执行yarn关联依赖
    2. 启动模板项目的开发服务
    cd packages/fes-template
 yarn dev
-
    1
    2
    1. 在项目模板中添加代码验证修改内容
    2. 打开localhost:8000查看结果

    快速调试技巧

    每次修改插件或者核心代码后，等待自动编译完，需要在模板目录重新执行fes dev，比较费时费力。

    可以先在模板的 .fes 目录中找到对应临时代码，更改逻辑，验证完后再将变更逻辑保存到正式文件中。

    注意

    直接修改临时文件切莫重新执行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
    - +
    1
    2
    1. 在项目模板中添加代码验证修改内容
    2. 打开localhost:8000查看结果

    快速调试技巧

    每次修改插件或者核心代码后，等待自动编译完，需要在模板目录重新执行fes dev，比较费时费力。

    可以先在模板的 .fes 目录中找到对应临时代码，更改逻辑，验证完后再将变更逻辑保存到正式文件中。

    注意

    直接修改临时文件切莫重新执行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
    + diff --git a/guide/css.html b/guide/css.html index dc43e263..5e1a471d 100644 --- a/guide/css.html +++ b/guide/css.html @@ -5,7 +5,7 @@ 使用 css | Fes.js - + @@ -25,7 +25,7 @@ }
    1
    2
    3
    4

    如果想直接引入CSS文件的话，则CSS文件名需要包含.module，比如：

    import style from '@/styles/index.module.css'
 console.log(style)
-
    1
    2

    CSS 预处理器

    Fes.js 内置支持 less，不支持 sass 和 stylus，但如果有需求，可以通过 chainWebpack 配置或者 fes-plugin 插件的形式支持。

    - +
    1
    2

    CSS 预处理器

    Fes.js 内置支持 less，不支持 sass 和 stylus，但如果有需求，可以通过 chainWebpack 配置或者 fes-plugin 插件的形式支持。

    + diff --git a/guide/directory-structure.html b/guide/directory-structure.html index 0d3aea93..dc618802 100644 --- a/guide/directory-structure.html +++ b/guide/directory-structure.html @@ -5,7 +5,7 @@ 目录结构 | Fes.js - + @@ -88,7 +88,7 @@ FES_ENV=prod
    1
    2

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

    process.env.PORT = '8888';
 process.env.FES_ENV = 'prod';
-
    1
    2

    dist 目录

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

    public 目录

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

    index.html

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

    src 目录

    .fes 目录

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

    注意

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

    pages 目录

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

    app.js

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

    - +
    1
    2

    dist 目录

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

    public 目录

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

    index.html

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

    src 目录

    .fes 目录

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

    注意

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

    pages 目录

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

    app.js

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

    + diff --git a/guide/env.html b/guide/env.html index 03317951..403a1da4 100644 --- a/guide/env.html +++ b/guide/env.html @@ -5,7 +5,7 @@ 环境变量 | Fes.js - + @@ -26,7 +26,7 @@ cross-env PORT1

    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
    1

    在代码中使用：

    console.log(process.env.FES_APP_KEY)
 // 输出 123456789
-
    1
    2

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

    • NODE_ENV：Node 环境变量

    • FES_ENV：Fes.js 环境变量

    • BASE_URL：等同于 publicPath

    - +
    1
    2

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

    • NODE_ENV：Node 环境变量

    • FES_ENV：Fes.js 环境变量

    • BASE_URL：等同于 publicPath

    + diff --git a/guide/faq.html b/guide/faq.html index 804349ae..cd4df561 100644 --- a/guide/faq.html +++ b/guide/faq.html @@ -5,11 +5,11 @@ 常见问题 | Fes.js - + - - + + diff --git a/guide/getting-started.html b/guide/getting-started.html index 8ead6ae3..475352cd 100644 --- a/guide/getting-started.html +++ b/guide/getting-started.html @@ -5,7 +5,7 @@ 快速上手 | Fes.js - + @@ -81,7 +81,7 @@ dist ├── logo.png └── static └── logo.0f85bba0.png -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    本地验证

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

    部署

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

    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    本地验证

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

    部署

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

    + diff --git a/guide/image.html b/guide/image.html index 3995f651..07344084 100644 --- a/guide/image.html +++ b/guide/image.html @@ -5,7 +5,7 @@ 使用图片 | Fes.js - + @@ -29,7 +29,7 @@ } }     </script> -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    + diff --git a/guide/index.html b/guide/index.html index 9fc9dee8..fa450d8f 100644 --- a/guide/index.html +++ b/guide/index.html @@ -5,7 +5,7 @@ 介绍 | Fes.js - + @@ -14,7 +14,7 @@ + pluginA # 外部插件生成 + presetB # 外部插件生成 + fes.js # 入口文件 -
    1
    2
    3
    4
    5

    临时文件是 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。

    - +
    1
    2
    3
    4
    5

    临时文件是 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。

    + diff --git a/guide/mock.html b/guide/mock.html index 45f64a5d..0b061608 100644 --- a/guide/mock.html +++ b/guide/mock.html @@ -5,7 +5,7 @@ Mock 数据 | Fes.js - + @@ -152,7 +152,7 @@
    1
    2
    3
    4
    5

    utils 参数

    工具函数：

    • utils.file(path)，从项目根目录根据path寻找文件，返回文件流。

    配置 Mock

    详见配置 mock。

    关闭 Mock

    可以通过配置关闭。

    export default {
     mock: false,
 };
-
    1
    2
    3
    - +
    1
    2
    3
    + diff --git a/guide/plugin.html b/guide/plugin.html index ef05bdeb..85959105 100644 --- a/guide/plugin.html +++ b/guide/plugin.html @@ -5,7 +5,7 @@ 插件 | Fes.js - + @@ -27,7 +27,7 @@ prefix: '/v2' } } -
    1
    2
    3
    4
    5

    这里的 mock 是 Mock插件 的 key。

    - +
    1
    2
    3
    4
    5

    这里的 mock 是 Mock插件 的 key。

    + diff --git a/guide/public.html b/guide/public.html index 77a9d86a..9b45e88b 100644 --- a/guide/public.html +++ b/guide/public.html @@ -5,7 +5,7 @@ 静态资源 | Fes.js - + @@ -22,7 +22,7 @@ } } </script> -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    + diff --git a/guide/route.html b/guide/route.html index 934607b0..ce63b16e 100644 --- a/guide/route.html +++ b/guide/route.html @@ -5,7 +5,7 @@ 路由 | Fes.js - + @@ -180,7 +180,7 @@ } } -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    + diff --git a/guide/runtime-config.html b/guide/runtime-config.html index 4c87b49d..bd999ed1 100644 --- a/guide/runtime-config.html +++ b/guide/runtime-config.html @@ -5,7 +5,7 @@ 运行时配置 | Fes.js - + @@ -86,7 +86,7 @@ console.log(to) }); } -
    1
    2
    3
    4
    5

    更多配置项

    Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。

    - +
    1
    2
    3
    4
    5

    更多配置项

    Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。

    + diff --git a/guide/template.html b/guide/template.html index 9ec063a9..a77b0cdd 100644 --- a/guide/template.html +++ b/guide/template.html @@ -5,7 +5,7 @@ HTML 模板 | Fes.js - + @@ -28,7 +28,7 @@ }
    1
    2
    3
    4
    5

    页面的标题会设置成'海贼王'。

    模板变量

    当然我们也可以手动编写模板，在模板中添加link、link、meta等标签。在我们手动配置模板时，有时候需要用到一些环境变量，模板里可以获取到的变量如下：

    • htmlWebpackPlugin，特定于此插件的数据
    • webpackConfig，用于此编译的webpack配置。例如，它可用于获取publicPath（webpackConfig.output.publicPath）。
    • compilation，webpack编译对象。例如，可以使用它来获取已处理资产的内容，并将其直接内联到页面中compilation.assets[...].source()

    举个 🌰 ：

    <link rel="icon" type="image/x-icon" href="<%= webpackConfig.output.publicPath %>favicon.png" />
    1

    除上述 html-webpack-plugin 插件提供的变量外，Fes.js 还把 process.env 中的环境变量添加到模板作用域内：

    • NODE_ENV
    • FES_ENV
    • .env 文件中以 FES_APP_ 开头的变量

    举个 🌰 ：

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-
    1
    - +
    1
    + diff --git a/index.html b/index.html index 1d6a1681..a9eb5947 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ 首页 | Fes.js - + @@ -26,6 +26,6 @@ npx @fesjs/create-fes-app myapp # 运行 npm run dev
    1
    2
    3
    4
    5
    6
    7
    8

    反馈

    Github Issue微信群Fes.js开源运营小助手
    @fesjs/fes.js/issues在新窗口打开
    MIT Licensed | Copyright © 2020-present Webank
    - + diff --git a/reference/api.html b/reference/api.html index 7e4cc4ec..193f407d 100644 --- a/reference/api.html +++ b/reference/api.html @@ -5,11 +5,11 @@ API | Fes.js - + - - + + diff --git a/reference/api/index.html b/reference/api/index.html index f221aaa7..8a0bd2e5 100644 --- a/reference/api/index.html +++ b/reference/api/index.html @@ -5,7 +5,7 @@ API | Fes.js - + @@ -86,7 +86,7 @@ router.push< <router-view v-slot="{ Component, route }"> <component :is="Component" /> </router-view> -
    1
    2
    3
    4

    可以查看官方文档在新窗口打开了解更多 RouterView 的 Porps。查看官方文档在新窗口打开了解 RouterView 的作用域插槽。

    Router Methods

    查看官方文档在新窗口打开了解更多

    - +
    1
    2
    3
    4

    可以查看官方文档在新窗口打开了解更多 RouterView 的 Porps。查看官方文档在新窗口打开了解 RouterView 的作用域插槽。

    Router Methods

    查看官方文档在新窗口打开了解更多

    + diff --git a/reference/cli.html b/reference/cli.html index 90a3b299..f467823c 100644 --- a/reference/cli.html +++ b/reference/cli.html @@ -5,7 +5,7 @@ 命令行接口 | Fes.js - + @@ -54,7 +54,7 @@ Options: --debug Enable debug mode -v, --version Display version number -h, --help Display this message -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    提示

    通过命令行设置的配置项，会覆盖你配置文件中的同名配置项。

    info

    输出当前系统和依赖相关的信息。

    在你想要检查你的环境，或者提交 Issue 时候，可以使用该命令。

    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    提示

    通过命令行设置的配置项，会覆盖你配置文件中的同名配置项。

    info

    输出当前系统和依赖相关的信息。

    在你想要检查你的环境，或者提交 Issue 时候，可以使用该命令。

    + diff --git a/reference/cli/index.html b/reference/cli/index.html index dcaca32c..870a037b 100644 --- a/reference/cli/index.html +++ b/reference/cli/index.html @@ -5,7 +5,7 @@ 命令行工具 | Fes.js - + @@ -94,7 +94,7 @@ Options: --verbose show full function definitions in output -h, --help display help for command
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    比如：

    fes webpack
-
    1
    - +
    1
    + diff --git a/reference/config/index.html b/reference/config/index.html index f43f1daa..b4ef0dc5 100644 --- a/reference/config/index.html +++ b/reference/config/index.html @@ -5,7 +5,7 @@ 配置 | Fes.js - + @@ -120,7 +120,7 @@ safari10: true } } -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36

    vueLoader

    更多配置项

    Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。

    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36

    vueLoader

    更多配置项

    Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。

    + diff --git a/reference/plugin/dev/api.html b/reference/plugin/dev/api.html index c68c1a86..dfa8b822 100644 --- a/reference/plugin/dev/api.html +++ b/reference/plugin/dev/api.html @@ -5,7 +5,7 @@ 插件 API | Fes.js - + @@ -228,7 +228,7 @@ api.modifyRo } ) }); -
    1
    2
    3
    4
    5
    6
    7
    8
    9

    参数：

    • path：相对于临时文件夹的路径
    • content：文件内容

    提示

    不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译

    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9

    参数：

    • path：相对于临时文件夹的路径
    • content：文件内容

    提示

    不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译

    + diff --git a/reference/plugin/dev/index.html b/reference/plugin/dev/index.html index 7f343d5d..60fb6c5d 100644 --- a/reference/plugin/dev/index.html +++ b/reference/plugin/dev/index.html @@ -5,7 +5,7 @@ 插件介绍 | Fes.js - + @@ -25,7 +25,7 @@
    1
    第二步：创建插件项目
    create-fes-app pluginName
    1

    在询问Pick an template时选择Plugin!

    第三步：进入插件目录 & 安装依赖
    cd pluginName & yarn
    1
    第四步：启动编译
    yarn dev
-
    1
    第五步：使用插件API完成你的插件！（可以参考其他插件理解api用法和场景）

    发布到 npm

    以 @fesjs/preset-、@fesjs/plugin-、@webank/fes-preset-、@webank/fes-plugin-、fes-preset- 和 fes-plugin- 开头的依赖会被 Fes.js 自动注册为插件或插件集。

    所以编写好的插件想发布到 npm 供其他人使用，包名必须是 fes-preset- 和 fes-plugin- 开头。

    - +
    1
    第五步：使用插件API完成你的插件！（可以参考其他插件理解api用法和场景）

    发布到 npm

    以 @fesjs/preset-、@fesjs/plugin-、@webank/fes-preset-、@webank/fes-plugin-、fes-preset- 和 fes-plugin- 开头的依赖会被 Fes.js 自动注册为插件或插件集。

    所以编写好的插件想发布到 npm 供其他人使用，包名必须是 fes-preset- 和 fes-plugin- 开头。

    + diff --git a/reference/plugin/index.html b/reference/plugin/index.html index 79e3d80d..5181a87b 100644 --- a/reference/plugin/index.html +++ b/reference/plugin/index.html @@ -5,11 +5,11 @@ 介绍 | Fes.js - + -
    Fes.js

    介绍

    插件列表

    插件介绍
    @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水印

    架构

    架构

    Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。

    - +
    Fes.js

    介绍

    插件列表

    插件介绍
    @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水印

    架构

    架构

    Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。

    + diff --git a/reference/plugin/plugins/access.html b/reference/plugin/plugins/access.html index 9f034c9b..109eb1cf 100644 --- a/reference/plugin/plugins/access.html +++ b/reference/plugin/plugins/access.html @@ -5,7 +5,7 @@ @fesjs/plugin-access | Fes.js - + @@ -114,7 +114,7 @@ access.getAc } }     </script> -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    + diff --git a/reference/plugin/plugins/editor.html b/reference/plugin/plugins/editor.html index 6afe4b29..218a0885 100644 --- a/reference/plugin/plugins/editor.html +++ b/reference/plugin/plugins/editor.html @@ -5,7 +5,7 @@ @fesjs/plugin-monaco-editor | Fes.js - + @@ -60,7 +60,7 @@ monaco.editor} }     </script> -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    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
    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    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
    + diff --git a/reference/plugin/plugins/enums.html b/reference/plugin/plugins/enums.html index 79fd01b7..39238ef2 100644 --- a/reference/plugin/plugins/enums.html +++ b/reference/plugin/plugins/enums.html @@ -5,7 +5,7 @@ @fesjs/plugin-enums | Fes.js - + @@ -136,7 +136,7 @@ dir value 'age' => 18 'role[0]' => {id: 1, name: '管理员'} 'role[1].id' => 2 -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    提示

    枚举项value如果是基本类型，则规则不生效，value就是当前值

    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    提示

    枚举项value如果是基本类型，则规则不生效，value就是当前值

    + diff --git a/reference/plugin/plugins/icon.html b/reference/plugin/plugins/icon.html index d08964f9..f54a8990 100644 --- a/reference/plugin/plugins/icon.html +++ b/reference/plugin/plugins/icon.html @@ -5,7 +5,7 @@ @fesjs/plugin-icon | Fes.js - + @@ -16,7 +16,7 @@ }, }
    1
    2
    3
    4
    5
    6

    使用

    新建 src/icons 目录，将 svg 文件放入其中，在 component 中引用：

    <fes-icon type="iconName" />
-
    1

    属性

    属性说明类型
    typesvg 文件名string
    spin是否无限旋转boolean
    rotate旋转角度number
    - +
    1

    属性

    属性说明类型
    typesvg 文件名string
    spin是否无限旋转boolean
    rotate旋转角度number
    + diff --git a/reference/plugin/plugins/jest.html b/reference/plugin/plugins/jest.html index 82e495e9..69a99af8 100644 --- a/reference/plugin/plugins/jest.html +++ b/reference/plugin/plugins/jest.html @@ -5,7 +5,7 @@ @fesjs/plugin-jest | Fes.js - + @@ -316,7 +316,7 @@ Options: -h, --help display help for command
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286

    比如覆盖测试：

    fes test --coverage
-
    1

    配置文件

    除了插件内置的默认配置之外，插件遵循 Jest的配置文件规范，约定项目根目录下的 jest.config.js 为用户配置文件，约定 packages.json 的 jest 属性内容也是配置。

    优先级

    args 配置 > package.json中的 jest > jest.config.js > 默认配置

    - +
    1

    配置文件

    除了插件内置的默认配置之外，插件遵循 Jest的配置文件规范，约定项目根目录下的 jest.config.js 为用户配置文件，约定 packages.json 的 jest 属性内容也是配置。

    优先级

    args 配置 > package.json中的 jest > jest.config.js > 默认配置

    + diff --git a/reference/plugin/plugins/layout.html b/reference/plugin/plugins/layout.html index 223c4e19..d8a590f3 100644 --- a/reference/plugin/plugins/layout.html +++ b/reference/plugin/plugins/layout.html @@ -5,7 +5,7 @@ @fesjs/plugin-layout | Fes.js - + @@ -126,7 +126,7 @@ } }; -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    logoUrl

    • 类型：String

    • 默认值：默认提供 fes.js 的 Logo

    • 详情：Logo的链接。

    其他运行时配置 (> 4.1.0)

    编译时配置的内容同样支持在运行时配置，但是logo除外，用logoUrl替代。

    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    logoUrl

    • 类型：String

    • 默认值：默认提供 fes.js 的 Logo

    • 详情：Logo的链接。

    其他运行时配置 (> 4.1.0)

    编译时配置的内容同样支持在运行时配置，但是logo除外，用logoUrl替代。

    + diff --git a/reference/plugin/plugins/locale.html b/reference/plugin/plugins/locale.html index 04651a1d..1202f174 100644 --- a/reference/plugin/plugins/locale.html +++ b/reference/plugin/plugins/locale.html @@ -5,7 +5,7 @@ @fesjs/plugin-locale | Fes.js - + @@ -85,7 +85,7 @@ console.log< } } </script> -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    useI18n()返回结果是 Composer在新窗口打开，提供类似 t、n、d 等转换函数，在模板中使用。

    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    useI18n()返回结果是 Composer在新窗口打开，提供类似 t、n、d 等转换函数，在模板中使用。

    + diff --git a/reference/plugin/plugins/model.html b/reference/plugin/plugins/model.html index 8deba4a0..4b0e7a8c 100644 --- a/reference/plugin/plugins/model.html +++ b/reference/plugin/plugins/model.html @@ -5,7 +5,7 @@ @fesjs/plugin-model | Fes.js - + @@ -74,7 +74,7 @@ </script> <style scope> </style> -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    API

    useModel

    useModel(name)

    • 类型：函数

    • 详情: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。

    • 参数：

      • name，传入 Model 文件名
    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    API

    useModel

    useModel(name)

    • 类型：函数

    • 详情: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。

    • 参数：

      • name，传入 Model 文件名
    + diff --git a/reference/plugin/plugins/pinia.html b/reference/plugin/plugins/pinia.html index 27dac540..682347a6 100644 --- a/reference/plugin/plugins/pinia.html +++ b/reference/plugin/plugins/pinia.html @@ -5,7 +5,7 @@ @fesjs/plugin-pinia | Fes.js - + @@ -56,7 +56,7 @@ }); } }; -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    + diff --git a/reference/plugin/plugins/qiankun.html b/reference/plugin/plugins/qiankun.html index acb96ba3..09c41038 100644 --- a/reference/plugin/plugins/qiankun.html +++ b/reference/plugin/plugins/qiankun.html @@ -5,7 +5,7 @@ @fesjs/plugin-qiankun | Fes.js - + @@ -184,7 +184,7 @@ } } </script> -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    基于 props 传递

    • 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
    • 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）

    MicroApp

    属性说明类型默认值
    name子应用名称，传入qiankun.main.apps配置中的nameString-
    settings子应用配置信息Object{}
    props传入子应用的参数Object{}
    lifeCycles子应用生命周期钩子Object{}
    cacheName子应用缓存名称，配置后根据name+cacheName缓存子应用实例Object-

    MicroAppWithMemoHistory

    属性说明类型默认值
    name子应用名称，传入qiankun.main.apps配置中的nameString-
    settings子应用配置信息Object{}
    props传入子应用的参数Object{}
    lifeCycles子应用生命周期钩子Object{}
    cacheName子应用缓存名称，配置后根据name+cacheName缓存子应用实例Object-
    url子应用的路由地址String-
    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    基于 props 传递

    • 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
    • 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）

    MicroApp

    属性说明类型默认值
    name子应用名称，传入qiankun.main.apps配置中的nameString-
    settings子应用配置信息Object{}
    props传入子应用的参数Object{}
    lifeCycles子应用生命周期钩子Object{}
    cacheName子应用缓存名称，配置后根据name+cacheName缓存子应用实例Object-

    MicroAppWithMemoHistory

    属性说明类型默认值
    name子应用名称，传入qiankun.main.apps配置中的nameString-
    settings子应用配置信息Object{}
    props传入子应用的参数Object{}
    lifeCycles子应用生命周期钩子Object{}
    cacheName子应用缓存名称，配置后根据name+cacheName缓存子应用实例Object-
    url子应用的路由地址String-
    + diff --git a/reference/plugin/plugins/request.html b/reference/plugin/plugins/request.html index 4fd9fcef..c26ae24d 100644 --- a/reference/plugin/plugins/request.html +++ b/reference/plugin/plugins/request.html @@ -5,21 +5,21 @@ @fesjs/plugin-request | Fes.js - + -
    Fes.js

    @fesjs/plugin-request

    基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。

    启用方式

    在 package.json 中引入依赖：

    {
+    
    Fes.js
     @fesjs/plugin-request
    基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。
     启用方式
    在 package.json 中引入依赖：
    {
     "dependencies": {
         "@fesjs/fes": "^2.0.0",
         "@fesjs/plugin-request": "^2.0.0"
-    },
+    }
 }
 
    1
    2
    3
    4
    5
    6
     配置
     构建时配置
    export default {
     request: {
         dataField: 'result'
-    },
-}
+    }
+};
 
    1
    2
    3
    4
    5
     dataField
    • 类型： string
    • 默认值： ''
    • 详情：
      dataField 对应接口统一格式中的数据字段，比如接口如果统一的规范是 { success: boolean, result: any} ，那么就不需要配置，这样你通过 useRequest 消费的时候会生成一个默认的 formatResult，直接返回 result 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 dataField。配置为 ''（空字符串）的时候不做处理。
     base(即将废弃)
    • 类型： string
    • 默认值： ''
    • 详情：
      base 接口前缀。
    即将废弃
    这个字段将在下个版本废弃，推荐使用 axios baseURL在新窗口打开。
     运行时配置
    在 app.js 中进行运行时配置。
    export const request = {
     // 格式化 response.data (只有 response.data 类型为 object 才会调用)
     responseDataAdaptor: (data) => {
@@ -28,7 +28,7 @@
     },
     // 关闭 response data 校验（只判断 xhr status）
     closeResDataCheck: false,
-    // 请求拦截器
+    // 请求拦截器 http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8
     requestInterceptors: [],
     // 响应拦截器
     responseInterceptors: [],
@@ -39,80 +39,145 @@
         11199(response) {
             // 特殊 code 处理逻辑
         },
-        404(error) {
-        },
+        404(error) {},
         default(error) {
             // 异常统一处理
         }
     },
     // 其他 axios 配置
     ...otherConfigs
-}
-
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
     skipErrorHandler
    • 类型： boolean | string | number | array<string | number>
    • 默认值： ``
    • 详情：
      指定当前请求的某些错误状态不走 errorHandler，单独进行处理。如果设置为 true，当前请求的错误处理都不走 errorHandler。
    • 示列：
    import {request} from '@fesjs/fes';
+};
+
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
     skipErrorHandler
    • 类型： boolean | string | number | array<string | number>
    • 默认值： ``
    • 详情：
      指定当前请求的某些错误状态不走 errorHandler，单独进行处理。如果设置为 true，当前请求的错误处理都不走 errorHandler。
    • 示列：
    import { request } from '@fesjs/fes';
 
 request('/api/login', null, {
     skipErrorHandler: '110'
-}).then((res) => {
-    // do something
-}).catch((err) => {
-    // 这里处理 code 为 110 的异常
-    // 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default
 })
-
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     使用
     发起一个普通 post 请求
    import {request} from '@fesjs/fes';
+    .then((res) => {
+        // do something
+    })
+    .catch((err) => {
+        // 这里处理 code 为 110 的异常
+        // 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default
+    });
+
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     使用
     发起一个普通 post 请求
    import { request } from '@fesjs/fes';
 
 request('/api/login', {
     username: 'robby',
     password: '123456'
-}).then((res) => {
-    // do something
-}).catch((err) => {
-    // 处理异常
 })
-
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     merge 重复请求
    连续发送多个请求，会被合并成一个请求，不会报 REPEAT 接口错误。
    当发生 REPEAT 请求异常，并且确保自身代码合理的情况下，可以使用该配置。
    import {request} from '@fesjs/fes';
+    .then((res) => {
+        // do something
+    })
+    .catch((err) => {
+        // 处理异常
+    });
+
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     merge 重复请求
    连续发送多个请求，会被合并成一个请求，不会报 REPEAT 接口错误。
    当发生 REPEAT 请求异常，并且确保自身代码合理的情况下，可以使用该配置。
    import { request } from '@fesjs/fes';
 
-request('/api/login', {
-    username: 'robby',
-    password: '123456'
-}, {
-    mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求
-}).then((res) => {
-    // do something
-}).catch((err) => {
-    // 处理异常
-})
-
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     请求节流(即将废弃)
    即将废弃
    因为 request 的请求总会有一个 promise 结果，要么成功，要么失败，和防抖、节流的语义不一致，防抖、节流只是函数的不执行
     请求缓存
    import {request} from '@fesjs/fes';
-
-request('/api/login', {
-    username: 'robby',
-    password: '123456'
-}, {
-    cache: {
-        cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
-        cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min
+request(
+    '/api/login',
+    {
+        username: 'robby',
+        password: '123456'
     },
-}).then((res) => {
-    // do something
-}).catch((err) => {
-    // 处理异常
-})
-
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    若 cache 传 true，则默认使用 ram 缓存类型，缓存时间 3min。
     结合 use 使用
    import {useRequest} from '@fesjs/fes';
+    {
+        mergeRequest: true // 在一个请求没有回来前，重复发送的请求会合并成一个请求
+    }
+)
+    .then((res) => {
+        // do something
+    })
+    .catch((err) => {
+        // 处理异常
+    });
+
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     请求节流(即将废弃)
    即将废弃
    因为 request 的请求总会有一个 promise 结果，要么成功，要么失败，和防抖、节流的语义不一致，防抖、节流只是函数的不执行
     请求缓存
    import { 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) => {
+        // 处理异常
+    });
+
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    若 cache 传 true，则默认使用 ram 缓存类型，缓存时间 3min。
     结合 use 使用
    import { useRequest } from '@fesjs/fes';
 
 export default {
     setup() {
-        const {loading, data, error} = useRequest('/api/login', {
+        const { loading, data, error } = useRequest('/api/login', {
             username: 'robby',
             password: '123456'
-        })
+        });
 
         return {
             loading,
             data,
             error
-        }
+        };
     }
+};
+
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     配置拦截器
    函数的参数格式：传送门在新窗口打开;
    export const request = {
+    requestInterceptors: [
+        function (config) {
+            // 在发送请求之前做些什么
+            return config;
+        },
+        [
+            function (config) {
+            // 在发送请求之前做些什么
+                return config;
+            }, function (error) {
+                // 对请求错误做些什么
+                return Promise.reject(error);
+            }
+        ]
+    ],
+    // 响应拦截器
+    responseInterceptors: [
+        function (response) {
+            // 对响应数据做点什么
+            return response;
+        },
+        [
+            function (response) {
+                // 对响应数据做点什么
+                return response;
+            }, function (error) {
+                // 对响应错误做点什么
+                return Promise.reject(error);
+            }
+        ]
+    ],
 }
-
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     API
     request
    • 类型：函数
    • 详情：请求后端接口
    • 参数：
      • url: 后端接口 url
      • data: 参数
      • options: 配置（ 支持 axios 所有配置）
    • 返回值: Promise
     useRequest
    request 的封装，返回响应式 loading、error、 data
    
-    
+
+
+## API
+
+### request
+
+- **类型**：函数
+
+- **详情**：请求后端接口
+- **参数**：
+  - url: 后端接口 url
+  - data: 参数
+  - options: 配置（ 支持 axios 所有配置）
+- **返回值**: Promise
+
+### useRequest
+
+request 的封装，返回响应式 `loading`、`error`、 `data`
+
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    + diff --git a/reference/plugin/plugins/sass.html b/reference/plugin/plugins/sass.html index 74b4d193..b70687f6 100644 --- a/reference/plugin/plugins/sass.html +++ b/reference/plugin/plugins/sass.html @@ -5,7 +5,7 @@ @fesjs/plugin-sass | Fes.js - + @@ -17,7 +17,7 @@ }
    1
    2
    3
    4
    5
    6

    global css

    添加 src/global.scss 和 src/global.sass 为全局CSS入口，添加一些通用样式内容。

    Vue 单文件组件

    Vue 单文件组件的 <style></style> 添加 lang='scss'，例如：

    <style lang="scss">
 </style>
-
    1
    2
    - +
    1
    2
    + diff --git a/reference/plugin/plugins/vuex.html b/reference/plugin/plugins/vuex.html index 48191c34..681b4ca1 100644 --- a/reference/plugin/plugins/vuex.html +++ b/reference/plugin/plugins/vuex.html @@ -5,7 +5,7 @@ @fesjs/plugin-vuex | Fes.js - + @@ -129,7 +129,7 @@
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42

    提示

    由于该插件注册在onAppCreated中，如果在onAppCreated及之前使用useStore时，获取不到vuex实例

    fesjs导出了vuex实例store，如在app.js文件中

    import { store, GETTER_TYPES } from '@fesjs/fes';
 console.log(store.getters[GETTER_TYPES.user.address])
-
    1
    2

    vuex插件

    stores文件夹下的文件名包含plugin被解析为插件，vuex插件写法参考官方文档在新窗口打开

    API

    store

    • 类型 Object
    • vuex实例

    MUTATION_TYPES

    • 类型 Object
    • mutation的所有事件类型

    GETTER_TYPES

    • 类型 Object
    • getter的所有方法名

    ACTION_TYPES

    • 类型 Object
    • action的所有事件类型
    - +
    1
    2

    vuex插件

    stores文件夹下的文件名包含plugin被解析为插件，vuex插件写法参考官方文档在新窗口打开

    API

    store

    • 类型 Object
    • vuex实例

    MUTATION_TYPES

    • 类型 Object
    • mutation的所有事件类型

    GETTER_TYPES

    • 类型 Object
    • getter的所有方法名

    ACTION_TYPES

    • 类型 Object
    • action的所有事件类型
    + diff --git a/reference/plugin/plugins/watermark.html b/reference/plugin/plugins/watermark.html index 70fbe1c1..73999bb6 100644 --- a/reference/plugin/plugins/watermark.html +++ b/reference/plugin/plugins/watermark.html @@ -5,7 +5,7 @@ @fesjs/plugin-watermark | Fes.js - + @@ -43,7 +43,7 @@ zIndex = 99999, timestamp = 'YYYY-MM-DD HH:mm' } -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    如果不需要时间戳，则可以设置timestamp为false。

    - +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    如果不需要时间戳，则可以设置timestamp为false。

    + diff --git a/reference/plugin/plugins/windicss.html b/reference/plugin/plugins/windicss.html index d9b1a0f3..0ea709e6 100644 --- a/reference/plugin/plugins/windicss.html +++ b/reference/plugin/plugins/windicss.html @@ -5,7 +5,7 @@ @fesjs/plugin-windicss | Fes.js - + @@ -19,7 +19,7 @@ root: './', } } -
    1
    2
    3
    4
    5
    - +
    1
    2
    3
    4
    5
    + diff --git a/service-worker.js b/service-worker.js index e54bb88d..b79a528d 100644 --- a/service-worker.js +++ b/service-worker.js @@ -1 +1 @@ -if(!self.define){let e,s={};const i=(i,l)=>(i=new URL(i+".js",l).href,s[i]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=s,document.head.appendChild(e)}else e=i,importScripts(i),s()})).then((()=>{let e=s[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e})));self.define=(l,r)=>{const n=e||("document"in self?document.currentScript.src:"")||location.href;if(s[n])return;let u={};const a=e=>i(e,n),c={module:{uri:n},exports:u,require:a};s[n]=Promise.all(l.map((e=>c[e]||a(e)))).then((e=>(r(...e),u)))}}define(["./workbox-7d6a3f4d"],(function(e){"use strict";self.addEventListener("message",(e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()})),e.precacheAndRoute([{url:"404.html",revision:"5ad19651be81edf95acbdfe6fcadc3c0"},{url:"assets/css/styles.ef829674.css",revision:null},{url:"assets/img/back-to-top.8b37f773.svg",revision:null},{url:"assets/js/205.8a8b2972.js",revision:null},{url:"assets/js/293.f9b4a116.js",revision:null},{url:"assets/js/399.e64d5302.js",revision:null},{url:"assets/js/491.b1c8b635.js",revision:null},{url:"assets/js/app.b7179385.js",revision:null},{url:"assets/js/runtime~app.1026dc20.js",revision:null},{url:"assets/js/v-00cf7e23.c350b3b4.js",revision:null},{url:"assets/js/v-040800dc.2b5600c8.js",revision:null},{url:"assets/js/v-0a0e491c.4121ff67.js",revision:null},{url:"assets/js/v-1c0edac3.a294f3d9.js",revision:null},{url:"assets/js/v-1d14d5cc.76c0c25f.js",revision:null},{url:"assets/js/v-2c05b6e0.a2dac609.js",revision:null},{url:"assets/js/v-2fe128e7.782fc13f.js",revision:null},{url:"assets/js/v-323bda7e.d242a4bd.js",revision:null},{url:"assets/js/v-355ee23e.b3d3c1c5.js",revision:null},{url:"assets/js/v-3706649a.59a2e6ca.js",revision:null},{url:"assets/js/v-37e1c06f.8d253062.js",revision:null},{url:"assets/js/v-392e58ee.69c1f8fb.js",revision:null},{url:"assets/js/v-3c4e521e.18cc70ef.js",revision:null},{url:"assets/js/v-3cd5a4ef.bad45ebb.js",revision:null},{url:"assets/js/v-3dba8814.07fd1b26.js",revision:null},{url:"assets/js/v-411c0c9e.777bb6b3.js",revision:null},{url:"assets/js/v-41dee210.2cfda563.js",revision:null},{url:"assets/js/v-494b840e.30afdc7f.js",revision:null},{url:"assets/js/v-528b8b6c.4a83c4cf.js",revision:null},{url:"assets/js/v-5bf80046.7ad59e6f.js",revision:null},{url:"assets/js/v-5f4c684e.7bcd03a9.js",revision:null},{url:"assets/js/v-6320961c.0e6d7c4c.js",revision:null},{url:"assets/js/v-6f2f6a5a.defd4698.js",revision:null},{url:"assets/js/v-76cb52e8.da6ef2dc.js",revision:null},{url:"assets/js/v-76cd065c.3f7c8653.js",revision:null},{url:"assets/js/v-7b48519a.15d5a129.js",revision:null},{url:"assets/js/v-7b96e3a4.6fb5c9db.js",revision:null},{url:"assets/js/v-85fa9b2a.ba9d63a7.js",revision:null},{url:"assets/js/v-884fd4bc.b11306f9.js",revision:null},{url:"assets/js/v-8daa1a0e.a60e9a6c.js",revision:null},{url:"assets/js/v-a1a49808.61922fb2.js",revision:null},{url:"assets/js/v-a951be94.41f553e3.js",revision:null},{url:"assets/js/v-b15becb0.2238f6b4.js",revision:null},{url:"assets/js/v-c253c956.52b824f1.js",revision:null},{url:"assets/js/v-c5618810.b2070b54.js",revision:null},{url:"assets/js/v-d61a9282.74365e2e.js",revision:null},{url:"assets/js/v-d7fa887a.f0824947.js",revision:null},{url:"assets/js/v-ef8c5e10.2a7afead.js",revision:null},{url:"assets/js/v-fb0f0066.6793fab9.js",revision:null},{url:"assets/js/v-fffb8e28.e9aa5ea4.js",revision:null},{url:"framework.png",revision:"d5bc1ce01d8f58c2d32e4396441e5dcc"},{url:"guide/config.html",revision:"51b39d804d0b7f6d5d70ede75a42609f"},{url:"guide/contributing.html",revision:"15c081fccf0e59d72e2ebb81da34421c"},{url:"guide/css.html",revision:"cfef6f25cd413c8e7ae2fe0d44070c9f"},{url:"guide/directory-structure.html",revision:"b436d295e4018da729b5b25fbc9deec9"},{url:"guide/env.html",revision:"0ee2267f8754b4fde0aa434744596595"},{url:"guide/faq.html",revision:"ea10240f8fd32f0ee8b5b90af323374e"},{url:"guide/getting-started.html",revision:"641d43391ef87bcd5e0cca9aee679d81"},{url:"guide/image.html",revision:"e43c297cd33b3a0b21133ba2f4eecd17"},{url:"guide/index.html",revision:"19b3f80224d1b2568cebfcf20f0db390"},{url:"guide/mock.html",revision:"150cef2e05a062f7b888976e650fdc31"},{url:"guide/plugin.html",revision:"149efc3b4f6e8de826fd5c8ba1f98419"},{url:"guide/public.html",revision:"49b5bf8ed997ca617251739e0de51a1d"},{url:"guide/route.html",revision:"213bf84c10cdfb78c7117204071ee5f5"},{url:"guide/runtime-config.html",revision:"6d86883095000f1669a0a73c2063cfba"},{url:"guide/template.html",revision:"f45160a42a25b5157403508cd48f56fc"},{url:"home.png",revision:"3a3b46b3bb2f0a9a52f439c80bade53a"},{url:"index.html",revision:"3267488cdd81f07129be4f8d8982deab"},{url:"logo.png",revision:"41e6de8a94a52a5c1d7914b51111a12c"},{url:"mixin.png",revision:"c58d839aa919cee826f75bf5b348fd81"},{url:"pickTemplate.png",revision:"fb8b8e4e86c33eefe04abee6de5a03d9"},{url:"pickTemplateTip.png",revision:"e0c95971ab1e5692e997fe030c18f2a9"},{url:"plugins.png",revision:"f5e112b065621364d8cd663b245dc619"},{url:"reference/api.html",revision:"cc71952181a44a8140b24e7d75206361"},{url:"reference/api/index.html",revision:"d9323ae7b7867667d97d1eef1a758bb5"},{url:"reference/cli.html",revision:"43d26d6d3c33a0f910ea712698c8dff0"},{url:"reference/cli/index.html",revision:"604795e3f4b529c19d223eed6199b327"},{url:"reference/config/index.html",revision:"5f4b2fd69477150df136d6e80a9007bf"},{url:"reference/plugin/dev/api.html",revision:"80f983aada33062ca28bc5bf4b19ed00"},{url:"reference/plugin/dev/index.html",revision:"ac3c8ad2d83c6750f1162952a5168d56"},{url:"reference/plugin/index.html",revision:"7b9bbc5a2531f364f38f57eb82984f9d"},{url:"reference/plugin/plugins/access.html",revision:"77ff45e19a6ce3e51d9f34e4c596d422"},{url:"reference/plugin/plugins/editor.html",revision:"a7b8b24cb7a948f704051bac5e27f43d"},{url:"reference/plugin/plugins/enums.html",revision:"8c3ca8e5b74e6e31f24bf0475f720fe0"},{url:"reference/plugin/plugins/icon.html",revision:"9e26383e1bf9a077ab4fb7422f2c5e3c"},{url:"reference/plugin/plugins/jest.html",revision:"913e4a878fafba72695c6d27a53ba3d5"},{url:"reference/plugin/plugins/layout.html",revision:"25e7bee54aaa7745693b489ad7a58703"},{url:"reference/plugin/plugins/locale.html",revision:"426885eba9d9585a043884e323956e7c"},{url:"reference/plugin/plugins/model.html",revision:"95d90be03a66e8663016b507c1155156"},{url:"reference/plugin/plugins/pinia.html",revision:"37c754ee4f049c5d948e9ae73e0b70d7"},{url:"reference/plugin/plugins/qiankun.html",revision:"a3af1ac3efb19bfecf9b7c24af940f20"},{url:"reference/plugin/plugins/request.html",revision:"53e0cb736accd6fb80495900edc00994"},{url:"reference/plugin/plugins/sass.html",revision:"88f041285db15f3d9fa55c4499e206bd"},{url:"reference/plugin/plugins/vuex.html",revision:"741e6b85f73be0ff71c68b408cb4bcf6"},{url:"reference/plugin/plugins/watermark.html",revision:"12ffaaa4d409997b5442752e1f115244"},{url:"reference/plugin/plugins/windicss.html",revision:"725afe2d944db799dd2f1161a9be9685"},{url:"side.png",revision:"a5bf932a270e116563f7e1da8968d493"},{url:"top.png",revision:"b282c6a45571a8a0aa710c044b7e4893"}],{})})); +if(!self.define){let e,s={};const i=(i,l)=>(i=new URL(i+".js",l).href,s[i]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=i,e.onload=s,document.head.appendChild(e)}else e=i,importScripts(i),s()})).then((()=>{let e=s[i];if(!e)throw new Error(`Module ${i} didn’t register its module`);return e})));self.define=(l,r)=>{const n=e||("document"in self?document.currentScript.src:"")||location.href;if(s[n])return;let u={};const a=e=>i(e,n),c={module:{uri:n},exports:u,require:a};s[n]=Promise.all(l.map((e=>c[e]||a(e)))).then((e=>(r(...e),u)))}}define(["./workbox-7d6a3f4d"],(function(e){"use strict";self.addEventListener("message",(e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()})),e.precacheAndRoute([{url:"404.html",revision:"d2fd16d8a6b75bd0e30482c0c18f9bf8"},{url:"assets/css/styles.ef829674.css",revision:null},{url:"assets/img/back-to-top.8b37f773.svg",revision:null},{url:"assets/js/205.8a8b2972.js",revision:null},{url:"assets/js/293.f9b4a116.js",revision:null},{url:"assets/js/399.e64d5302.js",revision:null},{url:"assets/js/491.b1c8b635.js",revision:null},{url:"assets/js/app.7180abc0.js",revision:null},{url:"assets/js/runtime~app.3d233f8a.js",revision:null},{url:"assets/js/v-00cf7e23.f492db06.js",revision:null},{url:"assets/js/v-040800dc.60e8c646.js",revision:null},{url:"assets/js/v-0a0e491c.05225417.js",revision:null},{url:"assets/js/v-1c0edac3.7b2b44ff.js",revision:null},{url:"assets/js/v-1d14d5cc.7b2fa19f.js",revision:null},{url:"assets/js/v-2c05b6e0.77f454c7.js",revision:null},{url:"assets/js/v-2fe128e7.1aab1529.js",revision:null},{url:"assets/js/v-323bda7e.5673f3fb.js",revision:null},{url:"assets/js/v-355ee23e.8fe1c5c4.js",revision:null},{url:"assets/js/v-3706649a.59a2e6ca.js",revision:null},{url:"assets/js/v-37e1c06f.c8dccecf.js",revision:null},{url:"assets/js/v-392e58ee.dff8ff10.js",revision:null},{url:"assets/js/v-3c4e521e.1559638b.js",revision:null},{url:"assets/js/v-3cd5a4ef.3f70c0f3.js",revision:null},{url:"assets/js/v-3dba8814.5f5441b1.js",revision:null},{url:"assets/js/v-411c0c9e.7075c1f2.js",revision:null},{url:"assets/js/v-41dee210.050504fd.js",revision:null},{url:"assets/js/v-494b840e.110782a4.js",revision:null},{url:"assets/js/v-528b8b6c.3d914205.js",revision:null},{url:"assets/js/v-5bf80046.a0181eee.js",revision:null},{url:"assets/js/v-5f4c684e.f6943605.js",revision:null},{url:"assets/js/v-6320961c.3276e1b8.js",revision:null},{url:"assets/js/v-6f2f6a5a.fa087967.js",revision:null},{url:"assets/js/v-76cb52e8.d00f653f.js",revision:null},{url:"assets/js/v-76cd065c.ae1ec0a2.js",revision:null},{url:"assets/js/v-7b48519a.0316d1cc.js",revision:null},{url:"assets/js/v-7b96e3a4.61113f81.js",revision:null},{url:"assets/js/v-85fa9b2a.c339d8e4.js",revision:null},{url:"assets/js/v-884fd4bc.ce71af97.js",revision:null},{url:"assets/js/v-8daa1a0e.f2418152.js",revision:null},{url:"assets/js/v-a1a49808.2c87d1c7.js",revision:null},{url:"assets/js/v-a951be94.a8a07ea0.js",revision:null},{url:"assets/js/v-b15becb0.7180a292.js",revision:null},{url:"assets/js/v-c253c956.385acd14.js",revision:null},{url:"assets/js/v-c5618810.35ab6284.js",revision:null},{url:"assets/js/v-d61a9282.8c1c86a1.js",revision:null},{url:"assets/js/v-d7fa887a.29c9fa16.js",revision:null},{url:"assets/js/v-ef8c5e10.46a2d838.js",revision:null},{url:"assets/js/v-fb0f0066.a34cf364.js",revision:null},{url:"assets/js/v-fffb8e28.5eb4adfe.js",revision:null},{url:"framework.png",revision:"d5bc1ce01d8f58c2d32e4396441e5dcc"},{url:"guide/config.html",revision:"6e5de659784e0ea2b5b840b5342f8011"},{url:"guide/contributing.html",revision:"c51e51d4dcbfd89fc90dfff544fe2648"},{url:"guide/css.html",revision:"d6f0ca5e7ebafb475849b04205ab00e9"},{url:"guide/directory-structure.html",revision:"4933f741abd4a7acb5e3136c6baf821f"},{url:"guide/env.html",revision:"447a1ba2c11ab08716a35bbe5d7c4e88"},{url:"guide/faq.html",revision:"f65bea45ce2c917797be083e549a257d"},{url:"guide/getting-started.html",revision:"c8cf6bbfb97e5c1809ca67f8c63c75dc"},{url:"guide/image.html",revision:"4c7ced6976f516d028b06996ad9cfca6"},{url:"guide/index.html",revision:"6d3017b871a2b14265e42a2207fb9911"},{url:"guide/mock.html",revision:"b71450f802a2c7fc5eeae89ac49127d3"},{url:"guide/plugin.html",revision:"d2e4971ee5c5f9203d8a3768c1e2e44e"},{url:"guide/public.html",revision:"65694b0bd9ccf53b6ea6cc6f6bdc0ebf"},{url:"guide/route.html",revision:"224c7f0f59fe50db1e6e37212d02504c"},{url:"guide/runtime-config.html",revision:"78e19058325b7f4b2c986b10f3db941e"},{url:"guide/template.html",revision:"9427f0f1c92aaf28436f8bd4ef8aa298"},{url:"home.png",revision:"3a3b46b3bb2f0a9a52f439c80bade53a"},{url:"index.html",revision:"461a23e57ae0db73142683b13c8d03f8"},{url:"logo.png",revision:"41e6de8a94a52a5c1d7914b51111a12c"},{url:"mixin.png",revision:"c58d839aa919cee826f75bf5b348fd81"},{url:"pickTemplate.png",revision:"fb8b8e4e86c33eefe04abee6de5a03d9"},{url:"pickTemplateTip.png",revision:"e0c95971ab1e5692e997fe030c18f2a9"},{url:"plugins.png",revision:"f5e112b065621364d8cd663b245dc619"},{url:"reference/api.html",revision:"9780db65f65341f1b068874843710173"},{url:"reference/api/index.html",revision:"40a1e5f545479bc5e329256bc94e809f"},{url:"reference/cli.html",revision:"5d8a4e052814872eba35d0443375f8af"},{url:"reference/cli/index.html",revision:"192613a56b43807d4058f437e99301da"},{url:"reference/config/index.html",revision:"265503900e114680d2b3f27a75709630"},{url:"reference/plugin/dev/api.html",revision:"d0cb67b157230219ce18a0a794c0bae0"},{url:"reference/plugin/dev/index.html",revision:"ee4849581cd1c65ba9677cf759379ee5"},{url:"reference/plugin/index.html",revision:"e92fd93c24ae3a9e6b810109490e870e"},{url:"reference/plugin/plugins/access.html",revision:"ad3ad40fb5e37a022c06c98379f90040"},{url:"reference/plugin/plugins/editor.html",revision:"4bb8da97a0c7e471438b0dda251724fa"},{url:"reference/plugin/plugins/enums.html",revision:"f227c05143b8eb392ddecb647cbcac1b"},{url:"reference/plugin/plugins/icon.html",revision:"2418a6bd0c4721c9d8f278310d46fd26"},{url:"reference/plugin/plugins/jest.html",revision:"4beb62b17f9dc1eebf46ef28e10cc20a"},{url:"reference/plugin/plugins/layout.html",revision:"75438f4444440249caefe5372553ff6b"},{url:"reference/plugin/plugins/locale.html",revision:"120f588bcc2fa85d91fe4323ab7d7055"},{url:"reference/plugin/plugins/model.html",revision:"aebe9a272e767b4dc61060452dc7c8ba"},{url:"reference/plugin/plugins/pinia.html",revision:"25fa2cdbe88bf25ecc2b9362356682b7"},{url:"reference/plugin/plugins/qiankun.html",revision:"b6ee4c3fa8953c990fbd387f32784e7e"},{url:"reference/plugin/plugins/request.html",revision:"c109f076bd29d645704d6a81d238449c"},{url:"reference/plugin/plugins/sass.html",revision:"e75376cfec0036ae9a14e08fa4da0b86"},{url:"reference/plugin/plugins/vuex.html",revision:"fe79c565c7dd222fffffe15680fbd96a"},{url:"reference/plugin/plugins/watermark.html",revision:"e6a4887872859115b9deb9711591d988"},{url:"reference/plugin/plugins/windicss.html",revision:"349b1771bc13e66131cd692a1a465d83"},{url:"side.png",revision:"a5bf932a270e116563f7e1da8968d493"},{url:"top.png",revision:"b282c6a45571a8a0aa710c044b7e4893"}],{})}));