From dd841af0e5ba114b42dd9972f23622314c045510 Mon Sep 17 00:00:00 2001 From: winixt <haizekuo@gmail.com> Date: Sat, 1 Apr 2023 07:28:16 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20WeBankFi?= =?UTF-8?q?nTech/fes.js@976aea12d891341ba3d0e4940c7f4f580202209c=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 404.html | 30 +- assets/404.html.b697c9e3.js | 1 + assets/404.html.c3e557d0.js | 1 + assets/access.html.1a82486a.js | 107 ++++++ assets/access.html.ccef700f.js | 1 + assets/api.html.06ea97fd.js | 196 +++++++++++ assets/api.html.87969763.js | 1 + assets/api.html.ad50f750.js | 1 + assets/api.html.dd7de804.js | 1 + assets/app.bd9c95b7.js | 23 ++ ....8b37f773.svg => back-to-top.8efcbe56.svg} | 0 assets/builder.html.246dbbe3.js | 1 + assets/builder.html.5491993d.js | 1 + assets/cli.html.af8c16d8.js | 46 +++ assets/cli.html.eb7c8bac.js | 1 + assets/config.html.637a9806.js | 1 + assets/config.html.bebaf600.js | 59 ++++ assets/contributing.html.3aa886b1.js | 8 + assets/contributing.html.8f3528e9.js | 1 + assets/css.html.8c2b9f6e.js | 17 + assets/css.html.f4729d94.js | 1 + assets/css/styles.8abd66bb.css | 12 - assets/directory-structure.html.c7ccc960.js | 1 + assets/directory-structure.html.c7e6fd2d.js | 70 ++++ assets/editor.html.0d361fe8.js | 46 +++ assets/editor.html.45b1bf75.js | 1 + assets/enums.html.2b56cb9b.js | 130 ++++++++ assets/enums.html.9eba9e94.js | 1 + assets/env.html.2fbe8f51.js | 1 + assets/env.html.5728b740.js | 18 + assets/faq.html.7f01d8a8.js | 1 + assets/faq.html.d692a6e2.js | 3 + assets/getting-started.html.0eb9c5e2.js | 73 +++++ assets/getting-started.html.f4fdc148.js | 1 + assets/icon.html.09e6d802.js | 8 + assets/icon.html.1ef9becf.js | 1 + assets/image.html.50bf0bdd.js | 21 ++ assets/image.html.f92a08c2.js | 1 + assets/index.0b6f9a66.js | 1 + assets/index.html.1e4e9bb2.js | 1 + assets/index.html.2877eae5.js | 1 + assets/index.html.4b24c667.js | 1 + assets/index.html.4ecf73ea.js | 1 + assets/index.html.4f4b557d.js | 1 + assets/index.html.833852a3.js | 1 + assets/index.html.9bf5bab1.js | 78 +++++ assets/index.html.9f427ef5.js | 6 + assets/index.html.a2d6e9e6.js | 115 +++++++ assets/index.html.b99c3eab.js | 1 + assets/index.html.c52ea2ee.js | 1 + assets/index.html.cbd2c491.js | 86 +++++ assets/index.html.d2f518d0.js | 17 + assets/index.html.de0d80a1.js | 17 + assets/jest.html.b6be70f6.js | 1 + assets/jest.html.da327ef6.js | 307 ++++++++++++++++++ assets/js/205.d4ef4058.js | 1 - assets/js/293.f5289c13.js | 1 - assets/js/399.ae8be0a6.js | 2 - assets/js/399.ae8be0a6.js.LICENSE.txt | 10 - assets/js/491.d264dc1d.js | 1 - assets/js/app.d5bb65a0.js | 1 - assets/js/runtime~app.67702f4f.js | 1 - assets/js/v-00cf7e23.1bc881cc.js | 1 - assets/js/v-040800dc.1f1fb9d5.js | 1 - assets/js/v-0a0e491c.37f99a72.js | 1 - assets/js/v-1c0edac3.fe469da8.js | 1 - assets/js/v-1d14d5cc.f6b678f3.js | 1 - assets/js/v-2c05b6e0.7edc12ad.js | 1 - assets/js/v-2fe128e7.a15f3d55.js | 1 - assets/js/v-323bda7e.778122f9.js | 1 - assets/js/v-355ee23e.f2dde2a4.js | 1 - assets/js/v-3706649a.6d045efa.js | 1 - assets/js/v-37e1c06f.49408d07.js | 1 - assets/js/v-392e58ee.67937c7d.js | 1 - assets/js/v-3c4e521e.b813ace2.js | 1 - assets/js/v-3cd5a4ef.7a6ef2c7.js | 1 - assets/js/v-3dba8814.9f07a8e3.js | 1 - assets/js/v-411c0c9e.eb0a832d.js | 1 - assets/js/v-41dee210.18d5dcb0.js | 1 - assets/js/v-494b840e.3219979d.js | 1 - assets/js/v-528b8b6c.e0560471.js | 1 - assets/js/v-5bf80046.734741c7.js | 1 - assets/js/v-5f4c684e.004fc897.js | 1 - assets/js/v-6320961c.594d5357.js | 1 - assets/js/v-6f2f6a5a.0a028df5.js | 1 - assets/js/v-76cb52e8.0f619206.js | 1 - assets/js/v-76cd065c.270a37ed.js | 1 - assets/js/v-7b48519a.741c8475.js | 1 - assets/js/v-7b96e3a4.033eb852.js | 1 - assets/js/v-85fa9b2a.3f03d054.js | 1 - assets/js/v-884fd4bc.36a95eba.js | 1 - assets/js/v-8daa1a0e.97e78117.js | 1 - assets/js/v-a1a49808.5aa9c148.js | 1 - assets/js/v-a951be94.9550ef17.js | 1 - assets/js/v-b15becb0.9810a63f.js | 1 - assets/js/v-c253c956.71cde0f0.js | 1 - assets/js/v-c5618810.c7e42791.js | 1 - assets/js/v-d61a9282.315b2b24.js | 1 - assets/js/v-d7fa887a.eec494da.js | 1 - assets/js/v-ef8c5e10.01694dac.js | 1 - assets/js/v-fb0f0066.f066a234.js | 1 - assets/js/v-fffb8e28.7aa72175.js | 1 - assets/layout.html.18970df4.js | 113 +++++++ assets/layout.html.737f0d05.js | 1 + assets/locale.html.669c5454.js | 76 +++++ assets/locale.html.a0788058.js | 1 + assets/login.html.3b52bc00.js | 1 + assets/login.html.5cb3e152.js | 18 + assets/mock.html.561d68eb.js | 1 + assets/mock.html.ab147021.js | 160 +++++++++ assets/model.html.17d86d37.js | 65 ++++ assets/model.html.a33983f1.js | 1 + assets/pinia.html.ca207361.js | 1 + assets/pinia.html.eb251b6e.js | 48 +++ assets/plugin.html.a5e6ae94.js | 1 + assets/plugin.html.de4f8c7b.js | 19 ++ assets/public.html.950ba2eb.js | 1 + assets/public.html.d51b184d.js | 14 + assets/qiankun.html.03151319.js | 184 +++++++++++ assets/qiankun.html.fd060b60.js | 1 + assets/request.html.08c691d1.js | 123 +++++++ assets/request.html.d16e6c85.js | 1 + assets/route.html.32be9bfc.js | 167 ++++++++++ assets/route.html.8edafb3a.js | 1 + assets/runtime-config.html.90acb818.js | 137 ++++++++ assets/runtime-config.html.b70d36d5.js | 1 + assets/sass.html.9236bc5e.js | 8 + assets/sass.html.be3aee7e.js | 1 + assets/style.03dc0593.css | 1 + assets/swc.html.1459de3d.js | 16 + assets/swc.html.86a67f1f.js | 1 + assets/template.html.8e33412a.js | 23 ++ assets/template.html.900fbffc.js | 1 + assets/upgrade3.html.9bc44b95.js | 1 + assets/upgrade3.html.c353af42.js | 1 + assets/vuex.html.1794fc22.js | 122 +++++++ assets/vuex.html.3e9bd488.js | 1 + assets/watermark.html.6ba7e245.js | 1 + assets/watermark.html.e99470a0.js | 35 ++ assets/windicss.html.17a13504.js | 1 + assets/windicss.html.afe09b0e.js | 11 + guide/builder.html | 33 ++ guide/config.html | 87 +++-- guide/contributing.html | 42 ++- guide/css.html | 38 ++- guide/directory-structure.html | 86 ++--- guide/env.html | 48 ++- guide/faq.html | 30 +- guide/getting-started.html | 72 ++-- guide/image.html | 56 ++-- guide/index.html | 30 +- guide/mock.html | 134 +++++--- guide/plugin.html | 60 ++-- guide/public.html | 46 ++- guide/route.html | 67 ++-- guide/runtime-config.html | 145 +++++++-- guide/template.html | 65 ++-- guide/upgrade3.html | 33 ++ index.html | 40 ++- left-right.png | Bin 0 -> 117270 bytes reference/api.html | 28 +- reference/api/index.html | 48 ++- reference/cli.html | 34 +- reference/cli/index.html | 70 ++-- reference/config/index.html | 181 ++++++----- reference/plugin/dev/api.html | 302 +++++++++-------- reference/plugin/dev/index.html | 42 ++- reference/plugin/index.html | 28 +- reference/plugin/plugins/access.html | 145 +++++---- reference/plugin/plugins/editor.html | 92 +++--- reference/plugin/plugins/enums.html | 142 ++++---- reference/plugin/plugins/icon.html | 38 ++- reference/plugin/plugins/jest.html | 49 ++- reference/plugin/plugins/layout.html | 173 +++++----- reference/plugin/plugins/locale.html | 85 +++-- reference/plugin/plugins/login.html | 50 +++ reference/plugin/plugins/model.html | 103 +++--- reference/plugin/plugins/pinia.html | 66 ++-- reference/plugin/plugins/qiankun.html | 220 +++++++------ reference/plugin/plugins/request.html | 190 +++++------ reference/plugin/plugins/sass.html | 39 ++- reference/plugin/plugins/swc.html | 48 +++ reference/plugin/plugins/vuex.html | 95 +++--- reference/plugin/plugins/watermark.html | 74 +++-- reference/plugin/plugins/windicss.html | 32 +- service-worker.js | 2 +- workbox-d249b2c8.js => workbox-fa9115e2.js | 0 187 files changed, 5049 insertions(+), 1379 deletions(-) create mode 100644 assets/404.html.b697c9e3.js create mode 100644 assets/404.html.c3e557d0.js create mode 100644 assets/access.html.1a82486a.js create mode 100644 assets/access.html.ccef700f.js create mode 100644 assets/api.html.06ea97fd.js create mode 100644 assets/api.html.87969763.js create mode 100644 assets/api.html.ad50f750.js create mode 100644 assets/api.html.dd7de804.js create mode 100644 assets/app.bd9c95b7.js rename assets/{img/back-to-top.8b37f773.svg => back-to-top.8efcbe56.svg} (100%) create mode 100644 assets/builder.html.246dbbe3.js create mode 100644 assets/builder.html.5491993d.js create mode 100644 assets/cli.html.af8c16d8.js create mode 100644 assets/cli.html.eb7c8bac.js create mode 100644 assets/config.html.637a9806.js create mode 100644 assets/config.html.bebaf600.js create mode 100644 assets/contributing.html.3aa886b1.js create mode 100644 assets/contributing.html.8f3528e9.js create mode 100644 assets/css.html.8c2b9f6e.js create mode 100644 assets/css.html.f4729d94.js delete mode 100644 assets/css/styles.8abd66bb.css create mode 100644 assets/directory-structure.html.c7ccc960.js create mode 100644 assets/directory-structure.html.c7e6fd2d.js create mode 100644 assets/editor.html.0d361fe8.js create mode 100644 assets/editor.html.45b1bf75.js create mode 100644 assets/enums.html.2b56cb9b.js create mode 100644 assets/enums.html.9eba9e94.js create mode 100644 assets/env.html.2fbe8f51.js create mode 100644 assets/env.html.5728b740.js create mode 100644 assets/faq.html.7f01d8a8.js create mode 100644 assets/faq.html.d692a6e2.js create mode 100644 assets/getting-started.html.0eb9c5e2.js create mode 100644 assets/getting-started.html.f4fdc148.js create mode 100644 assets/icon.html.09e6d802.js create mode 100644 assets/icon.html.1ef9becf.js create mode 100644 assets/image.html.50bf0bdd.js create mode 100644 assets/image.html.f92a08c2.js create mode 100644 assets/index.0b6f9a66.js create mode 100644 assets/index.html.1e4e9bb2.js create mode 100644 assets/index.html.2877eae5.js create mode 100644 assets/index.html.4b24c667.js create mode 100644 assets/index.html.4ecf73ea.js create mode 100644 assets/index.html.4f4b557d.js create mode 100644 assets/index.html.833852a3.js create mode 100644 assets/index.html.9bf5bab1.js create mode 100644 assets/index.html.9f427ef5.js create mode 100644 assets/index.html.a2d6e9e6.js create mode 100644 assets/index.html.b99c3eab.js create mode 100644 assets/index.html.c52ea2ee.js create mode 100644 assets/index.html.cbd2c491.js create mode 100644 assets/index.html.d2f518d0.js create mode 100644 assets/index.html.de0d80a1.js create mode 100644 assets/jest.html.b6be70f6.js create mode 100644 assets/jest.html.da327ef6.js delete mode 100644 assets/js/205.d4ef4058.js delete mode 100644 assets/js/293.f5289c13.js delete mode 100644 assets/js/399.ae8be0a6.js delete mode 100644 assets/js/399.ae8be0a6.js.LICENSE.txt delete mode 100644 assets/js/491.d264dc1d.js delete mode 100644 assets/js/app.d5bb65a0.js delete mode 100644 assets/js/runtime~app.67702f4f.js delete mode 100644 assets/js/v-00cf7e23.1bc881cc.js delete mode 100644 assets/js/v-040800dc.1f1fb9d5.js delete mode 100644 assets/js/v-0a0e491c.37f99a72.js delete mode 100644 assets/js/v-1c0edac3.fe469da8.js delete mode 100644 assets/js/v-1d14d5cc.f6b678f3.js delete mode 100644 assets/js/v-2c05b6e0.7edc12ad.js delete mode 100644 assets/js/v-2fe128e7.a15f3d55.js delete mode 100644 assets/js/v-323bda7e.778122f9.js delete mode 100644 assets/js/v-355ee23e.f2dde2a4.js delete mode 100644 assets/js/v-3706649a.6d045efa.js delete mode 100644 assets/js/v-37e1c06f.49408d07.js delete mode 100644 assets/js/v-392e58ee.67937c7d.js delete mode 100644 assets/js/v-3c4e521e.b813ace2.js delete mode 100644 assets/js/v-3cd5a4ef.7a6ef2c7.js delete mode 100644 assets/js/v-3dba8814.9f07a8e3.js delete mode 100644 assets/js/v-411c0c9e.eb0a832d.js delete mode 100644 assets/js/v-41dee210.18d5dcb0.js delete mode 100644 assets/js/v-494b840e.3219979d.js delete mode 100644 assets/js/v-528b8b6c.e0560471.js delete mode 100644 assets/js/v-5bf80046.734741c7.js delete mode 100644 assets/js/v-5f4c684e.004fc897.js delete mode 100644 assets/js/v-6320961c.594d5357.js delete mode 100644 assets/js/v-6f2f6a5a.0a028df5.js delete mode 100644 assets/js/v-76cb52e8.0f619206.js delete mode 100644 assets/js/v-76cd065c.270a37ed.js delete mode 100644 assets/js/v-7b48519a.741c8475.js delete mode 100644 assets/js/v-7b96e3a4.033eb852.js delete mode 100644 assets/js/v-85fa9b2a.3f03d054.js delete mode 100644 assets/js/v-884fd4bc.36a95eba.js delete mode 100644 assets/js/v-8daa1a0e.97e78117.js delete mode 100644 assets/js/v-a1a49808.5aa9c148.js delete mode 100644 assets/js/v-a951be94.9550ef17.js delete mode 100644 assets/js/v-b15becb0.9810a63f.js delete mode 100644 assets/js/v-c253c956.71cde0f0.js delete mode 100644 assets/js/v-c5618810.c7e42791.js delete mode 100644 assets/js/v-d61a9282.315b2b24.js delete mode 100644 assets/js/v-d7fa887a.eec494da.js delete mode 100644 assets/js/v-ef8c5e10.01694dac.js delete mode 100644 assets/js/v-fb0f0066.f066a234.js delete mode 100644 assets/js/v-fffb8e28.7aa72175.js create mode 100644 assets/layout.html.18970df4.js create mode 100644 assets/layout.html.737f0d05.js create mode 100644 assets/locale.html.669c5454.js create mode 100644 assets/locale.html.a0788058.js create mode 100644 assets/login.html.3b52bc00.js create mode 100644 assets/login.html.5cb3e152.js create mode 100644 assets/mock.html.561d68eb.js create mode 100644 assets/mock.html.ab147021.js create mode 100644 assets/model.html.17d86d37.js create mode 100644 assets/model.html.a33983f1.js create mode 100644 assets/pinia.html.ca207361.js create mode 100644 assets/pinia.html.eb251b6e.js create mode 100644 assets/plugin.html.a5e6ae94.js create mode 100644 assets/plugin.html.de4f8c7b.js create mode 100644 assets/public.html.950ba2eb.js create mode 100644 assets/public.html.d51b184d.js create mode 100644 assets/qiankun.html.03151319.js create mode 100644 assets/qiankun.html.fd060b60.js create mode 100644 assets/request.html.08c691d1.js create mode 100644 assets/request.html.d16e6c85.js create mode 100644 assets/route.html.32be9bfc.js create mode 100644 assets/route.html.8edafb3a.js create mode 100644 assets/runtime-config.html.90acb818.js create mode 100644 assets/runtime-config.html.b70d36d5.js create mode 100644 assets/sass.html.9236bc5e.js create mode 100644 assets/sass.html.be3aee7e.js create mode 100644 assets/style.03dc0593.css create mode 100644 assets/swc.html.1459de3d.js create mode 100644 assets/swc.html.86a67f1f.js create mode 100644 assets/template.html.8e33412a.js create mode 100644 assets/template.html.900fbffc.js create mode 100644 assets/upgrade3.html.9bc44b95.js create mode 100644 assets/upgrade3.html.c353af42.js create mode 100644 assets/vuex.html.1794fc22.js create mode 100644 assets/vuex.html.3e9bd488.js create mode 100644 assets/watermark.html.6ba7e245.js create mode 100644 assets/watermark.html.e99470a0.js create mode 100644 assets/windicss.html.17a13504.js create mode 100644 assets/windicss.html.afe09b0e.js create mode 100644 guide/builder.html create mode 100644 guide/upgrade3.html create mode 100644 left-right.png create mode 100644 reference/plugin/plugins/login.html create mode 100644 reference/plugin/plugins/swc.html rename workbox-d249b2c8.js => workbox-fa9115e2.js (100%) diff --git a/404.html b/404.html index 28a6b34e..7fbd376c 100644 --- a/404.html +++ b/404.html @@ -3,13 +3,31 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> - <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> + <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title> | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/404.html.b697c9e3.js"><link rel="modulepreload" href="/assets/404.html.c3e557d0.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><div class="theme-default-content"><h1>404</h1><blockquote>看起来我们进入了错误的链接</blockquote><a href="/fes.js/" class="">返回首页</a></div></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> + <div id="app"><!--[--><div class="theme-container"><main class="page"><div class="theme-default-content"><h1>404</h1><blockquote>这里什么都没有</blockquote><a href="/" class="">返回首页</a></div></main></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/assets/404.html.b697c9e3.js b/assets/404.html.b697c9e3.js new file mode 100644 index 00000000..1bd4a718 --- /dev/null +++ b/assets/404.html.b697c9e3.js @@ -0,0 +1 @@ +import{_ as e,o as c,c as t}from"./app.bd9c95b7.js";const _={};function o(r,n){return c(),t("div")}const a=e(_,[["render",o],["__file","404.html.vue"]]);export{a as default}; diff --git a/assets/404.html.c3e557d0.js b/assets/404.html.c3e557d0.js new file mode 100644 index 00000000..1c2fbeec --- /dev/null +++ b/assets/404.html.c3e557d0.js @@ -0,0 +1 @@ +const t=JSON.parse('{"key":"v-3706649a","path":"/404.html","title":"","lang":"zh-CN","frontmatter":{"layout":"NotFound"},"excerpt":"","headers":[],"git":{},"filePathRelative":null}');export{t as data}; diff --git a/assets/access.html.1a82486a.js b/assets/access.html.1a82486a.js new file mode 100644 index 00000000..8aa9f871 --- /dev/null +++ b/assets/access.html.1a82486a.js @@ -0,0 +1,107 @@ +import{_ as p,r as c,o,c as l,b as s,d as a,a as e,f as n}from"./app.bd9c95b7.js";const i={},u=n(`<h1 id="fesjs-plugin-access" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-access" aria-hidden="true">#</a> @fesjs/plugin-access</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>对于前端应用来说,权限就是页面、页面元素是否可见。</p><h3 id="资源" tabindex="-1"><a class="header-anchor" href="#资源" aria-hidden="true">#</a> 资源</h3><p>Fes.js 把页面、页面元素统一叫做资源,用资源 ID 来识别区分他们:</p><ul><li>页面的资源 ID 默认是页面的路由 <code>path</code> 。比如页面 <code>pages/a.vue</code> 的路由 <code>path</code> 是 <code>/a</code>。当页面访问 <code>/a</code> 时会渲染当前页面,<code>/a</code> 也就是页面的 <code>accessId</code>。</li><li>页面元素的资源 ID 没有默认值,需要自定义。</li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>access</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>access</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-access</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>accessOnepicess2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="匹配规则" tabindex="-1"><a class="header-anchor" href="#匹配规则" aria-hidden="true">#</a> 匹配规则</h3><h4 id="全等匹配" tabindex="-1"><a class="header-anchor" href="#全等匹配" aria-hidden="true">#</a> 全等匹配</h4><p>资源的匹配规则默认是使用全等匹配,比如页面 <code>pages/a.vue</code> 对应路由 <code>path</code> 是 <code>/a</code>,则 <code>/a</code> 就是页面的资源 ID。如果我们设置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>access<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/a'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>由于权限列表中包含<code>/a</code>,则表示拥有此页面权限。</p><h4 id="模糊匹配" tabindex="-1"><a class="header-anchor" href="#模糊匹配" aria-hidden="true">#</a> 模糊匹配</h4><p>页面<code>@id.vue</code>会映射为动态路由<code>/:id</code>,想匹配此页面有两种办法:</p><ul><li><strong>access.setAccess(['/:id'])</strong></li><li><strong>access.setAccess(['/*'])</strong></li></ul><p>第二种是模糊匹配,<code>*</code>表示任意路径。比如角色<code>admin</code>需要全部权限,则可以:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">access</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">roles</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">admin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'*'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="角色" tabindex="-1"><a class="header-anchor" href="#角色" aria-hidden="true">#</a> 角色</h3><p>通常我们会用角色来控制权限,相应的 Fes.js 用角色定义一组资源。当访问 Fes.js 应用时,使用插件提供的 API 设置用户的角色,角色对应的资源才可见,非角色对应的资源不可见。</p><p>当然有时候业务比较复杂,角色对应的权限是动态的。不要怕!插件提供粒度更细的 API 来设置当前用户能访问的资源。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-access"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">access</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">roles</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">admin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token string">'/onepiece'</span><span class="token punctuation">,</span> <span class="token string">'/store'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="roles" tabindex="-1"><a class="header-anchor" href="#roles" aria-hidden="true">#</a> roles</h3><ul><li><p><strong>类型</strong>:对象</p></li><li><p><strong>默认值</strong>:<code>{}</code></p></li><li><p><strong>详情</strong>:</p><p>角色预定义列表。<code>key</code> 是角色 Id ,<code>value</code>是角色 Id 对应的资源列表。</p></li></ul><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><p>在 <code>app.js</code> 中配置</p><h3 id="unaccesshandler" tabindex="-1"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3>`,31),r=n("<li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 <code>unAccessHandler</code> 函数。</p></li>",3),d=s("p",null,[s("strong",null,"参数")],-1),k=s("li",null,"router:createRouter 创建的路由实例",-1),v=s("li",null,"to: 准备进入的路由",-1),g=s("li",null,"from:离开的路由",-1),m={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"},h=n(`<p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> to<span class="token punctuation">,</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/404'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/403'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3>`,3),b=n("<li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不存在,则会调用 <code>noFoundHandler</code> 函数。</p></li>",3),f=s("p",null,[s("strong",null,"参数")],-1),y=s("li",null,"router:createRouter 创建的路由实例",-1),x=s("li",null,"to: 准备进入的路由",-1),j=s("li",null,"from:离开的路由",-1),A={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(`<p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="ignoreaccess" tabindex="-1"><a class="header-anchor" href="#ignoreaccess" aria-hidden="true">#</a> ignoreAccess</h3><ul><li><p><strong>类型</strong>:<code>Array<string></code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>配置需要忽略权限校验的页面。</p></li></ul><p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token literal-property property">ignoreAccess</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/login'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="access" tabindex="-1"><a class="header-anchor" href="#access" aria-hidden="true">#</a> access</h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="access-hasaccess" tabindex="-1"><a class="header-anchor" href="#access-hasaccess" aria-hidden="true">#</a> access.hasAccess</h4><ul><li><strong>类型</strong>:( accessId: string | number ) => Promise<boolean></li><li><strong>详情</strong>: 判断某个资源是否可见。</li><li><strong>参数</strong>: <ul><li>accessId,资源 Id</li></ul></li><li><strong>返回值</strong>:是否有权限</li></ul><h4 id="access-isdataready" tabindex="-1"><a class="header-anchor" href="#access-isdataready" aria-hidden="true">#</a> access.isDataReady</h4><ul><li><strong>类型</strong>:() => boolean</li><li><strong>详情</strong>:可以用异步数据来设置权限,<code>isDataReady</code> 用来判断异步数据是否已经加载完毕。</li><li><strong>参数</strong>:null</li><li><strong>返回值</strong>:Boolean</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>access<span class="token punctuation">.</span><span class="token function">isDataReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="access-setrole" tabindex="-1"><a class="header-anchor" href="#access-setrole" aria-hidden="true">#</a> access.setRole</h4><ul><li><strong>类型</strong>:函数</li><li><strong>详情</strong>:设置当前的角色。</li><li><strong>参数</strong>: <ul><li>roleId,角色 Id,有两种类型: <ul><li>String,对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li><li>Promise,Promise resolve 的结果应对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li></ul></li></ul></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +access<span class="token punctuation">.</span><span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="access-setaccess" tabindex="-1"><a class="header-anchor" href="#access-setaccess" aria-hidden="true">#</a> access.setAccess</h4><ul><li><strong>类型</strong>:函数</li><li><strong>详情</strong>:设置当前的角色。</li><li><strong>参数</strong>: <ul><li>accessIds,资源 Id 数组,有两种类型: <ul><li>Array,数组项对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li><li>Promise,Promise resolve 的结果应该是<code>Array<accessId></code>。</li></ul></li></ul></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +access<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/a'</span><span class="token punctuation">,</span> <span class="token string">'/b'</span><span class="token punctuation">,</span> <span class="token string">'/c'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="access-getaccess" tabindex="-1"><a class="header-anchor" href="#access-getaccess" aria-hidden="true">#</a> access.getAccess</h4><ul><li><strong>类型</strong>:函数</li><li><strong>详情</strong>:返回当前可见的资源列表。</li><li><strong>参数</strong>:null</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +access<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="useaccess" tabindex="-1"><a class="header-anchor" href="#useaccess" aria-hidden="true">#</a> useAccess</h3><ul><li><strong>类型</strong>:<a href="(https://v3.cn.vuejs.org/guide/composition-api-introduction.html)">composition</a> 函数</li><li><strong>详情</strong>:判断某个资源是否可见。</li><li><strong>参数</strong>: <ul><li>accessId,资源 Id</li></ul></li><li><strong>返回值</strong>:<code>ref</code></li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessOnepicess<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>accessOnepicess<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> useAccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> accessOnepicess <span class="token operator">=</span> <span class="token function">useAccess</span><span class="token punctuation">(</span><span class="token string">'/onepiece1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + accessOnepicess<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="v-access" tabindex="-1"><a class="header-anchor" href="#v-access" aria-hidden="true">#</a> v-access</h3><p>在指令 <code>v-access</code> 中传入 <code>accessId</code>,则当 <code>accessId</code> 拥有权限时显示 DOM,当没有权限时隐藏此 DOM。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-access</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>accessOnepicess<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="组件-access" tabindex="-1"><a class="header-anchor" href="#组件-access" aria-hidden="true">#</a> 组件 Access</h3><p>组件 <code>Access</code> 中传入 <code>accessId</code>,则当 <code>accessId</code> 拥有权限时渲染此组件,当没有权限时隐藏此组件。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>access</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>access</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,33);function w(I,q){const t=c("ExternalLinkIcon");return o(),l("div",null,[u,s("ul",null,[r,s("li",null,[d,s("ul",null,[k,v,g,s("li",null,[a("next: "),s("a",m,[a("next 函数"),e(t)])])])])]),h,s("ul",null,[b,s("li",null,[f,s("ul",null,[y,x,j,s("li",null,[a("next: "),s("a",A,[a("next 函数"),e(t)])])])])]),_])}const F=p(i,[["render",w],["__file","access.html.vue"]]);export{F as default}; diff --git a/assets/access.html.ccef700f.js b/assets/access.html.ccef700f.js new file mode 100644 index 00000000..39147d5a --- /dev/null +++ b/assets/access.html.ccef700f.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-2fe128e7","path":"/reference/plugin/plugins/access.html","title":"@fesjs/plugin-access","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[{"level":3,"title":"资源","slug":"资源","link":"#资源","children":[]},{"level":3,"title":"匹配规则","slug":"匹配规则","link":"#匹配规则","children":[]},{"level":3,"title":"角色","slug":"角色","link":"#角色","children":[]}]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"编译时配置","slug":"编译时配置","link":"#编译时配置","children":[{"level":3,"title":"roles","slug":"roles","link":"#roles","children":[]}]},{"level":2,"title":"运行时配置","slug":"运行时配置","link":"#运行时配置","children":[{"level":3,"title":"unAccessHandler","slug":"unaccesshandler","link":"#unaccesshandler","children":[]},{"level":3,"title":"noFoundHandler","slug":"nofoundhandler","link":"#nofoundhandler","children":[]},{"level":3,"title":"ignoreAccess","slug":"ignoreaccess","link":"#ignoreaccess","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"access","slug":"access","link":"#access","children":[]},{"level":3,"title":"useAccess","slug":"useaccess","link":"#useaccess","children":[]},{"level":3,"title":"v-access","slug":"v-access","link":"#v-access","children":[]},{"level":3,"title":"组件 Access","slug":"组件-access","link":"#组件-access","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/access.md"}');export{e as data}; diff --git a/assets/api.html.06ea97fd.js b/assets/api.html.06ea97fd.js new file mode 100644 index 00000000..bd524db4 --- /dev/null +++ b/assets/api.html.06ea97fd.js @@ -0,0 +1,196 @@ +import{_ as e,r as i,o,c,b as n,d as a,a as p,f as t}from"./app.bd9c95b7.js";const l={},u=t(`<h1 id="插件-api" tabindex="-1"><a class="header-anchor" href="#插件-api" aria-hidden="true">#</a> 插件 API</h1><h2 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h2><h3 id="api-paths" tabindex="-1"><a class="header-anchor" href="#api-paths" aria-hidden="true">#</a> api.paths</h3><p>一些关键的路径:</p><ul><li>cwd,执行命令的绝对路径</li><li>absNodeModulesPath,nodeModule 的绝对路径</li><li>absOutputPath,输出 <code>build</code> 产物的绝对路径</li><li>absSrcPath,<code>src</code> 目录的绝对路径</li><li>absPagesPath,<code>pages</code>目录的绝对路径</li><li>absTmpPath,<code>.fes</code>临时文件目录的绝对路径</li></ul><h3 id="api-cwd" tabindex="-1"><a class="header-anchor" href="#api-cwd" aria-hidden="true">#</a> api.cwd</h3><p>执行命令的绝对路径</p><h3 id="api-pkg" tabindex="-1"><a class="header-anchor" href="#api-pkg" aria-hidden="true">#</a> api.pkg</h3><p><code>package.json</code>的内容</p><h3 id="api-configinstance" tabindex="-1"><a class="header-anchor" href="#api-configinstance" aria-hidden="true">#</a> api.configInstance</h3><p><code>config</code>实例</p><h3 id="userconfig" tabindex="-1"><a class="header-anchor" href="#userconfig" aria-hidden="true">#</a> userConfig</h3><p>用户配置</p><h3 id="config" tabindex="-1"><a class="header-anchor" href="#config" aria-hidden="true">#</a> config</h3><p>插件配置可被修改,此为最终的配置</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> env</h3><p>p<wbr>rocess.env</p><h3 id="args" tabindex="-1"><a class="header-anchor" href="#args" aria-hidden="true">#</a> args</h3><p>环境变量</p><h2 id="核心方法" tabindex="-1"><a class="header-anchor" href="#核心方法" aria-hidden="true">#</a> 核心方法</h2><h3 id="describe" tabindex="-1"><a class="header-anchor" href="#describe" aria-hidden="true">#</a> describe</h3><p>注册阶段执行,用于描述插件或插件集的 id、key、配置信息、启用方式等。</p><p>用法:<strong>describe({ id?: string, key?: string, config?: { default, schema, onChange } }, enableBy?)</strong></p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'esbuild'</span><span class="token punctuation">,</span> + <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token function">schema</span><span class="token punctuation">(</span><span class="token parameter">joi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> joi<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">enableBy</span><span class="token operator">:</span> api<span class="token punctuation">.</span>EnableBy<span class="token punctuation">.</span>config<span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注:</p>`,26),r=n("li",null,[n("code",null,"config.default"),a(" 为配置的默认值,用户没有配置时取这个")],-1),d=n("code",null,"config.schema",-1),k={href:"https://hapi.dev/module/joi",target:"_blank",rel:"noopener noreferrer"},v=n("li",null,[n("code",null,"config.onChange"),a(" 是 "),n("code",null,"dev"),a(" 阶段配置被修改后的处理机制,默认会重启 dev 进程,也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件,还可以通过函数的格式自定义")],-1),m=n("li",null,[n("code",null,"enableBy"),a(" 为启用方式,默认是注册启用,可更改为 "),n("code",null,"api.EnableBy.config"),a(",还可以用自定义函数的方式决定其启用时机(动态生效)")],-1),h=t(`<h3 id="register" tabindex="-1"><a class="header-anchor" href="#register" aria-hidden="true">#</a> register</h3><p>为 api.applyPlugins 注册可供其使用的 hook。</p><p>用法:<strong>register({ key: string, fn: Function, pluginId?: string, before?: string, stage?: number })</strong></p><p>参数:</p><ul><li>key:唯一 id</li><li>fn:hook 函数,当执行<code>api.applyPlugins</code>时,此函数被执行。</li><li>pluginId:插件 id,如果配置了插件 id,则只有此插件未被禁用时,才会执行。</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 可同步</span> +api<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> + <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token string">'a'</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// 可异步</span> +api<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> + <span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">await</span> <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token string">'b'</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意:</p><ul><li>fn 支持同步和异步,异步通过 Promise,返回值为 Promise 即为异步</li><li>fn 里的内容需结合 <code>api.appyPlugins</code> 的 <code>type</code> 参数来看,如果是 <code>api.ApplyPluginsType.add</code>,需有返回值,这些返回值最终会被合成一个数组。如果是 <code>api.ApplyPluginsType.modify</code>,需对第一个参数做修改,并返回它,它会作为下个 hook 的参数。 如果是 <code>api.ApplyPluginsType.event</code>,无需返回值</li><li>stage 和 before 都是用于调整执行顺序的,参考 tapable</li><li>stage 默认是 0,设为 -1 或更少会提前执行,设为 1 或更多会后置执行</li></ul><h3 id="applyplugins" tabindex="-1"><a class="header-anchor" href="#applyplugins" aria-hidden="true">#</a> applyPlugins</h3><p>取得 register 注册的 hooks 执行后的数据。</p><p>用法:<strong>applyPlugins({ key: string, type: api.ApplyPluginsType, initialValue?: any, args?: any })</strong></p><p>参数:</p><ul><li>key:唯一 id</li><li>type:hook 的类型。</li><li>initialValue:初始值。</li><li>args:参数,hook 函数执行时,args 会作为参数传入。</li></ul><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token keyword">await</span> api<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> + <span class="token literal-property property">type</span><span class="token operator">:</span> api<span class="token punctuation">.</span>ApplyPluginsType<span class="token punctuation">.</span>add<span class="token punctuation">,</span> + <span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['a', 'b']</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="api-applypluginstype" tabindex="-1"><a class="header-anchor" href="#api-applypluginstype" aria-hidden="true">#</a> api.ApplyPluginsType</h4><p>编译时插件 hook 执行类型,enum 类型,包含三个属性:</p><ul><li>compose,用于合并执行多个函数,函数可决定前序函数的执行时机</li><li>modify,用于修改值</li><li>event,用于执行事件,前面没有依赖关系</li></ul><h3 id="registermethod" tabindex="-1"><a class="header-anchor" href="#registermethod" aria-hidden="true">#</a> registerMethod</h3><p>往 <code>api</code> 上注册方法。如果有提供 <code>fn</code>,则执行 <code>fn</code> 定义的函数。</p><p>用法:<strong>registerMethod({ name: string, fn?: Function, exitsError?: boolean })</strong></p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerMethod</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'writeTmpFile'</span><span class="token punctuation">,</span> + <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> path<span class="token punctuation">,</span> content <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token function">assert</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>stage <span class="token operator">>=</span> api<span class="token punctuation">.</span>ServiceStage<span class="token punctuation">.</span>pluginReady<span class="token punctuation">,</span> <span class="token string">'api.writeTmpFile() should not execute in register stage.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> absPath <span class="token operator">=</span> <span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath<span class="token punctuation">,</span> path<span class="token punctuation">)</span><span class="token punctuation">;</span> + api<span class="token punctuation">.</span>utils<span class="token punctuation">.</span>mkdirp<span class="token punctuation">.</span><span class="token function">sync</span><span class="token punctuation">(</span><span class="token function">dirname</span><span class="token punctuation">(</span>absPath<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">existsSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token function">readFileSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span> <span class="token operator">!==</span> content<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token function">writeFileSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">,</span> content<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后在插件中可以使用:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="registercommand" tabindex="-1"><a class="header-anchor" href="#registercommand" aria-hidden="true">#</a> registerCommand</h3>`,26),g={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},b=n("p",null,[a("用法:"),n("strong",null,"registerCommand({ command: string, description: string, fn: Function, options?: Object })")],-1),f=n("p",null,"参数:",-1),y=n("li",null,"command",-1),j=n("li",null,[a("description,描述文字,输入 "),n("code",null,"--help"),a(" 会打印")],-1),x=n("li",null,[a("fn,命令执行的函数,参数有: "),n("ul",null,[n("li",null,"rawArgv,原始参数"),n("li",null,"args,参数"),n("li",null,"options,执行命令时附带的的参数配置"),n("li",null,"program,commander 对象")])],-1),P={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},w=t(`<p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'webpack'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect webpack configurations'</span><span class="token punctuation">,</span> + <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rule <ruleName>'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific module rule'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugin <pluginName>'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific plugin'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rules'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all module rule names'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugins'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all plugin names'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--verbose'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'show full function definitions in output'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> rawArgv<span class="token punctuation">,</span> args<span class="token punctuation">,</span> options<span class="token punctuation">,</span> program <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当项目引入此插件后,使用:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes webpack +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="registerpresets" tabindex="-1"><a class="header-anchor" href="#registerpresets" aria-hidden="true">#</a> registerPresets</h3><p>注册插件集,参数为路径数组。</p><p>用法:<strong>registerPresets(presets: string[])</strong></p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPresets</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="registerplugins" tabindex="-1"><a class="header-anchor" href="#registerplugins" aria-hidden="true">#</a> registerPlugins</h3><p>注册插件,参数为路径数组。</p><p>用法:<strong>registerPlugins(plugins: string[])</strong></p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="hasplugins" tabindex="-1"><a class="header-anchor" href="#hasplugins" aria-hidden="true">#</a> hasPlugins</h3><p>判断是否有注册某个插件,插件的 id 规则:</p><ul><li>id 默认为包名</li><li>内置插件以 <code>@@</code> 为前缀,比如 <code>@@/registerMethod</code></li></ul><p>用法:<strong>hasPlugins(pluginIds: string[])</strong></p><p>例如</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册 @fesjs/plugin-locale</span> +api<span class="token punctuation">.</span><span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/plugin-locale'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用,只能判断在他之前是否有注册某个插件。</p></div><h3 id="haspresets" tabindex="-1"><a class="header-anchor" href="#haspresets" aria-hidden="true">#</a> hasPresets</h3><p>判断是否有注册某个插件集。</p><p>用法:<strong>hasPresets(presetIds: string[])</strong></p><p>例如</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册</span> +api<span class="token punctuation">.</span><span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/preset-xxx'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用,只能判断在他之前是否有注册某个插件集。</p></div><h3 id="skipplugins" tabindex="-1"><a class="header-anchor" href="#skipplugins" aria-hidden="true">#</a> skipPlugins</h3><p>声明哪些插件需要被禁用,参数为插件 id 的数组。</p><p>用法:<strong>hasPresets(presetIds: string[])</strong></p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 禁用 plugin-model 插件</span> +api<span class="token punctuation">.</span><span class="token function">skipPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/plugin-model'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="扩展方法" tabindex="-1"><a class="header-anchor" href="#扩展方法" aria-hidden="true">#</a> 扩展方法</h2><p>通过 api.registerMethod() 扩展的方法。</p><h3 id="addpluginexports" tabindex="-1"><a class="header-anchor" href="#addpluginexports" aria-hidden="true">#</a> addPluginExports</h3><p>把插件需要导出的运行时 API 写入<code>@fesjs/fes</code>。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addPluginExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">specifiers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'access'</span><span class="token punctuation">,</span> <span class="token string">'useAccess'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token literal-property property">source</span><span class="token operator">:</span> absoluteFilePath<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这样用户使用时:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access<span class="token punctuation">,</span> useAccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addcoreexports" tabindex="-1"><a class="header-anchor" href="#addcoreexports" aria-hidden="true">#</a> addCoreExports</h3><p>提供给其他插件运行时需要的 API。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addCoreExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">specifiers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'getRoutes'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token literal-property property">source</span><span class="token operator">:</span> absCoreFilePath<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getHistory<span class="token punctuation">,</span> destroyRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@@/core/coreExports'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addruntimeplugin" tabindex="-1"><a class="header-anchor" href="#addruntimeplugin" aria-hidden="true">#</a> addRuntimePlugin</h3><p>添加运行时插件,返回值格式为表示文件路径的字符串。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePlugin</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./runtime'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addruntimepluginkey" tabindex="-1"><a class="header-anchor" href="#addruntimepluginkey" aria-hidden="true">#</a> addRuntimePluginKey</h3><p>添加插件提供的运行时配置的 key,返回值格式为字符串。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePluginKey</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'some'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>则用户可以:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span> +<span class="token keyword">const</span> <span class="token function-variable function">some</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addentryimportsahead" tabindex="-1"><a class="header-anchor" href="#addentryimportsahead" aria-hidden="true">#</a> addEntryImportsAhead</h3><p>在入口文件现有 import 的前面添加 import。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImportsAhead</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'anypackage'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addentryimports" tabindex="-1"><a class="header-anchor" href="#addentryimports" aria-hidden="true">#</a> addEntryImports</h3><p>在入口文件现有 import 的后面添加 import。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImport</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'/modulePath/xxx.js'</span><span class="token punctuation">,</span> + <span class="token literal-property property">specifier</span><span class="token operator">:</span> <span class="token string">'moduleName'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addentrycodeahead" tabindex="-1"><a class="header-anchor" href="#addentrycodeahead" aria-hidden="true">#</a> addEntryCodeAhead</h3><p>在入口文件最前面(import 之后)添加代码。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCodeAhead</span><span class="token punctuation">(</span> + <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>globalCSSFile + <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">file</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">require('</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span><span class="token function">winPath</span><span class="token punctuation">(</span><span class="token function">relative</span><span class="token punctuation">(</span>absTmpPath<span class="token punctuation">,</span> file<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">');</span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span> + +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addentrycode" tabindex="-1"><a class="header-anchor" href="#addentrycode" aria-hidden="true">#</a> addEntryCode</h3><p>在入口文件最后添加代码。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCode</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">console.log('works!')</span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addhtmlheadscripts" tabindex="-1"><a class="header-anchor" href="#addhtmlheadscripts" aria-hidden="true">#</a> addHTMLHeadScripts</h3><p>在 HTML 头部添加脚本。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addHTMLHeadScripts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token comment">// ...attrs</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addbeforemiddlewares" tabindex="-1"><a class="header-anchor" href="#addbeforemiddlewares" aria-hidden="true">#</a> addBeforeMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之前的中间件,返回值格式为 <code>express</code> 中间件。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addBeforeMiddlewares</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'end'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addmiddlewares" tabindex="-1"><a class="header-anchor" href="#addmiddlewares" aria-hidden="true">#</a> addMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之后的中间件,返回值格式为 <code>express</code> 中间件。</p><h3 id="addtmpgeneratewatcherpaths" tabindex="-1"><a class="header-anchor" href="#addtmpgeneratewatcherpaths" aria-hidden="true">#</a> addTmpGenerateWatcherPaths</h3><p>添加重新生成临时文件的监听路径。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addTmpGenerateWatcherPaths</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string">'./app.js'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h3><p>通过 [webpack-chain] 的方式修改 webpack 配置。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + memo<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'vue-i18n'</span><span class="token punctuation">,</span> <span class="token string">'vue-i18n/dist/vue-i18n.esm-bundler.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="copytmpfiles" tabindex="-1"><a class="header-anchor" href="#copytmpfiles" aria-hidden="true">#</a> copyTmpFiles</h3><p>批量写临时文件。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">copyTmpFiles</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + namespace<span class="token punctuation">,</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">ignore</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'.tpl'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>参数:</p><ul><li>namespace:复制到临时文件夹下的目标目录</li><li>path:需要复制的文件目录</li><li>ignore:需要排除的文件</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用,通常放在 api.onGenerateFiles() 里,这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理,如果内容一致,不会做写的操作,以减少触发 <code>webpack</code> 的重新编译</p></div><h3 id="getport" tabindex="-1"><a class="header-anchor" href="#getport" aria-hidden="true">#</a> getPort</h3><p>获取端口号,dev 时有效。</p><h3 id="gethostname" tabindex="-1"><a class="header-anchor" href="#gethostname" aria-hidden="true">#</a> getHostname</h3><p>获取 hostname,dev 时有效。</p><h3 id="getserver" tabindex="-1"><a class="header-anchor" href="#getserver" aria-hidden="true">#</a> getServer</h3><p>获取 devServer,dev 时有效。</p><h3 id="getroutes" tabindex="-1"><a class="header-anchor" href="#getroutes" aria-hidden="true">#</a> getRoutes</h3><p>获取 <code>api.modifyRoutes</code> 修改过后的路由信息。</p><h3 id="getroutesjson" tabindex="-1"><a class="header-anchor" href="#getroutesjson" aria-hidden="true">#</a> getRoutesJSON</h3><p>获取格式化后的路由信息</p><h3 id="modifyroutes" tabindex="-1"><a class="header-anchor" href="#modifyroutes" aria-hidden="true">#</a> modifyRoutes</h3><p>修改路由。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 把BaseLayout插入到路由配置中,作为根路由</span> +api<span class="token punctuation">.</span><span class="token function">modifyRoutes</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">routes</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> + <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">winPath</span><span class="token punctuation">(</span><span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">,</span> absFilePath<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">children</span><span class="token operator">:</span> routes<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybundleconfigopts" tabindex="-1"><a class="header-anchor" href="#modifybundleconfigopts" aria-hidden="true">#</a> modifyBundleConfigOpts</h3><p>修改获取 bundleConfig 的函数参数。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfigOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + memo<span class="token punctuation">.</span>miniCSSExtractPluginPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + memo<span class="token punctuation">.</span>miniCSSExtractPluginLoaderPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin/dist/loader'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> memo<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybundleconfig" tabindex="-1"><a class="header-anchor" href="#modifybundleconfig" aria-hidden="true">#</a> modifyBundleConfig</h3><p>修改 bundle 配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">bundleConfig</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// do something</span> + <span class="token keyword">return</span> bundleConfig<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybabelopts" tabindex="-1"><a class="header-anchor" href="#modifybabelopts" aria-hidden="true">#</a> modifyBabelOpts</h3><p>修改 babel 配置项。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">babelOpts</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>babelPluginImport<span class="token punctuation">)</span> <span class="token punctuation">{</span> + api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>babelPluginImport<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + babelOpts<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> config<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">return</span> babelOpts<span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybabelpresetopts" tabindex="-1"><a class="header-anchor" href="#modifybabelpresetopts" aria-hidden="true">#</a> modifyBabelPresetOpts</h3><p>修改 babel 插件的配置。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelPresetOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">opts</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>opts<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifypaths" tabindex="-1"><a class="header-anchor" href="#modifypaths" aria-hidden="true">#</a> modifyPaths</h3><p>修改 paths 对象。</p><h3 id="modifydefaultconfig" tabindex="-1"><a class="header-anchor" href="#modifydefaultconfig" aria-hidden="true">#</a> modifyDefaultConfig</h3><p>修改默认配置。 例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyDefaultConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>memo<span class="token punctuation">,</span> + <span class="token operator">...</span>defaultOptions<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifyconfig" tabindex="-1"><a class="header-anchor" href="#modifyconfig" aria-hidden="true">#</a> modifyConfig</h3><p>修改最终配置。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>memo<span class="token punctuation">,</span> + <span class="token operator">...</span>defaultOptions<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifypublicpathstr" tabindex="-1"><a class="header-anchor" href="#modifypublicpathstr" aria-hidden="true">#</a> modifyPublicPathStr</h3><p>修改 publicPath 字符串。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyPublicPathStr</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>publicPath <span class="token operator">||</span> <span class="token string">'/'</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onpluginready" tabindex="-1"><a class="header-anchor" href="#onpluginready" aria-hidden="true">#</a> onPluginReady</h3><p>在插件初始化完成触发。在 onStart 之前,此时还没有 config 和 paths,他们尚未解析好。</p><h3 id="onstart" tabindex="-1"><a class="header-anchor" href="#onstart" aria-hidden="true">#</a> onStart</h3><p>在命令注册函数执行前触发。可以使用 config 和 paths。</p><h3 id="onexit" tabindex="-1"><a class="header-anchor" href="#onexit" aria-hidden="true">#</a> onExit</h3><p>dev 退出时触发。</p><h3 id="ongeneratefiles" tabindex="-1"><a class="header-anchor" href="#ongeneratefiles" aria-hidden="true">#</a> onGenerateFiles</h3><p>生成临时文件,触发时机在 webpack 编译之前。</p><h3 id="restartserver" tabindex="-1"><a class="header-anchor" href="#restartserver" aria-hidden="true">#</a> restartServer</h3><p>重启 devServer,dev 时有效。</p><h3 id="writetmpfile" tabindex="-1"><a class="header-anchor" href="#writetmpfile" aria-hidden="true">#</a> writeTmpFile</h3><p>写临时文件。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> absoluteFilePath<span class="token punctuation">,</span> + <span class="token literal-property property">content</span><span class="token operator">:</span> Mustache<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime/core.tpl'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token constant">REPLACE_ROLES</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>参数:</p><ul><li>path:相对于临时文件夹的路径</li><li>content:文件内容</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用,通常放在 api.onGenerateFiles() 里,这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理,如果内容一致,不会做写的操作,以减少触发 webpack 的重新编译</p></div>`,154);function _(C,S){const s=i("ExternalLinkIcon");return o(),c("div",null,[u,n("ul",null,[r,n("li",null,[d,a(" 用于声明配置的类型,基于 "),n("a",k,[a("joi"),p(s)]),a(",如果你希望用户进行配置,这个是必须的,否则用户的配置无效")]),v,m]),h,n("p",null,[a("注册命令,基于 "),n("a",g,[a("commander"),p(s)]),a(" 实现的机制。")]),b,f,n("ul",null,[y,j,x,n("li",null,[a("options,参数配置,基于 "),n("a",P,[a("commander"),p(s)]),a(" 。")])]),w])}const T=e(l,[["render",_],["__file","api.html.vue"]]);export{T as default}; diff --git a/assets/api.html.87969763.js b/assets/api.html.87969763.js new file mode 100644 index 00000000..9044e7ba --- /dev/null +++ b/assets/api.html.87969763.js @@ -0,0 +1 @@ +import{_ as a,o as t,c,b as e,d as o}from"./app.bd9c95b7.js";const r={},s=e("h1",{id:"api",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#api","aria-hidden":"true"},"#"),o(" API")],-1),n=[s];function _(i,d){return t(),c("div",null,n)}const l=a(r,[["render",_],["__file","api.html.vue"]]);export{l as default}; diff --git a/assets/api.html.ad50f750.js b/assets/api.html.ad50f750.js new file mode 100644 index 00000000..9da997cd --- /dev/null +++ b/assets/api.html.ad50f750.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-c5618810","path":"/reference/plugin/dev/api.html","title":"插件 API","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[{"level":3,"title":"api.paths","slug":"api-paths","link":"#api-paths","children":[]},{"level":3,"title":"api.cwd","slug":"api-cwd","link":"#api-cwd","children":[]},{"level":3,"title":"api.pkg","slug":"api-pkg","link":"#api-pkg","children":[]},{"level":3,"title":"api.configInstance","slug":"api-configinstance","link":"#api-configinstance","children":[]},{"level":3,"title":"userConfig","slug":"userconfig","link":"#userconfig","children":[]},{"level":3,"title":"config","slug":"config","link":"#config","children":[]},{"level":3,"title":"env","slug":"env","link":"#env","children":[]},{"level":3,"title":"args","slug":"args","link":"#args","children":[]}]},{"level":2,"title":"核心方法","slug":"核心方法","link":"#核心方法","children":[{"level":3,"title":"describe","slug":"describe","link":"#describe","children":[]},{"level":3,"title":"register","slug":"register","link":"#register","children":[]},{"level":3,"title":"applyPlugins","slug":"applyplugins","link":"#applyplugins","children":[]},{"level":3,"title":"registerMethod","slug":"registermethod","link":"#registermethod","children":[]},{"level":3,"title":"registerCommand","slug":"registercommand","link":"#registercommand","children":[]},{"level":3,"title":"registerPresets","slug":"registerpresets","link":"#registerpresets","children":[]},{"level":3,"title":"registerPlugins","slug":"registerplugins","link":"#registerplugins","children":[]},{"level":3,"title":"hasPlugins","slug":"hasplugins","link":"#hasplugins","children":[]},{"level":3,"title":"hasPresets","slug":"haspresets","link":"#haspresets","children":[]},{"level":3,"title":"skipPlugins","slug":"skipplugins","link":"#skipplugins","children":[]}]},{"level":2,"title":"扩展方法","slug":"扩展方法","link":"#扩展方法","children":[{"level":3,"title":"addPluginExports","slug":"addpluginexports","link":"#addpluginexports","children":[]},{"level":3,"title":"addCoreExports","slug":"addcoreexports","link":"#addcoreexports","children":[]},{"level":3,"title":"addRuntimePlugin","slug":"addruntimeplugin","link":"#addruntimeplugin","children":[]},{"level":3,"title":"addRuntimePluginKey","slug":"addruntimepluginkey","link":"#addruntimepluginkey","children":[]},{"level":3,"title":"addEntryImportsAhead","slug":"addentryimportsahead","link":"#addentryimportsahead","children":[]},{"level":3,"title":"addEntryImports","slug":"addentryimports","link":"#addentryimports","children":[]},{"level":3,"title":"addEntryCodeAhead","slug":"addentrycodeahead","link":"#addentrycodeahead","children":[]},{"level":3,"title":"addEntryCode","slug":"addentrycode","link":"#addentrycode","children":[]},{"level":3,"title":"addHTMLHeadScripts","slug":"addhtmlheadscripts","link":"#addhtmlheadscripts","children":[]},{"level":3,"title":"addBeforeMiddlewares","slug":"addbeforemiddlewares","link":"#addbeforemiddlewares","children":[]},{"level":3,"title":"addMiddlewares","slug":"addmiddlewares","link":"#addmiddlewares","children":[]},{"level":3,"title":"addTmpGenerateWatcherPaths","slug":"addtmpgeneratewatcherpaths","link":"#addtmpgeneratewatcherpaths","children":[]},{"level":3,"title":"chainWebpack","slug":"chainwebpack","link":"#chainwebpack","children":[]},{"level":3,"title":"copyTmpFiles","slug":"copytmpfiles","link":"#copytmpfiles","children":[]},{"level":3,"title":"getPort","slug":"getport","link":"#getport","children":[]},{"level":3,"title":"getHostname","slug":"gethostname","link":"#gethostname","children":[]},{"level":3,"title":"getServer","slug":"getserver","link":"#getserver","children":[]},{"level":3,"title":"getRoutes","slug":"getroutes","link":"#getroutes","children":[]},{"level":3,"title":"getRoutesJSON","slug":"getroutesjson","link":"#getroutesjson","children":[]},{"level":3,"title":"modifyRoutes","slug":"modifyroutes","link":"#modifyroutes","children":[]},{"level":3,"title":"modifyBundleConfigOpts","slug":"modifybundleconfigopts","link":"#modifybundleconfigopts","children":[]},{"level":3,"title":"modifyBundleConfig","slug":"modifybundleconfig","link":"#modifybundleconfig","children":[]},{"level":3,"title":"modifyBabelOpts","slug":"modifybabelopts","link":"#modifybabelopts","children":[]},{"level":3,"title":"modifyBabelPresetOpts","slug":"modifybabelpresetopts","link":"#modifybabelpresetopts","children":[]},{"level":3,"title":"modifyPaths","slug":"modifypaths","link":"#modifypaths","children":[]},{"level":3,"title":"modifyDefaultConfig","slug":"modifydefaultconfig","link":"#modifydefaultconfig","children":[]},{"level":3,"title":"modifyConfig","slug":"modifyconfig","link":"#modifyconfig","children":[]},{"level":3,"title":"modifyPublicPathStr","slug":"modifypublicpathstr","link":"#modifypublicpathstr","children":[]},{"level":3,"title":"onPluginReady","slug":"onpluginready","link":"#onpluginready","children":[]},{"level":3,"title":"onStart","slug":"onstart","link":"#onstart","children":[]},{"level":3,"title":"onExit","slug":"onexit","link":"#onexit","children":[]},{"level":3,"title":"onGenerateFiles","slug":"ongeneratefiles","link":"#ongeneratefiles","children":[]},{"level":3,"title":"restartServer","slug":"restartserver","link":"#restartserver","children":[]},{"level":3,"title":"writeTmpFile","slug":"writetmpfile","link":"#writetmpfile","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/dev/api.md"}');export{e as data}; diff --git a/assets/api.html.dd7de804.js b/assets/api.html.dd7de804.js new file mode 100644 index 00000000..2bc0622f --- /dev/null +++ b/assets/api.html.dd7de804.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-a1a49808","path":"/reference/api.html","title":"API","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/api.md"}');export{e as data}; diff --git a/assets/app.bd9c95b7.js b/assets/app.bd9c95b7.js new file mode 100644 index 00000000..ae80319c --- /dev/null +++ b/assets/app.bd9c95b7.js @@ -0,0 +1,23 @@ +const sf="modulepreload",af=function(e){return"/"+e},vs={},B=function(t,n,r){return!n||n.length===0?t():Promise.all(n.map(o=>{if(o=af(o),o in vs)return;vs[o]=!0;const i=o.endsWith(".css"),s=i?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${o}"]${s}`))return;const a=document.createElement("link");if(a.rel=i?"stylesheet":sf,i||(a.as="script",a.crossOrigin=""),a.href=o,document.head.appendChild(a),i)return new Promise((l,u)=>{a.addEventListener("load",l),a.addEventListener("error",()=>u(new Error(`Unable to preload CSS for ${o}`)))})})).then(()=>t())},lf={"v-8daa1a0e":()=>B(()=>import("./index.html.c52ea2ee.js"),[]).then(({data:e})=>e),"v-fffb8e28":()=>B(()=>import("./index.html.4ecf73ea.js"),[]).then(({data:e})=>e),"v-0cca110a":()=>B(()=>import("./builder.html.246dbbe3.js"),[]).then(({data:e})=>e),"v-85fa9b2a":()=>B(()=>import("./config.html.637a9806.js"),[]).then(({data:e})=>e),"v-d7fa887a":()=>B(()=>import("./contributing.html.8f3528e9.js"),[]).then(({data:e})=>e),"v-884fd4bc":()=>B(()=>import("./css.html.f4729d94.js"),[]).then(({data:e})=>e),"v-040800dc":()=>B(()=>import("./directory-structure.html.c7ccc960.js"),[]).then(({data:e})=>e),"v-ef8c5e10":()=>B(()=>import("./env.html.2fbe8f51.js"),[]).then(({data:e})=>e),"v-37e1c06f":()=>B(()=>import("./faq.html.7f01d8a8.js"),[]).then(({data:e})=>e),"v-fb0f0066":()=>B(()=>import("./getting-started.html.f4fdc148.js"),[]).then(({data:e})=>e),"v-528b8b6c":()=>B(()=>import("./image.html.f92a08c2.js"),[]).then(({data:e})=>e),"v-00cf7e23":()=>B(()=>import("./mock.html.561d68eb.js"),[]).then(({data:e})=>e),"v-1d14d5cc":()=>B(()=>import("./plugin.html.a5e6ae94.js"),[]).then(({data:e})=>e),"v-7b96e3a4":()=>B(()=>import("./public.html.950ba2eb.js"),[]).then(({data:e})=>e),"v-6320961c":()=>B(()=>import("./route.html.8edafb3a.js"),[]).then(({data:e})=>e),"v-3dba8814":()=>B(()=>import("./runtime-config.html.b70d36d5.js"),[]).then(({data:e})=>e),"v-7b48519a":()=>B(()=>import("./template.html.900fbffc.js"),[]).then(({data:e})=>e),"v-4acab794":()=>B(()=>import("./upgrade3.html.9bc44b95.js"),[]).then(({data:e})=>e),"v-a1a49808":()=>B(()=>import("./api.html.dd7de804.js"),[]).then(({data:e})=>e),"v-a951be94":()=>B(()=>import("./cli.html.eb7c8bac.js"),[]).then(({data:e})=>e),"v-76cd065c":()=>B(()=>import("./index.html.833852a3.js"),[]).then(({data:e})=>e),"v-76cb52e8":()=>B(()=>import("./index.html.4f4b557d.js"),[]).then(({data:e})=>e),"v-2c05b6e0":()=>B(()=>import("./index.html.1e4e9bb2.js"),[]).then(({data:e})=>e),"v-d61a9282":()=>B(()=>import("./index.html.4b24c667.js"),[]).then(({data:e})=>e),"v-494b840e":()=>B(()=>import("./index.html.b99c3eab.js"),[]).then(({data:e})=>e),"v-c5618810":()=>B(()=>import("./api.html.ad50f750.js"),[]).then(({data:e})=>e),"v-2fe128e7":()=>B(()=>import("./access.html.ccef700f.js"),[]).then(({data:e})=>e),"v-323bda7e":()=>B(()=>import("./editor.html.45b1bf75.js"),[]).then(({data:e})=>e),"v-c253c956":()=>B(()=>import("./enums.html.9eba9e94.js"),[]).then(({data:e})=>e),"v-0a0e491c":()=>B(()=>import("./icon.html.1ef9becf.js"),[]).then(({data:e})=>e),"v-3cd5a4ef":()=>B(()=>import("./jest.html.b6be70f6.js"),[]).then(({data:e})=>e),"v-355ee23e":()=>B(()=>import("./layout.html.737f0d05.js"),[]).then(({data:e})=>e),"v-411c0c9e":()=>B(()=>import("./locale.html.a0788058.js"),[]).then(({data:e})=>e),"v-56ab05de":()=>B(()=>import("./login.html.3b52bc00.js"),[]).then(({data:e})=>e),"v-3c4e521e":()=>B(()=>import("./model.html.a33983f1.js"),[]).then(({data:e})=>e),"v-6f2f6a5a":()=>B(()=>import("./pinia.html.ca207361.js"),[]).then(({data:e})=>e),"v-b15becb0":()=>B(()=>import("./qiankun.html.fd060b60.js"),[]).then(({data:e})=>e),"v-41dee210":()=>B(()=>import("./request.html.d16e6c85.js"),[]).then(({data:e})=>e),"v-5bf80046":()=>B(()=>import("./sass.html.be3aee7e.js"),[]).then(({data:e})=>e),"v-317f9008":()=>B(()=>import("./swc.html.86a67f1f.js"),[]).then(({data:e})=>e),"v-5f4c684e":()=>B(()=>import("./vuex.html.3e9bd488.js"),[]).then(({data:e})=>e),"v-1c0edac3":()=>B(()=>import("./watermark.html.6ba7e245.js"),[]).then(({data:e})=>e),"v-392e58ee":()=>B(()=>import("./windicss.html.17a13504.js"),[]).then(({data:e})=>e),"v-3706649a":()=>B(()=>import("./404.html.c3e557d0.js"),[]).then(({data:e})=>e)};function Ri(e,t){const n=Object.create(null),r=e.split(",");for(let o=0;o<r.length;o++)n[r[o]]=!0;return t?o=>!!n[o.toLowerCase()]:o=>!!n[o]}function _r(e){if(oe(e)){const t={};for(let n=0;n<e.length;n++){const r=e[n],o=Oe(r)?df(r):_r(r);if(o)for(const i in o)t[i]=o[i]}return t}else{if(Oe(e))return e;if(Te(e))return e}}const cf=/;(?![^(]*\))/g,uf=/:([^]+)/,ff=/\/\*.*?\*\//gs;function df(e){const t={};return e.replace(ff,"").split(cf).forEach(n=>{if(n){const r=n.split(uf);r.length>1&&(t[r[0].trim()]=r[1].trim())}}),t}function et(e){let t="";if(Oe(e))t=e;else if(oe(e))for(let n=0;n<e.length;n++){const r=et(e[n]);r&&(t+=r+" ")}else if(Te(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const pf="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",mf=Ri(pf);function Hl(e){return!!e||e===""}const Be=e=>Oe(e)?e:e==null?"":oe(e)||Te(e)&&(e.toString===ql||!fe(e.toString))?JSON.stringify(e,Fl,2):String(e),Fl=(e,t)=>t&&t.__v_isRef?Fl(e,t.value):Sn(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[r,o])=>(n[`${r} =>`]=o,n),{})}:Bl(t)?{[`Set(${t.size})`]:[...t.values()]}:Te(t)&&!oe(t)&&!Ul(t)?String(t):t,xe={},wn=[],mt=()=>{},hf=()=>!1,vf=/^on[^a-z]/,yr=e=>vf.test(e),ji=e=>e.startsWith("onUpdate:"),ze=Object.assign,Di=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},gf=Object.prototype.hasOwnProperty,_e=(e,t)=>gf.call(e,t),oe=Array.isArray,Sn=e=>_o(e)==="[object Map]",Bl=e=>_o(e)==="[object Set]",fe=e=>typeof e=="function",Oe=e=>typeof e=="string",Ni=e=>typeof e=="symbol",Te=e=>e!==null&&typeof e=="object",Vl=e=>Te(e)&&fe(e.then)&&fe(e.catch),ql=Object.prototype.toString,_o=e=>ql.call(e),_f=e=>_o(e).slice(8,-1),Ul=e=>_o(e)==="[object Object]",Mi=e=>Oe(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Gn=Ri(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),yo=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},yf=/-(\w)/g,Et=yo(e=>e.replace(yf,(t,n)=>n?n.toUpperCase():"")),bf=/\B([A-Z])/g,dn=yo(e=>e.replace(bf,"-$1").toLowerCase()),bo=yo(e=>e.charAt(0).toUpperCase()+e.slice(1)),Do=yo(e=>e?`on${bo(e)}`:""),ar=(e,t)=>!Object.is(e,t),No=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},Zr=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},Ef=e=>{const t=parseFloat(e);return isNaN(t)?e:t},Of=e=>{const t=Oe(e)?Number(e):NaN;return isNaN(t)?e:t};let gs;const wf=()=>gs||(gs=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});let rt;class Sf{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this.parent=rt,!t&&rt&&(this.index=(rt.scopes||(rt.scopes=[])).push(this)-1)}get active(){return this._active}run(t){if(this._active){const n=rt;try{return rt=this,t()}finally{rt=n}}}on(){rt=this}off(){rt=this.parent}stop(t){if(this._active){let n,r;for(n=0,r=this.effects.length;n<r;n++)this.effects[n].stop();for(n=0,r=this.cleanups.length;n<r;n++)this.cleanups[n]();if(this.scopes)for(n=0,r=this.scopes.length;n<r;n++)this.scopes[n].stop(!0);if(!this.detached&&this.parent&&!t){const o=this.parent.scopes.pop();o&&o!==this&&(this.parent.scopes[this.index]=o,o.index=this.index)}this.parent=void 0,this._active=!1}}}function Pf(e,t=rt){t&&t.active&&t.effects.push(e)}function zl(){return rt}function Cf(e){rt&&rt.cleanups.push(e)}const $i=e=>{const t=new Set(e);return t.w=0,t.n=0,t},Kl=e=>(e.w&qt)>0,Wl=e=>(e.n&qt)>0,If=({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=qt},kf=e=>{const{deps:t}=e;if(t.length){let n=0;for(let r=0;r<t.length;r++){const o=t[r];Kl(o)&&!Wl(o)?o.delete(e):t[n++]=o,o.w&=~qt,o.n&=~qt}t.length=n}},Yr=new WeakMap;let Qn=0,qt=1;const ri=30;let dt;const un=Symbol(""),oi=Symbol("");class Hi{constructor(t,n=null,r){this.fn=t,this.scheduler=n,this.active=!0,this.deps=[],this.parent=void 0,Pf(this,r)}run(){if(!this.active)return this.fn();let t=dt,n=Ht;for(;t;){if(t===this)return;t=t.parent}try{return this.parent=dt,dt=this,Ht=!0,qt=1<<++Qn,Qn<=ri?If(this):_s(this),this.fn()}finally{Qn<=ri&&kf(this),qt=1<<--Qn,dt=this.parent,Ht=n,this.parent=void 0,this.deferStop&&this.stop()}}stop(){dt===this?this.deferStop=!0:this.active&&(_s(this),this.onStop&&this.onStop(),this.active=!1)}}function _s(e){const{deps:t}=e;if(t.length){for(let n=0;n<t.length;n++)t[n].delete(e);t.length=0}}let Ht=!0;const Jl=[];function Dn(){Jl.push(Ht),Ht=!1}function Nn(){const e=Jl.pop();Ht=e===void 0?!0:e}function tt(e,t,n){if(Ht&&dt){let r=Yr.get(e);r||Yr.set(e,r=new Map);let o=r.get(n);o||r.set(n,o=$i()),Ql(o)}}function Ql(e,t){let n=!1;Qn<=ri?Wl(e)||(e.n|=qt,n=!Kl(e)):n=!e.has(dt),n&&(e.add(dt),dt.deps.push(e))}function xt(e,t,n,r,o,i){const s=Yr.get(e);if(!s)return;let a=[];if(t==="clear")a=[...s.values()];else if(n==="length"&&oe(e)){const l=Number(r);s.forEach((u,c)=>{(c==="length"||c>=l)&&a.push(u)})}else switch(n!==void 0&&a.push(s.get(n)),t){case"add":oe(e)?Mi(n)&&a.push(s.get("length")):(a.push(s.get(un)),Sn(e)&&a.push(s.get(oi)));break;case"delete":oe(e)||(a.push(s.get(un)),Sn(e)&&a.push(s.get(oi)));break;case"set":Sn(e)&&a.push(s.get(un));break}if(a.length===1)a[0]&&ii(a[0]);else{const l=[];for(const u of a)u&&l.push(...u);ii($i(l))}}function ii(e,t){const n=oe(e)?e:[...e];for(const r of n)r.computed&&ys(r);for(const r of n)r.computed||ys(r)}function ys(e,t){(e!==dt||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}function Af(e,t){var n;return(n=Yr.get(e))===null||n===void 0?void 0:n.get(t)}const xf=Ri("__proto__,__v_isRef,__isVue"),Zl=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Ni)),Tf=Fi(),Lf=Fi(!1,!0),Rf=Fi(!0),bs=jf();function jf(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const r=be(this);for(let i=0,s=this.length;i<s;i++)tt(r,"get",i+"");const o=r[t](...n);return o===-1||o===!1?r[t](...n.map(be)):o}}),["push","pop","shift","unshift","splice"].forEach(t=>{e[t]=function(...n){Dn();const r=be(this)[t].apply(this,n);return Nn(),r}}),e}function Df(e){const t=be(this);return tt(t,"has",e),t.hasOwnProperty(e)}function Fi(e=!1,t=!1){return function(r,o,i){if(o==="__v_isReactive")return!e;if(o==="__v_isReadonly")return e;if(o==="__v_isShallow")return t;if(o==="__v_raw"&&i===(e?t?Yf:tc:t?ec:Xl).get(r))return r;const s=oe(r);if(!e){if(s&&_e(bs,o))return Reflect.get(bs,o,i);if(o==="hasOwnProperty")return Df}const a=Reflect.get(r,o,i);return(Ni(o)?Zl.has(o):xf(o))||(e||tt(r,"get",o),t)?a:Ve(a)?s&&Mi(o)?a:a.value:Te(a)?e?Oo(a):Mn(a):a}}const Nf=Yl(),Mf=Yl(!0);function Yl(e=!1){return function(n,r,o,i){let s=n[r];if(An(s)&&Ve(s)&&!Ve(o))return!1;if(!e&&(!Gr(o)&&!An(o)&&(s=be(s),o=be(o)),!oe(n)&&Ve(s)&&!Ve(o)))return s.value=o,!0;const a=oe(n)&&Mi(r)?Number(r)<n.length:_e(n,r),l=Reflect.set(n,r,o,i);return n===be(i)&&(a?ar(o,s)&&xt(n,"set",r,o):xt(n,"add",r,o)),l}}function $f(e,t){const n=_e(e,t);e[t];const r=Reflect.deleteProperty(e,t);return r&&n&&xt(e,"delete",t,void 0),r}function Hf(e,t){const n=Reflect.has(e,t);return(!Ni(t)||!Zl.has(t))&&tt(e,"has",t),n}function Ff(e){return tt(e,"iterate",oe(e)?"length":un),Reflect.ownKeys(e)}const Gl={get:Tf,set:Nf,deleteProperty:$f,has:Hf,ownKeys:Ff},Bf={get:Rf,set(e,t){return!0},deleteProperty(e,t){return!0}},Vf=ze({},Gl,{get:Lf,set:Mf}),Bi=e=>e,Eo=e=>Reflect.getPrototypeOf(e);function Pr(e,t,n=!1,r=!1){e=e.__v_raw;const o=be(e),i=be(t);n||(t!==i&&tt(o,"get",t),tt(o,"get",i));const{has:s}=Eo(o),a=r?Bi:n?Ui:lr;if(s.call(o,t))return a(e.get(t));if(s.call(o,i))return a(e.get(i));e!==o&&e.get(t)}function Cr(e,t=!1){const n=this.__v_raw,r=be(n),o=be(e);return t||(e!==o&&tt(r,"has",e),tt(r,"has",o)),e===o?n.has(e):n.has(e)||n.has(o)}function Ir(e,t=!1){return e=e.__v_raw,!t&&tt(be(e),"iterate",un),Reflect.get(e,"size",e)}function Es(e){e=be(e);const t=be(this);return Eo(t).has.call(t,e)||(t.add(e),xt(t,"add",e,e)),this}function Os(e,t){t=be(t);const n=be(this),{has:r,get:o}=Eo(n);let i=r.call(n,e);i||(e=be(e),i=r.call(n,e));const s=o.call(n,e);return n.set(e,t),i?ar(t,s)&&xt(n,"set",e,t):xt(n,"add",e,t),this}function ws(e){const t=be(this),{has:n,get:r}=Eo(t);let o=n.call(t,e);o||(e=be(e),o=n.call(t,e)),r&&r.call(t,e);const i=t.delete(e);return o&&xt(t,"delete",e,void 0),i}function Ss(){const e=be(this),t=e.size!==0,n=e.clear();return t&&xt(e,"clear",void 0,void 0),n}function kr(e,t){return function(r,o){const i=this,s=i.__v_raw,a=be(s),l=t?Bi:e?Ui:lr;return!e&&tt(a,"iterate",un),s.forEach((u,c)=>r.call(o,l(u),l(c),i))}}function Ar(e,t,n){return function(...r){const o=this.__v_raw,i=be(o),s=Sn(i),a=e==="entries"||e===Symbol.iterator&&s,l=e==="keys"&&s,u=o[e](...r),c=n?Bi:t?Ui:lr;return!t&&tt(i,"iterate",l?oi:un),{next(){const{value:f,done:d}=u.next();return d?{value:f,done:d}:{value:a?[c(f[0]),c(f[1])]:c(f),done:d}},[Symbol.iterator](){return this}}}}function Rt(e){return function(...t){return e==="delete"?!1:this}}function qf(){const e={get(i){return Pr(this,i)},get size(){return Ir(this)},has:Cr,add:Es,set:Os,delete:ws,clear:Ss,forEach:kr(!1,!1)},t={get(i){return Pr(this,i,!1,!0)},get size(){return Ir(this)},has:Cr,add:Es,set:Os,delete:ws,clear:Ss,forEach:kr(!1,!0)},n={get(i){return Pr(this,i,!0)},get size(){return Ir(this,!0)},has(i){return Cr.call(this,i,!0)},add:Rt("add"),set:Rt("set"),delete:Rt("delete"),clear:Rt("clear"),forEach:kr(!0,!1)},r={get(i){return Pr(this,i,!0,!0)},get size(){return Ir(this,!0)},has(i){return Cr.call(this,i,!0)},add:Rt("add"),set:Rt("set"),delete:Rt("delete"),clear:Rt("clear"),forEach:kr(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(i=>{e[i]=Ar(i,!1,!1),n[i]=Ar(i,!0,!1),t[i]=Ar(i,!1,!0),r[i]=Ar(i,!0,!0)}),[e,n,t,r]}const[Uf,zf,Kf,Wf]=qf();function Vi(e,t){const n=t?e?Wf:Kf:e?zf:Uf;return(r,o,i)=>o==="__v_isReactive"?!e:o==="__v_isReadonly"?e:o==="__v_raw"?r:Reflect.get(_e(n,o)&&o in r?n:r,o,i)}const Jf={get:Vi(!1,!1)},Qf={get:Vi(!1,!0)},Zf={get:Vi(!0,!1)},Xl=new WeakMap,ec=new WeakMap,tc=new WeakMap,Yf=new WeakMap;function Gf(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function Xf(e){return e.__v_skip||!Object.isExtensible(e)?0:Gf(_f(e))}function Mn(e){return An(e)?e:qi(e,!1,Gl,Jf,Xl)}function ed(e){return qi(e,!1,Vf,Qf,ec)}function Oo(e){return qi(e,!0,Bf,Zf,tc)}function qi(e,t,n,r,o){if(!Te(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const i=o.get(e);if(i)return i;const s=Xf(e);if(s===0)return e;const a=new Proxy(e,s===2?r:n);return o.set(e,a),a}function Pn(e){return An(e)?Pn(e.__v_raw):!!(e&&e.__v_isReactive)}function An(e){return!!(e&&e.__v_isReadonly)}function Gr(e){return!!(e&&e.__v_isShallow)}function nc(e){return Pn(e)||An(e)}function be(e){const t=e&&e.__v_raw;return t?be(t):e}function rc(e){return Zr(e,"__v_skip",!0),e}const lr=e=>Te(e)?Mn(e):e,Ui=e=>Te(e)?Oo(e):e;function oc(e){Ht&&dt&&(e=be(e),Ql(e.dep||(e.dep=$i())))}function ic(e,t){e=be(e);const n=e.dep;n&&ii(n)}function Ve(e){return!!(e&&e.__v_isRef===!0)}function Ce(e){return ac(e,!1)}function sc(e){return ac(e,!0)}function ac(e,t){return Ve(e)?e:new td(e,t)}class td{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:be(t),this._value=n?t:lr(t)}get value(){return oc(this),this._value}set value(t){const n=this.__v_isShallow||Gr(t)||An(t);t=n?t:be(t),ar(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:lr(t),ic(this))}}function V(e){return Ve(e)?e.value:e}const nd={get:(e,t,n)=>V(Reflect.get(e,t,n)),set:(e,t,n,r)=>{const o=e[t];return Ve(o)&&!Ve(n)?(o.value=n,!0):Reflect.set(e,t,n,r)}};function lc(e){return Pn(e)?e:new Proxy(e,nd)}function zi(e){const t=oe(e)?new Array(e.length):{};for(const n in e)t[n]=od(e,n);return t}class rd{constructor(t,n,r){this._object=t,this._key=n,this._defaultValue=r,this.__v_isRef=!0}get value(){const t=this._object[this._key];return t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return Af(be(this._object),this._key)}}function od(e,t,n){const r=e[t];return Ve(r)?r:new rd(e,t,n)}var cc;class id{constructor(t,n,r,o){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this[cc]=!1,this._dirty=!0,this.effect=new Hi(t,()=>{this._dirty||(this._dirty=!0,ic(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!o,this.__v_isReadonly=r}get value(){const t=be(this);return oc(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}cc="__v_isReadonly";function sd(e,t,n=!1){let r,o;const i=fe(e);return i?(r=e,o=mt):(r=e.get,o=e.set),new id(r,o,i||!o,n)}function Ft(e,t,n,r){let o;try{o=r?e(...r):e()}catch(i){br(i,t,n)}return o}function at(e,t,n,r){if(fe(e)){const i=Ft(e,t,n,r);return i&&Vl(i)&&i.catch(s=>{br(s,t,n)}),i}const o=[];for(let i=0;i<e.length;i++)o.push(at(e[i],t,n,r));return o}function br(e,t,n,r=!0){const o=t?t.vnode:null;if(t){let i=t.parent;const s=t.proxy,a=n;for(;i;){const u=i.ec;if(u){for(let c=0;c<u.length;c++)if(u[c](e,s,a)===!1)return}i=i.parent}const l=t.appContext.config.errorHandler;if(l){Ft(l,null,10,[e,s,a]);return}}ad(e,n,o,r)}function ad(e,t,n,r=!0){console.error(e)}let cr=!1,si=!1;const We=[];let _t=0;const Cn=[];let Pt=null,rn=0;const uc=Promise.resolve();let Ki=null;function Er(e){const t=Ki||uc;return e?t.then(this?e.bind(this):e):t}function ld(e){let t=_t+1,n=We.length;for(;t<n;){const r=t+n>>>1;ur(We[r])<e?t=r+1:n=r}return t}function wo(e){(!We.length||!We.includes(e,cr&&e.allowRecurse?_t+1:_t))&&(e.id==null?We.push(e):We.splice(ld(e.id),0,e),fc())}function fc(){!cr&&!si&&(si=!0,Ki=uc.then(dc))}function cd(e){const t=We.indexOf(e);t>_t&&We.splice(t,1)}function ud(e){oe(e)?Cn.push(...e):(!Pt||!Pt.includes(e,e.allowRecurse?rn+1:rn))&&Cn.push(e),fc()}function Ps(e,t=cr?_t+1:0){for(;t<We.length;t++){const n=We[t];n&&n.pre&&(We.splice(t,1),t--,n())}}function Xr(e){if(Cn.length){const t=[...new Set(Cn)];if(Cn.length=0,Pt){Pt.push(...t);return}for(Pt=t,Pt.sort((n,r)=>ur(n)-ur(r)),rn=0;rn<Pt.length;rn++)Pt[rn]();Pt=null,rn=0}}const ur=e=>e.id==null?1/0:e.id,fd=(e,t)=>{const n=ur(e)-ur(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function dc(e){si=!1,cr=!0,We.sort(fd);const t=mt;try{for(_t=0;_t<We.length;_t++){const n=We[_t];n&&n.active!==!1&&Ft(n,null,14)}}finally{_t=0,We.length=0,Xr(),cr=!1,Ki=null,(We.length||Cn.length)&&dc()}}function dd(e,t,...n){if(e.isUnmounted)return;const r=e.vnode.props||xe;let o=n;const i=t.startsWith("update:"),s=i&&t.slice(7);if(s&&s in r){const c=`${s==="modelValue"?"model":s}Modifiers`,{number:f,trim:d}=r[c]||xe;d&&(o=n.map(p=>Oe(p)?p.trim():p)),f&&(o=n.map(Ef))}let a,l=r[a=Do(t)]||r[a=Do(Et(t))];!l&&i&&(l=r[a=Do(dn(t))]),l&&at(l,e,6,o);const u=r[a+"Once"];if(u){if(!e.emitted)e.emitted={};else if(e.emitted[a])return;e.emitted[a]=!0,at(u,e,6,o)}}function pc(e,t,n=!1){const r=t.emitsCache,o=r.get(e);if(o!==void 0)return o;const i=e.emits;let s={},a=!1;if(!fe(e)){const l=u=>{const c=pc(u,t,!0);c&&(a=!0,ze(s,c))};!n&&t.mixins.length&&t.mixins.forEach(l),e.extends&&l(e.extends),e.mixins&&e.mixins.forEach(l)}return!i&&!a?(Te(e)&&r.set(e,null),null):(oe(i)?i.forEach(l=>s[l]=null):ze(s,i),Te(e)&&r.set(e,s),s)}function So(e,t){return!e||!yr(t)?!1:(t=t.slice(2).replace(/Once$/,""),_e(e,t[0].toLowerCase()+t.slice(1))||_e(e,dn(t))||_e(e,t))}let Ue=null,mc=null;function eo(e){const t=Ue;return Ue=e,mc=e&&e.type.__scopeId||null,t}function qe(e,t=Ue,n){if(!t||e._n)return e;const r=(...o)=>{r._d&&Ds(-1);const i=eo(t);let s;try{s=e(...o)}finally{eo(i),r._d&&Ds(1)}return s};return r._n=!0,r._c=!0,r._d=!0,r}function Mo(e){const{type:t,vnode:n,proxy:r,withProxy:o,props:i,propsOptions:[s],slots:a,attrs:l,emit:u,render:c,renderCache:f,data:d,setupState:p,ctx:_,inheritAttrs:g}=e;let O,h;const E=eo(e);try{if(n.shapeFlag&4){const S=o||r;O=ft(c.call(S,S,f,i,p,d,_)),h=l}else{const S=t;O=ft(S.length>1?S(i,{attrs:l,slots:a,emit:u}):S(i,null)),h=t.props?l:pd(l)}}catch(S){tr.length=0,br(S,e,1),O=ae(ot)}let w=O;if(h&&g!==!1){const S=Object.keys(h),{shapeFlag:I}=w;S.length&&I&7&&(s&&S.some(ji)&&(h=md(h,s)),w=zt(w,h))}return n.dirs&&(w=zt(w),w.dirs=w.dirs?w.dirs.concat(n.dirs):n.dirs),n.transition&&(w.transition=n.transition),O=w,eo(E),O}const pd=e=>{let t;for(const n in e)(n==="class"||n==="style"||yr(n))&&((t||(t={}))[n]=e[n]);return t},md=(e,t)=>{const n={};for(const r in e)(!ji(r)||!(r.slice(9)in t))&&(n[r]=e[r]);return n};function hd(e,t,n){const{props:r,children:o,component:i}=e,{props:s,children:a,patchFlag:l}=t,u=i.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&l>=0){if(l&1024)return!0;if(l&16)return r?Cs(r,s,u):!!s;if(l&8){const c=t.dynamicProps;for(let f=0;f<c.length;f++){const d=c[f];if(s[d]!==r[d]&&!So(u,d))return!0}}}else return(o||a)&&(!a||!a.$stable)?!0:r===s?!1:r?s?Cs(r,s,u):!0:!!s;return!1}function Cs(e,t,n){const r=Object.keys(t);if(r.length!==Object.keys(e).length)return!0;for(let o=0;o<r.length;o++){const i=r[o];if(t[i]!==e[i]&&!So(n,i))return!0}return!1}function vd({vnode:e,parent:t},n){for(;t&&t.subTree===e;)(e=t.vnode).el=n,t=t.parent}const gd=e=>e.__isSuspense;function hc(e,t){t&&t.pendingBranch?oe(e)?t.effects.push(...e):t.effects.push(e):ud(e)}function Bt(e,t){if(je){let n=je.provides;const r=je.parent&&je.parent.provides;r===n&&(n=je.provides=Object.create(r)),n[e]=t}}function Fe(e,t,n=!1){const r=je||Ue;if(r){const o=r.parent==null?r.vnode.appContext&&r.vnode.appContext.provides:r.parent.provides;if(o&&e in o)return o[e];if(arguments.length>1)return n&&fe(t)?t.call(r.proxy):t}}function _d(e,t){return Wi(e,null,t)}const xr={};function lt(e,t,n){return Wi(e,t,n)}function Wi(e,t,{immediate:n,deep:r,flush:o,onTrack:i,onTrigger:s}=xe){const a=zl()===(je==null?void 0:je.scope)?je:null;let l,u=!1,c=!1;if(Ve(e)?(l=()=>e.value,u=Gr(e)):Pn(e)?(l=()=>e,r=!0):oe(e)?(c=!0,u=e.some(w=>Pn(w)||Gr(w)),l=()=>e.map(w=>{if(Ve(w))return w.value;if(Pn(w))return ln(w);if(fe(w))return Ft(w,a,2)})):fe(e)?t?l=()=>Ft(e,a,2):l=()=>{if(!(a&&a.isUnmounted))return f&&f(),at(e,a,3,[d])}:l=mt,t&&r){const w=l;l=()=>ln(w())}let f,d=w=>{f=h.onStop=()=>{Ft(w,a,4)}},p;if(Ln)if(d=mt,t?n&&at(t,a,3,[l(),c?[]:void 0,d]):l(),o==="sync"){const w=dp();p=w.__watcherHandles||(w.__watcherHandles=[])}else return mt;let _=c?new Array(e.length).fill(xr):xr;const g=()=>{if(!!h.active)if(t){const w=h.run();(r||u||(c?w.some((S,I)=>ar(S,_[I])):ar(w,_)))&&(f&&f(),at(t,a,3,[w,_===xr?void 0:c&&_[0]===xr?[]:_,d]),_=w)}else h.run()};g.allowRecurse=!!t;let O;o==="sync"?O=g:o==="post"?O=()=>Xe(g,a&&a.suspense):(g.pre=!0,a&&(g.id=a.uid),O=()=>wo(g));const h=new Hi(l,O);t?n?g():_=h.run():o==="post"?Xe(h.run.bind(h),a&&a.suspense):h.run();const E=()=>{h.stop(),a&&a.scope&&Di(a.scope.effects,h)};return p&&p.push(E),E}function yd(e,t,n){const r=this.proxy,o=Oe(e)?e.includes(".")?vc(r,e):()=>r[e]:e.bind(r,r);let i;fe(t)?i=t:(i=t.handler,n=t);const s=je;Tn(this);const a=Wi(o,i.bind(r),n);return s?Tn(s):fn(),a}function vc(e,t){const n=t.split(".");return()=>{let r=e;for(let o=0;o<n.length&&r;o++)r=r[n[o]];return r}}function ln(e,t){if(!Te(e)||e.__v_skip||(t=t||new Set,t.has(e)))return e;if(t.add(e),Ve(e))ln(e.value,t);else if(oe(e))for(let n=0;n<e.length;n++)ln(e[n],t);else if(Bl(e)||Sn(e))e.forEach(n=>{ln(n,t)});else if(Ul(e))for(const n in e)ln(e[n],t);return e}function bd(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return Ye(()=>{e.isMounted=!0}),Co(()=>{e.isUnmounting=!0}),e}const it=[Function,Array],Ed={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:it,onEnter:it,onAfterEnter:it,onEnterCancelled:it,onBeforeLeave:it,onLeave:it,onAfterLeave:it,onLeaveCancelled:it,onBeforeAppear:it,onAppear:it,onAfterAppear:it,onAppearCancelled:it},setup(e,{slots:t}){const n=Rc(),r=bd();let o;return()=>{const i=t.default&&yc(t.default(),!0);if(!i||!i.length)return;let s=i[0];if(i.length>1){for(const g of i)if(g.type!==ot){s=g;break}}const a=be(e),{mode:l}=a;if(r.isLeaving)return $o(s);const u=Is(s);if(!u)return $o(s);const c=ai(u,a,r,n);li(u,c);const f=n.subTree,d=f&&Is(f);let p=!1;const{getTransitionKey:_}=u.type;if(_){const g=_();o===void 0?o=g:g!==o&&(o=g,p=!0)}if(d&&d.type!==ot&&(!on(u,d)||p)){const g=ai(d,a,r,n);if(li(d,g),l==="out-in")return r.isLeaving=!0,g.afterLeave=()=>{r.isLeaving=!1,n.update.active!==!1&&n.update()},$o(s);l==="in-out"&&u.type!==ot&&(g.delayLeave=(O,h,E)=>{const w=_c(r,d);w[String(d.key)]=d,O._leaveCb=()=>{h(),O._leaveCb=void 0,delete c.delayedLeave},c.delayedLeave=E})}return s}}},gc=Ed;function _c(e,t){const{leavingVNodes:n}=e;let r=n.get(t.type);return r||(r=Object.create(null),n.set(t.type,r)),r}function ai(e,t,n,r){const{appear:o,mode:i,persisted:s=!1,onBeforeEnter:a,onEnter:l,onAfterEnter:u,onEnterCancelled:c,onBeforeLeave:f,onLeave:d,onAfterLeave:p,onLeaveCancelled:_,onBeforeAppear:g,onAppear:O,onAfterAppear:h,onAppearCancelled:E}=t,w=String(e.key),S=_c(n,e),I=(b,M)=>{b&&at(b,r,9,M)},z=(b,M)=>{const N=M[1];I(b,M),oe(b)?b.every(K=>K.length<=1)&&N():b.length<=1&&N()},H={mode:i,persisted:s,beforeEnter(b){let M=a;if(!n.isMounted)if(o)M=g||a;else return;b._leaveCb&&b._leaveCb(!0);const N=S[w];N&&on(e,N)&&N.el._leaveCb&&N.el._leaveCb(),I(M,[b])},enter(b){let M=l,N=u,K=c;if(!n.isMounted)if(o)M=O||l,N=h||u,K=E||c;else return;let k=!1;const R=b._enterCb=$=>{k||(k=!0,$?I(K,[b]):I(N,[b]),H.delayedLeave&&H.delayedLeave(),b._enterCb=void 0)};M?z(M,[b,R]):R()},leave(b,M){const N=String(e.key);if(b._enterCb&&b._enterCb(!0),n.isUnmounting)return M();I(f,[b]);let K=!1;const k=b._leaveCb=R=>{K||(K=!0,M(),R?I(_,[b]):I(p,[b]),b._leaveCb=void 0,S[N]===e&&delete S[N])};S[N]=e,d?z(d,[b,k]):k()},clone(b){return ai(b,t,n,r)}};return H}function $o(e){if(Or(e))return e=zt(e),e.children=null,e}function Is(e){return Or(e)?e.children?e.children[0]:void 0:e}function li(e,t){e.shapeFlag&6&&e.component?li(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function yc(e,t=!1,n){let r=[],o=0;for(let i=0;i<e.length;i++){let s=e[i];const a=n==null?s.key:String(n)+String(s.key!=null?s.key:i);s.type===ke?(s.patchFlag&128&&o++,r=r.concat(yc(s.children,t,a))):(t||s.type!==ot)&&r.push(a!=null?zt(s,{key:a}):s)}if(o>1)for(let i=0;i<r.length;i++)r[i].patchFlag=-2;return r}function me(e){return fe(e)?{setup:e,name:e.name}:e}const In=e=>!!e.type.__asyncLoader;function ce(e){fe(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:r,delay:o=200,timeout:i,suspensible:s=!0,onError:a}=e;let l=null,u,c=0;const f=()=>(c++,l=null,d()),d=()=>{let p;return l||(p=l=t().catch(_=>{if(_=_ instanceof Error?_:new Error(String(_)),a)return new Promise((g,O)=>{a(_,()=>g(f()),()=>O(_),c+1)});throw _}).then(_=>p!==l&&l?l:(_&&(_.__esModule||_[Symbol.toStringTag]==="Module")&&(_=_.default),u=_,_)))};return me({name:"AsyncComponentWrapper",__asyncLoader:d,get __asyncResolved(){return u},setup(){const p=je;if(u)return()=>Ho(u,p);const _=E=>{l=null,br(E,p,13,!r)};if(s&&p.suspense||Ln)return d().then(E=>()=>Ho(E,p)).catch(E=>(_(E),()=>r?ae(r,{error:E}):null));const g=Ce(!1),O=Ce(),h=Ce(!!o);return o&&setTimeout(()=>{h.value=!1},o),i!=null&&setTimeout(()=>{if(!g.value&&!O.value){const E=new Error(`Async component timed out after ${i}ms.`);_(E),O.value=E}},i),d().then(()=>{g.value=!0,p.parent&&Or(p.parent.vnode)&&wo(p.parent.update)}).catch(E=>{_(E),O.value=E}),()=>{if(g.value&&u)return Ho(u,p);if(O.value&&r)return ae(r,{error:O.value});if(n&&!h.value)return ae(n)}}})}function Ho(e,t){const{ref:n,props:r,children:o,ce:i}=t.vnode,s=ae(e,r,o);return s.ref=n,s.ce=i,delete t.vnode.ce,s}const Or=e=>e.type.__isKeepAlive;function Od(e,t){bc(e,"a",t)}function wd(e,t){bc(e,"da",t)}function bc(e,t,n=je){const r=e.__wdc||(e.__wdc=()=>{let o=n;for(;o;){if(o.isDeactivated)return;o=o.parent}return e()});if(Po(t,r,n),n){let o=n.parent;for(;o&&o.parent;)Or(o.parent.vnode)&&Sd(r,t,n,o),o=o.parent}}function Sd(e,t,n,r){const o=Po(t,e,r,!0);Io(()=>{Di(r[t],o)},n)}function Po(e,t,n=je,r=!1){if(n){const o=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...s)=>{if(n.isUnmounted)return;Dn(),Tn(n);const a=at(t,n,e,s);return fn(),Nn(),a});return r?o.unshift(i):o.push(i),i}}const Lt=e=>(t,n=je)=>(!Ln||e==="sp")&&Po(e,(...r)=>t(...r),n),Pd=Lt("bm"),Ye=Lt("m"),Cd=Lt("bu"),Id=Lt("u"),Co=Lt("bum"),Io=Lt("um"),kd=Lt("sp"),Ad=Lt("rtg"),xd=Lt("rtc");function Td(e,t=je){Po("ec",e,t)}function to(e,t){const n=Ue;if(n===null)return e;const r=Ao(n)||n.proxy,o=e.dirs||(e.dirs=[]);for(let i=0;i<t.length;i++){let[s,a,l,u=xe]=t[i];s&&(fe(s)&&(s={mounted:s,updated:s}),s.deep&&ln(a),o.push({dir:s,instance:r,value:a,oldValue:void 0,arg:l,modifiers:u}))}return e}function gt(e,t,n,r){const o=e.dirs,i=t&&t.dirs;for(let s=0;s<o.length;s++){const a=o[s];i&&(a.oldValue=i[s].value);let l=a.dir[r];l&&(Dn(),at(l,n,8,[e.el,a,e,t]),Nn())}}const Ec="components";function Tt(e,t){return Rd(Ec,e,!0,t)||e}const Ld=Symbol();function Rd(e,t,n=!0,r=!1){const o=Ue||je;if(o){const i=o.type;if(e===Ec){const a=cp(i,!1);if(a&&(a===t||a===Et(t)||a===bo(Et(t))))return i}const s=ks(o[e]||i[e],t)||ks(o.appContext[e],t);return!s&&r?i:s}}function ks(e,t){return e&&(e[t]||e[Et(t)]||e[bo(Et(t))])}function Ut(e,t,n,r){let o;const i=n&&n[r];if(oe(e)||Oe(e)){o=new Array(e.length);for(let s=0,a=e.length;s<a;s++)o[s]=t(e[s],s,void 0,i&&i[s])}else if(typeof e=="number"){o=new Array(e);for(let s=0;s<e;s++)o[s]=t(s+1,s,void 0,i&&i[s])}else if(Te(e))if(e[Symbol.iterator])o=Array.from(e,(s,a)=>t(s,a,void 0,i&&i[a]));else{const s=Object.keys(e);o=new Array(s.length);for(let a=0,l=s.length;a<l;a++){const u=s[a];o[a]=t(e[u],u,a,i&&i[a])}}else o=[];return n&&(n[r]=o),o}function Ie(e,t,n={},r,o){if(Ue.isCE||Ue.parent&&In(Ue.parent)&&Ue.parent.isCE)return t!=="default"&&(n.name=t),ae("slot",n,r&&r());let i=e[t];i&&i._c&&(i._d=!1),J();const s=i&&Oc(i(n)),a=He(ke,{key:n.key||s&&s.key||`_${t}`},s||(r?r():[]),s&&e._===1?64:-2);return!o&&a.scopeId&&(a.slotScopeIds=[a.scopeId+"-s"]),i&&i._c&&(i._d=!0),a}function Oc(e){return e.some(t=>oo(t)?!(t.type===ot||t.type===ke&&!Oc(t.children)):!0)?e:null}const ci=e=>e?jc(e)?Ao(e)||e.proxy:ci(e.parent):null,Xn=ze(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>ci(e.parent),$root:e=>ci(e.root),$emit:e=>e.emit,$options:e=>Ji(e),$forceUpdate:e=>e.f||(e.f=()=>wo(e.update)),$nextTick:e=>e.n||(e.n=Er.bind(e.proxy)),$watch:e=>yd.bind(e)}),Fo=(e,t)=>e!==xe&&!e.__isScriptSetup&&_e(e,t),jd={get({_:e},t){const{ctx:n,setupState:r,data:o,props:i,accessCache:s,type:a,appContext:l}=e;let u;if(t[0]!=="$"){const p=s[t];if(p!==void 0)switch(p){case 1:return r[t];case 2:return o[t];case 4:return n[t];case 3:return i[t]}else{if(Fo(r,t))return s[t]=1,r[t];if(o!==xe&&_e(o,t))return s[t]=2,o[t];if((u=e.propsOptions[0])&&_e(u,t))return s[t]=3,i[t];if(n!==xe&&_e(n,t))return s[t]=4,n[t];ui&&(s[t]=0)}}const c=Xn[t];let f,d;if(c)return t==="$attrs"&&tt(e,"get",t),c(e);if((f=a.__cssModules)&&(f=f[t]))return f;if(n!==xe&&_e(n,t))return s[t]=4,n[t];if(d=l.config.globalProperties,_e(d,t))return d[t]},set({_:e},t,n){const{data:r,setupState:o,ctx:i}=e;return Fo(o,t)?(o[t]=n,!0):r!==xe&&_e(r,t)?(r[t]=n,!0):_e(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(i[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:r,appContext:o,propsOptions:i}},s){let a;return!!n[s]||e!==xe&&_e(e,s)||Fo(t,s)||(a=i[0])&&_e(a,s)||_e(r,s)||_e(Xn,s)||_e(o.config.globalProperties,s)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:_e(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};let ui=!0;function Dd(e){const t=Ji(e),n=e.proxy,r=e.ctx;ui=!1,t.beforeCreate&&As(t.beforeCreate,e,"bc");const{data:o,computed:i,methods:s,watch:a,provide:l,inject:u,created:c,beforeMount:f,mounted:d,beforeUpdate:p,updated:_,activated:g,deactivated:O,beforeDestroy:h,beforeUnmount:E,destroyed:w,unmounted:S,render:I,renderTracked:z,renderTriggered:H,errorCaptured:b,serverPrefetch:M,expose:N,inheritAttrs:K,components:k,directives:R,filters:$}=t;if(u&&Nd(u,r,null,e.appContext.config.unwrapInjectedRef),s)for(const re in s){const se=s[re];fe(se)&&(r[re]=se.bind(n))}if(o){const re=o.call(n,n);Te(re)&&(e.data=Mn(re))}if(ui=!0,i)for(const re in i){const se=i[re],Le=fe(se)?se.bind(n,n):fe(se.get)?se.get.bind(n,n):mt,De=!fe(se)&&fe(se.set)?se.set.bind(n):mt,Ne=Q({get:Le,set:De});Object.defineProperty(r,re,{enumerable:!0,configurable:!0,get:()=>Ne.value,set:Ae=>Ne.value=Ae})}if(a)for(const re in a)wc(a[re],r,n,re);if(l){const re=fe(l)?l.call(n):l;Reflect.ownKeys(re).forEach(se=>{Bt(se,re[se])})}c&&As(c,e,"c");function W(re,se){oe(se)?se.forEach(Le=>re(Le.bind(n))):se&&re(se.bind(n))}if(W(Pd,f),W(Ye,d),W(Cd,p),W(Id,_),W(Od,g),W(wd,O),W(Td,b),W(xd,z),W(Ad,H),W(Co,E),W(Io,S),W(kd,M),oe(N))if(N.length){const re=e.exposed||(e.exposed={});N.forEach(se=>{Object.defineProperty(re,se,{get:()=>n[se],set:Le=>n[se]=Le})})}else e.exposed||(e.exposed={});I&&e.render===mt&&(e.render=I),K!=null&&(e.inheritAttrs=K),k&&(e.components=k),R&&(e.directives=R)}function Nd(e,t,n=mt,r=!1){oe(e)&&(e=fi(e));for(const o in e){const i=e[o];let s;Te(i)?"default"in i?s=Fe(i.from||o,i.default,!0):s=Fe(i.from||o):s=Fe(i),Ve(s)&&r?Object.defineProperty(t,o,{enumerable:!0,configurable:!0,get:()=>s.value,set:a=>s.value=a}):t[o]=s}}function As(e,t,n){at(oe(e)?e.map(r=>r.bind(t.proxy)):e.bind(t.proxy),t,n)}function wc(e,t,n,r){const o=r.includes(".")?vc(n,r):()=>n[r];if(Oe(e)){const i=t[e];fe(i)&<(o,i)}else if(fe(e))lt(o,e.bind(n));else if(Te(e))if(oe(e))e.forEach(i=>wc(i,t,n,r));else{const i=fe(e.handler)?e.handler.bind(n):t[e.handler];fe(i)&<(o,i,e)}}function Ji(e){const t=e.type,{mixins:n,extends:r}=t,{mixins:o,optionsCache:i,config:{optionMergeStrategies:s}}=e.appContext,a=i.get(t);let l;return a?l=a:!o.length&&!n&&!r?l=t:(l={},o.length&&o.forEach(u=>no(l,u,s,!0)),no(l,t,s)),Te(t)&&i.set(t,l),l}function no(e,t,n,r=!1){const{mixins:o,extends:i}=t;i&&no(e,i,n,!0),o&&o.forEach(s=>no(e,s,n,!0));for(const s in t)if(!(r&&s==="expose")){const a=Md[s]||n&&n[s];e[s]=a?a(e[s],t[s]):t[s]}return e}const Md={data:xs,props:en,emits:en,methods:en,computed:en,beforeCreate:Je,created:Je,beforeMount:Je,mounted:Je,beforeUpdate:Je,updated:Je,beforeDestroy:Je,beforeUnmount:Je,destroyed:Je,unmounted:Je,activated:Je,deactivated:Je,errorCaptured:Je,serverPrefetch:Je,components:en,directives:en,watch:Hd,provide:xs,inject:$d};function xs(e,t){return t?e?function(){return ze(fe(e)?e.call(this,this):e,fe(t)?t.call(this,this):t)}:t:e}function $d(e,t){return en(fi(e),fi(t))}function fi(e){if(oe(e)){const t={};for(let n=0;n<e.length;n++)t[e[n]]=e[n];return t}return e}function Je(e,t){return e?[...new Set([].concat(e,t))]:t}function en(e,t){return e?ze(ze(Object.create(null),e),t):t}function Hd(e,t){if(!e)return t;if(!t)return e;const n=ze(Object.create(null),e);for(const r in t)n[r]=Je(e[r],t[r]);return n}function Fd(e,t,n,r=!1){const o={},i={};Zr(i,ko,1),e.propsDefaults=Object.create(null),Sc(e,t,o,i);for(const s in e.propsOptions[0])s in o||(o[s]=void 0);n?e.props=r?o:ed(o):e.type.props?e.props=o:e.props=i,e.attrs=i}function Bd(e,t,n,r){const{props:o,attrs:i,vnode:{patchFlag:s}}=e,a=be(o),[l]=e.propsOptions;let u=!1;if((r||s>0)&&!(s&16)){if(s&8){const c=e.vnode.dynamicProps;for(let f=0;f<c.length;f++){let d=c[f];if(So(e.emitsOptions,d))continue;const p=t[d];if(l)if(_e(i,d))p!==i[d]&&(i[d]=p,u=!0);else{const _=Et(d);o[_]=di(l,a,_,p,e,!1)}else p!==i[d]&&(i[d]=p,u=!0)}}}else{Sc(e,t,o,i)&&(u=!0);let c;for(const f in a)(!t||!_e(t,f)&&((c=dn(f))===f||!_e(t,c)))&&(l?n&&(n[f]!==void 0||n[c]!==void 0)&&(o[f]=di(l,a,f,void 0,e,!0)):delete o[f]);if(i!==a)for(const f in i)(!t||!_e(t,f)&&!0)&&(delete i[f],u=!0)}u&&xt(e,"set","$attrs")}function Sc(e,t,n,r){const[o,i]=e.propsOptions;let s=!1,a;if(t)for(let l in t){if(Gn(l))continue;const u=t[l];let c;o&&_e(o,c=Et(l))?!i||!i.includes(c)?n[c]=u:(a||(a={}))[c]=u:So(e.emitsOptions,l)||(!(l in r)||u!==r[l])&&(r[l]=u,s=!0)}if(i){const l=be(n),u=a||xe;for(let c=0;c<i.length;c++){const f=i[c];n[f]=di(o,l,f,u[f],e,!_e(u,f))}}return s}function di(e,t,n,r,o,i){const s=e[n];if(s!=null){const a=_e(s,"default");if(a&&r===void 0){const l=s.default;if(s.type!==Function&&fe(l)){const{propsDefaults:u}=o;n in u?r=u[n]:(Tn(o),r=u[n]=l.call(null,t),fn())}else r=l}s[0]&&(i&&!a?r=!1:s[1]&&(r===""||r===dn(n))&&(r=!0))}return r}function Pc(e,t,n=!1){const r=t.propsCache,o=r.get(e);if(o)return o;const i=e.props,s={},a=[];let l=!1;if(!fe(e)){const c=f=>{l=!0;const[d,p]=Pc(f,t,!0);ze(s,d),p&&a.push(...p)};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}if(!i&&!l)return Te(e)&&r.set(e,wn),wn;if(oe(i))for(let c=0;c<i.length;c++){const f=Et(i[c]);Ts(f)&&(s[f]=xe)}else if(i)for(const c in i){const f=Et(c);if(Ts(f)){const d=i[c],p=s[f]=oe(d)||fe(d)?{type:d}:Object.assign({},d);if(p){const _=js(Boolean,p.type),g=js(String,p.type);p[0]=_>-1,p[1]=g<0||_<g,(_>-1||_e(p,"default"))&&a.push(f)}}}const u=[s,a];return Te(e)&&r.set(e,u),u}function Ts(e){return e[0]!=="$"}function Ls(e){const t=e&&e.toString().match(/^\s*(function|class) (\w+)/);return t?t[2]:e===null?"null":""}function Rs(e,t){return Ls(e)===Ls(t)}function js(e,t){return oe(t)?t.findIndex(n=>Rs(n,e)):fe(t)&&Rs(t,e)?0:-1}const Cc=e=>e[0]==="_"||e==="$stable",Qi=e=>oe(e)?e.map(ft):[ft(e)],Vd=(e,t,n)=>{if(t._n)return t;const r=qe((...o)=>Qi(t(...o)),n);return r._c=!1,r},Ic=(e,t,n)=>{const r=e._ctx;for(const o in e){if(Cc(o))continue;const i=e[o];if(fe(i))t[o]=Vd(o,i,r);else if(i!=null){const s=Qi(i);t[o]=()=>s}}},kc=(e,t)=>{const n=Qi(t);e.slots.default=()=>n},qd=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=be(t),Zr(t,"_",n)):Ic(t,e.slots={})}else e.slots={},t&&kc(e,t);Zr(e.slots,ko,1)},Ud=(e,t,n)=>{const{vnode:r,slots:o}=e;let i=!0,s=xe;if(r.shapeFlag&32){const a=t._;a?n&&a===1?i=!1:(ze(o,t),!n&&a===1&&delete o._):(i=!t.$stable,Ic(t,o)),s=t}else t&&(kc(e,t),s={default:1});if(i)for(const a in o)!Cc(a)&&!(a in s)&&delete o[a]};function Ac(){return{app:null,config:{isNativeTag:hf,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let zd=0;function Kd(e,t){return function(r,o=null){fe(r)||(r=Object.assign({},r)),o!=null&&!Te(o)&&(o=null);const i=Ac(),s=new Set;let a=!1;const l=i.app={_uid:zd++,_component:r,_props:o,_container:null,_context:i,_instance:null,version:pp,get config(){return i.config},set config(u){},use(u,...c){return s.has(u)||(u&&fe(u.install)?(s.add(u),u.install(l,...c)):fe(u)&&(s.add(u),u(l,...c))),l},mixin(u){return i.mixins.includes(u)||i.mixins.push(u),l},component(u,c){return c?(i.components[u]=c,l):i.components[u]},directive(u,c){return c?(i.directives[u]=c,l):i.directives[u]},mount(u,c,f){if(!a){const d=ae(r,o);return d.appContext=i,c&&t?t(d,u):e(d,u,f),a=!0,l._container=u,u.__vue_app__=l,Ao(d.component)||d.component.proxy}},unmount(){a&&(e(null,l._container),delete l._container.__vue_app__)},provide(u,c){return i.provides[u]=c,l}};return l}}function ro(e,t,n,r,o=!1){if(oe(e)){e.forEach((d,p)=>ro(d,t&&(oe(t)?t[p]:t),n,r,o));return}if(In(r)&&!o)return;const i=r.shapeFlag&4?Ao(r.component)||r.component.proxy:r.el,s=o?null:i,{i:a,r:l}=e,u=t&&t.r,c=a.refs===xe?a.refs={}:a.refs,f=a.setupState;if(u!=null&&u!==l&&(Oe(u)?(c[u]=null,_e(f,u)&&(f[u]=null)):Ve(u)&&(u.value=null)),fe(l))Ft(l,a,12,[s,c]);else{const d=Oe(l),p=Ve(l);if(d||p){const _=()=>{if(e.f){const g=d?_e(f,l)?f[l]:c[l]:l.value;o?oe(g)&&Di(g,i):oe(g)?g.includes(i)||g.push(i):d?(c[l]=[i],_e(f,l)&&(f[l]=c[l])):(l.value=[i],e.k&&(c[e.k]=l.value))}else d?(c[l]=s,_e(f,l)&&(f[l]=s)):p&&(l.value=s,e.k&&(c[e.k]=s))};s?(_.id=-1,Xe(_,n)):_()}}}let jt=!1;const Tr=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",Lr=e=>e.nodeType===8;function Wd(e){const{mt:t,p:n,o:{patchProp:r,createText:o,nextSibling:i,parentNode:s,remove:a,insert:l,createComment:u}}=e,c=(h,E)=>{if(!E.hasChildNodes()){n(null,h,E),Xr(),E._vnode=h;return}jt=!1,f(E.firstChild,h,null,null,null),Xr(),E._vnode=h,jt&&console.error("Hydration completed but contains mismatches.")},f=(h,E,w,S,I,z=!1)=>{const H=Lr(h)&&h.data==="[",b=()=>g(h,E,w,S,I,H),{type:M,ref:N,shapeFlag:K,patchFlag:k}=E;let R=h.nodeType;E.el=h,k===-2&&(z=!1,E.dynamicChildren=null);let $=null;switch(M){case xn:R!==3?E.children===""?(l(E.el=o(""),s(h),h),$=h):$=b():(h.data!==E.children&&(jt=!0,h.data=E.children),$=i(h));break;case ot:R!==8||H?$=b():$=i(h);break;case er:if(H&&(h=i(h),R=h.nodeType),R===1||R===3){$=h;const ie=!E.children.length;for(let W=0;W<E.staticCount;W++)ie&&(E.children+=$.nodeType===1?$.outerHTML:$.data),W===E.staticCount-1&&(E.anchor=$),$=i($);return H?i($):$}else b();break;case ke:H?$=_(h,E,w,S,I,z):$=b();break;default:if(K&1)R!==1||E.type.toLowerCase()!==h.tagName.toLowerCase()?$=b():$=d(h,E,w,S,I,z);else if(K&6){E.slotScopeIds=I;const ie=s(h);if(t(E,ie,null,w,S,Tr(ie),z),$=H?O(h):i(h),$&&Lr($)&&$.data==="teleport end"&&($=i($)),In(E)){let W;H?(W=ae(ke),W.anchor=$?$.previousSibling:ie.lastChild):W=h.nodeType===3?Kt(""):ae("div"),W.el=h,E.component.subTree=W}}else K&64?R!==8?$=b():$=E.type.hydrate(h,E,w,S,I,z,e,p):K&128&&($=E.type.hydrate(h,E,w,S,Tr(s(h)),I,z,e,f))}return N!=null&&ro(N,null,S,E),$},d=(h,E,w,S,I,z)=>{z=z||!!E.dynamicChildren;const{type:H,props:b,patchFlag:M,shapeFlag:N,dirs:K}=E,k=H==="input"&&K||H==="option";if(k||M!==-1){if(K&>(E,null,w,"created"),b)if(k||!z||M&48)for(const $ in b)(k&&$.endsWith("value")||yr($)&&!Gn($))&&r(h,$,null,b[$],!1,void 0,w);else b.onClick&&r(h,"onClick",null,b.onClick,!1,void 0,w);let R;if((R=b&&b.onVnodeBeforeMount)&&st(R,w,E),K&>(E,null,w,"beforeMount"),((R=b&&b.onVnodeMounted)||K)&&hc(()=>{R&&st(R,w,E),K&>(E,null,w,"mounted")},S),N&16&&!(b&&(b.innerHTML||b.textContent))){let $=p(h.firstChild,E,h,w,S,I,z);for(;$;){jt=!0;const ie=$;$=$.nextSibling,a(ie)}}else N&8&&h.textContent!==E.children&&(jt=!0,h.textContent=E.children)}return h.nextSibling},p=(h,E,w,S,I,z,H)=>{H=H||!!E.dynamicChildren;const b=E.children,M=b.length;for(let N=0;N<M;N++){const K=H?b[N]:b[N]=ft(b[N]);if(h)h=f(h,K,S,I,z,H);else{if(K.type===xn&&!K.children)continue;jt=!0,n(null,K,w,null,S,I,Tr(w),z)}}return h},_=(h,E,w,S,I,z)=>{const{slotScopeIds:H}=E;H&&(I=I?I.concat(H):H);const b=s(h),M=p(i(h),E,b,w,S,I,z);return M&&Lr(M)&&M.data==="]"?i(E.anchor=M):(jt=!0,l(E.anchor=u("]"),b,M),M)},g=(h,E,w,S,I,z)=>{if(jt=!0,E.el=null,z){const M=O(h);for(;;){const N=i(h);if(N&&N!==M)a(N);else break}}const H=i(h),b=s(h);return a(h),n(null,E,b,H,w,S,Tr(b),I),H},O=h=>{let E=0;for(;h;)if(h=i(h),h&&Lr(h)&&(h.data==="["&&E++,h.data==="]")){if(E===0)return i(h);E--}return h};return[c,f]}const Xe=hc;function Jd(e){return Qd(e,Wd)}function Qd(e,t){const n=wf();n.__VUE__=!0;const{insert:r,remove:o,patchProp:i,createElement:s,createText:a,createComment:l,setText:u,setElementText:c,parentNode:f,nextSibling:d,setScopeId:p=mt,insertStaticContent:_}=e,g=(m,v,P,C=null,A=null,D=null,j=!1,T=null,F=!!v.dynamicChildren)=>{if(m===v)return;m&&!on(m,v)&&(C=q(m),Ae(m,A,D,!0),m=null),v.patchFlag===-2&&(F=!1,v.dynamicChildren=null);const{type:L,ref:G,shapeFlag:Y}=v;switch(L){case xn:O(m,v,P,C);break;case ot:h(m,v,P,C);break;case er:m==null&&E(v,P,C,j);break;case ke:k(m,v,P,C,A,D,j,T,F);break;default:Y&1?I(m,v,P,C,A,D,j,T,F):Y&6?R(m,v,P,C,A,D,j,T,F):(Y&64||Y&128)&&L.process(m,v,P,C,A,D,j,T,F,de)}G!=null&&A&&ro(G,m&&m.ref,D,v||m,!v)},O=(m,v,P,C)=>{if(m==null)r(v.el=a(v.children),P,C);else{const A=v.el=m.el;v.children!==m.children&&u(A,v.children)}},h=(m,v,P,C)=>{m==null?r(v.el=l(v.children||""),P,C):v.el=m.el},E=(m,v,P,C)=>{[m.el,m.anchor]=_(m.children,v,P,C,m.el,m.anchor)},w=({el:m,anchor:v},P,C)=>{let A;for(;m&&m!==v;)A=d(m),r(m,P,C),m=A;r(v,P,C)},S=({el:m,anchor:v})=>{let P;for(;m&&m!==v;)P=d(m),o(m),m=P;o(v)},I=(m,v,P,C,A,D,j,T,F)=>{j=j||v.type==="svg",m==null?z(v,P,C,A,D,j,T,F):M(m,v,A,D,j,T,F)},z=(m,v,P,C,A,D,j,T)=>{let F,L;const{type:G,props:Y,shapeFlag:X,transition:ee,dirs:ue}=m;if(F=m.el=s(m.type,D,Y&&Y.is,Y),X&8?c(F,m.children):X&16&&b(m.children,F,null,C,A,D&&G!=="foreignObject",j,T),ue&>(m,null,C,"created"),H(F,m,m.scopeId,j,C),Y){for(const Se in Y)Se!=="value"&&!Gn(Se)&&i(F,Se,null,Y[Se],D,m.children,C,A,U);"value"in Y&&i(F,"value",null,Y.value),(L=Y.onVnodeBeforeMount)&&st(L,C,m)}ue&>(m,null,C,"beforeMount");const ve=(!A||A&&!A.pendingBranch)&&ee&&!ee.persisted;ve&&ee.beforeEnter(F),r(F,v,P),((L=Y&&Y.onVnodeMounted)||ve||ue)&&Xe(()=>{L&&st(L,C,m),ve&&ee.enter(F),ue&>(m,null,C,"mounted")},A)},H=(m,v,P,C,A)=>{if(P&&p(m,P),C)for(let D=0;D<C.length;D++)p(m,C[D]);if(A){let D=A.subTree;if(v===D){const j=A.vnode;H(m,j,j.scopeId,j.slotScopeIds,A.parent)}}},b=(m,v,P,C,A,D,j,T,F=0)=>{for(let L=F;L<m.length;L++){const G=m[L]=T?Mt(m[L]):ft(m[L]);g(null,G,v,P,C,A,D,j,T)}},M=(m,v,P,C,A,D,j)=>{const T=v.el=m.el;let{patchFlag:F,dynamicChildren:L,dirs:G}=v;F|=m.patchFlag&16;const Y=m.props||xe,X=v.props||xe;let ee;P&&Qt(P,!1),(ee=X.onVnodeBeforeUpdate)&&st(ee,P,v,m),G&>(v,m,P,"beforeUpdate"),P&&Qt(P,!0);const ue=A&&v.type!=="foreignObject";if(L?N(m.dynamicChildren,L,T,P,C,ue,D):j||se(m,v,T,null,P,C,ue,D,!1),F>0){if(F&16)K(T,v,Y,X,P,C,A);else if(F&2&&Y.class!==X.class&&i(T,"class",null,X.class,A),F&4&&i(T,"style",Y.style,X.style,A),F&8){const ve=v.dynamicProps;for(let Se=0;Se<ve.length;Se++){const $e=ve[Se],ut=Y[$e],mn=X[$e];(mn!==ut||$e==="value")&&i(T,$e,ut,mn,A,m.children,P,C,U)}}F&1&&m.children!==v.children&&c(T,v.children)}else!j&&L==null&&K(T,v,Y,X,P,C,A);((ee=X.onVnodeUpdated)||G)&&Xe(()=>{ee&&st(ee,P,v,m),G&>(v,m,P,"updated")},C)},N=(m,v,P,C,A,D,j)=>{for(let T=0;T<v.length;T++){const F=m[T],L=v[T],G=F.el&&(F.type===ke||!on(F,L)||F.shapeFlag&70)?f(F.el):P;g(F,L,G,null,C,A,D,j,!0)}},K=(m,v,P,C,A,D,j)=>{if(P!==C){if(P!==xe)for(const T in P)!Gn(T)&&!(T in C)&&i(m,T,P[T],null,j,v.children,A,D,U);for(const T in C){if(Gn(T))continue;const F=C[T],L=P[T];F!==L&&T!=="value"&&i(m,T,L,F,j,v.children,A,D,U)}"value"in C&&i(m,"value",P.value,C.value)}},k=(m,v,P,C,A,D,j,T,F)=>{const L=v.el=m?m.el:a(""),G=v.anchor=m?m.anchor:a("");let{patchFlag:Y,dynamicChildren:X,slotScopeIds:ee}=v;ee&&(T=T?T.concat(ee):ee),m==null?(r(L,P,C),r(G,P,C),b(v.children,P,G,A,D,j,T,F)):Y>0&&Y&64&&X&&m.dynamicChildren?(N(m.dynamicChildren,X,P,A,D,j,T),(v.key!=null||A&&v===A.subTree)&&xc(m,v,!0)):se(m,v,P,G,A,D,j,T,F)},R=(m,v,P,C,A,D,j,T,F)=>{v.slotScopeIds=T,m==null?v.shapeFlag&512?A.ctx.activate(v,P,C,j,F):$(v,P,C,A,D,j,F):ie(m,v,F)},$=(m,v,P,C,A,D,j)=>{const T=m.component=op(m,C,A);if(Or(m)&&(T.ctx.renderer=de),ip(T),T.asyncDep){if(A&&A.registerDep(T,W),!m.el){const F=T.subTree=ae(ot);h(null,F,v,P)}return}W(T,m,v,P,A,D,j)},ie=(m,v,P)=>{const C=v.component=m.component;if(hd(m,v,P))if(C.asyncDep&&!C.asyncResolved){re(C,v,P);return}else C.next=v,cd(C.update),C.update();else v.el=m.el,C.vnode=v},W=(m,v,P,C,A,D,j)=>{const T=()=>{if(m.isMounted){let{next:G,bu:Y,u:X,parent:ee,vnode:ue}=m,ve=G,Se;Qt(m,!1),G?(G.el=ue.el,re(m,G,j)):G=ue,Y&&No(Y),(Se=G.props&&G.props.onVnodeBeforeUpdate)&&st(Se,ee,G,ue),Qt(m,!0);const $e=Mo(m),ut=m.subTree;m.subTree=$e,g(ut,$e,f(ut.el),q(ut),m,A,D),G.el=$e.el,ve===null&&vd(m,$e.el),X&&Xe(X,A),(Se=G.props&&G.props.onVnodeUpdated)&&Xe(()=>st(Se,ee,G,ue),A)}else{let G;const{el:Y,props:X}=v,{bm:ee,m:ue,parent:ve}=m,Se=In(v);if(Qt(m,!1),ee&&No(ee),!Se&&(G=X&&X.onVnodeBeforeMount)&&st(G,ve,v),Qt(m,!0),Y&&le){const $e=()=>{m.subTree=Mo(m),le(Y,m.subTree,m,A,null)};Se?v.type.__asyncLoader().then(()=>!m.isUnmounted&&$e()):$e()}else{const $e=m.subTree=Mo(m);g(null,$e,P,C,m,A,D),v.el=$e.el}if(ue&&Xe(ue,A),!Se&&(G=X&&X.onVnodeMounted)){const $e=v;Xe(()=>st(G,ve,$e),A)}(v.shapeFlag&256||ve&&In(ve.vnode)&&ve.vnode.shapeFlag&256)&&m.a&&Xe(m.a,A),m.isMounted=!0,v=P=C=null}},F=m.effect=new Hi(T,()=>wo(L),m.scope),L=m.update=()=>F.run();L.id=m.uid,Qt(m,!0),L()},re=(m,v,P)=>{v.component=m;const C=m.vnode.props;m.vnode=v,m.next=null,Bd(m,v.props,C,P),Ud(m,v.children,P),Dn(),Ps(),Nn()},se=(m,v,P,C,A,D,j,T,F=!1)=>{const L=m&&m.children,G=m?m.shapeFlag:0,Y=v.children,{patchFlag:X,shapeFlag:ee}=v;if(X>0){if(X&128){De(L,Y,P,C,A,D,j,T,F);return}else if(X&256){Le(L,Y,P,C,A,D,j,T,F);return}}ee&8?(G&16&&U(L,A,D),Y!==L&&c(P,Y)):G&16?ee&16?De(L,Y,P,C,A,D,j,T,F):U(L,A,D,!0):(G&8&&c(P,""),ee&16&&b(Y,P,C,A,D,j,T,F))},Le=(m,v,P,C,A,D,j,T,F)=>{m=m||wn,v=v||wn;const L=m.length,G=v.length,Y=Math.min(L,G);let X;for(X=0;X<Y;X++){const ee=v[X]=F?Mt(v[X]):ft(v[X]);g(m[X],ee,P,null,A,D,j,T,F)}L>G?U(m,A,D,!0,!1,Y):b(v,P,C,A,D,j,T,F,Y)},De=(m,v,P,C,A,D,j,T,F)=>{let L=0;const G=v.length;let Y=m.length-1,X=G-1;for(;L<=Y&&L<=X;){const ee=m[L],ue=v[L]=F?Mt(v[L]):ft(v[L]);if(on(ee,ue))g(ee,ue,P,null,A,D,j,T,F);else break;L++}for(;L<=Y&&L<=X;){const ee=m[Y],ue=v[X]=F?Mt(v[X]):ft(v[X]);if(on(ee,ue))g(ee,ue,P,null,A,D,j,T,F);else break;Y--,X--}if(L>Y){if(L<=X){const ee=X+1,ue=ee<G?v[ee].el:C;for(;L<=X;)g(null,v[L]=F?Mt(v[L]):ft(v[L]),P,ue,A,D,j,T,F),L++}}else if(L>X)for(;L<=Y;)Ae(m[L],A,D,!0),L++;else{const ee=L,ue=L,ve=new Map;for(L=ue;L<=X;L++){const nt=v[L]=F?Mt(v[L]):ft(v[L]);nt.key!=null&&ve.set(nt.key,L)}let Se,$e=0;const ut=X-ue+1;let mn=!1,ps=0;const Bn=new Array(ut);for(L=0;L<ut;L++)Bn[L]=0;for(L=ee;L<=Y;L++){const nt=m[L];if($e>=ut){Ae(nt,A,D,!0);continue}let vt;if(nt.key!=null)vt=ve.get(nt.key);else for(Se=ue;Se<=X;Se++)if(Bn[Se-ue]===0&&on(nt,v[Se])){vt=Se;break}vt===void 0?Ae(nt,A,D,!0):(Bn[vt-ue]=L+1,vt>=ps?ps=vt:mn=!0,g(nt,v[vt],P,null,A,D,j,T,F),$e++)}const ms=mn?Zd(Bn):wn;for(Se=ms.length-1,L=ut-1;L>=0;L--){const nt=ue+L,vt=v[nt],hs=nt+1<G?v[nt+1].el:C;Bn[L]===0?g(null,vt,P,hs,A,D,j,T,F):mn&&(Se<0||L!==ms[Se]?Ne(vt,P,hs,2):Se--)}}},Ne=(m,v,P,C,A=null)=>{const{el:D,type:j,transition:T,children:F,shapeFlag:L}=m;if(L&6){Ne(m.component.subTree,v,P,C);return}if(L&128){m.suspense.move(v,P,C);return}if(L&64){j.move(m,v,P,de);return}if(j===ke){r(D,v,P);for(let Y=0;Y<F.length;Y++)Ne(F[Y],v,P,C);r(m.anchor,v,P);return}if(j===er){w(m,v,P);return}if(C!==2&&L&1&&T)if(C===0)T.beforeEnter(D),r(D,v,P),Xe(()=>T.enter(D),A);else{const{leave:Y,delayLeave:X,afterLeave:ee}=T,ue=()=>r(D,v,P),ve=()=>{Y(D,()=>{ue(),ee&&ee()})};X?X(D,ue,ve):ve()}else r(D,v,P)},Ae=(m,v,P,C=!1,A=!1)=>{const{type:D,props:j,ref:T,children:F,dynamicChildren:L,shapeFlag:G,patchFlag:Y,dirs:X}=m;if(T!=null&&ro(T,null,P,m,!0),G&256){v.ctx.deactivate(m);return}const ee=G&1&&X,ue=!In(m);let ve;if(ue&&(ve=j&&j.onVnodeBeforeUnmount)&&st(ve,v,m),G&6)x(m.component,P,C);else{if(G&128){m.suspense.unmount(P,C);return}ee&>(m,null,v,"beforeUnmount"),G&64?m.type.remove(m,v,P,A,de,C):L&&(D!==ke||Y>0&&Y&64)?U(L,v,P,!1,!0):(D===ke&&Y&384||!A&&G&16)&&U(F,v,P),C&&ct(m)}(ue&&(ve=j&&j.onVnodeUnmounted)||ee)&&Xe(()=>{ve&&st(ve,v,m),ee&>(m,null,v,"unmounted")},P)},ct=m=>{const{type:v,el:P,anchor:C,transition:A}=m;if(v===ke){Ge(P,C);return}if(v===er){S(m);return}const D=()=>{o(P),A&&!A.persisted&&A.afterLeave&&A.afterLeave()};if(m.shapeFlag&1&&A&&!A.persisted){const{leave:j,delayLeave:T}=A,F=()=>j(P,D);T?T(m.el,D,F):F()}else D()},Ge=(m,v)=>{let P;for(;m!==v;)P=d(m),o(m),m=P;o(v)},x=(m,v,P)=>{const{bum:C,scope:A,update:D,subTree:j,um:T}=m;C&&No(C),A.stop(),D&&(D.active=!1,Ae(j,m,v,P)),T&&Xe(T,v),Xe(()=>{m.isUnmounted=!0},v),v&&v.pendingBranch&&!v.isUnmounted&&m.asyncDep&&!m.asyncResolved&&m.suspenseId===v.pendingId&&(v.deps--,v.deps===0&&v.resolve())},U=(m,v,P,C=!1,A=!1,D=0)=>{for(let j=D;j<m.length;j++)Ae(m[j],v,P,C,A)},q=m=>m.shapeFlag&6?q(m.component.subTree):m.shapeFlag&128?m.suspense.next():d(m.anchor||m.el),Z=(m,v,P)=>{m==null?v._vnode&&Ae(v._vnode,null,null,!0):g(v._vnode||null,m,v,null,null,null,P),Ps(),Xr(),v._vnode=m},de={p:g,um:Ae,m:Ne,r:ct,mt:$,mc:b,pc:se,pbc:N,n:q,o:e};let Pe,le;return t&&([Pe,le]=t(de)),{render:Z,hydrate:Pe,createApp:Kd(Z,Pe)}}function Qt({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function xc(e,t,n=!1){const r=e.children,o=t.children;if(oe(r)&&oe(o))for(let i=0;i<r.length;i++){const s=r[i];let a=o[i];a.shapeFlag&1&&!a.dynamicChildren&&((a.patchFlag<=0||a.patchFlag===32)&&(a=o[i]=Mt(o[i]),a.el=s.el),n||xc(s,a)),a.type===xn&&(a.el=s.el)}}function Zd(e){const t=e.slice(),n=[0];let r,o,i,s,a;const l=e.length;for(r=0;r<l;r++){const u=e[r];if(u!==0){if(o=n[n.length-1],e[o]<u){t[r]=o,n.push(r);continue}for(i=0,s=n.length-1;i<s;)a=i+s>>1,e[n[a]]<u?i=a+1:s=a;u<e[n[i]]&&(i>0&&(t[r]=n[i-1]),n[i]=r)}}for(i=n.length,s=n[i-1];i-- >0;)n[i]=s,s=t[s];return n}const Yd=e=>e.__isTeleport,ke=Symbol(void 0),xn=Symbol(void 0),ot=Symbol(void 0),er=Symbol(void 0),tr=[];let pt=null;function J(e=!1){tr.push(pt=e?null:[])}function Gd(){tr.pop(),pt=tr[tr.length-1]||null}let fr=1;function Ds(e){fr+=e}function Tc(e){return e.dynamicChildren=fr>0?pt||wn:null,Gd(),fr>0&&pt&&pt.push(e),e}function ne(e,t,n,r,o,i){return Tc(ye(e,t,n,r,o,i,!0))}function He(e,t,n,r,o){return Tc(ae(e,t,n,r,o,!0))}function oo(e){return e?e.__v_isVNode===!0:!1}function on(e,t){return e.type===t.type&&e.key===t.key}const ko="__vInternal",Lc=({key:e})=>e!=null?e:null,qr=({ref:e,ref_key:t,ref_for:n})=>e!=null?Oe(e)||Ve(e)||fe(e)?{i:Ue,r:e,k:t,f:!!n}:e:null;function ye(e,t=null,n=null,r=0,o=null,i=e===ke?0:1,s=!1,a=!1){const l={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Lc(t),ref:t&&qr(t),scopeId:mc,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:r,dynamicProps:o,dynamicChildren:null,appContext:null,ctx:Ue};return a?(Zi(l,n),i&128&&e.normalize(l)):n&&(l.shapeFlag|=Oe(n)?8:16),fr>0&&!s&&pt&&(l.patchFlag>0||i&6)&&l.patchFlag!==32&&pt.push(l),l}const ae=Xd;function Xd(e,t=null,n=null,r=0,o=null,i=!1){if((!e||e===Ld)&&(e=ot),oo(e)){const a=zt(e,t,!0);return n&&Zi(a,n),fr>0&&!i&&pt&&(a.shapeFlag&6?pt[pt.indexOf(e)]=a:pt.push(a)),a.patchFlag|=-2,a}if(up(e)&&(e=e.__vccOpts),t){t=ep(t);let{class:a,style:l}=t;a&&!Oe(a)&&(t.class=et(a)),Te(l)&&(nc(l)&&!oe(l)&&(l=ze({},l)),t.style=_r(l))}const s=Oe(e)?1:gd(e)?128:Yd(e)?64:Te(e)?4:fe(e)?2:0;return ye(e,t,n,r,o,s,i,!0)}function ep(e){return e?nc(e)||ko in e?ze({},e):e:null}function zt(e,t,n=!1){const{props:r,ref:o,patchFlag:i,children:s}=e,a=t?pi(r||{},t):r;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:a,key:a&&Lc(a),ref:t&&t.ref?n&&o?oe(o)?o.concat(qr(t)):[o,qr(t)]:qr(t):o,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:s,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==ke?i===-1?16:i|16:i,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&zt(e.ssContent),ssFallback:e.ssFallback&&zt(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function Kt(e=" ",t=0){return ae(xn,null,e,t)}function tp(e,t){const n=ae(er,null,e);return n.staticCount=t,n}function Me(e="",t=!1){return t?(J(),He(ot,null,e)):ae(ot,null,e)}function ft(e){return e==null||typeof e=="boolean"?ae(ot):oe(e)?ae(ke,null,e.slice()):typeof e=="object"?Mt(e):ae(xn,null,String(e))}function Mt(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:zt(e)}function Zi(e,t){let n=0;const{shapeFlag:r}=e;if(t==null)t=null;else if(oe(t))n=16;else if(typeof t=="object")if(r&65){const o=t.default;o&&(o._c&&(o._d=!1),Zi(e,o()),o._c&&(o._d=!0));return}else{n=32;const o=t._;!o&&!(ko in t)?t._ctx=Ue:o===3&&Ue&&(Ue.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else fe(t)?(t={default:t,_ctx:Ue},n=32):(t=String(t),r&64?(n=16,t=[Kt(t)]):n=8);e.children=t,e.shapeFlag|=n}function pi(...e){const t={};for(let n=0;n<e.length;n++){const r=e[n];for(const o in r)if(o==="class")t.class!==r.class&&(t.class=et([t.class,r.class]));else if(o==="style")t.style=_r([t.style,r.style]);else if(yr(o)){const i=t[o],s=r[o];s&&i!==s&&!(oe(i)&&i.includes(s))&&(t[o]=i?[].concat(i,s):s)}else o!==""&&(t[o]=r[o])}return t}function st(e,t,n,r=null){at(e,t,7,[n,r])}const np=Ac();let rp=0;function op(e,t,n){const r=e.type,o=(t?t.appContext:e.appContext)||np,i={uid:rp++,vnode:e,type:r,parent:t,appContext:o,root:null,next:null,subTree:null,effect:null,update:null,scope:new Sf(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(o.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Pc(r,o),emitsOptions:pc(r,o),emit:null,emitted:null,propsDefaults:xe,inheritAttrs:r.inheritAttrs,ctx:xe,data:xe,props:xe,attrs:xe,slots:xe,refs:xe,setupState:xe,setupContext:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return i.ctx={_:i},i.root=t?t.root:i,i.emit=dd.bind(null,i),e.ce&&e.ce(i),i}let je=null;const Rc=()=>je||Ue,Tn=e=>{je=e,e.scope.on()},fn=()=>{je&&je.scope.off(),je=null};function jc(e){return e.vnode.shapeFlag&4}let Ln=!1;function ip(e,t=!1){Ln=t;const{props:n,children:r}=e.vnode,o=jc(e);Fd(e,n,o,t),qd(e,r);const i=o?sp(e,t):void 0;return Ln=!1,i}function sp(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=rc(new Proxy(e.ctx,jd));const{setup:r}=n;if(r){const o=e.setupContext=r.length>1?lp(e):null;Tn(e),Dn();const i=Ft(r,e,0,[e.props,o]);if(Nn(),fn(),Vl(i)){if(i.then(fn,fn),t)return i.then(s=>{Ns(e,s,t)}).catch(s=>{br(s,e,0)});e.asyncDep=i}else Ns(e,i,t)}else Dc(e,t)}function Ns(e,t,n){fe(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:Te(t)&&(e.setupState=lc(t)),Dc(e,n)}let Ms;function Dc(e,t,n){const r=e.type;if(!e.render){if(!t&&Ms&&!r.render){const o=r.template||Ji(e).template;if(o){const{isCustomElement:i,compilerOptions:s}=e.appContext.config,{delimiters:a,compilerOptions:l}=r,u=ze(ze({isCustomElement:i,delimiters:a},s),l);r.render=Ms(o,u)}}e.render=r.render||mt}Tn(e),Dn(),Dd(e),Nn(),fn()}function ap(e){return new Proxy(e.attrs,{get(t,n){return tt(e,"get","$attrs"),t[n]}})}function lp(e){const t=r=>{e.exposed=r||{}};let n;return{get attrs(){return n||(n=ap(e))},slots:e.slots,emit:e.emit,expose:t}}function Ao(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(lc(rc(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in Xn)return Xn[n](e)},has(t,n){return n in t||n in Xn}}))}function cp(e,t=!0){return fe(e)?e.displayName||e.name:e.name||t&&e.__name}function up(e){return fe(e)&&"__vccOpts"in e}const Q=(e,t)=>sd(e,t,Ln);function he(e,t,n){const r=arguments.length;return r===2?Te(t)&&!oe(t)?oo(t)?ae(e,null,[t]):ae(e,t):ae(e,null,t):(r>3?n=Array.prototype.slice.call(arguments,2):r===3&&oo(n)&&(n=[n]),ae(e,t,n))}const fp=Symbol(""),dp=()=>Fe(fp),pp="3.2.47",mp="http://www.w3.org/2000/svg",sn=typeof document<"u"?document:null,$s=sn&&sn.createElement("template"),hp={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,r)=>{const o=t?sn.createElementNS(mp,e):sn.createElement(e,n?{is:n}:void 0);return e==="select"&&r&&r.multiple!=null&&o.setAttribute("multiple",r.multiple),o},createText:e=>sn.createTextNode(e),createComment:e=>sn.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>sn.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,r,o,i){const s=n?n.previousSibling:t.lastChild;if(o&&(o===i||o.nextSibling))for(;t.insertBefore(o.cloneNode(!0),n),!(o===i||!(o=o.nextSibling)););else{$s.innerHTML=r?`<svg>${e}</svg>`:e;const a=$s.content;if(r){const l=a.firstChild;for(;l.firstChild;)a.appendChild(l.firstChild);a.removeChild(l)}t.insertBefore(a,n)}return[s?s.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};function vp(e,t,n){const r=e._vtc;r&&(t=(t?[t,...r]:[...r]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}function gp(e,t,n){const r=e.style,o=Oe(n);if(n&&!o){if(t&&!Oe(t))for(const i in t)n[i]==null&&mi(r,i,"");for(const i in n)mi(r,i,n[i])}else{const i=r.display;o?t!==n&&(r.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(r.display=i)}}const Hs=/\s*!important$/;function mi(e,t,n){if(oe(n))n.forEach(r=>mi(e,t,r));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const r=_p(e,t);Hs.test(n)?e.setProperty(dn(r),n.replace(Hs,""),"important"):e[r]=n}}const Fs=["Webkit","Moz","ms"],Bo={};function _p(e,t){const n=Bo[t];if(n)return n;let r=Et(t);if(r!=="filter"&&r in e)return Bo[t]=r;r=bo(r);for(let o=0;o<Fs.length;o++){const i=Fs[o]+r;if(i in e)return Bo[t]=i}return t}const Bs="http://www.w3.org/1999/xlink";function yp(e,t,n,r,o){if(r&&t.startsWith("xlink:"))n==null?e.removeAttributeNS(Bs,t.slice(6,t.length)):e.setAttributeNS(Bs,t,n);else{const i=mf(t);n==null||i&&!Hl(n)?e.removeAttribute(t):e.setAttribute(t,i?"":n)}}function bp(e,t,n,r,o,i,s){if(t==="innerHTML"||t==="textContent"){r&&s(r,o,i),e[t]=n==null?"":n;return}if(t==="value"&&e.tagName!=="PROGRESS"&&!e.tagName.includes("-")){e._value=n;const l=n==null?"":n;(e.value!==l||e.tagName==="OPTION")&&(e.value=l),n==null&&e.removeAttribute(t);return}let a=!1;if(n===""||n==null){const l=typeof e[t];l==="boolean"?n=Hl(n):n==null&&l==="string"?(n="",a=!0):l==="number"&&(n=0,a=!0)}try{e[t]=n}catch{}a&&e.removeAttribute(t)}function Ep(e,t,n,r){e.addEventListener(t,n,r)}function Op(e,t,n,r){e.removeEventListener(t,n,r)}function wp(e,t,n,r,o=null){const i=e._vei||(e._vei={}),s=i[t];if(r&&s)s.value=r;else{const[a,l]=Sp(t);if(r){const u=i[t]=Ip(r,o);Ep(e,a,u,l)}else s&&(Op(e,a,s,l),i[t]=void 0)}}const Vs=/(?:Once|Passive|Capture)$/;function Sp(e){let t;if(Vs.test(e)){t={};let r;for(;r=e.match(Vs);)e=e.slice(0,e.length-r[0].length),t[r[0].toLowerCase()]=!0}return[e[2]===":"?e.slice(3):dn(e.slice(2)),t]}let Vo=0;const Pp=Promise.resolve(),Cp=()=>Vo||(Pp.then(()=>Vo=0),Vo=Date.now());function Ip(e,t){const n=r=>{if(!r._vts)r._vts=Date.now();else if(r._vts<=n.attached)return;at(kp(r,n.value),t,5,[r])};return n.value=e,n.attached=Cp(),n}function kp(e,t){if(oe(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(r=>o=>!o._stopped&&r&&r(o))}else return t}const qs=/^on[a-z]/,Ap=(e,t,n,r,o=!1,i,s,a,l)=>{t==="class"?vp(e,r,o):t==="style"?gp(e,n,r):yr(t)?ji(t)||wp(e,t,n,r,s):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):xp(e,t,r,o))?bp(e,t,r,i,s,a,l):(t==="true-value"?e._trueValue=r:t==="false-value"&&(e._falseValue=r),yp(e,t,r,o))};function xp(e,t,n,r){return r?!!(t==="innerHTML"||t==="textContent"||t in e&&qs.test(t)&&fe(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||qs.test(t)&&Oe(n)?!1:t in e}const Dt="transition",Vn="animation",$n=(e,{slots:t})=>he(gc,Tp(e),t);$n.displayName="Transition";const Nc={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};$n.props=ze({},gc.props,Nc);const Zt=(e,t=[])=>{oe(e)?e.forEach(n=>n(...t)):e&&e(...t)},Us=e=>e?oe(e)?e.some(t=>t.length>1):e.length>1:!1;function Tp(e){const t={};for(const k in e)k in Nc||(t[k]=e[k]);if(e.css===!1)return t;const{name:n="v",type:r,duration:o,enterFromClass:i=`${n}-enter-from`,enterActiveClass:s=`${n}-enter-active`,enterToClass:a=`${n}-enter-to`,appearFromClass:l=i,appearActiveClass:u=s,appearToClass:c=a,leaveFromClass:f=`${n}-leave-from`,leaveActiveClass:d=`${n}-leave-active`,leaveToClass:p=`${n}-leave-to`}=e,_=Lp(o),g=_&&_[0],O=_&&_[1],{onBeforeEnter:h,onEnter:E,onEnterCancelled:w,onLeave:S,onLeaveCancelled:I,onBeforeAppear:z=h,onAppear:H=E,onAppearCancelled:b=w}=t,M=(k,R,$)=>{Yt(k,R?c:a),Yt(k,R?u:s),$&&$()},N=(k,R)=>{k._isLeaving=!1,Yt(k,f),Yt(k,p),Yt(k,d),R&&R()},K=k=>(R,$)=>{const ie=k?H:E,W=()=>M(R,k,$);Zt(ie,[R,W]),zs(()=>{Yt(R,k?l:i),Nt(R,k?c:a),Us(ie)||Ks(R,r,g,W)})};return ze(t,{onBeforeEnter(k){Zt(h,[k]),Nt(k,i),Nt(k,s)},onBeforeAppear(k){Zt(z,[k]),Nt(k,l),Nt(k,u)},onEnter:K(!1),onAppear:K(!0),onLeave(k,R){k._isLeaving=!0;const $=()=>N(k,R);Nt(k,f),Dp(),Nt(k,d),zs(()=>{!k._isLeaving||(Yt(k,f),Nt(k,p),Us(S)||Ks(k,r,O,$))}),Zt(S,[k,$])},onEnterCancelled(k){M(k,!1),Zt(w,[k])},onAppearCancelled(k){M(k,!0),Zt(b,[k])},onLeaveCancelled(k){N(k),Zt(I,[k])}})}function Lp(e){if(e==null)return null;if(Te(e))return[qo(e.enter),qo(e.leave)];{const t=qo(e);return[t,t]}}function qo(e){return Of(e)}function Nt(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e._vtc||(e._vtc=new Set)).add(t)}function Yt(e,t){t.split(/\s+/).forEach(r=>r&&e.classList.remove(r));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function zs(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let Rp=0;function Ks(e,t,n,r){const o=e._endId=++Rp,i=()=>{o===e._endId&&r()};if(n)return setTimeout(i,n);const{type:s,timeout:a,propCount:l}=jp(e,t);if(!s)return r();const u=s+"end";let c=0;const f=()=>{e.removeEventListener(u,d),i()},d=p=>{p.target===e&&++c>=l&&f()};setTimeout(()=>{c<l&&f()},a+1),e.addEventListener(u,d)}function jp(e,t){const n=window.getComputedStyle(e),r=_=>(n[_]||"").split(", "),o=r(`${Dt}Delay`),i=r(`${Dt}Duration`),s=Ws(o,i),a=r(`${Vn}Delay`),l=r(`${Vn}Duration`),u=Ws(a,l);let c=null,f=0,d=0;t===Dt?s>0&&(c=Dt,f=s,d=i.length):t===Vn?u>0&&(c=Vn,f=u,d=l.length):(f=Math.max(s,u),c=f>0?s>u?Dt:Vn:null,d=c?c===Dt?i.length:l.length:0);const p=c===Dt&&/\b(transform|all)(,|$)/.test(r(`${Dt}Property`).toString());return{type:c,timeout:f,propCount:d,hasTransform:p}}function Ws(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max(...t.map((n,r)=>Js(n)+Js(e[r])))}function Js(e){return Number(e.slice(0,-1).replace(",","."))*1e3}function Dp(){return document.body.offsetHeight}const Np={esc:"escape",space:" ",up:"arrow-up",left:"arrow-left",right:"arrow-right",down:"arrow-down",delete:"backspace"},Mp=(e,t)=>n=>{if(!("key"in n))return;const r=dn(n.key);if(t.some(o=>o===r||Np[o]===r))return e(n)},io={beforeMount(e,{value:t},{transition:n}){e._vod=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):qn(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:r}){!t!=!n&&(r?t?(r.beforeEnter(e),qn(e,!0),r.enter(e)):r.leave(e,()=>{qn(e,!1)}):qn(e,t))},beforeUnmount(e,{value:t}){qn(e,t)}};function qn(e,t){e.style.display=t?e._vod:"none"}const $p=ze({patchProp:Ap},hp);let Uo,Qs=!1;function Hp(){return Uo=Qs?Uo:Jd($p),Qs=!0,Uo}const Fp=(...e)=>{const t=Hp().createApp(...e),{mount:n}=t;return t.mount=r=>{const o=Bp(r);if(o)return n(o,!0,o instanceof SVGElement)},t};function Bp(e){return Oe(e)?document.querySelector(e):e}const Vp=JSON.parse('{"base":"/","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":"一个好用的前端应用解决方案"}}}');var qp=([e,t,n])=>e==="meta"&&t.name?`${e}.${t.name}`:["title","base"].includes(e)?e:e==="template"&&t.id?`${e}.${t.id}`:JSON.stringify([e,t,n]),Up=e=>{const t=new Set,n=[];return e.forEach(r=>{const o=qp(r);t.has(o)||(t.add(o),n.push(r))}),n},wr=e=>/^(https?:)?\/\//.test(e),zp=e=>/^mailto:/.test(e),Kp=e=>/^tel:/.test(e),Yi=e=>Object.prototype.toString.call(e)==="[object Object]",Mc=e=>e.replace(/\/$/,""),$c=e=>e.replace(/^\//,""),Hc=(e,t)=>{const n=Object.keys(e).sort((r,o)=>{const i=o.split("/").length-r.split("/").length;return i!==0?i:o.length-r.length});for(const r of n)if(t.startsWith(r))return r;return"/"},Zs=(e,t="/")=>e.replace(/^(https?:)?\/\/[^/]*/,"").replace(new RegExp(`^${t}`),"/");const Fc={"v-8daa1a0e":ce(()=>B(()=>import("./index.html.de0d80a1.js"),[])),"v-fffb8e28":ce(()=>B(()=>import("./index.html.9f427ef5.js"),[])),"v-0cca110a":ce(()=>B(()=>import("./builder.html.5491993d.js"),[])),"v-85fa9b2a":ce(()=>B(()=>import("./config.html.bebaf600.js"),[])),"v-d7fa887a":ce(()=>B(()=>import("./contributing.html.3aa886b1.js"),[])),"v-884fd4bc":ce(()=>B(()=>import("./css.html.8c2b9f6e.js"),[])),"v-040800dc":ce(()=>B(()=>import("./directory-structure.html.c7e6fd2d.js"),[])),"v-ef8c5e10":ce(()=>B(()=>import("./env.html.5728b740.js"),[])),"v-37e1c06f":ce(()=>B(()=>import("./faq.html.d692a6e2.js"),[])),"v-fb0f0066":ce(()=>B(()=>import("./getting-started.html.0eb9c5e2.js"),[])),"v-528b8b6c":ce(()=>B(()=>import("./image.html.50bf0bdd.js"),[])),"v-00cf7e23":ce(()=>B(()=>import("./mock.html.ab147021.js"),[])),"v-1d14d5cc":ce(()=>B(()=>import("./plugin.html.de4f8c7b.js"),[])),"v-7b96e3a4":ce(()=>B(()=>import("./public.html.d51b184d.js"),[])),"v-6320961c":ce(()=>B(()=>import("./route.html.32be9bfc.js"),[])),"v-3dba8814":ce(()=>B(()=>import("./runtime-config.html.90acb818.js"),[])),"v-7b48519a":ce(()=>B(()=>import("./template.html.8e33412a.js"),[])),"v-4acab794":ce(()=>B(()=>import("./upgrade3.html.c353af42.js"),[])),"v-a1a49808":ce(()=>B(()=>import("./api.html.87969763.js"),[])),"v-a951be94":ce(()=>B(()=>import("./cli.html.af8c16d8.js"),[])),"v-76cd065c":ce(()=>B(()=>import("./index.html.9bf5bab1.js"),[])),"v-76cb52e8":ce(()=>B(()=>import("./index.html.cbd2c491.js"),[])),"v-2c05b6e0":ce(()=>B(()=>import("./index.html.a2d6e9e6.js"),[])),"v-d61a9282":ce(()=>B(()=>import("./index.html.2877eae5.js"),[])),"v-494b840e":ce(()=>B(()=>import("./index.html.d2f518d0.js"),[])),"v-c5618810":ce(()=>B(()=>import("./api.html.06ea97fd.js"),[])),"v-2fe128e7":ce(()=>B(()=>import("./access.html.1a82486a.js"),[])),"v-323bda7e":ce(()=>B(()=>import("./editor.html.0d361fe8.js"),[])),"v-c253c956":ce(()=>B(()=>import("./enums.html.2b56cb9b.js"),[])),"v-0a0e491c":ce(()=>B(()=>import("./icon.html.09e6d802.js"),[])),"v-3cd5a4ef":ce(()=>B(()=>import("./jest.html.da327ef6.js"),[])),"v-355ee23e":ce(()=>B(()=>import("./layout.html.18970df4.js"),[])),"v-411c0c9e":ce(()=>B(()=>import("./locale.html.669c5454.js"),[])),"v-56ab05de":ce(()=>B(()=>import("./login.html.5cb3e152.js"),[])),"v-3c4e521e":ce(()=>B(()=>import("./model.html.17d86d37.js"),[])),"v-6f2f6a5a":ce(()=>B(()=>import("./pinia.html.eb251b6e.js"),[])),"v-b15becb0":ce(()=>B(()=>import("./qiankun.html.03151319.js"),[])),"v-41dee210":ce(()=>B(()=>import("./request.html.08c691d1.js"),[])),"v-5bf80046":ce(()=>B(()=>import("./sass.html.9236bc5e.js"),[])),"v-317f9008":ce(()=>B(()=>import("./swc.html.1459de3d.js"),[])),"v-5f4c684e":ce(()=>B(()=>import("./vuex.html.1794fc22.js"),[])),"v-1c0edac3":ce(()=>B(()=>import("./watermark.html.e99470a0.js"),[])),"v-392e58ee":ce(()=>B(()=>import("./windicss.html.afe09b0e.js"),[])),"v-3706649a":ce(()=>B(()=>import("./404.html.b697c9e3.js"),[]))};var Ot=(e={})=>e;function Gi(e,t,n){var r,o,i;t===void 0&&(t=50),n===void 0&&(n={});var s=(r=n.isImmediate)!=null&&r,a=(o=n.callback)!=null&&o,l=n.maxWait,u=Date.now(),c=[];function f(){if(l!==void 0){var p=Date.now()-u;if(p+t>=l)return l-p}return t}var d=function(){var p=[].slice.call(arguments),_=this;return new Promise(function(g,O){var h=s&&i===void 0;if(i!==void 0&&clearTimeout(i),i=setTimeout(function(){if(i=void 0,u=Date.now(),!s){var w=e.apply(_,p);a&&a(w),c.forEach(function(S){return(0,S.resolve)(w)}),c=[]}},f()),h){var E=e.apply(_,p);return a&&a(E),g(E)}c.push({resolve:g,reject:O})})};return d.cancel=function(p){i!==void 0&&clearTimeout(i),c.forEach(function(_){return(0,_.reject)(p)}),c=[]},d}/*! + * vue-router v4.1.6 + * (c) 2022 Eduardo San Martin Morote + * @license MIT + */const yn=typeof window<"u";function Wp(e){return e.__esModule||e[Symbol.toStringTag]==="Module"}const we=Object.assign;function zo(e,t){const n={};for(const r in t){const o=t[r];n[r]=ht(o)?o.map(e):e(o)}return n}const nr=()=>{},ht=Array.isArray,Jp=/\/$/,Qp=e=>e.replace(Jp,"");function Ko(e,t,n="/"){let r,o={},i="",s="";const a=t.indexOf("#");let l=t.indexOf("?");return a<l&&a>=0&&(l=-1),l>-1&&(r=t.slice(0,l),i=t.slice(l+1,a>-1?a:t.length),o=e(i)),a>-1&&(r=r||t.slice(0,a),s=t.slice(a,t.length)),r=Xp(r!=null?r:t,n),{fullPath:r+(i&&"?")+i+s,path:r,query:o,hash:s}}function Zp(e,t){const n=t.query?e(t.query):"";return t.path+(n&&"?")+n+(t.hash||"")}function Ys(e,t){return!t||!e.toLowerCase().startsWith(t.toLowerCase())?e:e.slice(t.length)||"/"}function Yp(e,t,n){const r=t.matched.length-1,o=n.matched.length-1;return r>-1&&r===o&&Rn(t.matched[r],n.matched[o])&&Bc(t.params,n.params)&&e(t.query)===e(n.query)&&t.hash===n.hash}function Rn(e,t){return(e.aliasOf||e)===(t.aliasOf||t)}function Bc(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(!Gp(e[n],t[n]))return!1;return!0}function Gp(e,t){return ht(e)?Gs(e,t):ht(t)?Gs(t,e):e===t}function Gs(e,t){return ht(t)?e.length===t.length&&e.every((n,r)=>n===t[r]):e.length===1&&e[0]===t}function Xp(e,t){if(e.startsWith("/"))return e;if(!e)return t;const n=t.split("/"),r=e.split("/");let o=n.length-1,i,s;for(i=0;i<r.length;i++)if(s=r[i],s!==".")if(s==="..")o>1&&o--;else break;return n.slice(0,o).join("/")+"/"+r.slice(i-(i===r.length?1:0)).join("/")}var dr;(function(e){e.pop="pop",e.push="push"})(dr||(dr={}));var rr;(function(e){e.back="back",e.forward="forward",e.unknown=""})(rr||(rr={}));function em(e){if(!e)if(yn){const t=document.querySelector("base");e=t&&t.getAttribute("href")||"/",e=e.replace(/^\w+:\/\/[^\/]+/,"")}else e="/";return e[0]!=="/"&&e[0]!=="#"&&(e="/"+e),Qp(e)}const tm=/^[^#]+#/;function nm(e,t){return e.replace(tm,"#")+t}function rm(e,t){const n=document.documentElement.getBoundingClientRect(),r=e.getBoundingClientRect();return{behavior:t.behavior,left:r.left-n.left-(t.left||0),top:r.top-n.top-(t.top||0)}}const xo=()=>({left:window.pageXOffset,top:window.pageYOffset});function om(e){let t;if("el"in e){const n=e.el,r=typeof n=="string"&&n.startsWith("#"),o=typeof n=="string"?r?document.getElementById(n.slice(1)):document.querySelector(n):n;if(!o)return;t=rm(o,e)}else t=e;"scrollBehavior"in document.documentElement.style?window.scrollTo(t):window.scrollTo(t.left!=null?t.left:window.pageXOffset,t.top!=null?t.top:window.pageYOffset)}function Xs(e,t){return(history.state?history.state.position-t:-1)+e}const hi=new Map;function im(e,t){hi.set(e,t)}function sm(e){const t=hi.get(e);return hi.delete(e),t}let am=()=>location.protocol+"//"+location.host;function Vc(e,t){const{pathname:n,search:r,hash:o}=t,i=e.indexOf("#");if(i>-1){let a=o.includes(e.slice(i))?e.slice(i).length:1,l=o.slice(a);return l[0]!=="/"&&(l="/"+l),Ys(l,"")}return Ys(n,e)+r+o}function lm(e,t,n,r){let o=[],i=[],s=null;const a=({state:d})=>{const p=Vc(e,location),_=n.value,g=t.value;let O=0;if(d){if(n.value=p,t.value=d,s&&s===_){s=null;return}O=g?d.position-g.position:0}else r(p);o.forEach(h=>{h(n.value,_,{delta:O,type:dr.pop,direction:O?O>0?rr.forward:rr.back:rr.unknown})})};function l(){s=n.value}function u(d){o.push(d);const p=()=>{const _=o.indexOf(d);_>-1&&o.splice(_,1)};return i.push(p),p}function c(){const{history:d}=window;!d.state||d.replaceState(we({},d.state,{scroll:xo()}),"")}function f(){for(const d of i)d();i=[],window.removeEventListener("popstate",a),window.removeEventListener("beforeunload",c)}return window.addEventListener("popstate",a),window.addEventListener("beforeunload",c),{pauseListeners:l,listen:u,destroy:f}}function ea(e,t,n,r=!1,o=!1){return{back:e,current:t,forward:n,replaced:r,position:window.history.length,scroll:o?xo():null}}function cm(e){const{history:t,location:n}=window,r={value:Vc(e,n)},o={value:t.state};o.value||i(r.value,{back:null,current:r.value,forward:null,position:t.length-1,replaced:!0,scroll:null},!0);function i(l,u,c){const f=e.indexOf("#"),d=f>-1?(n.host&&document.querySelector("base")?e:e.slice(f))+l:am()+e+l;try{t[c?"replaceState":"pushState"](u,"",d),o.value=u}catch(p){console.error(p),n[c?"replace":"assign"](d)}}function s(l,u){const c=we({},t.state,ea(o.value.back,l,o.value.forward,!0),u,{position:o.value.position});i(l,c,!0),r.value=l}function a(l,u){const c=we({},o.value,t.state,{forward:l,scroll:xo()});i(c.current,c,!0);const f=we({},ea(r.value,l,null),{position:c.position+1},u);i(l,f,!1),r.value=l}return{location:r,state:o,push:a,replace:s}}function um(e){e=em(e);const t=cm(e),n=lm(e,t.state,t.location,t.replace);function r(i,s=!0){s||n.pauseListeners(),history.go(i)}const o=we({location:"",base:e,go:r,createHref:nm.bind(null,e)},t,n);return Object.defineProperty(o,"location",{enumerable:!0,get:()=>t.location.value}),Object.defineProperty(o,"state",{enumerable:!0,get:()=>t.state.value}),o}function fm(e){return typeof e=="string"||e&&typeof e=="object"}function qc(e){return typeof e=="string"||typeof e=="symbol"}const St={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},Uc=Symbol("");var ta;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(ta||(ta={}));function jn(e,t){return we(new Error,{type:e,[Uc]:!0},t)}function wt(e,t){return e instanceof Error&&Uc in e&&(t==null||!!(e.type&t))}const na="[^/]+?",dm={sensitive:!1,strict:!1,start:!0,end:!0},pm=/[.+*?^${}()[\]/\\]/g;function mm(e,t){const n=we({},dm,t),r=[];let o=n.start?"^":"";const i=[];for(const u of e){const c=u.length?[]:[90];n.strict&&!u.length&&(o+="/");for(let f=0;f<u.length;f++){const d=u[f];let p=40+(n.sensitive?.25:0);if(d.type===0)f||(o+="/"),o+=d.value.replace(pm,"\\$&"),p+=40;else if(d.type===1){const{value:_,repeatable:g,optional:O,regexp:h}=d;i.push({name:_,repeatable:g,optional:O});const E=h||na;if(E!==na){p+=10;try{new RegExp(`(${E})`)}catch(S){throw new Error(`Invalid custom RegExp for param "${_}" (${E}): `+S.message)}}let w=g?`((?:${E})(?:/(?:${E}))*)`:`(${E})`;f||(w=O&&u.length<2?`(?:/${w})`:"/"+w),O&&(w+="?"),o+=w,p+=20,O&&(p+=-8),g&&(p+=-20),E===".*"&&(p+=-50)}c.push(p)}r.push(c)}if(n.strict&&n.end){const u=r.length-1;r[u][r[u].length-1]+=.7000000000000001}n.strict||(o+="/?"),n.end?o+="$":n.strict&&(o+="(?:/|$)");const s=new RegExp(o,n.sensitive?"":"i");function a(u){const c=u.match(s),f={};if(!c)return null;for(let d=1;d<c.length;d++){const p=c[d]||"",_=i[d-1];f[_.name]=p&&_.repeatable?p.split("/"):p}return f}function l(u){let c="",f=!1;for(const d of e){(!f||!c.endsWith("/"))&&(c+="/"),f=!1;for(const p of d)if(p.type===0)c+=p.value;else if(p.type===1){const{value:_,repeatable:g,optional:O}=p,h=_ in u?u[_]:"";if(ht(h)&&!g)throw new Error(`Provided param "${_}" is an array but it is not repeatable (* or + modifiers)`);const E=ht(h)?h.join("/"):h;if(!E)if(O)d.length<2&&(c.endsWith("/")?c=c.slice(0,-1):f=!0);else throw new Error(`Missing required param "${_}"`);c+=E}}return c||"/"}return{re:s,score:r,keys:i,parse:a,stringify:l}}function hm(e,t){let n=0;for(;n<e.length&&n<t.length;){const r=t[n]-e[n];if(r)return r;n++}return e.length<t.length?e.length===1&&e[0]===40+40?-1:1:e.length>t.length?t.length===1&&t[0]===40+40?1:-1:0}function vm(e,t){let n=0;const r=e.score,o=t.score;for(;n<r.length&&n<o.length;){const i=hm(r[n],o[n]);if(i)return i;n++}if(Math.abs(o.length-r.length)===1){if(ra(r))return 1;if(ra(o))return-1}return o.length-r.length}function ra(e){const t=e[e.length-1];return e.length>0&&t[t.length-1]<0}const gm={type:0,value:""},_m=/[a-zA-Z0-9_]/;function ym(e){if(!e)return[[]];if(e==="/")return[[gm]];if(!e.startsWith("/"))throw new Error(`Invalid path "${e}"`);function t(p){throw new Error(`ERR (${n})/"${u}": ${p}`)}let n=0,r=n;const o=[];let i;function s(){i&&o.push(i),i=[]}let a=0,l,u="",c="";function f(){!u||(n===0?i.push({type:0,value:u}):n===1||n===2||n===3?(i.length>1&&(l==="*"||l==="+")&&t(`A repeatable param (${u}) must be alone in its segment. eg: '/:ids+.`),i.push({type:1,value:u,regexp:c,repeatable:l==="*"||l==="+",optional:l==="*"||l==="?"})):t("Invalid state to consume buffer"),u="")}function d(){u+=l}for(;a<e.length;){if(l=e[a++],l==="\\"&&n!==2){r=n,n=4;continue}switch(n){case 0:l==="/"?(u&&f(),s()):l===":"?(f(),n=1):d();break;case 4:d(),n=r;break;case 1:l==="("?n=2:_m.test(l)?d():(f(),n=0,l!=="*"&&l!=="?"&&l!=="+"&&a--);break;case 2:l===")"?c[c.length-1]=="\\"?c=c.slice(0,-1)+l:n=3:c+=l;break;case 3:f(),n=0,l!=="*"&&l!=="?"&&l!=="+"&&a--,c="";break;default:t("Unknown state");break}}return n===2&&t(`Unfinished custom RegExp for param "${u}"`),f(),s(),o}function bm(e,t,n){const r=mm(ym(e.path),n),o=we(r,{record:e,parent:t,children:[],alias:[]});return t&&!o.record.aliasOf==!t.record.aliasOf&&t.children.push(o),o}function Em(e,t){const n=[],r=new Map;t=sa({strict:!1,end:!0,sensitive:!1},t);function o(c){return r.get(c)}function i(c,f,d){const p=!d,_=Om(c);_.aliasOf=d&&d.record;const g=sa(t,c),O=[_];if("alias"in c){const w=typeof c.alias=="string"?[c.alias]:c.alias;for(const S of w)O.push(we({},_,{components:d?d.record.components:_.components,path:S,aliasOf:d?d.record:_}))}let h,E;for(const w of O){const{path:S}=w;if(f&&S[0]!=="/"){const I=f.record.path,z=I[I.length-1]==="/"?"":"/";w.path=f.record.path+(S&&z+S)}if(h=bm(w,f,g),d?d.alias.push(h):(E=E||h,E!==h&&E.alias.push(h),p&&c.name&&!ia(h)&&s(c.name)),_.children){const I=_.children;for(let z=0;z<I.length;z++)i(I[z],h,d&&d.children[z])}d=d||h,(h.record.components&&Object.keys(h.record.components).length||h.record.name||h.record.redirect)&&l(h)}return E?()=>{s(E)}:nr}function s(c){if(qc(c)){const f=r.get(c);f&&(r.delete(c),n.splice(n.indexOf(f),1),f.children.forEach(s),f.alias.forEach(s))}else{const f=n.indexOf(c);f>-1&&(n.splice(f,1),c.record.name&&r.delete(c.record.name),c.children.forEach(s),c.alias.forEach(s))}}function a(){return n}function l(c){let f=0;for(;f<n.length&&vm(c,n[f])>=0&&(c.record.path!==n[f].record.path||!zc(c,n[f]));)f++;n.splice(f,0,c),c.record.name&&!ia(c)&&r.set(c.record.name,c)}function u(c,f){let d,p={},_,g;if("name"in c&&c.name){if(d=r.get(c.name),!d)throw jn(1,{location:c});g=d.record.name,p=we(oa(f.params,d.keys.filter(E=>!E.optional).map(E=>E.name)),c.params&&oa(c.params,d.keys.map(E=>E.name))),_=d.stringify(p)}else if("path"in c)_=c.path,d=n.find(E=>E.re.test(_)),d&&(p=d.parse(_),g=d.record.name);else{if(d=f.name?r.get(f.name):n.find(E=>E.re.test(f.path)),!d)throw jn(1,{location:c,currentLocation:f});g=d.record.name,p=we({},f.params,c.params),_=d.stringify(p)}const O=[];let h=d;for(;h;)O.unshift(h.record),h=h.parent;return{name:g,path:_,params:p,matched:O,meta:Sm(O)}}return e.forEach(c=>i(c)),{addRoute:i,resolve:u,removeRoute:s,getRoutes:a,getRecordMatcher:o}}function oa(e,t){const n={};for(const r of t)r in e&&(n[r]=e[r]);return n}function Om(e){return{path:e.path,redirect:e.redirect,name:e.name,meta:e.meta||{},aliasOf:void 0,beforeEnter:e.beforeEnter,props:wm(e),children:e.children||[],instances:{},leaveGuards:new Set,updateGuards:new Set,enterCallbacks:{},components:"components"in e?e.components||null:e.component&&{default:e.component}}}function wm(e){const t={},n=e.props||!1;if("component"in e)t.default=n;else for(const r in e.components)t[r]=typeof n=="boolean"?n:n[r];return t}function ia(e){for(;e;){if(e.record.aliasOf)return!0;e=e.parent}return!1}function Sm(e){return e.reduce((t,n)=>we(t,n.meta),{})}function sa(e,t){const n={};for(const r in e)n[r]=r in t?t[r]:e[r];return n}function zc(e,t){return t.children.some(n=>n===e||zc(e,n))}const Kc=/#/g,Pm=/&/g,Cm=/\//g,Im=/=/g,km=/\?/g,Wc=/\+/g,Am=/%5B/g,xm=/%5D/g,Jc=/%5E/g,Tm=/%60/g,Qc=/%7B/g,Lm=/%7C/g,Zc=/%7D/g,Rm=/%20/g;function Xi(e){return encodeURI(""+e).replace(Lm,"|").replace(Am,"[").replace(xm,"]")}function jm(e){return Xi(e).replace(Qc,"{").replace(Zc,"}").replace(Jc,"^")}function vi(e){return Xi(e).replace(Wc,"%2B").replace(Rm,"+").replace(Kc,"%23").replace(Pm,"%26").replace(Tm,"`").replace(Qc,"{").replace(Zc,"}").replace(Jc,"^")}function Dm(e){return vi(e).replace(Im,"%3D")}function Nm(e){return Xi(e).replace(Kc,"%23").replace(km,"%3F")}function Mm(e){return e==null?"":Nm(e).replace(Cm,"%2F")}function so(e){try{return decodeURIComponent(""+e)}catch{}return""+e}function $m(e){const t={};if(e===""||e==="?")return t;const r=(e[0]==="?"?e.slice(1):e).split("&");for(let o=0;o<r.length;++o){const i=r[o].replace(Wc," "),s=i.indexOf("="),a=so(s<0?i:i.slice(0,s)),l=s<0?null:so(i.slice(s+1));if(a in t){let u=t[a];ht(u)||(u=t[a]=[u]),u.push(l)}else t[a]=l}return t}function aa(e){let t="";for(let n in e){const r=e[n];if(n=Dm(n),r==null){r!==void 0&&(t+=(t.length?"&":"")+n);continue}(ht(r)?r.map(i=>i&&vi(i)):[r&&vi(r)]).forEach(i=>{i!==void 0&&(t+=(t.length?"&":"")+n,i!=null&&(t+="="+i))})}return t}function Hm(e){const t={};for(const n in e){const r=e[n];r!==void 0&&(t[n]=ht(r)?r.map(o=>o==null?null:""+o):r==null?r:""+r)}return t}const Fm=Symbol(""),la=Symbol(""),To=Symbol(""),es=Symbol(""),gi=Symbol("");function Un(){let e=[];function t(r){return e.push(r),()=>{const o=e.indexOf(r);o>-1&&e.splice(o,1)}}function n(){e=[]}return{add:t,list:()=>e,reset:n}}function $t(e,t,n,r,o){const i=r&&(r.enterCallbacks[o]=r.enterCallbacks[o]||[]);return()=>new Promise((s,a)=>{const l=f=>{f===!1?a(jn(4,{from:n,to:t})):f instanceof Error?a(f):fm(f)?a(jn(2,{from:t,to:f})):(i&&r.enterCallbacks[o]===i&&typeof f=="function"&&i.push(f),s())},u=e.call(r&&r.instances[o],t,n,l);let c=Promise.resolve(u);e.length<3&&(c=c.then(l)),c.catch(f=>a(f))})}function Wo(e,t,n,r){const o=[];for(const i of e)for(const s in i.components){let a=i.components[s];if(!(t!=="beforeRouteEnter"&&!i.instances[s]))if(Bm(a)){const u=(a.__vccOpts||a)[t];u&&o.push($t(u,n,r,i,s))}else{let l=a();o.push(()=>l.then(u=>{if(!u)return Promise.reject(new Error(`Couldn't resolve component "${s}" at "${i.path}"`));const c=Wp(u)?u.default:u;i.components[s]=c;const d=(c.__vccOpts||c)[t];return d&&$t(d,n,r,i,s)()}))}}return o}function Bm(e){return typeof e=="object"||"displayName"in e||"props"in e||"__vccOpts"in e}function ca(e){const t=Fe(To),n=Fe(es),r=Q(()=>t.resolve(V(e.to))),o=Q(()=>{const{matched:l}=r.value,{length:u}=l,c=l[u-1],f=n.matched;if(!c||!f.length)return-1;const d=f.findIndex(Rn.bind(null,c));if(d>-1)return d;const p=ua(l[u-2]);return u>1&&ua(c)===p&&f[f.length-1].path!==p?f.findIndex(Rn.bind(null,l[u-2])):d}),i=Q(()=>o.value>-1&&zm(n.params,r.value.params)),s=Q(()=>o.value>-1&&o.value===n.matched.length-1&&Bc(n.params,r.value.params));function a(l={}){return Um(l)?t[V(e.replace)?"replace":"push"](V(e.to)).catch(nr):Promise.resolve()}return{route:r,href:Q(()=>r.value.href),isActive:i,isExactActive:s,navigate:a}}const Vm=me({name:"RouterLink",compatConfig:{MODE:3},props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},useLink:ca,setup(e,{slots:t}){const n=Mn(ca(e)),{options:r}=Fe(To),o=Q(()=>({[fa(e.activeClass,r.linkActiveClass,"router-link-active")]:n.isActive,[fa(e.exactActiveClass,r.linkExactActiveClass,"router-link-exact-active")]:n.isExactActive}));return()=>{const i=t.default&&t.default(n);return e.custom?i:he("a",{"aria-current":n.isExactActive?e.ariaCurrentValue:null,href:n.href,onClick:n.navigate,class:o.value},i)}}}),qm=Vm;function Um(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)&&!e.defaultPrevented&&!(e.button!==void 0&&e.button!==0)){if(e.currentTarget&&e.currentTarget.getAttribute){const t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}function zm(e,t){for(const n in t){const r=t[n],o=e[n];if(typeof r=="string"){if(r!==o)return!1}else if(!ht(o)||o.length!==r.length||r.some((i,s)=>i!==o[s]))return!1}return!0}function ua(e){return e?e.aliasOf?e.aliasOf.path:e.path:""}const fa=(e,t,n)=>e!=null?e:t!=null?t:n,Km=me({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},compatConfig:{MODE:3},setup(e,{attrs:t,slots:n}){const r=Fe(gi),o=Q(()=>e.route||r.value),i=Fe(la,0),s=Q(()=>{let u=V(i);const{matched:c}=o.value;let f;for(;(f=c[u])&&!f.components;)u++;return u}),a=Q(()=>o.value.matched[s.value]);Bt(la,Q(()=>s.value+1)),Bt(Fm,a),Bt(gi,o);const l=Ce();return lt(()=>[l.value,a.value,e.name],([u,c,f],[d,p,_])=>{c&&(c.instances[f]=u,p&&p!==c&&u&&u===d&&(c.leaveGuards.size||(c.leaveGuards=p.leaveGuards),c.updateGuards.size||(c.updateGuards=p.updateGuards))),u&&c&&(!p||!Rn(c,p)||!d)&&(c.enterCallbacks[f]||[]).forEach(g=>g(u))},{flush:"post"}),()=>{const u=o.value,c=e.name,f=a.value,d=f&&f.components[c];if(!d)return da(n.default,{Component:d,route:u});const p=f.props[c],_=p?p===!0?u.params:typeof p=="function"?p(u):p:null,O=he(d,we({},_,t,{onVnodeUnmounted:h=>{h.component.isUnmounted&&(f.instances[c]=null)},ref:l}));return da(n.default,{Component:O,route:u})||O}}});function da(e,t){if(!e)return null;const n=e(t);return n.length===1?n[0]:n}const Yc=Km;function Wm(e){const t=Em(e.routes,e),n=e.parseQuery||$m,r=e.stringifyQuery||aa,o=e.history,i=Un(),s=Un(),a=Un(),l=sc(St);let u=St;yn&&e.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const c=zo.bind(null,x=>""+x),f=zo.bind(null,Mm),d=zo.bind(null,so);function p(x,U){let q,Z;return qc(x)?(q=t.getRecordMatcher(x),Z=U):Z=x,t.addRoute(Z,q)}function _(x){const U=t.getRecordMatcher(x);U&&t.removeRoute(U)}function g(){return t.getRoutes().map(x=>x.record)}function O(x){return!!t.getRecordMatcher(x)}function h(x,U){if(U=we({},U||l.value),typeof x=="string"){const m=Ko(n,x,U.path),v=t.resolve({path:m.path},U),P=o.createHref(m.fullPath);return we(m,v,{params:d(v.params),hash:so(m.hash),redirectedFrom:void 0,href:P})}let q;if("path"in x)q=we({},x,{path:Ko(n,x.path,U.path).path});else{const m=we({},x.params);for(const v in m)m[v]==null&&delete m[v];q=we({},x,{params:f(x.params)}),U.params=f(U.params)}const Z=t.resolve(q,U),de=x.hash||"";Z.params=c(d(Z.params));const Pe=Zp(r,we({},x,{hash:jm(de),path:Z.path})),le=o.createHref(Pe);return we({fullPath:Pe,hash:de,query:r===aa?Hm(x.query):x.query||{}},Z,{redirectedFrom:void 0,href:le})}function E(x){return typeof x=="string"?Ko(n,x,l.value.path):we({},x)}function w(x,U){if(u!==x)return jn(8,{from:U,to:x})}function S(x){return H(x)}function I(x){return S(we(E(x),{replace:!0}))}function z(x){const U=x.matched[x.matched.length-1];if(U&&U.redirect){const{redirect:q}=U;let Z=typeof q=="function"?q(x):q;return typeof Z=="string"&&(Z=Z.includes("?")||Z.includes("#")?Z=E(Z):{path:Z},Z.params={}),we({query:x.query,hash:x.hash,params:"path"in Z?{}:x.params},Z)}}function H(x,U){const q=u=h(x),Z=l.value,de=x.state,Pe=x.force,le=x.replace===!0,m=z(q);if(m)return H(we(E(m),{state:typeof m=="object"?we({},de,m.state):de,force:Pe,replace:le}),U||q);const v=q;v.redirectedFrom=U;let P;return!Pe&&Yp(r,Z,q)&&(P=jn(16,{to:v,from:Z}),De(Z,Z,!0,!1)),(P?Promise.resolve(P):M(v,Z)).catch(C=>wt(C)?wt(C,2)?C:Le(C):re(C,v,Z)).then(C=>{if(C){if(wt(C,2))return H(we({replace:le},E(C.to),{state:typeof C.to=="object"?we({},de,C.to.state):de,force:Pe}),U||v)}else C=K(v,Z,!0,le,de);return N(v,Z,C),C})}function b(x,U){const q=w(x,U);return q?Promise.reject(q):Promise.resolve()}function M(x,U){let q;const[Z,de,Pe]=Jm(x,U);q=Wo(Z.reverse(),"beforeRouteLeave",x,U);for(const m of Z)m.leaveGuards.forEach(v=>{q.push($t(v,x,U))});const le=b.bind(null,x,U);return q.push(le),hn(q).then(()=>{q=[];for(const m of i.list())q.push($t(m,x,U));return q.push(le),hn(q)}).then(()=>{q=Wo(de,"beforeRouteUpdate",x,U);for(const m of de)m.updateGuards.forEach(v=>{q.push($t(v,x,U))});return q.push(le),hn(q)}).then(()=>{q=[];for(const m of x.matched)if(m.beforeEnter&&!U.matched.includes(m))if(ht(m.beforeEnter))for(const v of m.beforeEnter)q.push($t(v,x,U));else q.push($t(m.beforeEnter,x,U));return q.push(le),hn(q)}).then(()=>(x.matched.forEach(m=>m.enterCallbacks={}),q=Wo(Pe,"beforeRouteEnter",x,U),q.push(le),hn(q))).then(()=>{q=[];for(const m of s.list())q.push($t(m,x,U));return q.push(le),hn(q)}).catch(m=>wt(m,8)?m:Promise.reject(m))}function N(x,U,q){for(const Z of a.list())Z(x,U,q)}function K(x,U,q,Z,de){const Pe=w(x,U);if(Pe)return Pe;const le=U===St,m=yn?history.state:{};q&&(Z||le?o.replace(x.fullPath,we({scroll:le&&m&&m.scroll},de)):o.push(x.fullPath,de)),l.value=x,De(x,U,q,le),Le()}let k;function R(){k||(k=o.listen((x,U,q)=>{if(!Ge.listening)return;const Z=h(x),de=z(Z);if(de){H(we(de,{replace:!0}),Z).catch(nr);return}u=Z;const Pe=l.value;yn&&im(Xs(Pe.fullPath,q.delta),xo()),M(Z,Pe).catch(le=>wt(le,12)?le:wt(le,2)?(H(le.to,Z).then(m=>{wt(m,20)&&!q.delta&&q.type===dr.pop&&o.go(-1,!1)}).catch(nr),Promise.reject()):(q.delta&&o.go(-q.delta,!1),re(le,Z,Pe))).then(le=>{le=le||K(Z,Pe,!1),le&&(q.delta&&!wt(le,8)?o.go(-q.delta,!1):q.type===dr.pop&&wt(le,20)&&o.go(-1,!1)),N(Z,Pe,le)}).catch(nr)}))}let $=Un(),ie=Un(),W;function re(x,U,q){Le(x);const Z=ie.list();return Z.length?Z.forEach(de=>de(x,U,q)):console.error(x),Promise.reject(x)}function se(){return W&&l.value!==St?Promise.resolve():new Promise((x,U)=>{$.add([x,U])})}function Le(x){return W||(W=!x,R(),$.list().forEach(([U,q])=>x?q(x):U()),$.reset()),x}function De(x,U,q,Z){const{scrollBehavior:de}=e;if(!yn||!de)return Promise.resolve();const Pe=!q&&sm(Xs(x.fullPath,0))||(Z||!q)&&history.state&&history.state.scroll||null;return Er().then(()=>de(x,U,Pe)).then(le=>le&&om(le)).catch(le=>re(le,x,U))}const Ne=x=>o.go(x);let Ae;const ct=new Set,Ge={currentRoute:l,listening:!0,addRoute:p,removeRoute:_,hasRoute:O,getRoutes:g,resolve:h,options:e,push:S,replace:I,go:Ne,back:()=>Ne(-1),forward:()=>Ne(1),beforeEach:i.add,beforeResolve:s.add,afterEach:a.add,onError:ie.add,isReady:se,install(x){const U=this;x.component("RouterLink",qm),x.component("RouterView",Yc),x.config.globalProperties.$router=U,Object.defineProperty(x.config.globalProperties,"$route",{enumerable:!0,get:()=>V(l)}),yn&&!Ae&&l.value===St&&(Ae=!0,S(o.location).catch(de=>{}));const q={};for(const de in St)q[de]=Q(()=>l.value[de]);x.provide(To,U),x.provide(es,Mn(q)),x.provide(gi,l);const Z=x.unmount;ct.add(x),x.unmount=function(){ct.delete(x),ct.size<1&&(u=St,k&&k(),k=null,l.value=St,Ae=!1,W=!1),Z()}}};return Ge}function hn(e){return e.reduce((t,n)=>t.then(()=>n()),Promise.resolve())}function Jm(e,t){const n=[],r=[],o=[],i=Math.max(t.matched.length,e.matched.length);for(let s=0;s<i;s++){const a=t.matched[s];a&&(e.matched.find(u=>Rn(u,a))?r.push(a):n.push(a));const l=e.matched[s];l&&(t.matched.find(u=>Rn(u,l))||o.push(l))}return[n,r,o]}function pn(){return Fe(To)}function Jt(){return Fe(es)}const Qm=({headerLinkSelector:e,headerAnchorSelector:t,delay:n,offset:r=5})=>{const o=pn(),s=Gi(()=>{var g,O,h,E;const a=Math.max(window.scrollY,document.documentElement.scrollTop,document.body.scrollTop);if(Math.abs(a-0)<r){pa(o,"");return}const u=window.innerHeight+a,c=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),f=Math.abs(c-u)<r,d=Array.from(document.querySelectorAll(e)),_=Array.from(document.querySelectorAll(t)).filter(w=>d.some(S=>S.hash===w.hash));for(let w=0;w<_.length;w++){const S=_[w],I=_[w+1],z=a>=((O=(g=S.parentElement)==null?void 0:g.offsetTop)!=null?O:0)-r,H=!I||a<((E=(h=I.parentElement)==null?void 0:h.offsetTop)!=null?E:0)-r;if(!(z&&H))continue;const M=decodeURIComponent(o.currentRoute.value.hash),N=decodeURIComponent(S.hash);if(M===N)return;if(f){for(let K=w+1;K<_.length;K++)if(M===decodeURIComponent(_[K].hash))return}pa(o,N);return}},n);Ye(()=>{window.addEventListener("scroll",s)}),Co(()=>{window.removeEventListener("scroll",s)})},pa=async(e,t)=>{const{scrollBehavior:n}=e.options;e.options.scrollBehavior=void 0,await e.replace({query:e.currentRoute.value.query,hash:t,force:!0}).finally(()=>e.options.scrollBehavior=n)},Zm="a.sidebar-item",Ym=".header-anchor",Gm=300,Xm=5,eh=Ot({setup(){Qm({headerLinkSelector:Zm,headerAnchorSelector:Ym,delay:Gm,offset:Xm})}});const th=he("svg",{class:"external-link-icon",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"},[he("path",{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}),he("polygon",{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"})]),nh=me({name:"ExternalLinkIcon",props:{locales:{type:Object,required:!1,default:()=>({})}},setup(e){const t=Fn(),n=Q(()=>{var r;return(r=e.locales[t.value])!=null?r:{openInNewWindow:"open in new window"}});return()=>he("span",[th,he("span",{class:"external-link-icon-sr-only"},n.value.openInNewWindow)])}}),rh={"/":{openInNewWindow:"在新窗口打开"}},oh=Ot({enhance({app:e}){e.component("ExternalLinkIcon",he(nh,{locales:rh}))}});/*! medium-zoom 1.0.8 | MIT License | https://github.com/francoischalifour/medium-zoom */var tn=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Rr=function(t){return t.tagName==="IMG"},ih=function(t){return NodeList.prototype.isPrototypeOf(t)},Ur=function(t){return t&&t.nodeType===1},ma=function(t){var n=t.currentSrc||t.src;return n.substr(-4).toLowerCase()===".svg"},ha=function(t){try{return Array.isArray(t)?t.filter(Rr):ih(t)?[].slice.call(t).filter(Rr):Ur(t)?[t].filter(Rr):typeof t=="string"?[].slice.call(document.querySelectorAll(t)).filter(Rr):[]}catch{throw new TypeError(`The provided selector is invalid. +Expects a CSS selector, a Node element, a NodeList or an array. +See: https://github.com/francoischalifour/medium-zoom`)}},sh=function(t){var n=document.createElement("div");return n.classList.add("medium-zoom-overlay"),n.style.background=t,n},ah=function(t){var n=t.getBoundingClientRect(),r=n.top,o=n.left,i=n.width,s=n.height,a=t.cloneNode(),l=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,u=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;return a.removeAttribute("id"),a.style.position="absolute",a.style.top=r+l+"px",a.style.left=o+u+"px",a.style.width=i+"px",a.style.height=s+"px",a.style.transform="",a},vn=function(t,n){var r=tn({bubbles:!1,cancelable:!1,detail:void 0},n);if(typeof window.CustomEvent=="function")return new CustomEvent(t,r);var o=document.createEvent("CustomEvent");return o.initCustomEvent(t,r.bubbles,r.cancelable,r.detail),o},lh=function e(t){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=window.Promise||function(k){function R(){}k(R,R)},o=function(k){var R=k.target;if(R===M){_();return}w.indexOf(R)!==-1&&g({target:R})},i=function(){if(!(I||!b.original)){var k=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;Math.abs(z-k)>H.scrollOffset&&setTimeout(_,150)}},s=function(k){var R=k.key||k.keyCode;(R==="Escape"||R==="Esc"||R===27)&&_()},a=function(){var k=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},R=k;if(k.background&&(M.style.background=k.background),k.container&&k.container instanceof Object&&(R.container=tn({},H.container,k.container)),k.template){var $=Ur(k.template)?k.template:document.querySelector(k.template);R.template=$}return H=tn({},H,R),w.forEach(function(ie){ie.dispatchEvent(vn("medium-zoom:update",{detail:{zoom:N}}))}),N},l=function(){var k=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};return e(tn({},H,k))},u=function(){for(var k=arguments.length,R=Array(k),$=0;$<k;$++)R[$]=arguments[$];var ie=R.reduce(function(W,re){return[].concat(W,ha(re))},[]);return ie.filter(function(W){return w.indexOf(W)===-1}).forEach(function(W){w.push(W),W.classList.add("medium-zoom-image")}),S.forEach(function(W){var re=W.type,se=W.listener,Le=W.options;ie.forEach(function(De){De.addEventListener(re,se,Le)})}),N},c=function(){for(var k=arguments.length,R=Array(k),$=0;$<k;$++)R[$]=arguments[$];b.zoomed&&_();var ie=R.length>0?R.reduce(function(W,re){return[].concat(W,ha(re))},[]):w;return ie.forEach(function(W){W.classList.remove("medium-zoom-image"),W.dispatchEvent(vn("medium-zoom:detach",{detail:{zoom:N}}))}),w=w.filter(function(W){return ie.indexOf(W)===-1}),N},f=function(k,R){var $=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};return w.forEach(function(ie){ie.addEventListener("medium-zoom:"+k,R,$)}),S.push({type:"medium-zoom:"+k,listener:R,options:$}),N},d=function(k,R){var $=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{};return w.forEach(function(ie){ie.removeEventListener("medium-zoom:"+k,R,$)}),S=S.filter(function(ie){return!(ie.type==="medium-zoom:"+k&&ie.listener.toString()===R.toString())}),N},p=function(){var k=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},R=k.target,$=function(){var W={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,right:0,bottom:0},re=void 0,se=void 0;if(H.container)if(H.container instanceof Object)W=tn({},W,H.container),re=W.width-W.left-W.right-H.margin*2,se=W.height-W.top-W.bottom-H.margin*2;else{var Le=Ur(H.container)?H.container:document.querySelector(H.container),De=Le.getBoundingClientRect(),Ne=De.width,Ae=De.height,ct=De.left,Ge=De.top;W=tn({},W,{width:Ne,height:Ae,left:ct,top:Ge})}re=re||W.width-H.margin*2,se=se||W.height-H.margin*2;var x=b.zoomedHd||b.original,U=ma(x)?re:x.naturalWidth||re,q=ma(x)?se:x.naturalHeight||se,Z=x.getBoundingClientRect(),de=Z.top,Pe=Z.left,le=Z.width,m=Z.height,v=Math.min(Math.max(le,U),re)/le,P=Math.min(Math.max(m,q),se)/m,C=Math.min(v,P),A=(-Pe+(re-le)/2+H.margin+W.left)/C,D=(-de+(se-m)/2+H.margin+W.top)/C,j="scale("+C+") translate3d("+A+"px, "+D+"px, 0)";b.zoomed.style.transform=j,b.zoomedHd&&(b.zoomedHd.style.transform=j)};return new r(function(ie){if(R&&w.indexOf(R)===-1){ie(N);return}var W=function Ne(){I=!1,b.zoomed.removeEventListener("transitionend",Ne),b.original.dispatchEvent(vn("medium-zoom:opened",{detail:{zoom:N}})),ie(N)};if(b.zoomed){ie(N);return}if(R)b.original=R;else if(w.length>0){var re=w;b.original=re[0]}else{ie(N);return}if(b.original.dispatchEvent(vn("medium-zoom:open",{detail:{zoom:N}})),z=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,I=!0,b.zoomed=ah(b.original),document.body.appendChild(M),H.template){var se=Ur(H.template)?H.template:document.querySelector(H.template);b.template=document.createElement("div"),b.template.appendChild(se.content.cloneNode(!0)),document.body.appendChild(b.template)}if(b.original.parentElement&&b.original.parentElement.tagName==="PICTURE"&&b.original.currentSrc&&(b.zoomed.src=b.original.currentSrc),document.body.appendChild(b.zoomed),window.requestAnimationFrame(function(){document.body.classList.add("medium-zoom--opened")}),b.original.classList.add("medium-zoom-image--hidden"),b.zoomed.classList.add("medium-zoom-image--opened"),b.zoomed.addEventListener("click",_),b.zoomed.addEventListener("transitionend",W),b.original.getAttribute("data-zoom-src")){b.zoomedHd=b.zoomed.cloneNode(),b.zoomedHd.removeAttribute("srcset"),b.zoomedHd.removeAttribute("sizes"),b.zoomedHd.removeAttribute("loading"),b.zoomedHd.src=b.zoomed.getAttribute("data-zoom-src"),b.zoomedHd.onerror=function(){clearInterval(Le),console.warn("Unable to reach the zoom image target "+b.zoomedHd.src),b.zoomedHd=null,$()};var Le=setInterval(function(){b.zoomedHd.complete&&(clearInterval(Le),b.zoomedHd.classList.add("medium-zoom-image--opened"),b.zoomedHd.addEventListener("click",_),document.body.appendChild(b.zoomedHd),$())},10)}else if(b.original.hasAttribute("srcset")){b.zoomedHd=b.zoomed.cloneNode(),b.zoomedHd.removeAttribute("sizes"),b.zoomedHd.removeAttribute("loading");var De=b.zoomedHd.addEventListener("load",function(){b.zoomedHd.removeEventListener("load",De),b.zoomedHd.classList.add("medium-zoom-image--opened"),b.zoomedHd.addEventListener("click",_),document.body.appendChild(b.zoomedHd),$()})}else $()})},_=function(){return new r(function(k){if(I||!b.original){k(N);return}var R=function $(){b.original.classList.remove("medium-zoom-image--hidden"),document.body.removeChild(b.zoomed),b.zoomedHd&&document.body.removeChild(b.zoomedHd),document.body.removeChild(M),b.zoomed.classList.remove("medium-zoom-image--opened"),b.template&&document.body.removeChild(b.template),I=!1,b.zoomed.removeEventListener("transitionend",$),b.original.dispatchEvent(vn("medium-zoom:closed",{detail:{zoom:N}})),b.original=null,b.zoomed=null,b.zoomedHd=null,b.template=null,k(N)};I=!0,document.body.classList.remove("medium-zoom--opened"),b.zoomed.style.transform="",b.zoomedHd&&(b.zoomedHd.style.transform=""),b.template&&(b.template.style.transition="opacity 150ms",b.template.style.opacity=0),b.original.dispatchEvent(vn("medium-zoom:close",{detail:{zoom:N}})),b.zoomed.addEventListener("transitionend",R)})},g=function(){var k=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},R=k.target;return b.original?_():p({target:R})},O=function(){return H},h=function(){return w},E=function(){return b.original},w=[],S=[],I=!1,z=0,H=n,b={original:null,zoomed:null,zoomedHd:null,template:null};Object.prototype.toString.call(t)==="[object Object]"?H=t:(t||typeof t=="string")&&u(t),H=tn({margin:0,background:"#fff",scrollOffset:40,container:null,template:null},H);var M=sh(H.background);document.addEventListener("click",o),document.addEventListener("keyup",s),document.addEventListener("scroll",i),window.addEventListener("resize",_);var N={open:p,close:_,toggle:g,update:a,clone:l,attach:u,detach:c,on:f,off:d,getOptions:O,getImages:h,getZoomedImage:E};return N};function ch(e,t){t===void 0&&(t={});var n=t.insertAt;if(!(!e||typeof document>"u")){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",n==="top"&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var uh=".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";ch(uh);const fh=lh,dh=Symbol("mediumZoom");const ph=".theme-default-content > img, .theme-default-content :not(a) > img",mh={},hh=300,vh=Ot({enhance({app:e,router:t}){const n=fh(mh);n.refresh=(r=ph)=>{n.detach(),n.attach(r)},e.provide(dh,n),t.afterEach(()=>{setTimeout(()=>n.refresh(),hh)})}});/** + * NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress + * @license MIT + */const ge={settings:{minimum:.08,easing:"ease",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,barSelector:'[role="bar"]',parent:"body",template:'<div class="bar" role="bar"></div>'},status:null,set:e=>{const t=ge.isStarted();e=Jo(e,ge.settings.minimum,1),ge.status=e===1?null:e;const n=ge.render(!t),r=n.querySelector(ge.settings.barSelector),o=ge.settings.speed,i=ge.settings.easing;return n.offsetWidth,gh(s=>{jr(r,{transform:"translate3d("+va(e)+"%,0,0)",transition:"all "+o+"ms "+i}),e===1?(jr(n,{transition:"none",opacity:"1"}),n.offsetWidth,setTimeout(function(){jr(n,{transition:"all "+o+"ms linear",opacity:"0"}),setTimeout(function(){ge.remove(),s()},o)},o)):setTimeout(()=>s(),o)}),ge},isStarted:()=>typeof ge.status=="number",start:()=>{ge.status||ge.set(0);const e=()=>{setTimeout(()=>{!ge.status||(ge.trickle(),e())},ge.settings.trickleSpeed)};return ge.settings.trickle&&e(),ge},done:e=>!e&&!ge.status?ge:ge.inc(.3+.5*Math.random()).set(1),inc:e=>{let t=ge.status;return t?(typeof e!="number"&&(e=(1-t)*Jo(Math.random()*t,.1,.95)),t=Jo(t+e,0,.994),ge.set(t)):ge.start()},trickle:()=>ge.inc(Math.random()*ge.settings.trickleRate),render:e=>{if(ge.isRendered())return document.getElementById("nprogress");ga(document.documentElement,"nprogress-busy");const t=document.createElement("div");t.id="nprogress",t.innerHTML=ge.settings.template;const n=t.querySelector(ge.settings.barSelector),r=e?"-100":va(ge.status||0),o=document.querySelector(ge.settings.parent);return jr(n,{transition:"all 0 linear",transform:"translate3d("+r+"%,0,0)"}),o!==document.body&&ga(o,"nprogress-custom-parent"),o==null||o.appendChild(t),t},remove:()=>{_a(document.documentElement,"nprogress-busy"),_a(document.querySelector(ge.settings.parent),"nprogress-custom-parent");const e=document.getElementById("nprogress");e&&_h(e)},isRendered:()=>!!document.getElementById("nprogress")},Jo=(e,t,n)=>e<t?t:e>n?n:e,va=e=>(-1+e)*100,gh=function(){const e=[];function t(){const n=e.shift();n&&n(t)}return function(n){e.push(n),e.length===1&&t()}}(),jr=function(){const e=["Webkit","O","Moz","ms"],t={};function n(s){return s.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,function(a,l){return l.toUpperCase()})}function r(s){const a=document.body.style;if(s in a)return s;let l=e.length;const u=s.charAt(0).toUpperCase()+s.slice(1);let c;for(;l--;)if(c=e[l]+u,c in a)return c;return s}function o(s){return s=n(s),t[s]||(t[s]=r(s))}function i(s,a,l){a=o(a),s.style[a]=l}return function(s,a){for(const l in a){const u=a[l];u!==void 0&&Object.prototype.hasOwnProperty.call(a,l)&&i(s,l,u)}}}(),Gc=(e,t)=>(typeof e=="string"?e:ts(e)).indexOf(" "+t+" ")>=0,ga=(e,t)=>{const n=ts(e),r=n+t;Gc(n,t)||(e.className=r.substring(1))},_a=(e,t)=>{const n=ts(e);if(!Gc(e,t))return;const r=n.replace(" "+t+" "," ");e.className=r.substring(1,r.length-1)},ts=e=>(" "+(e.className||"")+" ").replace(/\s+/gi," "),_h=e=>{e&&e.parentNode&&e.parentNode.removeChild(e)};const yh=()=>{Ye(()=>{const e=pn(),t=new Set;t.add(e.currentRoute.value.path),e.beforeEach(n=>{t.has(n.path)||ge.start()}),e.afterEach(n=>{t.add(n.path),ge.done()})})},bh=Ot({setup(){yh()}}),Eh=JSON.parse(`{"logo":"/logo.png","repo":"WeBankFinTech/fes.js","docsDir":"docs","docsBranch":"next","locales":{"/":{"navbar":[{"text":"指南","link":"/guide/"},{"text":"编译时配置","link":"/reference/config/"},{"text":"API","link":"/reference/api/"},{"text":"插件","link":"/reference/plugin/"},{"text":"CLI","link":"/reference/cli/"},{"text":"v3.0.1-0","children":[{"text":"v2.0","link":"https://fesjs.mumblefe.cn/2.0"},{"text":"v1.0","link":"https://fesjs.mumblefe.cn/1.0"}]},{"text":"了解更多","children":[{"text":"更新日志","link":"https://github.com/WeBankFinTech/fes.js/blob/next/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/builder.md","/guide/config.md","/guide/runtime-config.md","/guide/env.md","/guide/route.md","/guide/plugin.md","/guide/template.md","/guide/mock.md","/guide/upgrade3.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","/reference/plugin/plugins/login.md","/reference/plugin/plugins/swc.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":"在新窗口打开"}},"colorMode":"auto","colorModeSwitch":true,"navbar":[],"selectLanguageText":"Languages","selectLanguageAriaLabel":"Select language","sidebar":"auto","sidebarDepth":2,"editLink":true,"editLinkText":"Edit this page","lastUpdated":true,"lastUpdatedText":"Last Updated","contributors":true,"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","toggleColorMode":"toggle color mode","toggleSidebar":"toggle sidebar"}`),Oh=Ce(Eh),wh=()=>Oh,Xc=Symbol(""),Sh=()=>{const e=Fe(Xc);if(!e)throw new Error("useThemeLocaleData() is called without provider.");return e},Ph=(e,t)=>{var n;return{...e,...(n=e.locales)==null?void 0:n[t]}},Ch=Ot({enhance({app:e}){const t=wh(),n=e._context.provides[cs],r=Q(()=>Ph(t.value,n.value));e.provide(Xc,r),Object.defineProperties(e.config.globalProperties,{$theme:{get(){return t.value}},$themeLocale:{get(){return r.value}}})}}),Ih=me({__name:"Badge",props:{type:{type:String,required:!1,default:"tip"},text:{type:String,required:!1,default:""},vertical:{type:String,required:!1,default:void 0}},setup(e){return(t,n)=>(J(),ne("span",{class:et(["badge",e.type]),style:_r({verticalAlign:e.vertical})},[Ie(t.$slots,"default",{},()=>[Kt(Be(e.text),1)])],6))}}),Re=(e,t)=>{const n=e.__vccOpts||e;for(const[r,o]of t)n[r]=o;return n},kh=Re(Ih,[["__file","Badge.vue"]]),Ah=me({name:"CodeGroup",setup(e,{slots:t}){const n=Ce(-1),r=Ce([]),o=(a=n.value)=>{a<r.value.length-1?n.value=a+1:n.value=0,r.value[n.value].focus()},i=(a=n.value)=>{a>0?n.value=a-1:n.value=r.value.length-1,r.value[n.value].focus()},s=(a,l)=>{a.key===" "||a.key==="Enter"?(a.preventDefault(),n.value=l):a.key==="ArrowRight"?(a.preventDefault(),o(l)):a.key==="ArrowLeft"&&(a.preventDefault(),i(l))};return()=>{var l;const a=(((l=t.default)==null?void 0:l.call(t))||[]).filter(u=>u.type.name==="CodeGroupItem").map(u=>(u.props===null&&(u.props={}),u));return a.length===0?null:(n.value<0||n.value>a.length-1?(n.value=a.findIndex(u=>u.props.active===""||u.props.active===!0),n.value===-1&&(n.value=0)):a.forEach((u,c)=>{u.props.active=c===n.value}),he("div",{class:"code-group"},[he("div",{class:"code-group__nav"},he("ul",{class:"code-group__ul"},a.map((u,c)=>{const f=c===n.value;return he("li",{class:"code-group__li"},he("button",{ref:d=>{d&&(r.value[c]=d)},class:{"code-group__nav-tab":!0,"code-group__nav-tab-active":f},ariaPressed:f,ariaExpanded:f,onClick:()=>n.value=c,onKeydown:d=>s(d,c)},u.props.title))}))),a]))}}}),xh=["aria-selected"],Th=me({name:"CodeGroupItem"}),Lh=me({...Th,props:{title:{type:String,required:!0},active:{type:Boolean,required:!1,default:!1}},setup(e){return(t,n)=>(J(),ne("div",{class:et(["code-group-item",{"code-group-item__active":e.active}]),"aria-selected":e.active},[Ie(t.$slots,"default")],10,xh))}}),Rh=Re(Lh,[["__file","CodeGroupItem.vue"]]);var ya;const eu=typeof window<"u",jh=e=>typeof e=="function",Dh=e=>typeof e=="string",Nh=()=>{};eu&&((ya=window==null?void 0:window.navigator)==null?void 0:ya.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function pr(e){return typeof e=="function"?e():V(e)}function Mh(e,t){function n(...r){return new Promise((o,i)=>{Promise.resolve(e(()=>t.apply(this,r),{fn:t,thisArg:this,args:r})).then(o).catch(i)})}return n}const tu=e=>e();function $h(e=tu){const t=Ce(!0);function n(){t.value=!1}function r(){t.value=!0}const o=(...i)=>{t.value&&e(...i)};return{isActive:Oo(t),pause:n,resume:r,eventFilter:o}}function Hh(e){return e}function nu(e){return zl()?(Cf(e),!0):!1}function Fh(e){return typeof e=="function"?Q(e):Ce(e)}function Bh(e,t=!0){Rc()?Ye(e):t?e():Er(e)}function Vh(e=!1,t={}){const{truthyValue:n=!0,falsyValue:r=!1}=t,o=Ve(e),i=Ce(e);function s(a){if(arguments.length)return i.value=a,i.value;{const l=pr(n);return i.value=i.value===l?pr(r):l,i.value}}return o?s:[i,s]}var ba=Object.getOwnPropertySymbols,qh=Object.prototype.hasOwnProperty,Uh=Object.prototype.propertyIsEnumerable,zh=(e,t)=>{var n={};for(var r in e)qh.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&ba)for(var r of ba(e))t.indexOf(r)<0&&Uh.call(e,r)&&(n[r]=e[r]);return n};function Kh(e,t,n={}){const r=n,{eventFilter:o=tu}=r,i=zh(r,["eventFilter"]);return lt(e,Mh(o,t),i)}var Wh=Object.defineProperty,Jh=Object.defineProperties,Qh=Object.getOwnPropertyDescriptors,ao=Object.getOwnPropertySymbols,ru=Object.prototype.hasOwnProperty,ou=Object.prototype.propertyIsEnumerable,Ea=(e,t,n)=>t in e?Wh(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,Zh=(e,t)=>{for(var n in t||(t={}))ru.call(t,n)&&Ea(e,n,t[n]);if(ao)for(var n of ao(t))ou.call(t,n)&&Ea(e,n,t[n]);return e},Yh=(e,t)=>Jh(e,Qh(t)),Gh=(e,t)=>{var n={};for(var r in e)ru.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&ao)for(var r of ao(e))t.indexOf(r)<0&&ou.call(e,r)&&(n[r]=e[r]);return n};function Xh(e,t,n={}){const r=n,{eventFilter:o}=r,i=Gh(r,["eventFilter"]),{eventFilter:s,pause:a,resume:l,isActive:u}=$h(o);return{stop:Kh(e,t,Yh(Zh({},i),{eventFilter:s})),pause:a,resume:l,isActive:u}}function ev(e){var t;const n=pr(e);return(t=n==null?void 0:n.$el)!=null?t:n}const lo=eu?window:void 0;function Oa(...e){let t,n,r,o;if(Dh(e[0])||Array.isArray(e[0])?([n,r,o]=e,t=lo):[t,n,r,o]=e,!t)return Nh;Array.isArray(n)||(n=[n]),Array.isArray(r)||(r=[r]);const i=[],s=()=>{i.forEach(c=>c()),i.length=0},a=(c,f,d,p)=>(c.addEventListener(f,d,p),()=>c.removeEventListener(f,d,p)),l=lt(()=>[ev(t),pr(o)],([c,f])=>{s(),c&&i.push(...n.flatMap(d=>r.map(p=>a(c,d,p,f))))},{immediate:!0,flush:"post"}),u=()=>{l(),s()};return nu(u),u}function tv(e,t=!1){const n=Ce(),r=()=>n.value=Boolean(e());return r(),Bh(r,t),n}function nv(e,t={}){const{window:n=lo}=t,r=tv(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let o;const i=Ce(!1),s=()=>{!o||("removeEventListener"in o?o.removeEventListener("change",a):o.removeListener(a))},a=()=>{!r.value||(s(),o=n.matchMedia(Fh(e).value),i.value=o.matches,"addEventListener"in o?o.addEventListener("change",a):o.addListener(a))};return _d(a),nu(()=>s()),i}const _i=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},yi="__vueuse_ssr_handlers__";_i[yi]=_i[yi]||{};const rv=_i[yi];function ov(e,t){return rv[e]||t}function iv(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}var sv=Object.defineProperty,wa=Object.getOwnPropertySymbols,av=Object.prototype.hasOwnProperty,lv=Object.prototype.propertyIsEnumerable,Sa=(e,t,n)=>t in e?sv(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,Pa=(e,t)=>{for(var n in t||(t={}))av.call(t,n)&&Sa(e,n,t[n]);if(wa)for(var n of wa(t))lv.call(t,n)&&Sa(e,n,t[n]);return e};const cv={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},Ca="vueuse-storage";function uv(e,t,n,r={}){var o;const{flush:i="pre",deep:s=!0,listenToStorageChanges:a=!0,writeDefaults:l=!0,mergeDefaults:u=!1,shallow:c,window:f=lo,eventFilter:d,onError:p=b=>{console.error(b)}}=r,_=(c?sc:Ce)(t);if(!n)try{n=ov("getDefaultStorage",()=>{var b;return(b=lo)==null?void 0:b.localStorage})()}catch(b){p(b)}if(!n)return _;const g=pr(t),O=iv(g),h=(o=r.serializer)!=null?o:cv[O],{pause:E,resume:w}=Xh(_,()=>S(_.value),{flush:i,deep:s,eventFilter:d});return f&&a&&(Oa(f,"storage",H),Oa(f,Ca,z)),H(),_;function S(b){try{if(b==null)n.removeItem(e);else{const M=h.write(b),N=n.getItem(e);N!==M&&(n.setItem(e,M),f&&f.dispatchEvent(new CustomEvent(Ca,{detail:{key:e,oldValue:N,newValue:M,storageArea:n}})))}}catch(M){p(M)}}function I(b){const M=b?b.newValue:n.getItem(e);if(M==null)return l&&g!==null&&n.setItem(e,h.write(g)),g;if(!b&&u){const N=h.read(M);return jh(u)?u(N,g):O==="object"&&!Array.isArray(N)?Pa(Pa({},g),N):N}else return typeof M!="string"?M:h.read(M)}function z(b){H(b.detail)}function H(b){if(!(b&&b.storageArea!==n)){if(b&&b.key==null){_.value=g;return}if(!(b&&b.key!==e)){E();try{_.value=I(b)}catch(M){p(M)}finally{b?Er(w):w()}}}}}function fv(e){return nv("(prefers-color-scheme: dark)",e)}var Ia;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(Ia||(Ia={}));var dv=Object.defineProperty,ka=Object.getOwnPropertySymbols,pv=Object.prototype.hasOwnProperty,mv=Object.prototype.propertyIsEnumerable,Aa=(e,t,n)=>t in e?dv(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,hv=(e,t)=>{for(var n in t||(t={}))pv.call(t,n)&&Aa(e,n,t[n]);if(ka)for(var n of ka(t))mv.call(t,n)&&Aa(e,n,t[n]);return e};const vv={easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]};hv({linear:Hh},vv);const Qe=()=>Sh(),iu=Symbol(""),ns=()=>{const e=Fe(iu);if(!e)throw new Error("useDarkMode() is called without provider.");return e},gv=()=>{const e=Qe(),t=fv(),n=uv("vuepress-color-scheme",e.value.colorMode),r=Q({get(){return e.value.colorModeSwitch?n.value==="auto"?t.value:n.value==="dark":e.value.colorMode==="dark"},set(o){o===t.value?n.value="auto":n.value=o?"dark":"light"}});Bt(iu,r),_v(r)},_v=e=>{const t=(n=e.value)=>{const r=window==null?void 0:window.document.querySelector("html");r==null||r.classList.toggle("dark",n)};Ye(()=>{lt(e,t,{immediate:!0})}),Io(()=>t())},su=(...e)=>{const n=pn().resolve(...e),r=n.matched[n.matched.length-1];if(!(r!=null&&r.redirect))return n;const{redirect:o}=r,i=fe(o)?o(n):o,s=Oe(i)?{path:i}:i;return su({hash:n.hash,query:n.query,params:n.params,...s})},rs=e=>{const t=su(encodeURI(e));return{text:t.meta.title||e,link:t.name==="404"?e:t.fullPath}};let Qo=null,zn=null;const yv={wait:()=>Qo,pending:()=>{Qo=new Promise(e=>zn=e)},resolve:()=>{zn==null||zn(),Qo=null,zn=null}},au=()=>yv,lu=Symbol("sidebarItems"),os=()=>{const e=Fe(lu);if(!e)throw new Error("useSidebarItems() is called without provider.");return e},bv=()=>{const e=Qe(),t=At(),n=Q(()=>Ev(t.value,e.value));Bt(lu,n)},Ev=(e,t)=>{var o,i,s,a;const n=(i=(o=e.sidebar)!=null?o:t.sidebar)!=null?i:"auto",r=(a=(s=e.sidebarDepth)!=null?s:t.sidebarDepth)!=null?a:2;return e.home||n===!1?[]:n==="auto"?wv(r):oe(n)?cu(n,r):Yi(n)?Sv(n,r):[]},Ov=(e,t)=>({text:e.title,link:e.link,children:is(e.children,t)}),is=(e,t)=>t>0?e.map(n=>Ov(n,t-1)):[],wv=e=>{const t=Vt();return[{text:t.value.title,children:is(t.value.headers,e)}]},cu=(e,t)=>{const n=Jt(),r=Vt(),o=i=>{var a;let s;if(Oe(i)?s=rs(i):s=i,s.children)return{...s,children:s.children.map(l=>o(l))};if(s.link===n.path){const l=((a=r.value.headers[0])==null?void 0:a.level)===1?r.value.headers[0].children:r.value.headers;return{...s,children:is(l,t)}}return s};return e.map(i=>o(i))},Sv=(e,t)=>{var i;const n=Jt(),r=Hc(e,n.path),o=(i=e[r])!=null?i:[];return cu(o,t)},Pv={},Cv={class:"theme-default-content"};function Iv(e,t){const n=Tt("Content");return J(),ne("div",Cv,[ae(n)])}const kv=Re(Pv,[["render",Iv],["__file","HomeContent.vue"]]),Av={key:0,class:"features"},xv=me({__name:"HomeFeatures",setup(e){const t=At(),n=Q(()=>oe(t.value.features)?t.value.features:[]);return(r,o)=>V(n).length?(J(),ne("div",Av,[(J(!0),ne(ke,null,Ut(V(n),i=>(J(),ne("div",{key:i.title,class:"feature"},[ye("h2",null,Be(i.title),1),ye("p",null,Be(i.details),1)]))),128))])):Me("v-if",!0)}}),Tv=Re(xv,[["__file","HomeFeatures.vue"]]),Lv=["innerHTML"],Rv=["textContent"],jv=me({__name:"HomeFooter",setup(e){const t=At(),n=Q(()=>t.value.footer),r=Q(()=>t.value.footerHtml);return(o,i)=>V(n)?(J(),ne(ke,{key:0},[Me(" eslint-disable-next-line vue/no-v-html "),V(r)?(J(),ne("div",{key:0,class:"footer",innerHTML:V(n)},null,8,Lv)):(J(),ne("div",{key:1,class:"footer",textContent:Be(V(n))},null,8,Rv))],64)):Me("v-if",!0)}}),Dv=Re(jv,[["__file","HomeFooter.vue"]]),Nv=["href","rel","target","aria-label"],Mv=me({inheritAttrs:!1}),$v=me({...Mv,__name:"AutoLink",props:{item:{type:Object,required:!0}},setup(e){const t=e,n=Jt(),r=us(),{item:o}=zi(t),i=Q(()=>wr(o.value.link)),s=Q(()=>zp(o.value.link)||Kp(o.value.link)),a=Q(()=>{if(!s.value){if(o.value.target)return o.value.target;if(i.value)return"_blank"}}),l=Q(()=>a.value==="_blank"),u=Q(()=>!i.value&&!s.value&&!l.value),c=Q(()=>{if(!s.value){if(o.value.rel)return o.value.rel;if(l.value)return"noopener noreferrer"}}),f=Q(()=>o.value.ariaLabel||o.value.text),d=Q(()=>{const g=Object.keys(r.value.locales);return g.length?!g.some(O=>O===o.value.link):o.value.link!=="/"}),p=Q(()=>d.value?n.path.startsWith(o.value.link):!1),_=Q(()=>u.value?o.value.activeMatch?new RegExp(o.value.activeMatch).test(n.path):p.value:!1);return(g,O)=>{const h=Tt("RouterLink"),E=Tt("AutoLinkExternalIcon");return V(u)?(J(),He(h,pi({key:0,class:{"router-link-active":V(_)},to:V(o).link,"aria-label":V(f)},g.$attrs),{default:qe(()=>[Ie(g.$slots,"before"),Kt(" "+Be(V(o).text)+" ",1),Ie(g.$slots,"after")]),_:3},16,["class","to","aria-label"])):(J(),ne("a",pi({key:1,class:"external-link",href:V(o).link,rel:V(c),target:V(a),"aria-label":V(f)},g.$attrs),[Ie(g.$slots,"before"),Kt(" "+Be(V(o).text)+" ",1),V(l)?(J(),He(E,{key:0})):Me("v-if",!0),Ie(g.$slots,"after")],16,Nv))}}}),It=Re($v,[["__file","AutoLink.vue"]]),Hv={class:"hero"},Fv={key:0,id:"main-title"},Bv={key:1,class:"description"},Vv={key:2,class:"actions"},qv=me({__name:"HomeHero",setup(e){const t=At(),n=fs(),r=ns(),o=Q(()=>r.value&&t.value.heroImageDark!==void 0?t.value.heroImageDark:t.value.heroImage),i=Q(()=>t.value.heroAlt||a.value||"hero"),s=Q(()=>t.value.heroHeight||280),a=Q(()=>t.value.heroText===null?null:t.value.heroText||n.value.title||"Hello"),l=Q(()=>t.value.tagline===null?null:t.value.tagline||n.value.description||"Welcome to your VuePress site"),u=Q(()=>oe(t.value.actions)?t.value.actions.map(({text:f,link:d,type:p="primary"})=>({text:f,link:d,type:p})):[]),c=()=>{if(!o.value)return null;const f=he("img",{src:jo(o.value),alt:i.value,height:s.value});return t.value.heroImageDark===void 0?f:he(ds,()=>f)};return(f,d)=>(J(),ne("header",Hv,[ae(c),V(a)?(J(),ne("h1",Fv,Be(V(a)),1)):Me("v-if",!0),V(l)?(J(),ne("p",Bv,Be(V(l)),1)):Me("v-if",!0),V(u).length?(J(),ne("p",Vv,[(J(!0),ne(ke,null,Ut(V(u),p=>(J(),He(It,{key:p.text,class:et(["action-button",[p.type]]),item:p},null,8,["class","item"]))),128))])):Me("v-if",!0)]))}}),Uv=Re(qv,[["__file","HomeHero.vue"]]),zv={class:"home"},Kv=me({__name:"Home",setup(e){return(t,n)=>(J(),ne("main",zv,[ae(Uv),ae(Tv),ae(kv),ae(Dv)]))}}),Wv=Re(Kv,[["__file","Home.vue"]]),Jv=me({__name:"NavbarBrand",setup(e){const t=Fn(),n=fs(),r=Qe(),o=ns(),i=Q(()=>r.value.home||t.value),s=Q(()=>n.value.title),a=Q(()=>o.value&&r.value.logoDark!==void 0?r.value.logoDark:r.value.logo),l=()=>{if(!a.value)return null;const u=he("img",{class:"logo",src:jo(a.value),alt:s.value});return r.value.logoDark===void 0?u:he(ds,()=>u)};return(u,c)=>{const f=Tt("RouterLink");return J(),He(f,{to:V(i)},{default:qe(()=>[ae(l),V(s)?(J(),ne("span",{key:0,class:et(["site-name",{"can-hide":V(a)}])},Be(V(s)),3)):Me("v-if",!0)]),_:1},8,["to"])}}}),Qv=Re(Jv,[["__file","NavbarBrand.vue"]]),Zv=me({__name:"DropdownTransition",setup(e){const t=r=>{r.style.height=r.scrollHeight+"px"},n=r=>{r.style.height=""};return(r,o)=>(J(),He($n,{name:"dropdown",onEnter:t,onAfterEnter:n,onBeforeLeave:t},{default:qe(()=>[Ie(r.$slots,"default")]),_:3}))}}),uu=Re(Zv,[["__file","DropdownTransition.vue"]]),Yv=["aria-label"],Gv={class:"title"},Xv=ye("span",{class:"arrow down"},null,-1),eg=["aria-label"],tg={class:"title"},ng={class:"navbar-dropdown"},rg={class:"navbar-dropdown-subtitle"},og={key:1},ig={class:"navbar-dropdown-subitem-wrapper"},sg=me({__name:"NavbarDropdown",props:{item:{type:Object,required:!0}},setup(e){const t=e,{item:n}=zi(t),r=Q(()=>n.value.ariaLabel||n.value.text),o=Ce(!1),i=Jt();lt(()=>i.path,()=>{o.value=!1});const s=l=>{l.detail===0?o.value=!o.value:o.value=!1},a=(l,u)=>u[u.length-1]===l;return(l,u)=>(J(),ne("div",{class:et(["navbar-dropdown-wrapper",{open:o.value}])},[ye("button",{class:"navbar-dropdown-title",type:"button","aria-label":V(r),onClick:s},[ye("span",Gv,Be(V(n).text),1),Xv],8,Yv),ye("button",{class:"navbar-dropdown-title-mobile",type:"button","aria-label":V(r),onClick:u[0]||(u[0]=c=>o.value=!o.value)},[ye("span",tg,Be(V(n).text),1),ye("span",{class:et(["arrow",o.value?"down":"right"])},null,2)],8,eg),ae(uu,null,{default:qe(()=>[to(ye("ul",ng,[(J(!0),ne(ke,null,Ut(V(n).children,c=>(J(),ne("li",{key:c.text,class:"navbar-dropdown-item"},[c.children?(J(),ne(ke,{key:0},[ye("h4",rg,[c.link?(J(),He(It,{key:0,item:c,onFocusout:f=>a(c,V(n).children)&&c.children.length===0&&(o.value=!1)},null,8,["item","onFocusout"])):(J(),ne("span",og,Be(c.text),1))]),ye("ul",ig,[(J(!0),ne(ke,null,Ut(c.children,f=>(J(),ne("li",{key:f.link,class:"navbar-dropdown-subitem"},[ae(It,{item:f,onFocusout:d=>a(f,c.children)&&a(c,V(n).children)&&(o.value=!1)},null,8,["item","onFocusout"])]))),128))])],64)):(J(),He(It,{key:1,item:c,onFocusout:f=>a(c,V(n).children)&&(o.value=!1)},null,8,["item","onFocusout"]))]))),128))],512),[[io,o.value]])]),_:1})],2))}}),ag=Re(sg,[["__file","NavbarDropdown.vue"]]),xa=e=>decodeURI(e).replace(/#.*$/,"").replace(/(index)?\.(md|html)$/,""),lg=(e,t)=>{if(t.hash===e)return!0;const n=xa(t.path),r=xa(e);return n===r},fu=(e,t)=>e.link&&lg(e.link,t)?!0:e.children?e.children.some(n=>fu(n,t)):!1,du=e=>!wr(e)||/github\.com/.test(e)?"GitHub":/bitbucket\.org/.test(e)?"Bitbucket":/gitlab\.com/.test(e)?"GitLab":/gitee\.com/.test(e)?"Gitee":null,cg={GitHub:":repo/edit/:branch/:path",GitLab:":repo/-/edit/:branch/:path",Gitee:":repo/edit/:branch/:path",Bitbucket:":repo/src/:branch/:path?mode=edit&spa=0&at=:branch&fileviewer=file-view-default"},ug=({docsRepo:e,editLinkPattern:t})=>{if(t)return t;const n=du(e);return n!==null?cg[n]:null},fg=({docsRepo:e,docsBranch:t,docsDir:n,filePathRelative:r,editLinkPattern:o})=>{if(!r)return null;const i=ug({docsRepo:e,editLinkPattern:o});return i?i.replace(/:repo/,wr(e)?e:`https://github.com/${e}`).replace(/:branch/,t).replace(/:path/,$c(`${Mc(n)}/${r}`)):null},dg={key:0,class:"navbar-items"},pg=me({__name:"NavbarItems",setup(e){const t=()=>{const c=pn(),f=Fn(),d=fs(),p=Qe();return Q(()=>{var w,S,I;const _=Object.keys(d.value.locales);if(_.length<2)return[];const g=c.currentRoute.value.path,O=c.currentRoute.value.fullPath,h=c.currentRoute.value.hash;return[{text:(w=p.value.selectLanguageText)!=null?w:"unknown language",ariaLabel:(I=(S=p.value.selectLanguageAriaLabel)!=null?S:p.value.selectLanguageText)!=null?I:"unknown language",children:_.map(z=>{var k,R,$,ie,W,re;const H=(R=(k=d.value.locales)==null?void 0:k[z])!=null?R:{},b=(ie=($=p.value.locales)==null?void 0:$[z])!=null?ie:{},M=`${H.lang}`,N=(W=b.selectLanguageName)!=null?W:M;let K;if(M===d.value.lang)K=O;else{const se=g.replace(f.value,z);c.getRoutes().some(Le=>Le.path===se)?K=`${se}${h}`:K=(re=b.home)!=null?re:z}return{text:N,link:K}})}]})},n=()=>{const c=Qe(),f=Q(()=>c.value.repo),d=Q(()=>f.value?du(f.value):null),p=Q(()=>f.value&&!wr(f.value)?`https://github.com/${f.value}`:f.value),_=Q(()=>p.value?c.value.repoLabel?c.value.repoLabel:d.value===null?"Source":d.value:null);return Q(()=>!p.value||!_.value?[]:[{text:_.value,link:p.value}])},r=c=>Oe(c)?rs(c):c.children?{...c,children:c.children.map(r)}:c,o=()=>{const c=Qe();return Q(()=>(c.value.navbar||[]).map(r))},i=Ce(!1),s=o(),a=t(),l=n(),u=Q(()=>[...s.value,...a.value,...l.value]);return Ye(()=>{const f=()=>{window.innerWidth<719?i.value=!0:i.value=!1};f(),window.addEventListener("resize",f,!1),window.addEventListener("orientationchange",f,!1)}),(c,f)=>V(u).length?(J(),ne("nav",dg,[(J(!0),ne(ke,null,Ut(V(u),d=>(J(),ne("div",{key:d.text,class:"navbar-item"},[d.children?(J(),He(ag,{key:0,item:d,class:et(i.value?"mobile":"")},null,8,["item","class"])):(J(),He(It,{key:1,item:d},null,8,["item"]))]))),128))])):Me("v-if",!0)}}),pu=Re(pg,[["__file","NavbarItems.vue"]]),mg=["title"],hg={class:"icon",focusable:"false",viewBox:"0 0 32 32"},vg=tp('<path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path>',9),gg=[vg],_g={class:"icon",focusable:"false",viewBox:"0 0 32 32"},yg=ye("path",{d:"M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z",fill:"currentColor"},null,-1),bg=[yg],Eg=me({__name:"ToggleColorModeButton",setup(e){const t=Qe(),n=ns(),r=()=>{n.value=!n.value};return(o,i)=>(J(),ne("button",{class:"toggle-color-mode-button",title:V(t).toggleColorMode,onClick:r},[to((J(),ne("svg",hg,gg,512)),[[io,!V(n)]]),to((J(),ne("svg",_g,bg,512)),[[io,V(n)]])],8,mg))}}),Og=Re(Eg,[["__file","ToggleColorModeButton.vue"]]),wg=["title"],Sg=ye("div",{class:"icon","aria-hidden":"true"},[ye("span"),ye("span"),ye("span")],-1),Pg=[Sg],Cg=me({__name:"ToggleSidebarButton",emits:["toggle"],setup(e){const t=Qe();return(n,r)=>(J(),ne("div",{class:"toggle-sidebar-button",title:V(t).toggleSidebar,"aria-expanded":"false",role:"button",tabindex:"0",onClick:r[0]||(r[0]=o=>n.$emit("toggle"))},Pg,8,wg))}}),Ig=Re(Cg,[["__file","ToggleSidebarButton.vue"]]),kg=me({__name:"Navbar",emits:["toggle-sidebar"],setup(e){const t=Qe(),n=Ce(null),r=Ce(null),o=Ce(0),i=Q(()=>o.value?{maxWidth:o.value+"px"}:{});Ye(()=>{const l=s(n.value,"paddingLeft")+s(n.value,"paddingRight"),u=()=>{var c;window.innerWidth<719?o.value=0:o.value=n.value.offsetWidth-l-(((c=r.value)==null?void 0:c.offsetWidth)||0)};u(),window.addEventListener("resize",u,!1),window.addEventListener("orientationchange",u,!1)});function s(a,l){var f,d,p;const u=(p=(d=(f=a==null?void 0:a.ownerDocument)==null?void 0:f.defaultView)==null?void 0:d.getComputedStyle(a,null))==null?void 0:p[l],c=Number.parseInt(u,10);return Number.isNaN(c)?0:c}return(a,l)=>{const u=Tt("NavbarSearch");return J(),ne("header",{ref_key:"navbar",ref:n,class:"navbar"},[ae(Ig,{onToggle:l[0]||(l[0]=c=>a.$emit("toggle-sidebar"))}),ye("span",{ref_key:"navbarBrand",ref:r},[ae(Qv)],512),ye("div",{class:"navbar-items-wrapper",style:_r(V(i))},[Ie(a.$slots,"before"),ae(pu,{class:"can-hide"}),Ie(a.$slots,"after"),V(t).colorModeSwitch?(J(),He(Og,{key:0})):Me("v-if",!0),ae(u)],4)],512)}}}),Ag=Re(kg,[["__file","Navbar.vue"]]),xg={class:"page-meta"},Tg={key:0,class:"meta-item edit-link"},Lg={key:1,class:"meta-item last-updated"},Rg={class:"meta-item-label"},jg={class:"meta-item-info"},Dg={key:2,class:"meta-item contributors"},Ng={class:"meta-item-label"},Mg={class:"meta-item-info"},$g=["title"],Hg=me({__name:"PageMeta",setup(e){const t=()=>{const l=Qe(),u=Vt(),c=At();return Q(()=>{var E,w,S;if(!((w=(E=c.value.editLink)!=null?E:l.value.editLink)!=null?w:!0))return null;const{repo:d,docsRepo:p=d,docsBranch:_="main",docsDir:g="",editLinkText:O}=l.value;if(!p)return null;const h=fg({docsRepo:p,docsBranch:_,docsDir:g,filePathRelative:u.value.filePathRelative,editLinkPattern:(S=c.value.editLinkPattern)!=null?S:l.value.editLinkPattern});return h?{text:O!=null?O:"Edit this page",link:h}:null})},n=()=>{const l=Qe(),u=Vt(),c=At();return Q(()=>{var p,_,g,O;return!((_=(p=c.value.lastUpdated)!=null?p:l.value.lastUpdated)!=null?_:!0)||!((g=u.value.git)!=null&&g.updatedTime)?null:new Date((O=u.value.git)==null?void 0:O.updatedTime).toLocaleString()})},r=()=>{const l=Qe(),u=Vt(),c=At();return Q(()=>{var d,p,_,g;return((p=(d=c.value.contributors)!=null?d:l.value.contributors)!=null?p:!0)&&(g=(_=u.value.git)==null?void 0:_.contributors)!=null?g:null})},o=Qe(),i=t(),s=n(),a=r();return(l,u)=>{const c=Tt("ClientOnly");return J(),ne("footer",xg,[V(i)?(J(),ne("div",Tg,[ae(It,{class:"meta-item-label",item:V(i)},null,8,["item"])])):Me("v-if",!0),V(s)?(J(),ne("div",Lg,[ye("span",Rg,Be(V(o).lastUpdatedText)+": ",1),ae(c,null,{default:qe(()=>[ye("span",jg,Be(V(s)),1)]),_:1})])):Me("v-if",!0),V(a)&&V(a).length?(J(),ne("div",Dg,[ye("span",Ng,Be(V(o).contributorsText)+": ",1),ye("span",Mg,[(J(!0),ne(ke,null,Ut(V(a),(f,d)=>(J(),ne(ke,{key:d},[ye("span",{class:"contributor",title:`email: ${f.email}`},Be(f.name),9,$g),d!==V(a).length-1?(J(),ne(ke,{key:0},[Kt(", ")],64)):Me("v-if",!0)],64))),128))])])):Me("v-if",!0)])}}}),Fg=Re(Hg,[["__file","PageMeta.vue"]]),Bg={key:0,class:"page-nav"},Vg={class:"inner"},qg={key:0,class:"prev"},Ug={key:1,class:"next"},zg=me({__name:"PageNav",setup(e){const t=l=>l===!1?null:Oe(l)?rs(l):Yi(l)?l:!1,n=(l,u,c)=>{const f=l.findIndex(d=>d.link===u);if(f!==-1){const d=l[f+c];return d!=null&&d.link?d:null}for(const d of l)if(d.children){const p=n(d.children,u,c);if(p)return p}return null},r=At(),o=os(),i=Jt(),s=Q(()=>{const l=t(r.value.prev);return l!==!1?l:n(o.value,i.path,-1)}),a=Q(()=>{const l=t(r.value.next);return l!==!1?l:n(o.value,i.path,1)});return(l,u)=>V(s)||V(a)?(J(),ne("nav",Bg,[ye("p",Vg,[V(s)?(J(),ne("span",qg,[ae(It,{item:V(s)},null,8,["item"])])):Me("v-if",!0),V(a)?(J(),ne("span",Ug,[ae(It,{item:V(a)},null,8,["item"])])):Me("v-if",!0)])])):Me("v-if",!0)}}),Kg=Re(zg,[["__file","PageNav.vue"]]),Wg={class:"page"},Jg={class:"theme-default-content"},Qg=me({__name:"Page",setup(e){return(t,n)=>{const r=Tt("Content");return J(),ne("main",Wg,[Ie(t.$slots,"top"),ye("div",Jg,[Ie(t.$slots,"content-top"),ae(r),Ie(t.$slots,"content-bottom")]),ae(Fg),ae(Kg),Ie(t.$slots,"bottom")])}}}),Zg=Re(Qg,[["__file","Page.vue"]]),Yg=["onKeydown"],Gg={class:"sidebar-item-children"},Xg=me({__name:"SidebarItem",props:{item:{type:Object,required:!0},depth:{type:Number,required:!1,default:0}},setup(e){const t=e,{item:n,depth:r}=zi(t),o=Jt(),i=pn(),s=Q(()=>fu(n.value,o)),a=Q(()=>({"sidebar-item":!0,"sidebar-heading":r.value===0,active:s.value,collapsible:n.value.collapsible})),l=Q(()=>n.value.collapsible?s.value:!0),[u,c]=Vh(l.value),f=p=>{n.value.collapsible&&(p.preventDefault(),c())},d=i.afterEach(p=>{Er(()=>{u.value=l.value})});return Co(()=>{d()}),(p,_)=>{var O;const g=Tt("SidebarItem",!0);return J(),ne("li",null,[V(n).link?(J(),He(It,{key:0,class:et(V(a)),item:V(n)},null,8,["class","item"])):(J(),ne("p",{key:1,tabindex:"0",class:et(V(a)),onClick:f,onKeydown:Mp(f,["enter"])},[Kt(Be(V(n).text)+" ",1),V(n).collapsible?(J(),ne("span",{key:0,class:et(["arrow",V(u)?"down":"right"])},null,2)):Me("v-if",!0)],42,Yg)),(O=V(n).children)!=null&&O.length?(J(),He(uu,{key:2},{default:qe(()=>[to(ye("ul",Gg,[(J(!0),ne(ke,null,Ut(V(n).children,h=>(J(),He(g,{key:`${V(r)}${h.text}${h.link}`,item:h,depth:V(r)+1},null,8,["item","depth"]))),128))],512),[[io,V(u)]])]),_:1})):Me("v-if",!0)])}}}),e_=Re(Xg,[["__file","SidebarItem.vue"]]),t_={key:0,class:"sidebar-items"},n_=me({__name:"SidebarItems",setup(e){const t=Jt(),n=os();return Ye(()=>{lt(()=>t.hash,r=>{const o=document.querySelector(".sidebar");if(!o)return;const i=document.querySelector(`.sidebar a.sidebar-item[href="${t.path}${r}"]`);if(!i)return;const{top:s,height:a}=o.getBoundingClientRect(),{top:l,height:u}=i.getBoundingClientRect();l<s?i.scrollIntoView(!0):l+u>s+a&&i.scrollIntoView(!1)})}),(r,o)=>V(n).length?(J(),ne("ul",t_,[(J(!0),ne(ke,null,Ut(V(n),i=>(J(),He(e_,{key:`${i.text}${i.link}`,item:i},null,8,["item"]))),128))])):Me("v-if",!0)}}),r_=Re(n_,[["__file","SidebarItems.vue"]]),o_={class:"sidebar"},i_=me({__name:"Sidebar",setup(e){return(t,n)=>(J(),ne("aside",o_,[ae(pu),Ie(t.$slots,"top"),ae(r_),Ie(t.$slots,"bottom")]))}}),s_=Re(i_,[["__file","Sidebar.vue"]]),a_=me({__name:"Layout",setup(e){const t=Vt(),n=At(),r=Qe(),o=Q(()=>n.value.navbar!==!1&&r.value.navbar!==!1),i=os(),s=Ce(!1),a=O=>{s.value=typeof O=="boolean"?O:!s.value},l={x:0,y:0},u=O=>{l.x=O.changedTouches[0].clientX,l.y=O.changedTouches[0].clientY},c=O=>{const h=O.changedTouches[0].clientX-l.x,E=O.changedTouches[0].clientY-l.y;Math.abs(h)>Math.abs(E)&&Math.abs(h)>40&&(h>0&&l.x<=80?a(!0):a(!1))},f=Q(()=>[{"no-navbar":!o.value,"no-sidebar":!i.value.length,"sidebar-open":s.value},n.value.pageClass]);let d;Ye(()=>{d=pn().afterEach(()=>{a(!1)})}),Io(()=>{d()});const p=au(),_=p.resolve,g=p.pending;return(O,h)=>(J(),ne("div",{class:et(["theme-container",V(f)]),onTouchstart:u,onTouchend:c},[Ie(O.$slots,"navbar",{},()=>[V(o)?(J(),He(Ag,{key:0,onToggleSidebar:a},{before:qe(()=>[Ie(O.$slots,"navbar-before")]),after:qe(()=>[Ie(O.$slots,"navbar-after")]),_:3})):Me("v-if",!0)]),ye("div",{class:"sidebar-mask",onClick:h[0]||(h[0]=E=>a(!1))}),Ie(O.$slots,"sidebar",{},()=>[ae(s_,null,{top:qe(()=>[Ie(O.$slots,"sidebar-top")]),bottom:qe(()=>[Ie(O.$slots,"sidebar-bottom")]),_:3})]),Ie(O.$slots,"page",{},()=>[V(n).home?(J(),He(Wv,{key:0})):(J(),He($n,{key:1,name:"fade-slide-y",mode:"out-in",onBeforeEnter:V(_),onBeforeLeave:V(g)},{default:qe(()=>[(J(),He(Zg,{key:V(t).path},{top:qe(()=>[Ie(O.$slots,"page-top")]),"content-top":qe(()=>[Ie(O.$slots,"page-content-top")]),"content-bottom":qe(()=>[Ie(O.$slots,"page-content-bottom")]),bottom:qe(()=>[Ie(O.$slots,"page-bottom")]),_:3}))]),_:3},8,["onBeforeEnter","onBeforeLeave"]))])],34))}}),l_=Re(a_,[["__file","Layout.vue"]]),c_={class:"theme-container"},u_={class:"page"},f_={class:"theme-default-content"},d_=ye("h1",null,"404",-1),p_=me({__name:"NotFound",setup(e){var a,l,u;const t=Fn(),n=Qe(),r=(a=n.value.notFound)!=null?a:["Not Found"],o=()=>r[Math.floor(Math.random()*r.length)],i=(l=n.value.home)!=null?l:t.value,s=(u=n.value.backToHome)!=null?u:"Back to home";return(c,f)=>{const d=Tt("RouterLink");return J(),ne("div",c_,[ye("main",u_,[ye("div",f_,[d_,ye("blockquote",null,Be(o()),1),ae(d,{to:V(i)},{default:qe(()=>[Kt(Be(V(s)),1)]),_:1},8,["to"])])])])}}}),m_=Re(p_,[["__file","NotFound.vue"]]);const h_=Ot({enhance({app:e,router:t}){e.component("Badge",kh),e.component("CodeGroup",Ah),e.component("CodeGroupItem",Rh),e.component("AutoLinkExternalIcon",()=>{const r=e.component("ExternalLinkIcon");return r?he(r):null}),e.component("NavbarSearch",()=>{const r=e.component("Docsearch")||e.component("SearchBox");return r?he(r):null});const n=t.options.scrollBehavior;t.options.scrollBehavior=async(...r)=>(await au().wait(),n(...r))},setup(){gv(),bv()},layouts:{Layout:l_,NotFound:m_}});/*! @docsearch/js 3.3.3 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */function Ta(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function Ee(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?Ta(Object(n),!0).forEach(function(r){v_(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Ta(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function mr(e){return mr=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(t){return typeof t}:function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},mr(e)}function v_(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function bi(){return bi=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},bi.apply(this,arguments)}function g_(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function co(e,t){return function(n){if(Array.isArray(n))return n}(e)||function(n,r){var o=n==null?null:typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(o!=null){var i,s,a=[],l=!0,u=!1;try{for(o=o.call(n);!(l=(i=o.next()).done)&&(a.push(i.value),!r||a.length!==r);l=!0);}catch(c){u=!0,s=c}finally{try{l||o.return==null||o.return()}finally{if(u)throw s}}return a}}(e,t)||mu(e,t)||function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function uo(e){return function(t){if(Array.isArray(t))return Ei(t)}(e)||function(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}(e)||mu(e)||function(){throw new TypeError(`Invalid attempt to spread non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function mu(e,t){if(e){if(typeof e=="string")return Ei(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return n==="Object"&&e.constructor&&(n=e.constructor.name),n==="Map"||n==="Set"?Array.from(e):n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Ei(e,t):void 0}}function Ei(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var te,or,hu,La,vu,fo={},ss=[],__=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function Ct(e,t){for(var n in t)e[n]=t[n];return e}function gu(e){var t=e.parentNode;t&&t.removeChild(e)}function yt(e,t,n){var r,o,i,s=arguments,a={};for(i in t)i=="key"?r=t[i]:i=="ref"?o=t[i]:a[i]=t[i];if(arguments.length>3)for(n=[n],i=3;i<arguments.length;i++)n.push(s[i]);if(n!=null&&(a.children=n),typeof e=="function"&&e.defaultProps!=null)for(i in e.defaultProps)a[i]===void 0&&(a[i]=e.defaultProps[i]);return ir(e,a,r,o,null)}function ir(e,t,n,r,o){var i={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:o==null?++te.__v:o};return te.vnode!=null&&te.vnode(i),i}function Wt(e){return e.children}function bt(e,t){this.props=e,this.context=t}function hr(e,t){if(t==null)return e.__?hr(e.__,e.__.__k.indexOf(e)+1):null;for(var n;t<e.__k.length;t++)if((n=e.__k[t])!=null&&n.__e!=null)return n.__e;return typeof e.type=="function"?hr(e):null}function _u(e){var t,n;if((e=e.__)!=null&&e.__c!=null){for(e.__e=e.__c.base=null,t=0;t<e.__k.length;t++)if((n=e.__k[t])!=null&&n.__e!=null){e.__e=e.__c.base=n.__e;break}return _u(e)}}function Oi(e){(!e.__d&&(e.__d=!0)&&or.push(e)&&!po.__r++||La!==te.debounceRendering)&&((La=te.debounceRendering)||hu)(po)}function po(){for(var e;po.__r=or.length;)e=or.sort(function(t,n){return t.__v.__b-n.__v.__b}),or=[],e.some(function(t){var n,r,o,i,s,a;t.__d&&(s=(i=(n=t).__v).__e,(a=n.__P)&&(r=[],(o=Ct({},i)).__v=i.__v+1,as(a,i,o,n.__n,a.ownerSVGElement!==void 0,i.__h!=null?[s]:null,r,s==null?hr(i):s,i.__h),Ou(r,i),i.__e!=s&&_u(i)))})}function yu(e,t,n,r,o,i,s,a,l,u){var c,f,d,p,_,g,O,h=r&&r.__k||ss,E=h.length;for(n.__k=[],c=0;c<t.length;c++)if((p=n.__k[c]=(p=t[c])==null||typeof p=="boolean"?null:typeof p=="string"||typeof p=="number"?ir(null,p,null,null,p):Array.isArray(p)?ir(Wt,{children:p},null,null,null):p.__b>0?ir(p.type,p.props,p.key,null,p.__v):p)!=null){if(p.__=n,p.__b=n.__b+1,(d=h[c])===null||d&&p.key==d.key&&p.type===d.type)h[c]=void 0;else for(f=0;f<E;f++){if((d=h[f])&&p.key==d.key&&p.type===d.type){h[f]=void 0;break}d=null}as(e,p,d=d||fo,o,i,s,a,l,u),_=p.__e,(f=p.ref)&&d.ref!=f&&(O||(O=[]),d.ref&&O.push(d.ref,null,p),O.push(f,p.__c||_,p)),_!=null?(g==null&&(g=_),typeof p.type=="function"&&p.__k!=null&&p.__k===d.__k?p.__d=l=bu(p,l,e):l=Eu(e,p,d,h,_,l),u||n.type!=="option"?typeof n.type=="function"&&(n.__d=l):e.value=""):l&&d.__e==l&&l.parentNode!=e&&(l=hr(d))}for(n.__e=g,c=E;c--;)h[c]!=null&&(typeof n.type=="function"&&h[c].__e!=null&&h[c].__e==n.__d&&(n.__d=hr(r,c+1)),Su(h[c],h[c]));if(O)for(c=0;c<O.length;c++)wu(O[c],O[++c],O[++c])}function bu(e,t,n){var r,o;for(r=0;r<e.__k.length;r++)(o=e.__k[r])&&(o.__=e,t=typeof o.type=="function"?bu(o,t,n):Eu(n,o,o,e.__k,o.__e,t));return t}function kt(e,t){return t=t||[],e==null||typeof e=="boolean"||(Array.isArray(e)?e.some(function(n){kt(n,t)}):t.push(e)),t}function Eu(e,t,n,r,o,i){var s,a,l;if(t.__d!==void 0)s=t.__d,t.__d=void 0;else if(n==null||o!=i||o.parentNode==null)e:if(i==null||i.parentNode!==e)e.appendChild(o),s=null;else{for(a=i,l=0;(a=a.nextSibling)&&l<r.length;l+=2)if(a==o)break e;e.insertBefore(o,i),s=i}return s!==void 0?s:o.nextSibling}function Ra(e,t,n){t[0]==="-"?e.setProperty(t,n):e[t]=n==null?"":typeof n!="number"||__.test(t)?n:n+"px"}function Dr(e,t,n,r,o){var i;e:if(t==="style")if(typeof n=="string")e.style.cssText=n;else{if(typeof r=="string"&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||Ra(e.style,t,"");if(n)for(t in n)r&&n[t]===r[t]||Ra(e.style,t,n[t])}else if(t[0]==="o"&&t[1]==="n")i=t!==(t=t.replace(/Capture$/,"")),t=t.toLowerCase()in e?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.l[t+i]=n,n?r||e.addEventListener(t,i?Da:ja,i):e.removeEventListener(t,i?Da:ja,i);else if(t!=="dangerouslySetInnerHTML"){if(o)t=t.replace(/xlink[H:h]/,"h").replace(/sName$/,"s");else if(t!=="href"&&t!=="list"&&t!=="form"&&t!=="download"&&t in e)try{e[t]=n==null?"":n;break e}catch{}typeof n=="function"||(n!=null&&(n!==!1||t[0]==="a"&&t[1]==="r")?e.setAttribute(t,n):e.removeAttribute(t))}}function ja(e){this.l[e.type+!1](te.event?te.event(e):e)}function Da(e){this.l[e.type+!0](te.event?te.event(e):e)}function as(e,t,n,r,o,i,s,a,l){var u,c,f,d,p,_,g,O,h,E,w,S=t.type;if(t.constructor!==void 0)return null;n.__h!=null&&(l=n.__h,a=t.__e=n.__e,t.__h=null,i=[a]),(u=te.__b)&&u(t);try{e:if(typeof S=="function"){if(O=t.props,h=(u=S.contextType)&&r[u.__c],E=u?h?h.props.value:u.__:r,n.__c?g=(c=t.__c=n.__c).__=c.__E:("prototype"in S&&S.prototype.render?t.__c=c=new S(O,E):(t.__c=c=new bt(O,E),c.constructor=S,c.render=b_),h&&h.sub(c),c.props=O,c.state||(c.state={}),c.context=E,c.__n=r,f=c.__d=!0,c.__h=[]),c.__s==null&&(c.__s=c.state),S.getDerivedStateFromProps!=null&&(c.__s==c.state&&(c.__s=Ct({},c.__s)),Ct(c.__s,S.getDerivedStateFromProps(O,c.__s))),d=c.props,p=c.state,f)S.getDerivedStateFromProps==null&&c.componentWillMount!=null&&c.componentWillMount(),c.componentDidMount!=null&&c.__h.push(c.componentDidMount);else{if(S.getDerivedStateFromProps==null&&O!==d&&c.componentWillReceiveProps!=null&&c.componentWillReceiveProps(O,E),!c.__e&&c.shouldComponentUpdate!=null&&c.shouldComponentUpdate(O,c.__s,E)===!1||t.__v===n.__v){c.props=O,c.state=c.__s,t.__v!==n.__v&&(c.__d=!1),c.__v=t,t.__e=n.__e,t.__k=n.__k,c.__h.length&&s.push(c);break e}c.componentWillUpdate!=null&&c.componentWillUpdate(O,c.__s,E),c.componentDidUpdate!=null&&c.__h.push(function(){c.componentDidUpdate(d,p,_)})}c.context=E,c.props=O,c.state=c.__s,(u=te.__r)&&u(t),c.__d=!1,c.__v=t,c.__P=e,u=c.render(c.props,c.state,c.context),c.state=c.__s,c.getChildContext!=null&&(r=Ct(Ct({},r),c.getChildContext())),f||c.getSnapshotBeforeUpdate==null||(_=c.getSnapshotBeforeUpdate(d,p)),w=u!=null&&u.type===Wt&&u.key==null?u.props.children:u,yu(e,Array.isArray(w)?w:[w],t,n,r,o,i,s,a,l),c.base=t.__e,t.__h=null,c.__h.length&&s.push(c),g&&(c.__E=c.__=null),c.__e=!1}else i==null&&t.__v===n.__v?(t.__k=n.__k,t.__e=n.__e):t.__e=y_(n.__e,t,n,r,o,i,s,l);(u=te.diffed)&&u(t)}catch(I){t.__v=null,(l||i!=null)&&(t.__e=a,t.__h=!!l,i[i.indexOf(a)]=null),te.__e(I,t,n)}}function Ou(e,t){te.__c&&te.__c(t,e),e.some(function(n){try{e=n.__h,n.__h=[],e.some(function(r){r.call(n)})}catch(r){te.__e(r,n.__v)}})}function y_(e,t,n,r,o,i,s,a){var l,u,c,f,d=n.props,p=t.props,_=t.type,g=0;if(_==="svg"&&(o=!0),i!=null){for(;g<i.length;g++)if((l=i[g])&&(l===e||(_?l.localName==_:l.nodeType==3))){e=l,i[g]=null;break}}if(e==null){if(_===null)return document.createTextNode(p);e=o?document.createElementNS("http://www.w3.org/2000/svg",_):document.createElement(_,p.is&&p),i=null,a=!1}if(_===null)d===p||a&&e.data===p||(e.data=p);else{if(i=i&&ss.slice.call(e.childNodes),u=(d=n.props||fo).dangerouslySetInnerHTML,c=p.dangerouslySetInnerHTML,!a){if(i!=null)for(d={},f=0;f<e.attributes.length;f++)d[e.attributes[f].name]=e.attributes[f].value;(c||u)&&(c&&(u&&c.__html==u.__html||c.__html===e.innerHTML)||(e.innerHTML=c&&c.__html||""))}if(function(O,h,E,w,S){var I;for(I in E)I==="children"||I==="key"||I in h||Dr(O,I,null,E[I],w);for(I in h)S&&typeof h[I]!="function"||I==="children"||I==="key"||I==="value"||I==="checked"||E[I]===h[I]||Dr(O,I,h[I],E[I],w)}(e,p,d,o,a),c)t.__k=[];else if(g=t.props.children,yu(e,Array.isArray(g)?g:[g],t,n,r,o&&_!=="foreignObject",i,s,e.firstChild,a),i!=null)for(g=i.length;g--;)i[g]!=null&&gu(i[g]);a||("value"in p&&(g=p.value)!==void 0&&(g!==e.value||_==="progress"&&!g)&&Dr(e,"value",g,d.value,!1),"checked"in p&&(g=p.checked)!==void 0&&g!==e.checked&&Dr(e,"checked",g,d.checked,!1))}return e}function wu(e,t,n){try{typeof e=="function"?e(t):e.current=t}catch(r){te.__e(r,n)}}function Su(e,t,n){var r,o,i;if(te.unmount&&te.unmount(e),(r=e.ref)&&(r.current&&r.current!==e.__e||wu(r,null,t)),n||typeof e.type=="function"||(n=(o=e.__e)!=null),e.__e=e.__d=void 0,(r=e.__c)!=null){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(s){te.__e(s,t)}r.base=r.__P=null}if(r=e.__k)for(i=0;i<r.length;i++)r[i]&&Su(r[i],t,n);o!=null&&gu(o)}function b_(e,t,n){return this.constructor(e,n)}function vr(e,t,n){var r,o,i;te.__&&te.__(e,t),o=(r=typeof n=="function")?null:n&&n.__k||t.__k,i=[],as(t,e=(!r&&n||t).__k=yt(Wt,null,[e]),o||fo,fo,t.ownerSVGElement!==void 0,!r&&n?[n]:o?null:t.firstChild?ss.slice.call(t.childNodes):null,i,!r&&n?n:o?o.__e:t.firstChild,r),Ou(i,e)}function Pu(e,t){vr(e,t,Pu)}function E_(e,t,n){var r,o,i,s=arguments,a=Ct({},e.props);for(i in t)i=="key"?r=t[i]:i=="ref"?o=t[i]:a[i]=t[i];if(arguments.length>3)for(n=[n],i=3;i<arguments.length;i++)n.push(s[i]);return n!=null&&(a.children=n),ir(e.type,a,r||e.key,o||e.ref,null)}te={__e:function(e,t){for(var n,r,o;t=t.__;)if((n=t.__c)&&!n.__)try{if((r=n.constructor)&&r.getDerivedStateFromError!=null&&(n.setState(r.getDerivedStateFromError(e)),o=n.__d),n.componentDidCatch!=null&&(n.componentDidCatch(e),o=n.__d),o)return n.__E=n}catch(i){e=i}throw e},__v:0},bt.prototype.setState=function(e,t){var n;n=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=Ct({},this.state),typeof e=="function"&&(e=e(Ct({},n),this.props)),e&&Ct(n,e),e!=null&&this.__v&&(t&&this.__h.push(t),Oi(this))},bt.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),Oi(this))},bt.prototype.render=Wt,or=[],hu=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,po.__r=0,vu=0;var Hn,Ze,Na,kn=0,wi=[],Ma=te.__b,$a=te.__r,Ha=te.diffed,Fa=te.__c,Ba=te.unmount;function Sr(e,t){te.__h&&te.__h(Ze,e,kn||t),kn=0;var n=Ze.__H||(Ze.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function Cu(e){return kn=1,Iu(Au,e)}function Iu(e,t,n){var r=Sr(Hn++,2);return r.t=e,r.__c||(r.__=[n?n(t):Au(void 0,t),function(o){var i=r.t(r.__[0],o);r.__[0]!==i&&(r.__=[i,r.__[1]],r.__c.setState({}))}],r.__c=Ze),r.__}function ku(e,t){var n=Sr(Hn++,3);!te.__s&&ls(n.__H,t)&&(n.__=e,n.__H=t,Ze.__H.__h.push(n))}function Va(e,t){var n=Sr(Hn++,4);!te.__s&&ls(n.__H,t)&&(n.__=e,n.__H=t,Ze.__h.push(n))}function Zo(e,t){var n=Sr(Hn++,7);return ls(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function O_(){wi.forEach(function(e){if(e.__P)try{e.__H.__h.forEach(zr),e.__H.__h.forEach(Si),e.__H.__h=[]}catch(t){e.__H.__h=[],te.__e(t,e.__v)}}),wi=[]}te.__b=function(e){Ze=null,Ma&&Ma(e)},te.__r=function(e){$a&&$a(e),Hn=0;var t=(Ze=e.__c).__H;t&&(t.__h.forEach(zr),t.__h.forEach(Si),t.__h=[])},te.diffed=function(e){Ha&&Ha(e);var t=e.__c;t&&t.__H&&t.__H.__h.length&&(wi.push(t)!==1&&Na===te.requestAnimationFrame||((Na=te.requestAnimationFrame)||function(n){var r,o=function(){clearTimeout(i),qa&&cancelAnimationFrame(r),setTimeout(n)},i=setTimeout(o,100);qa&&(r=requestAnimationFrame(o))})(O_)),Ze=void 0},te.__c=function(e,t){t.some(function(n){try{n.__h.forEach(zr),n.__h=n.__h.filter(function(r){return!r.__||Si(r)})}catch(r){t.some(function(o){o.__h&&(o.__h=[])}),t=[],te.__e(r,n.__v)}}),Fa&&Fa(e,t)},te.unmount=function(e){Ba&&Ba(e);var t=e.__c;if(t&&t.__H)try{t.__H.__.forEach(zr)}catch(n){te.__e(n,t.__v)}};var qa=typeof requestAnimationFrame=="function";function zr(e){var t=Ze;typeof e.__c=="function"&&e.__c(),Ze=t}function Si(e){var t=Ze;e.__c=e.__(),Ze=t}function ls(e,t){return!e||e.length!==t.length||t.some(function(n,r){return n!==e[r]})}function Au(e,t){return typeof t=="function"?t(e):t}function xu(e,t){for(var n in t)e[n]=t[n];return e}function Pi(e,t){for(var n in e)if(n!=="__source"&&!(n in t))return!0;for(var r in t)if(r!=="__source"&&e[r]!==t[r])return!0;return!1}function Ci(e){this.props=e}(Ci.prototype=new bt).isPureReactComponent=!0,Ci.prototype.shouldComponentUpdate=function(e,t){return Pi(this.props,e)||Pi(this.state,t)};var Ua=te.__b;te.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),Ua&&Ua(e)};var w_=typeof Symbol<"u"&&Symbol.for&&Symbol.for("react.forward_ref")||3911,za=function(e,t){return e==null?null:kt(kt(e).map(t))},S_={map:za,forEach:za,count:function(e){return e?kt(e).length:0},only:function(e){var t=kt(e);if(t.length!==1)throw"Children.only";return t[0]},toArray:kt},P_=te.__e;function Kr(){this.__u=0,this.t=null,this.__b=null}function Tu(e){var t=e.__.__c;return t&&t.__e&&t.__e(e)}function Zn(){this.u=null,this.o=null}te.__e=function(e,t,n){if(e.then){for(var r,o=t;o=o.__;)if((r=o.__c)&&r.__c)return t.__e==null&&(t.__e=n.__e,t.__k=n.__k),r.__c(e,t)}P_(e,t,n)},(Kr.prototype=new bt).__c=function(e,t){var n=t.__c,r=this;r.t==null&&(r.t=[]),r.t.push(n);var o=Tu(r.__v),i=!1,s=function(){i||(i=!0,n.componentWillUnmount=n.__c,o?o(a):a())};n.__c=n.componentWillUnmount,n.componentWillUnmount=function(){s(),n.__c&&n.__c()};var a=function(){if(!--r.__u){if(r.state.__e){var u=r.state.__e;r.__v.__k[0]=function f(d,p,_){return d&&(d.__v=null,d.__k=d.__k&&d.__k.map(function(g){return f(g,p,_)}),d.__c&&d.__c.__P===p&&(d.__e&&_.insertBefore(d.__e,d.__d),d.__c.__e=!0,d.__c.__P=_)),d}(u,u.__c.__P,u.__c.__O)}var c;for(r.setState({__e:r.__b=null});c=r.t.pop();)c.forceUpdate()}},l=t.__h===!0;r.__u++||l||r.setState({__e:r.__b=r.__v.__k[0]}),e.then(s,s)},Kr.prototype.componentWillUnmount=function(){this.t=[]},Kr.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function i(s,a,l){return s&&(s.__c&&s.__c.__H&&(s.__c.__H.__.forEach(function(u){typeof u.__c=="function"&&u.__c()}),s.__c.__H=null),(s=xu({},s)).__c!=null&&(s.__c.__P===l&&(s.__c.__P=a),s.__c=null),s.__k=s.__k&&s.__k.map(function(u){return i(u,a,l)})),s}(this.__b,n,r.__O=r.__P)}this.__b=null}var o=t.__e&&yt(Wt,null,e.fallback);return o&&(o.__h=null),[yt(Wt,null,t.__e?null:e.children),o]};var Ka=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&(e.props.revealOrder[0]!=="t"||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;e.u=n=n[2]}};function C_(e){return this.getChildContext=function(){return e.context},e.children}function I_(e){var t=this,n=e.i;t.componentWillUnmount=function(){vr(null,t.l),t.l=null,t.i=null},t.i&&t.i!==n&&t.componentWillUnmount(),e.__v?(t.l||(t.i=n,t.l={nodeType:1,parentNode:n,childNodes:[],appendChild:function(r){this.childNodes.push(r),t.i.appendChild(r)},insertBefore:function(r,o){this.childNodes.push(r),t.i.appendChild(r)},removeChild:function(r){this.childNodes.splice(this.childNodes.indexOf(r)>>>1,1),t.i.removeChild(r)}}),vr(yt(C_,{context:t.context},e.__v),t.l)):t.l&&t.componentWillUnmount()}function Lu(e,t){return yt(I_,{__v:e,i:t})}(Zn.prototype=new bt).__e=function(e){var t=this,n=Tu(t.__v),r=t.o.get(e);return r[0]++,function(o){var i=function(){t.props.revealOrder?(r.push(o),Ka(t,e,r)):o()};n?n(i):i()}},Zn.prototype.render=function(e){this.u=null,this.o=new Map;var t=kt(e.children);e.revealOrder&&e.revealOrder[0]==="b"&&t.reverse();for(var n=t.length;n--;)this.o.set(t[n],this.u=[1,0,this.u]);return e.children},Zn.prototype.componentDidUpdate=Zn.prototype.componentDidMount=function(){var e=this;this.o.forEach(function(t,n){Ka(e,n,t)})};var Ru=typeof Symbol<"u"&&Symbol.for&&Symbol.for("react.element")||60103,k_=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,A_=function(e){return(typeof Symbol<"u"&&mr(Symbol())=="symbol"?/fil|che|rad/i:/fil|che|ra/i).test(e)};function ju(e,t,n){return t.__k==null&&(t.textContent=""),vr(e,t),typeof n=="function"&&n(),e?e.__c:null}bt.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach(function(e){Object.defineProperty(bt.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})});var Wa=te.event;function x_(){}function T_(){return this.cancelBubble}function L_(){return this.defaultPrevented}te.event=function(e){return Wa&&(e=Wa(e)),e.persist=x_,e.isPropagationStopped=T_,e.isDefaultPrevented=L_,e.nativeEvent=e};var Du,Ja={configurable:!0,get:function(){return this.class}},Qa=te.vnode;te.vnode=function(e){var t=e.type,n=e.props,r=n;if(typeof t=="string"){for(var o in r={},n){var i=n[o];o==="value"&&"defaultValue"in n&&i==null||(o==="defaultValue"&&"value"in n&&n.value==null?o="value":o==="download"&&i===!0?i="":/ondoubleclick/i.test(o)?o="ondblclick":/^onchange(textarea|input)/i.test(o+t)&&!A_(n.type)?o="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(o)?o=o.toLowerCase():k_.test(o)?o=o.replace(/[A-Z0-9]/,"-$&").toLowerCase():i===null&&(i=void 0),r[o]=i)}t=="select"&&r.multiple&&Array.isArray(r.value)&&(r.value=kt(n.children).forEach(function(s){s.props.selected=r.value.indexOf(s.props.value)!=-1})),t=="select"&&r.defaultValue!=null&&(r.value=kt(n.children).forEach(function(s){s.props.selected=r.multiple?r.defaultValue.indexOf(s.props.value)!=-1:r.defaultValue==s.props.value})),e.props=r}t&&n.class!=n.className&&(Ja.enumerable="className"in n,n.className!=null&&(r.class=n.className),Object.defineProperty(r,"className",Ja)),e.$$typeof=Ru,Qa&&Qa(e)};var Za=te.__r;te.__r=function(e){Za&&Za(e),Du=e.__c};var R_={ReactCurrentDispatcher:{current:{readContext:function(e){return Du.__n[e.__c].props.value}}}};(typeof performance>"u"?"undefined":mr(performance))=="object"&&typeof performance.now=="function"&&performance.now.bind(performance);function Ya(e){return!!e&&e.$$typeof===Ru}var y={useState:Cu,useReducer:Iu,useEffect:ku,useLayoutEffect:Va,useRef:function(e){return kn=5,Zo(function(){return{current:e}},[])},useImperativeHandle:function(e,t,n){kn=6,Va(function(){typeof e=="function"?e(t()):e&&(e.current=t())},n==null?n:n.concat(e))},useMemo:Zo,useCallback:function(e,t){return kn=8,Zo(function(){return e},t)},useContext:function(e){var t=Ze.context[e.__c],n=Sr(Hn++,9);return n.__c=e,t?(n.__==null&&(n.__=!0,t.sub(Ze)),t.props.value):e.__},useDebugValue:function(e,t){te.useDebugValue&&te.useDebugValue(t?t(e):e)},version:"16.8.0",Children:S_,render:ju,hydrate:function(e,t,n){return Pu(e,t),typeof n=="function"&&n(),e?e.__c:null},unmountComponentAtNode:function(e){return!!e.__k&&(vr(null,e),!0)},createPortal:Lu,createElement:yt,createContext:function(e,t){var n={__c:t="__cC"+vu++,__:e,Consumer:function(r,o){return r.children(o)},Provider:function(r){var o,i;return this.getChildContext||(o=[],(i={})[t]=this,this.getChildContext=function(){return i},this.shouldComponentUpdate=function(s){this.props.value!==s.value&&o.some(Oi)},this.sub=function(s){o.push(s);var a=s.componentWillUnmount;s.componentWillUnmount=function(){o.splice(o.indexOf(s),1),a&&a.call(s)}}),r.children}};return n.Provider.__=n.Consumer.contextType=n},createFactory:function(e){return yt.bind(null,e)},cloneElement:function(e){return Ya(e)?E_.apply(null,arguments):e},createRef:function(){return{current:null}},Fragment:Wt,isValidElement:Ya,findDOMNode:function(e){return e&&(e.base||e.nodeType===1&&e)||null},Component:bt,PureComponent:Ci,memo:function(e,t){function n(o){var i=this.props.ref,s=i==o.ref;return!s&&i&&(i.call?i(null):i.current=null),t?!t(this.props,o)||!s:Pi(this.props,o)}function r(o){return this.shouldComponentUpdate=n,yt(e,o)}return r.displayName="Memo("+(e.displayName||e.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r},forwardRef:function(e){function t(n,r){var o=xu({},n);return delete o.ref,e(o,(r=n.ref||r)&&(mr(r)!="object"||"current"in r)?r:null)}return t.$$typeof=w_,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(e.displayName||e.name)+")",t},unstable_batchedUpdates:function(e,t){return e(t)},StrictMode:Wt,Suspense:Kr,SuspenseList:Zn,lazy:function(e){var t,n,r;function o(i){if(t||(t=e()).then(function(s){n=s.default||s},function(s){r=s}),r)throw r;if(!n)throw t;return yt(n,i)}return o.displayName="Lazy",o.__f=!0,o},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:R_};function j_(){return y.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},y.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function Nu(){return y.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},y.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}var D_=["translations"];function Ii(){return Ii=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Ii.apply(this,arguments)}function N_(e,t){return function(n){if(Array.isArray(n))return n}(e)||function(n,r){var o=n==null?null:typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(o!=null){var i,s,a=[],l=!0,u=!1;try{for(o=o.call(n);!(l=(i=o.next()).done)&&(a.push(i.value),!r||a.length!==r);l=!0);}catch(c){u=!0,s=c}finally{try{l||o.return==null||o.return()}finally{if(u)throw s}}return a}}(e,t)||function(n,r){if(!!n){if(typeof n=="string")return Ga(n,r);var o=Object.prototype.toString.call(n).slice(8,-1);if(o==="Object"&&n.constructor&&(o=n.constructor.name),o==="Map"||o==="Set")return Array.from(n);if(o==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return Ga(n,r)}}(e,t)||function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function Ga(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function M_(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var $_=y.forwardRef(function(e,t){var n=e.translations,r=n===void 0?{}:n,o=M_(e,D_),i=r.buttonText,s=i===void 0?"Search":i,a=r.buttonAriaLabel,l=a===void 0?"Search":a,u=N_(Cu(null),2),c=u[0],f=u[1];return ku(function(){typeof navigator<"u"&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?f("⌘"):f("Ctrl"))},[]),y.createElement("button",Ii({type:"button",className:"DocSearch DocSearch-Button","aria-label":l},o,{ref:t}),y.createElement("span",{className:"DocSearch-Button-Container"},y.createElement(Nu,null),y.createElement("span",{className:"DocSearch-Button-Placeholder"},s)),y.createElement("span",{className:"DocSearch-Button-Keys"},c!==null&&y.createElement(y.Fragment,null,y.createElement("kbd",{className:"DocSearch-Button-Key"},c==="Ctrl"?y.createElement(j_,null):c),y.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))});function gr(e){return e.reduce(function(t,n){return t.concat(n)},[])}var H_=0;function ki(e){return e.collections.length===0?0:e.collections.reduce(function(t,n){return t+n.items.length},0)}var Mu=function(){},F_=[{segment:"autocomplete-core",version:"1.7.4"}];function Wr(e,t){var n=t;return{then:function(r,o){return Wr(e.then(Nr(r,n,e),Nr(o,n,e)),n)},catch:function(r){return Wr(e.catch(Nr(r,n,e)),n)},finally:function(r){return r&&n.onCancelList.push(r),Wr(e.finally(Nr(r&&function(){return n.onCancelList=[],r()},n,e)),n)},cancel:function(){n.isCanceled=!0;var r=n.onCancelList;n.onCancelList=[],r.forEach(function(o){o()})},isCanceled:function(){return n.isCanceled===!0}}}function Xa(e){return Wr(e,{isCanceled:!1,onCancelList:[]})}function Nr(e,t,n){return e?function(r){return t.isCanceled?r:e(r)}:n}function el(e,t,n,r){if(!n)return null;if(e<0&&(t===null||r!==null&&t===0))return n+e;var o=(t===null?-1:t)+e;return o<=-1||o>=n?r===null?null:0:o}function tl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function B_(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function V_(e,t){var n=[];return Promise.resolve(e(t)).then(function(r){return Promise.all(r.filter(function(o){return Boolean(o)}).map(function(o){if(o.sourceId,n.includes(o.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(o.sourceId)," is not unique."));n.push(o.sourceId);var i=function(s){for(var a=1;a<arguments.length;a++){var l=arguments[a]!=null?arguments[a]:{};a%2?tl(Object(l),!0).forEach(function(u){B_(s,u,l[u])}):Object.getOwnPropertyDescriptors?Object.defineProperties(s,Object.getOwnPropertyDescriptors(l)):tl(Object(l)).forEach(function(u){Object.defineProperty(s,u,Object.getOwnPropertyDescriptor(l,u))})}return s}({getItemInputValue:function(s){return s.state.query},getItemUrl:function(){},onSelect:function(s){(0,s.setIsOpen)(!1)},onActive:Mu},o);return Promise.resolve(i)}))})}function En(e){var t=function(o){var i=o.collections.map(function(s){return s.items.length}).reduce(function(s,a,l){var u=(s[l-1]||0)+a;return s.push(u),s},[]).reduce(function(s,a){return a<=o.activeItemId?s+1:s},0);return o.collections[i]}(e);if(!t)return null;var n=t.items[function(o){for(var i=o.state,s=o.collection,a=!1,l=0,u=0;a===!1;){var c=i.collections[l];if(c===s){a=!0;break}u+=c.items.length,l++}return i.activeItemId-u}({state:e,collection:t})],r=t.source;return{item:n,itemInputValue:r.getItemInputValue({item:n,state:e}),itemUrl:r.getItemUrl({item:n,state:e}),source:r}}var q_=/((gt|sm)-|galaxy nexus)|samsung[- ]/i;function nl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function Mr(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?nl(Object(n),!0).forEach(function(r){U_(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):nl(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function U_(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function rl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function z_(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function K_(e,t,n){var r,o=t.initialState;return{getState:function(){return o},dispatch:function(i,s){var a=function(l){for(var u=1;u<arguments.length;u++){var c=arguments[u]!=null?arguments[u]:{};u%2?rl(Object(c),!0).forEach(function(f){z_(l,f,c[f])}):Object.getOwnPropertyDescriptors?Object.defineProperties(l,Object.getOwnPropertyDescriptors(c)):rl(Object(c)).forEach(function(f){Object.defineProperty(l,f,Object.getOwnPropertyDescriptor(c,f))})}return l}({},o);o=e(o,{type:i,props:t,payload:s}),n({state:o,prevState:a})},pendingRequests:(r=[],{add:function(i){return r.push(i),i.finally(function(){r=r.filter(function(s){return s!==i})})},cancelAll:function(){r.forEach(function(i){return i.cancel()})},isEmpty:function(){return r.length===0}})}}function ol(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function $r(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?ol(Object(n),!0).forEach(function(r){W_(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ol(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function W_(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function J_(e){return function(t){if(Array.isArray(t))return Yo(t)}(e)||function(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}(e)||function(t,n){if(!!t){if(typeof t=="string")return Yo(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set")return Array.from(t);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Yo(t,n)}}(e)||function(){throw new TypeError(`Invalid attempt to spread non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function Yo(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function il(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function gn(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?il(Object(n),!0).forEach(function(r){Q_(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):il(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function Q_(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function sl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function Hr(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?sl(Object(n),!0).forEach(function(r){$u(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):sl(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function $u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Z_(e){return function(t){if(Array.isArray(t))return Go(t)}(e)||function(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}(e)||function(t,n){if(!!t){if(typeof t=="string")return Go(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set")return Array.from(t);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Go(t,n)}}(e)||function(){throw new TypeError(`Invalid attempt to spread non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function Go(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function al(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function ll(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?al(Object(n),!0).forEach(function(r){Y_(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):al(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function Y_(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Fr(e){return Boolean(e.execute)}function G_(e,t){return n=e,Boolean(n==null?void 0:n.execute)?ll(ll({},e),{},{requests:e.queries.map(function(r){return{query:r,sourceId:t,transformResponse:e.transformResponse}})}):{items:e,sourceId:t};var n}function X_(e){var t=e.reduce(function(n,r){if(!Fr(r))return n.push(r),n;var o=r.searchClient,i=r.execute,s=r.requesterId,a=r.requests,l=n.find(function(f){return Fr(r)&&Fr(f)&&f.searchClient===o&&Boolean(s)&&f.requesterId===s});if(l){var u;(u=l.items).push.apply(u,Z_(a))}else{var c={execute:i,requesterId:s,items:a,searchClient:o};n.push(c)}return n},[]).map(function(n){if(!Fr(n))return Promise.resolve(n);var r=n,o=r.execute,i=r.items;return o({searchClient:r.searchClient,requests:i})});return Promise.all(t).then(function(n){return gr(n)})}function e0(e,t){return t.map(function(n){var r=e.filter(function(a){return a.sourceId===n.sourceId}),o=r.map(function(a){return a.items}),i=r[0].transformResponse,s=i?i(function(a){var l=a.map(function(u){var c;return Mr(Mr({},u),{},{hits:(c=u.hits)===null||c===void 0?void 0:c.map(function(f){return Mr(Mr({},f),{},{__autocomplete_indexName:u.index,__autocomplete_queryID:u.queryID})})})});return{results:l,hits:l.map(function(u){return u.hits}).filter(Boolean),facetHits:l.map(function(u){var c;return(c=u.facetHits)===null||c===void 0?void 0:c.map(function(f){return{label:f.value,count:f.count,_highlightResult:{label:{value:f.highlighted}}}})}).filter(Boolean)}}(o)):o;return s.every(Boolean),'The `getItems` function from source "'.concat(n.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),`. + +Did you forget to return items? + +See: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems`),{source:n,items:s}})}var t0=["event","nextState","props","query","refresh","store"];function cl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function Kn(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?cl(Object(n),!0).forEach(function(r){n0(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):cl(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function n0(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r0(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var ul,Xo,Br,Wn=null,fl=(ul=-1,Xo=-1,Br=void 0,function(e){var t=++ul;return Promise.resolve(e).then(function(n){return Br&&t<Xo?Br:(Xo=t,Br=n,n)})});function bn(e){var t=e.event,n=e.nextState,r=n===void 0?{}:n,o=e.props,i=e.query,s=e.refresh,a=e.store,l=r0(e,t0);Wn&&o.environment.clearTimeout(Wn);var u=l.setCollections,c=l.setIsOpen,f=l.setQuery,d=l.setActiveItemId,p=l.setStatus;if(f(i),d(o.defaultActiveItemId),!i&&o.openOnFocus===!1){var _,g=a.getState().collections.map(function(E){return Kn(Kn({},E),{},{items:[]})});p("idle"),u(g),c((_=r.isOpen)!==null&&_!==void 0?_:o.shouldPanelOpen({state:a.getState()}));var O=Xa(fl(g).then(function(){return Promise.resolve()}));return a.pendingRequests.add(O)}p("loading"),Wn=o.environment.setTimeout(function(){p("stalled")},o.stallThreshold);var h=Xa(fl(o.getSources(Kn({query:i,refresh:s,state:a.getState()},l)).then(function(E){return Promise.all(E.map(function(w){return Promise.resolve(w.getItems(Kn({query:i,refresh:s,state:a.getState()},l))).then(function(S){return G_(S,w.sourceId)})})).then(X_).then(function(w){return e0(w,E)}).then(function(w){return function(S){var I=S.collections,z=S.props,H=S.state,b=I.reduce(function(M,N){return Hr(Hr({},M),{},$u({},N.source.sourceId,Hr(Hr({},N.source),{},{getItems:function(){return gr(N.items)}})))},{});return gr(z.reshape({sources:Object.values(b),sourcesBySourceId:b,state:H})).filter(Boolean).map(function(M){return{source:M,items:M.getItems()}})}({collections:w,props:o,state:a.getState()})})}))).then(function(E){var w;p("idle"),u(E);var S=o.shouldPanelOpen({state:a.getState()});c((w=r.isOpen)!==null&&w!==void 0?w:o.openOnFocus&&!i&&S||S);var I=En(a.getState());if(a.getState().activeItemId!==null&&I){var z=I.item,H=I.itemInputValue,b=I.itemUrl,M=I.source;M.onActive(Kn({event:t,item:z,itemInputValue:H,itemUrl:b,refresh:s,source:M,state:a.getState()},l))}}).finally(function(){p("idle"),Wn&&o.environment.clearTimeout(Wn)});return a.pendingRequests.add(h)}var o0=["event","props","refresh","store"];function dl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function Gt(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?dl(Object(n),!0).forEach(function(r){i0(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):dl(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function i0(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s0(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var a0=["props","refresh","store"],l0=["inputElement","formElement","panelElement"],c0=["inputElement"],u0=["inputElement","maxLength"],f0=["item","source"];function pl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function Ke(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?pl(Object(n),!0).forEach(function(r){d0(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):pl(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function d0(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Jn(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function p0(e){var t=e.props,n=e.refresh,r=e.store,o=Jn(e,a0);return{getEnvironmentProps:function(i){var s=i.inputElement,a=i.formElement,l=i.panelElement;function u(c){!r.getState().isOpen&&r.pendingRequests.isEmpty()||c.target===s||[a,l].some(function(f){return d=f,p=c.target,d===p||d.contains(p);var d,p})===!1&&(r.dispatch("blur",null),t.debug||r.pendingRequests.cancelAll())}return Ke({onTouchStart:u,onMouseDown:u,onTouchMove:function(c){r.getState().isOpen!==!1&&s===t.environment.document.activeElement&&c.target!==s&&s.blur()}},Jn(i,l0))},getRootProps:function(i){return Ke({role:"combobox","aria-expanded":r.getState().isOpen,"aria-haspopup":"listbox","aria-owns":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label")},i)},getFormProps:function(i){return i.inputElement,Ke({action:"",noValidate:!0,role:"search",onSubmit:function(s){var a;s.preventDefault(),t.onSubmit(Ke({event:s,refresh:n,state:r.getState()},o)),r.dispatch("submit",null),(a=i.inputElement)===null||a===void 0||a.blur()},onReset:function(s){var a;s.preventDefault(),t.onReset(Ke({event:s,refresh:n,state:r.getState()},o)),r.dispatch("reset",null),(a=i.inputElement)===null||a===void 0||a.focus()}},Jn(i,c0))},getLabelProps:function(i){return Ke({htmlFor:"".concat(t.id,"-input"),id:"".concat(t.id,"-label")},i)},getInputProps:function(i){var s;function a(g){(t.openOnFocus||Boolean(r.getState().query))&&bn(Ke({event:g,props:t,query:r.getState().completion||r.getState().query,refresh:n,store:r},o)),r.dispatch("focus",null)}var l=i||{},u=(l.inputElement,l.maxLength),c=u===void 0?512:u,f=Jn(l,u0),d=En(r.getState()),p=function(g){return Boolean(g&&g.match(q_))}(((s=t.environment.navigator)===null||s===void 0?void 0:s.userAgent)||""),_=d!=null&&d.itemUrl&&!p?"go":"search";return Ke({"aria-autocomplete":"both","aria-activedescendant":r.getState().isOpen&&r.getState().activeItemId!==null?"".concat(t.id,"-item-").concat(r.getState().activeItemId):void 0,"aria-controls":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label"),value:r.getState().completion||r.getState().query,id:"".concat(t.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:_,spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:c,type:"search",onChange:function(g){bn(Ke({event:g,props:t,query:g.currentTarget.value.slice(0,c),refresh:n,store:r},o))},onKeyDown:function(g){(function(O){var h=O.event,E=O.props,w=O.refresh,S=O.store,I=s0(O,o0);if(h.key==="ArrowUp"||h.key==="ArrowDown"){var z=function(){var R=E.environment.document.getElementById("".concat(E.id,"-item-").concat(S.getState().activeItemId));R&&(R.scrollIntoViewIfNeeded?R.scrollIntoViewIfNeeded(!1):R.scrollIntoView(!1))},H=function(){var R=En(S.getState());if(S.getState().activeItemId!==null&&R){var $=R.item,ie=R.itemInputValue,W=R.itemUrl,re=R.source;re.onActive(Gt({event:h,item:$,itemInputValue:ie,itemUrl:W,refresh:w,source:re,state:S.getState()},I))}};h.preventDefault(),S.getState().isOpen===!1&&(E.openOnFocus||Boolean(S.getState().query))?bn(Gt({event:h,props:E,query:S.getState().query,refresh:w,store:S},I)).then(function(){S.dispatch(h.key,{nextActiveItemId:E.defaultActiveItemId}),H(),setTimeout(z,0)}):(S.dispatch(h.key,{}),H(),z())}else if(h.key==="Escape")h.preventDefault(),S.dispatch(h.key,null),S.pendingRequests.cancelAll();else if(h.key==="Tab")S.dispatch("blur",null),S.pendingRequests.cancelAll();else if(h.key==="Enter"){if(S.getState().activeItemId===null||S.getState().collections.every(function(R){return R.items.length===0}))return void(E.debug||S.pendingRequests.cancelAll());h.preventDefault();var b=En(S.getState()),M=b.item,N=b.itemInputValue,K=b.itemUrl,k=b.source;if(h.metaKey||h.ctrlKey)K!==void 0&&(k.onSelect(Gt({event:h,item:M,itemInputValue:N,itemUrl:K,refresh:w,source:k,state:S.getState()},I)),E.navigator.navigateNewTab({itemUrl:K,item:M,state:S.getState()}));else if(h.shiftKey)K!==void 0&&(k.onSelect(Gt({event:h,item:M,itemInputValue:N,itemUrl:K,refresh:w,source:k,state:S.getState()},I)),E.navigator.navigateNewWindow({itemUrl:K,item:M,state:S.getState()}));else if(!h.altKey){if(K!==void 0)return k.onSelect(Gt({event:h,item:M,itemInputValue:N,itemUrl:K,refresh:w,source:k,state:S.getState()},I)),void E.navigator.navigate({itemUrl:K,item:M,state:S.getState()});bn(Gt({event:h,nextState:{isOpen:!1},props:E,query:N,refresh:w,store:S},I)).then(function(){k.onSelect(Gt({event:h,item:M,itemInputValue:N,itemUrl:K,refresh:w,source:k,state:S.getState()},I))})}}})(Ke({event:g,props:t,refresh:n,store:r},o))},onFocus:a,onBlur:Mu,onClick:function(g){i.inputElement!==t.environment.document.activeElement||r.getState().isOpen||a(g)}},f)},getPanelProps:function(i){return Ke({onMouseDown:function(s){s.preventDefault()},onMouseLeave:function(){r.dispatch("mouseleave",null)}},i)},getListProps:function(i){return Ke({role:"listbox","aria-labelledby":"".concat(t.id,"-label"),id:"".concat(t.id,"-list")},i)},getItemProps:function(i){var s=i.item,a=i.source,l=Jn(i,f0);return Ke({id:"".concat(t.id,"-item-").concat(s.__autocomplete_id),role:"option","aria-selected":r.getState().activeItemId===s.__autocomplete_id,onMouseMove:function(u){if(s.__autocomplete_id!==r.getState().activeItemId){r.dispatch("mousemove",s.__autocomplete_id);var c=En(r.getState());if(r.getState().activeItemId!==null&&c){var f=c.item,d=c.itemInputValue,p=c.itemUrl,_=c.source;_.onActive(Ke({event:u,item:f,itemInputValue:d,itemUrl:p,refresh:n,source:_,state:r.getState()},o))}}},onMouseDown:function(u){u.preventDefault()},onClick:function(u){var c=a.getItemInputValue({item:s,state:r.getState()}),f=a.getItemUrl({item:s,state:r.getState()});(f?Promise.resolve():bn(Ke({event:u,nextState:{isOpen:!1},props:t,query:c,refresh:n,store:r},o))).then(function(){a.onSelect(Ke({event:u,item:s,itemInputValue:c,itemUrl:f,refresh:n,source:a,state:r.getState()},o))})}},l)}}}function ml(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function m0(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?ml(Object(n),!0).forEach(function(r){Hu(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ml(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function Hu(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h0(e){var t,n,r,o,i=e.plugins,s=e.options,a=(t=(((n=s.__autocomplete_metadata)===null||n===void 0?void 0:n.userAgents)||[])[0])===null||t===void 0?void 0:t.segment,l=a?Hu({},a,Object.keys(((r=s.__autocomplete_metadata)===null||r===void 0?void 0:r.options)||{})):{};return{plugins:i.map(function(u){return{name:u.name,options:Object.keys(u.__autocomplete_pluginOptions||[])}}),options:m0({"autocomplete-core":Object.keys(s)},l),ua:F_.concat(((o=s.__autocomplete_metadata)===null||o===void 0?void 0:o.userAgents)||[])}}function hl(e){var t,n=e.state;return n.isOpen===!1||n.activeItemId===null?null:((t=En(n))===null||t===void 0?void 0:t.itemInputValue)||null}function vl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function pe(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?vl(Object(n),!0).forEach(function(r){v0(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):vl(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function v0(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var g0=function(e,t){switch(t.type){case"setActiveItemId":case"mousemove":return pe(pe({},e),{},{activeItemId:t.payload});case"setQuery":return pe(pe({},e),{},{query:t.payload,completion:null});case"setCollections":return pe(pe({},e),{},{collections:t.payload});case"setIsOpen":return pe(pe({},e),{},{isOpen:t.payload});case"setStatus":return pe(pe({},e),{},{status:t.payload});case"setContext":return pe(pe({},e),{},{context:pe(pe({},e.context),t.payload)});case"ArrowDown":var n=pe(pe({},e),{},{activeItemId:t.payload.hasOwnProperty("nextActiveItemId")?t.payload.nextActiveItemId:el(1,e.activeItemId,ki(e),t.props.defaultActiveItemId)});return pe(pe({},n),{},{completion:hl({state:n})});case"ArrowUp":var r=pe(pe({},e),{},{activeItemId:el(-1,e.activeItemId,ki(e),t.props.defaultActiveItemId)});return pe(pe({},r),{},{completion:hl({state:r})});case"Escape":return e.isOpen?pe(pe({},e),{},{activeItemId:null,isOpen:!1,completion:null}):pe(pe({},e),{},{activeItemId:null,query:"",status:"idle",collections:[]});case"submit":return pe(pe({},e),{},{activeItemId:null,isOpen:!1,status:"idle"});case"reset":return pe(pe({},e),{},{activeItemId:t.props.openOnFocus===!0?t.props.defaultActiveItemId:null,status:"idle",query:""});case"focus":return pe(pe({},e),{},{activeItemId:t.props.defaultActiveItemId,isOpen:(t.props.openOnFocus||Boolean(e.query))&&t.props.shouldPanelOpen({state:e})});case"blur":return t.props.debug?e:pe(pe({},e),{},{isOpen:!1,activeItemId:null});case"mouseleave":return pe(pe({},e),{},{activeItemId:t.props.defaultActiveItemId});default:return"The reducer action ".concat(JSON.stringify(t.type)," is not supported."),e}};function gl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function Xt(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?gl(Object(n),!0).forEach(function(r){_0(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):gl(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function _0(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function y0(e){var t=[],n=function(a,l){var u,c=typeof window<"u"?window:{},f=a.plugins||[];return gn(gn({debug:!1,openOnFocus:!1,placeholder:"",autoFocus:!1,defaultActiveItemId:null,stallThreshold:300,environment:c,shouldPanelOpen:function(d){return ki(d.state)>0},reshape:function(d){return d.sources}},a),{},{id:(u=a.id)!==null&&u!==void 0?u:"autocomplete-".concat(H_++),plugins:f,initialState:gn({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},a.initialState),onStateChange:function(d){var p;(p=a.onStateChange)===null||p===void 0||p.call(a,d),f.forEach(function(_){var g;return(g=_.onStateChange)===null||g===void 0?void 0:g.call(_,d)})},onSubmit:function(d){var p;(p=a.onSubmit)===null||p===void 0||p.call(a,d),f.forEach(function(_){var g;return(g=_.onSubmit)===null||g===void 0?void 0:g.call(_,d)})},onReset:function(d){var p;(p=a.onReset)===null||p===void 0||p.call(a,d),f.forEach(function(_){var g;return(g=_.onReset)===null||g===void 0?void 0:g.call(_,d)})},getSources:function(d){return Promise.all([].concat(J_(f.map(function(p){return p.getSources})),[a.getSources]).filter(Boolean).map(function(p){return V_(p,d)})).then(function(p){return gr(p)}).then(function(p){return p.map(function(_){return gn(gn({},_),{},{onSelect:function(g){_.onSelect(g),l.forEach(function(O){var h;return(h=O.onSelect)===null||h===void 0?void 0:h.call(O,g)})},onActive:function(g){_.onActive(g),l.forEach(function(O){var h;return(h=O.onActive)===null||h===void 0?void 0:h.call(O,g)})}})})})},navigator:gn({navigate:function(d){var p=d.itemUrl;c.location.assign(p)},navigateNewTab:function(d){var p=d.itemUrl,_=c.open(p,"_blank","noopener");_==null||_.focus()},navigateNewWindow:function(d){var p=d.itemUrl;c.open(p,"_blank","noopener")}},a.navigator)})}(e,t),r=K_(g0,n,function(a){var l=a.prevState,u=a.state;n.onStateChange(Xt({prevState:l,state:u,refresh:s},o))}),o=function(a){var l=a.store;return{setActiveItemId:function(u){l.dispatch("setActiveItemId",u)},setQuery:function(u){l.dispatch("setQuery",u)},setCollections:function(u){var c=0,f=u.map(function(d){return $r($r({},d),{},{items:gr(d.items).map(function(p){return $r($r({},p),{},{__autocomplete_id:c++})})})});l.dispatch("setCollections",f)},setIsOpen:function(u){l.dispatch("setIsOpen",u)},setStatus:function(u){l.dispatch("setStatus",u)},setContext:function(u){l.dispatch("setContext",u)}}}({store:r}),i=p0(Xt({props:n,refresh:s,store:r},o));function s(){return bn(Xt({event:new Event("input"),nextState:{isOpen:r.getState().isOpen},props:n,query:r.getState().query,refresh:s,store:r},o))}return n.plugins.forEach(function(a){var l;return(l=a.subscribe)===null||l===void 0?void 0:l.call(a,Xt(Xt({},o),{},{refresh:s,onSelect:function(u){t.push({onSelect:u})},onActive:function(u){t.push({onActive:u})}}))}),function(a){var l,u,c=a.metadata,f=a.environment;if(!((l=f.navigator)===null||l===void 0||(u=l.userAgent)===null||u===void 0)&&u.includes("Algolia Crawler")){var d=f.document.createElement("meta"),p=f.document.querySelector("head");d.name="algolia:metadata",setTimeout(function(){d.content=JSON.stringify(c),p.appendChild(d)},0)}}({metadata:h0({plugins:n.plugins,options:e}),environment:n.environment}),Xt(Xt({refresh:s},i),o)}function b0(e){var t=e.translations,n=(t===void 0?{}:t).searchByText,r=n===void 0?"Search by":n;return y.createElement("a",{href:"https://www.algolia.com/ref/docsearch/?utm_source=".concat(window.location.hostname,"&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch"),target:"_blank",rel:"noopener noreferrer"},y.createElement("span",{className:"DocSearch-Label"},r),y.createElement("svg",{width:"77",height:"19","aria-label":"Algolia",role:"img",id:"Layer_1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 2196.2 500"},y.createElement("defs",null,y.createElement("style",null,".cls-1,.cls-2{fill:#003dff;}.cls-2{fill-rule:evenodd;}")),y.createElement("path",{className:"cls-2",d:"M1070.38,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"}),y.createElement("rect",{className:"cls-1",x:"1845.88",y:"104.73",width:"62.58",height:"277.9",rx:"5.9",ry:"5.9"}),y.createElement("path",{className:"cls-2",d:"M1851.78,71.38h50.77c3.26,0,5.9-2.64,5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77,7.95c-2.87,.45-4.99,2.92-4.99,5.83v51.62c0,3.26,2.64,5.9,5.9,5.9Z"}),y.createElement("path",{className:"cls-2",d:"M1764.03,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"}),y.createElement("path",{className:"cls-2",d:"M1631.95,142.72c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78,0-36.15,3.17-51.92,9.85-15.59,6.66-29.29,16.05-40.76,28.31-11.47,12.23-20.38,26.87-26.76,44.03-6.38,17.17-9.24,37.37-9.24,58.36,0,20.99,3.19,36.87,9.55,54.21,6.38,17.32,15.14,32.11,26.45,44.36,11.29,12.23,24.83,21.62,40.6,28.46,15.77,6.83,40.12,10.33,52.4,10.48,12.25,0,36.78-3.82,52.7-10.48,15.92-6.68,29.46-16.23,40.78-28.46,11.29-12.25,20.05-27.04,26.25-44.36,6.22-17.34,9.24-33.22,9.24-54.21,0-20.99-3.34-41.19-10.03-58.36-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43,163.75c-11.47,15.75-27.56,23.7-48.09,23.7-20.55,0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2,0-26.89,5.59-49.14,17.06-64.87,11.45-15.75,27.54-23.52,48.07-23.52,20.55,0,36.63,7.78,48.09,23.52,11.47,15.57,17.36,37.98,17.36,64.87,0,27.19-5.72,45.3-17.19,61.2Z"}),y.createElement("path",{className:"cls-2",d:"M894.42,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"}),y.createElement("path",{className:"cls-2",d:"M2133.97,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"}),y.createElement("path",{className:"cls-2",d:"M1314.05,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-11.79,18.34-19.6,39.64-22.11,62.59-.58,5.3-.88,10.68-.88,16.14s.31,11.15,.93,16.59c4.28,38.09,23.14,71.61,50.66,94.52,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47h0c17.99,0,34.61-5.93,48.16-15.97,16.29-11.58,28.88-28.54,34.48-47.75v50.26h-.11v11.08c0,21.84-5.71,38.27-17.34,49.36-11.61,11.08-31.04,16.63-58.25,16.63-11.12,0-28.79-.59-46.6-2.41-2.83-.29-5.46,1.5-6.27,4.22l-12.78,43.11c-1.02,3.46,1.27,7.02,4.83,7.53,21.52,3.08,42.52,4.68,54.65,4.68,48.91,0,85.16-10.75,108.89-32.21,21.48-19.41,33.15-48.89,35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,64.1s.65,139.13,0,143.36c-12.08,9.77-27.11,13.59-43.49,14.7-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-1.32,0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33Z"}),y.createElement("path",{className:"cls-1",d:"M249.83,0C113.3,0,2,110.09,.03,246.16c-2,138.19,110.12,252.7,248.33,253.5,42.68,.25,83.79-10.19,120.3-30.03,3.56-1.93,4.11-6.83,1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48,10.84-53.17,16.38-81.71,16.03-111.68-1.37-201.91-94.29-200.13-205.96,1.76-110.26,92-199.41,202.67-199.41h202.69V407.41l-115-102.18c-3.72-3.31-9.42-2.66-12.42,1.31-18.46,24.44-48.53,39.64-81.93,37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24,39.63-101.52,94-101.52,49.18,0,89.68,37.85,93.91,85.95,.38,4.28,2.31,8.27,5.52,11.12l29.95,26.55c3.4,3.01,8.79,1.17,9.63-3.3,2.16-11.55,2.92-23.58,2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13,58.14-150.27,137.25-2.09,77.1,61.08,143.56,138.19,145.26,32.19,.71,62.03-9.41,86.14-26.95l150.26,133.2c6.44,5.71,16.61,1.14,16.61-7.47V9.48C499.66,4.25,495.42,0,490.18,0H249.83Z"})))}function Vr(e){return y.createElement("svg",{width:"15",height:"15","aria-label":e.ariaLabel,role:"img"},y.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.2"},e.children))}function E0(e){var t=e.translations,n=t===void 0?{}:t,r=n.selectText,o=r===void 0?"to select":r,i=n.selectKeyAriaLabel,s=i===void 0?"Enter key":i,a=n.navigateText,l=a===void 0?"to navigate":a,u=n.navigateUpKeyAriaLabel,c=u===void 0?"Arrow up":u,f=n.navigateDownKeyAriaLabel,d=f===void 0?"Arrow down":f,p=n.closeText,_=p===void 0?"to close":p,g=n.closeKeyAriaLabel,O=g===void 0?"Escape key":g,h=n.searchByText,E=h===void 0?"Search by":h;return y.createElement(y.Fragment,null,y.createElement("div",{className:"DocSearch-Logo"},y.createElement(b0,{translations:{searchByText:E}})),y.createElement("ul",{className:"DocSearch-Commands"},y.createElement("li",null,y.createElement("kbd",{className:"DocSearch-Commands-Key"},y.createElement(Vr,{ariaLabel:s},y.createElement("path",{d:"M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"}))),y.createElement("span",{className:"DocSearch-Label"},o)),y.createElement("li",null,y.createElement("kbd",{className:"DocSearch-Commands-Key"},y.createElement(Vr,{ariaLabel:d},y.createElement("path",{d:"M7.5 3.5v8M10.5 8.5l-3 3-3-3"}))),y.createElement("kbd",{className:"DocSearch-Commands-Key"},y.createElement(Vr,{ariaLabel:c},y.createElement("path",{d:"M7.5 11.5v-8M10.5 6.5l-3-3-3 3"}))),y.createElement("span",{className:"DocSearch-Label"},l)),y.createElement("li",null,y.createElement("kbd",{className:"DocSearch-Commands-Key"},y.createElement(Vr,{ariaLabel:O},y.createElement("path",{d:"M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"}))),y.createElement("span",{className:"DocSearch-Label"},_))))}function O0(e){var t=e.hit,n=e.children;return y.createElement("a",{href:t.url},n)}function w0(){return y.createElement("svg",{viewBox:"0 0 38 38",stroke:"currentColor",strokeOpacity:".5"},y.createElement("g",{fill:"none",fillRule:"evenodd"},y.createElement("g",{transform:"translate(1 1)",strokeWidth:"2"},y.createElement("circle",{strokeOpacity:".3",cx:"18",cy:"18",r:"18"}),y.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},y.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"})))))}function S0(){return y.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},y.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},y.createElement("path",{d:"M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0"}),y.createElement("path",{d:"M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13"})))}function Ai(){return y.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},y.createElement("path",{d:"M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function P0(){return y.createElement("svg",{className:"DocSearch-Hit-Select-Icon",width:"20",height:"20",viewBox:"0 0 20 20"},y.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},y.createElement("path",{d:"M18 3v4c0 2-2 4-4 4H2"}),y.createElement("path",{d:"M8 17l-6-6 6-6"})))}var C0=function(){return y.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},y.createElement("path",{d:"M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))};function I0(e){switch(e.type){case"lvl1":return y.createElement(C0,null);case"content":return y.createElement(A0,null);default:return y.createElement(k0,null)}}function k0(){return y.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},y.createElement("path",{d:"M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function A0(){return y.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},y.createElement("path",{d:"M17 5H3h14zm0 5H3h14zm0 5H3h14z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function _l(){return y.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},y.createElement("path",{d:"M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function x0(){return y.createElement("svg",{width:"40",height:"40",viewBox:"0 0 20 20",fill:"none",fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"},y.createElement("path",{d:"M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0"}))}function T0(){return y.createElement("svg",{width:"40",height:"40",viewBox:"0 0 20 20",fill:"none",fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"},y.createElement("path",{d:"M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"}))}function L0(e){var t=e.translations,n=t===void 0?{}:t,r=n.titleText,o=r===void 0?"Unable to fetch results":r,i=n.helpText,s=i===void 0?"You might want to check your network connection.":i;return y.createElement("div",{className:"DocSearch-ErrorScreen"},y.createElement("div",{className:"DocSearch-Screen-Icon"},y.createElement(x0,null)),y.createElement("p",{className:"DocSearch-Title"},o),y.createElement("p",{className:"DocSearch-Help"},s))}var R0=["translations"];function j0(e){return function(t){if(Array.isArray(t))return ei(t)}(e)||function(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}(e)||function(t,n){if(!!t){if(typeof t=="string")return ei(t,n);var r=Object.prototype.toString.call(t).slice(8,-1);if(r==="Object"&&t.constructor&&(r=t.constructor.name),r==="Map"||r==="Set")return Array.from(t);if(r==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return ei(t,n)}}(e)||function(){throw new TypeError(`Invalid attempt to spread non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function ei(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function D0(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function N0(e){var t=e.translations,n=t===void 0?{}:t,r=D0(e,R0),o=n.noResultsText,i=o===void 0?"No results for":o,s=n.suggestedQueryText,a=s===void 0?"Try searching for":s,l=n.reportMissingResultsText,u=l===void 0?"Believe this query should return results?":l,c=n.reportMissingResultsLinkText,f=c===void 0?"Let us know.":c,d=r.state.context.searchSuggestions;return y.createElement("div",{className:"DocSearch-NoResults"},y.createElement("div",{className:"DocSearch-Screen-Icon"},y.createElement(T0,null)),y.createElement("p",{className:"DocSearch-Title"},i,' "',y.createElement("strong",null,r.state.query),'"'),d&&d.length>0&&y.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},y.createElement("p",{className:"DocSearch-Help"},a,":"),y.createElement("ul",null,d.slice(0,3).reduce(function(p,_){return[].concat(j0(p),[y.createElement("li",{key:_},y.createElement("button",{className:"DocSearch-Prefill",key:_,type:"button",onClick:function(){r.setQuery(_.toLowerCase()+" "),r.refresh(),r.inputRef.current.focus()}},_))])},[]))),r.getMissingResultsUrl&&y.createElement("p",{className:"DocSearch-Help"},"".concat(u," "),y.createElement("a",{href:r.getMissingResultsUrl({query:r.state.query}),target:"_blank",rel:"noopener noreferrer"},f)))}var M0=["hit","attribute","tagName"];function yl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function bl(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?yl(Object(n),!0).forEach(function(r){$0(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):yl(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function $0(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function H0(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function El(e,t){return t.split(".").reduce(function(n,r){return n!=null&&n[r]?n[r]:null},e)}function _n(e){var t=e.hit,n=e.attribute,r=e.tagName;return yt(r===void 0?"span":r,bl(bl({},H0(e,M0)),{},{dangerouslySetInnerHTML:{__html:El(t,"_snippetResult.".concat(n,".value"))||El(t,n)}}))}function Ol(e,t){return function(n){if(Array.isArray(n))return n}(e)||function(n,r){var o=n==null?null:typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(o!=null){var i,s,a=[],l=!0,u=!1;try{for(o=o.call(n);!(l=(i=o.next()).done)&&(a.push(i.value),!r||a.length!==r);l=!0);}catch(c){u=!0,s=c}finally{try{l||o.return==null||o.return()}finally{if(u)throw s}}return a}}(e,t)||function(n,r){if(!!n){if(typeof n=="string")return wl(n,r);var o=Object.prototype.toString.call(n).slice(8,-1);if(o==="Object"&&n.constructor&&(o=n.constructor.name),o==="Map"||o==="Set")return Array.from(n);if(o==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return wl(n,r)}}(e,t)||function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function wl(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function mo(){return mo=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},mo.apply(this,arguments)}function xi(e){return e.collection&&e.collection.items.length!==0?y.createElement("section",{className:"DocSearch-Hits"},y.createElement("div",{className:"DocSearch-Hit-source"},e.title),y.createElement("ul",e.getListProps(),e.collection.items.map(function(t,n){return y.createElement(F0,mo({key:[e.title,t.objectID].join(":"),item:t,index:n},e))}))):null}function F0(e){var t=e.item,n=e.index,r=e.renderIcon,o=e.renderAction,i=e.getItemProps,s=e.onItemClick,a=e.collection,l=e.hitComponent,u=Ol(y.useState(!1),2),c=u[0],f=u[1],d=Ol(y.useState(!1),2),p=d[0],_=d[1],g=y.useRef(null),O=l;return y.createElement("li",mo({className:["DocSearch-Hit",t.__docsearch_parent&&"DocSearch-Hit--Child",c&&"DocSearch-Hit--deleting",p&&"DocSearch-Hit--favoriting"].filter(Boolean).join(" "),onTransitionEnd:function(){g.current&&g.current()}},i({item:t,source:a.source,onClick:function(){s(t)}})),y.createElement(O,{hit:t},y.createElement("div",{className:"DocSearch-Hit-Container"},r({item:t,index:n}),t.hierarchy[t.type]&&t.type==="lvl1"&&y.createElement("div",{className:"DocSearch-Hit-content-wrapper"},y.createElement(_n,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.lvl1"}),t.content&&y.createElement(_n,{className:"DocSearch-Hit-path",hit:t,attribute:"content"})),t.hierarchy[t.type]&&(t.type==="lvl2"||t.type==="lvl3"||t.type==="lvl4"||t.type==="lvl5"||t.type==="lvl6")&&y.createElement("div",{className:"DocSearch-Hit-content-wrapper"},y.createElement(_n,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.".concat(t.type)}),y.createElement(_n,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),t.type==="content"&&y.createElement("div",{className:"DocSearch-Hit-content-wrapper"},y.createElement(_n,{className:"DocSearch-Hit-title",hit:t,attribute:"content"}),y.createElement(_n,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),o({item:t,runDeleteTransition:function(h){f(!0),g.current=h},runFavoriteTransition:function(h){_(!0),g.current=h}}))))}function Sl(e,t){return e.reduce(function(n,r){var o=t(r);return n.hasOwnProperty(o)||(n[o]=[]),n[o].length<5&&n[o].push(r),n},{})}function Pl(e){return e}function B0(){}var Fu=/(<mark>|<\/mark>)/g,V0=RegExp(Fu.source);function Bu(e){var t,n,r,o,i,s=e;if(!s.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var a=((s.__docsearch_parent?(t=s.__docsearch_parent)===null||t===void 0||(n=t._highlightResult)===null||n===void 0||(r=n.hierarchy)===null||r===void 0?void 0:r.lvl0:(o=e._highlightResult)===null||o===void 0||(i=o.hierarchy)===null||i===void 0?void 0:i.lvl0)||{}).value;return a&&V0.test(a)?a.replace(Fu,""):a}function Ti(){return Ti=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Ti.apply(this,arguments)}function q0(e){return y.createElement("div",{className:"DocSearch-Dropdown-Container"},e.state.collections.map(function(t){if(t.items.length===0)return null;var n=Bu(t.items[0]);return y.createElement(xi,Ti({},e,{key:t.source.sourceId,title:n,collection:t,renderIcon:function(r){var o,i=r.item,s=r.index;return y.createElement(y.Fragment,null,i.__docsearch_parent&&y.createElement("svg",{className:"DocSearch-Hit-Tree",viewBox:"0 0 24 54"},y.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},i.__docsearch_parent!==((o=t.items[s+1])===null||o===void 0?void 0:o.__docsearch_parent)?y.createElement("path",{d:"M8 6v21M20 27H8.3"}):y.createElement("path",{d:"M8 6v42M20 27H8.3"}))),y.createElement("div",{className:"DocSearch-Hit-icon"},y.createElement(I0,{type:i.type})))},renderAction:function(){return y.createElement("div",{className:"DocSearch-Hit-action"},y.createElement(P0,null))}}))}),e.resultsFooterComponent&&y.createElement("section",{className:"DocSearch-HitsFooter"},y.createElement(e.resultsFooterComponent,{state:e.state})))}var U0=["translations"];function ho(){return ho=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},ho.apply(this,arguments)}function z0(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function K0(e){var t=e.translations,n=t===void 0?{}:t,r=z0(e,U0),o=n.recentSearchesTitle,i=o===void 0?"Recent":o,s=n.noRecentSearchesText,a=s===void 0?"No recent searches":s,l=n.saveRecentSearchButtonTitle,u=l===void 0?"Save this search":l,c=n.removeRecentSearchButtonTitle,f=c===void 0?"Remove this search from history":c,d=n.favoriteSearchesTitle,p=d===void 0?"Favorite":d,_=n.removeFavoriteSearchButtonTitle,g=_===void 0?"Remove this search from favorites":_;return r.state.status==="idle"&&r.hasCollections===!1?r.disableUserPersonalization?null:y.createElement("div",{className:"DocSearch-StartScreen"},y.createElement("p",{className:"DocSearch-Help"},a)):r.hasCollections===!1?null:y.createElement("div",{className:"DocSearch-Dropdown-Container"},y.createElement(xi,ho({},r,{title:i,collection:r.state.collections[0],renderIcon:function(){return y.createElement("div",{className:"DocSearch-Hit-icon"},y.createElement(S0,null))},renderAction:function(O){var h=O.item,E=O.runFavoriteTransition,w=O.runDeleteTransition;return y.createElement(y.Fragment,null,y.createElement("div",{className:"DocSearch-Hit-action"},y.createElement("button",{className:"DocSearch-Hit-action-button",title:u,type:"submit",onClick:function(S){S.preventDefault(),S.stopPropagation(),E(function(){r.favoriteSearches.add(h),r.recentSearches.remove(h),r.refresh()})}},y.createElement(_l,null))),y.createElement("div",{className:"DocSearch-Hit-action"},y.createElement("button",{className:"DocSearch-Hit-action-button",title:f,type:"submit",onClick:function(S){S.preventDefault(),S.stopPropagation(),w(function(){r.recentSearches.remove(h),r.refresh()})}},y.createElement(Ai,null))))}})),y.createElement(xi,ho({},r,{title:p,collection:r.state.collections[1],renderIcon:function(){return y.createElement("div",{className:"DocSearch-Hit-icon"},y.createElement(_l,null))},renderAction:function(O){var h=O.item,E=O.runDeleteTransition;return y.createElement("div",{className:"DocSearch-Hit-action"},y.createElement("button",{className:"DocSearch-Hit-action-button",title:g,type:"submit",onClick:function(w){w.preventDefault(),w.stopPropagation(),E(function(){r.favoriteSearches.remove(h),r.refresh()})}},y.createElement(Ai,null)))}})))}var W0=["translations"];function vo(){return vo=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},vo.apply(this,arguments)}function J0(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var Q0=y.memo(function(e){var t=e.translations,n=t===void 0?{}:t,r=J0(e,W0);if(r.state.status==="error")return y.createElement(L0,{translations:n==null?void 0:n.errorScreen});var o=r.state.collections.some(function(i){return i.items.length>0});return r.state.query?o===!1?y.createElement(N0,vo({},r,{translations:n==null?void 0:n.noResultsScreen})):y.createElement(q0,r):y.createElement(K0,vo({},r,{hasCollections:o,translations:n==null?void 0:n.startScreen}))},function(e,t){return t.state.status==="loading"||t.state.status==="stalled"}),Z0=["translations"];function go(){return go=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},go.apply(this,arguments)}function Y0(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function G0(e){var t=e.translations,n=t===void 0?{}:t,r=Y0(e,Z0),o=n.resetButtonTitle,i=o===void 0?"Clear the query":o,s=n.resetButtonAriaLabel,a=s===void 0?"Clear the query":s,l=n.cancelButtonText,u=l===void 0?"Cancel":l,c=n.cancelButtonAriaLabel,f=c===void 0?"Cancel":c,d=r.getFormProps({inputElement:r.inputRef.current}).onReset;return y.useEffect(function(){r.autoFocus&&r.inputRef.current&&r.inputRef.current.focus()},[r.autoFocus,r.inputRef]),y.useEffect(function(){r.isFromSelection&&r.inputRef.current&&r.inputRef.current.select()},[r.isFromSelection,r.inputRef]),y.createElement(y.Fragment,null,y.createElement("form",{className:"DocSearch-Form",onSubmit:function(p){p.preventDefault()},onReset:d},y.createElement("label",go({className:"DocSearch-MagnifierLabel"},r.getLabelProps()),y.createElement(Nu,null)),y.createElement("div",{className:"DocSearch-LoadingIndicator"},y.createElement(w0,null)),y.createElement("input",go({className:"DocSearch-Input",ref:r.inputRef},r.getInputProps({inputElement:r.inputRef.current,autoFocus:r.autoFocus,maxLength:64}))),y.createElement("button",{type:"reset",title:i,className:"DocSearch-Reset","aria-label":a,hidden:!r.state.query},y.createElement(Ai,null))),y.createElement("button",{className:"DocSearch-Cancel",type:"reset","aria-label":f,onClick:r.onClose},u))}var X0=["_highlightResult","_snippetResult"];function ey(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function ty(e){return function(){var t="__TEST_KEY__";try{return localStorage.setItem(t,""),localStorage.removeItem(t),!0}catch{return!1}}()===!1?{setItem:function(){},getItem:function(){return[]}}:{setItem:function(t){return window.localStorage.setItem(e,JSON.stringify(t))},getItem:function(){var t=window.localStorage.getItem(e);return t?JSON.parse(t):[]}}}function Cl(e){var t=e.key,n=e.limit,r=n===void 0?5:n,o=ty(t),i=o.getItem().slice(0,r);return{add:function(s){var a=s,l=(a._highlightResult,a._snippetResult,ey(a,X0)),u=i.findIndex(function(c){return c.objectID===l.objectID});u>-1&&i.splice(u,1),i.unshift(l),i=i.slice(0,r),o.setItem(i)},remove:function(s){i=i.filter(function(a){return a.objectID!==s.objectID}),o.setItem(i)},getAll:function(){return i}}}var ny=["facetName","facetQuery"];function ry(e){var t,n="algoliasearch-client-js-".concat(e.key),r=function(){return t===void 0&&(t=e.localStorage||window.localStorage),t},o=function(){return JSON.parse(r().getItem(n)||"{}")};return{get:function(i,s){var a=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then(function(){var l=JSON.stringify(i),u=o()[l];return Promise.all([u||s(),u!==void 0])}).then(function(l){var u=co(l,2),c=u[0],f=u[1];return Promise.all([c,f||a.miss(c)])}).then(function(l){return co(l,1)[0]})},set:function(i,s){return Promise.resolve().then(function(){var a=o();return a[JSON.stringify(i)]=s,r().setItem(n,JSON.stringify(a)),s})},delete:function(i){return Promise.resolve().then(function(){var s=o();delete s[JSON.stringify(i)],r().setItem(n,JSON.stringify(s))})},clear:function(){return Promise.resolve().then(function(){r().removeItem(n)})}}}function Yn(e){var t=uo(e.caches),n=t.shift();return n===void 0?{get:function(r,o){var i=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{miss:function(){return Promise.resolve()}};return o().then(function(s){return Promise.all([s,i.miss(s)])}).then(function(s){return co(s,1)[0]})},set:function(r,o){return Promise.resolve(o)},delete:function(r){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(r,o){var i=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{miss:function(){return Promise.resolve()}};return n.get(r,o,i).catch(function(){return Yn({caches:t}).get(r,o,i)})},set:function(r,o){return n.set(r,o).catch(function(){return Yn({caches:t}).set(r,o)})},delete:function(r){return n.delete(r).catch(function(){return Yn({caches:t}).delete(r)})},clear:function(){return n.clear().catch(function(){return Yn({caches:t}).clear()})}}}function ti(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{serializable:!0},t={};return{get:function(n,r){var o=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{miss:function(){return Promise.resolve()}},i=JSON.stringify(n);if(i in t)return Promise.resolve(e.serializable?JSON.parse(t[i]):t[i]);var s=r(),a=o&&o.miss||function(){return Promise.resolve()};return s.then(function(l){return a(l)}).then(function(){return s})},set:function(n,r){return t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)},delete:function(n){return delete t[JSON.stringify(n)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function oy(e){for(var t=e.length-1;t>0;t--){var n=Math.floor(Math.random()*(t+1)),r=e[t];e[t]=e[n],e[n]=r}return e}function Vu(e,t){return t&&Object.keys(t).forEach(function(n){e[n]=t[n](e)}),e}function Lo(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=0;return e.replace(/%s/g,function(){return encodeURIComponent(n[o++])})}var Jr={WithinQueryParameters:0,WithinHeaders:1};function Il(e,t){var n=e||{},r=n.data||{};return Object.keys(n).forEach(function(o){["timeout","headers","queryParameters","data","cacheable"].indexOf(o)===-1&&(r[o]=n[o])}),{data:Object.entries(r).length>0?r:void 0,timeout:n.timeout||t,headers:n.headers||{},queryParameters:n.queryParameters||{},cacheable:n.cacheable}}var On={Read:1,Write:2,Any:3},qu=1,iy=2,Uu=3;function zu(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:qu;return Ee(Ee({},e),{},{status:t,lastUpdate:Date.now()})}function Ku(e){return typeof e=="string"?{protocol:"https",url:e,accept:On.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||On.Any}}var kl="GET",Ro="POST";function sy(e,t){return Promise.all(t.map(function(n){return e.get(n,function(){return Promise.resolve(zu(n))})})).then(function(n){var r=n.filter(function(s){return function(a){return a.status===qu||Date.now()-a.lastUpdate>12e4}(s)}),o=n.filter(function(s){return function(a){return a.status===Uu&&Date.now()-a.lastUpdate<=12e4}(s)}),i=[].concat(uo(r),uo(o));return{getTimeout:function(s,a){return(o.length===0&&s===0?1:o.length+3+s)*a},statelessHosts:i.length>0?i.map(function(s){return Ku(s)}):t}})}function Al(e,t,n,r){var o=[],i=function(d,p){if(!(d.method===kl||d.data===void 0&&p.data===void 0)){var _=Array.isArray(d.data)?d.data:Ee(Ee({},d.data),p.data);return JSON.stringify(_)}}(n,r),s=function(d,p){var _=Ee(Ee({},d.headers),p.headers),g={};return Object.keys(_).forEach(function(O){var h=_[O];g[O.toLowerCase()]=h}),g}(e,r),a=n.method,l=n.method!==kl?{}:Ee(Ee({},n.data),r.data),u=Ee(Ee(Ee({"x-algolia-agent":e.userAgent.value},e.queryParameters),l),r.queryParameters),c=0,f=function d(p,_){var g=p.pop();if(g===void 0)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:xl(o)};var O={data:i,headers:s,method:a,url:ly(g,n.path,u),connectTimeout:_(c,e.timeouts.connect),responseTimeout:_(c,r.timeout)},h=function(w){var S={request:O,response:w,host:g,triesLeft:p.length};return o.push(S),S},E={onSucess:function(w){return function(S){try{return JSON.parse(S.content)}catch(I){throw function(z,H){return{name:"DeserializationError",message:z,response:H}}(I.message,S)}}(w)},onRetry:function(w){var S=h(w);return w.isTimedOut&&c++,Promise.all([e.logger.info("Retryable failure",Ju(S)),e.hostsCache.set(g,zu(g,w.isTimedOut?Uu:iy))]).then(function(){return d(p,_)})},onFail:function(w){throw h(w),function(S,I){var z=S.content,H=S.status,b=z;try{b=JSON.parse(z).message}catch{}return function(M,N,K){return{name:"ApiError",message:M,status:N,transporterStackTrace:K}}(b,H,I)}(w,xl(o))}};return e.requester.send(O).then(function(w){return function(S,I){return function(z){var H=z.status;return z.isTimedOut||function(b){var M=b.isTimedOut,N=b.status;return!M&&~~N==0}(z)||~~(H/100)!=2&&~~(H/100)!=4}(S)?I.onRetry(S):~~(S.status/100)==2?I.onSucess(S):I.onFail(S)}(w,E)})};return sy(e.hostsCache,t).then(function(d){return f(uo(d.statelessHosts).reverse(),d.getTimeout)})}function ay(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(n){var r="; ".concat(n.segment).concat(n.version!==void 0?" (".concat(n.version,")"):"");return t.value.indexOf(r)===-1&&(t.value="".concat(t.value).concat(r)),t}};return t}function ly(e,t,n){var r=Wu(n),o="".concat(e.protocol,"://").concat(e.url,"/").concat(t.charAt(0)==="/"?t.substr(1):t);return r.length&&(o+="?".concat(r)),o}function Wu(e){return Object.keys(e).map(function(t){return Lo("%s=%s",t,(n=e[t],Object.prototype.toString.call(n)==="[object Object]"||Object.prototype.toString.call(n)==="[object Array]"?JSON.stringify(e[t]):e[t]));var n}).join("&")}function xl(e){return e.map(function(t){return Ju(t)})}function Ju(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return Ee(Ee({},e),{},{request:Ee(Ee({},e.request),{},{headers:Ee(Ee({},e.request.headers),t)})})}var cy=function(e){var t=e.appId,n=function(i,s,a){var l={"x-algolia-api-key":a,"x-algolia-application-id":s};return{headers:function(){return i===Jr.WithinHeaders?l:{}},queryParameters:function(){return i===Jr.WithinQueryParameters?l:{}}}}(e.authMode!==void 0?e.authMode:Jr.WithinHeaders,t,e.apiKey),r=function(i){var s=i.hostsCache,a=i.logger,l=i.requester,u=i.requestsCache,c=i.responsesCache,f=i.timeouts,d=i.userAgent,p=i.hosts,_=i.queryParameters,g={hostsCache:s,logger:a,requester:l,requestsCache:u,responsesCache:c,timeouts:f,userAgent:d,headers:i.headers,queryParameters:_,hosts:p.map(function(O){return Ku(O)}),read:function(O,h){var E=Il(h,g.timeouts.read),w=function(){return Al(g,g.hosts.filter(function(I){return(I.accept&On.Read)!=0}),O,E)};if((E.cacheable!==void 0?E.cacheable:O.cacheable)!==!0)return w();var S={request:O,mappedRequestOptions:E,transporter:{queryParameters:g.queryParameters,headers:g.headers}};return g.responsesCache.get(S,function(){return g.requestsCache.get(S,function(){return g.requestsCache.set(S,w()).then(function(I){return Promise.all([g.requestsCache.delete(S),I])},function(I){return Promise.all([g.requestsCache.delete(S),Promise.reject(I)])}).then(function(I){var z=co(I,2);return z[0],z[1]})})},{miss:function(I){return g.responsesCache.set(S,I)}})},write:function(O,h){return Al(g,g.hosts.filter(function(E){return(E.accept&On.Write)!=0}),O,Il(h,g.timeouts.write))}};return g}(Ee(Ee({hosts:[{url:"".concat(t,"-dsn.algolia.net"),accept:On.Read},{url:"".concat(t,".algolia.net"),accept:On.Write}].concat(oy([{url:"".concat(t,"-1.algolianet.com")},{url:"".concat(t,"-2.algolianet.com")},{url:"".concat(t,"-3.algolianet.com")}]))},e),{},{headers:Ee(Ee(Ee({},n.headers()),{"content-type":"application/x-www-form-urlencoded"}),e.headers),queryParameters:Ee(Ee({},n.queryParameters()),e.queryParameters)})),o={transporter:r,appId:t,addAlgoliaAgent:function(i,s){r.userAgent.add({segment:i,version:s})},clearCache:function(){return Promise.all([r.requestsCache.clear(),r.responsesCache.clear()]).then(function(){})}};return Vu(o,e.methods)},Qu=function(e){return function(t){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r={transporter:e.transporter,appId:e.appId,indexName:t};return Vu(r,n.methods)}},Tl=function(e){return function(t,n){var r=t.map(function(o){return Ee(Ee({},o),{},{params:Wu(o.params||{})})});return e.transporter.read({method:Ro,path:"1/indexes/*/queries",data:{requests:r},cacheable:!0},n)}},Ll=function(e){return function(t,n){return Promise.all(t.map(function(r){var o=r.params,i=o.facetName,s=o.facetQuery,a=g_(o,ny);return Qu(e)(r.indexName,{methods:{searchForFacetValues:Zu}}).searchForFacetValues(i,s,Ee(Ee({},n),a))}))}},uy=function(e){return function(t,n,r){return e.transporter.read({method:Ro,path:Lo("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:n},cacheable:!0},r)}},fy=function(e){return function(t,n){return e.transporter.read({method:Ro,path:Lo("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},n)}},Zu=function(e){return function(t,n,r){return e.transporter.read({method:Ro,path:Lo("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:n},cacheable:!0},r)}},dy=1,py=2,my=3;function Yu(e,t,n){var r,o={appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:function(i){return new Promise(function(s){var a=new XMLHttpRequest;a.open(i.method,i.url,!0),Object.keys(i.headers).forEach(function(f){return a.setRequestHeader(f,i.headers[f])});var l,u=function(f,d){return setTimeout(function(){a.abort(),s({status:0,content:d,isTimedOut:!0})},1e3*f)},c=u(i.connectTimeout,"Connection timeout");a.onreadystatechange=function(){a.readyState>a.OPENED&&l===void 0&&(clearTimeout(c),l=u(i.responseTimeout,"Socket timeout"))},a.onerror=function(){a.status===0&&(clearTimeout(c),clearTimeout(l),s({content:a.responseText||"Network request failed",status:a.status,isTimedOut:!1}))},a.onload=function(){clearTimeout(c),clearTimeout(l),s({content:a.responseText,status:a.status,isTimedOut:!1})},a.send(i.data)})}},logger:(r=my,{debug:function(i,s){return dy>=r&&console.debug(i,s),Promise.resolve()},info:function(i,s){return py>=r&&console.info(i,s),Promise.resolve()},error:function(i,s){return console.error(i,s),Promise.resolve()}}),responsesCache:ti(),requestsCache:ti({serializable:!1}),hostsCache:Yn({caches:[ry({key:"".concat("4.8.5","-").concat(e)}),ti()]}),userAgent:ay("4.8.5").add({segment:"Browser",version:"lite"}),authMode:Jr.WithinQueryParameters};return cy(Ee(Ee(Ee({},o),n),{},{methods:{search:Tl,searchForFacetValues:Ll,multipleQueries:Tl,multipleSearchForFacetValues:Ll,initIndex:function(i){return function(s){return Qu(i)(s,{methods:{search:fy,searchForFacetValues:Zu,findAnswers:uy}})}}}}))}Yu.version="4.8.5";var hy=["footer","searchBox"];function sr(){return sr=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},sr.apply(this,arguments)}function Rl(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function ni(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?Rl(Object(n),!0).forEach(function(r){vy(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Rl(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}function vy(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function gy(e,t){return function(n){if(Array.isArray(n))return n}(e)||function(n,r){var o=n==null?null:typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(o!=null){var i,s,a=[],l=!0,u=!1;try{for(o=o.call(n);!(l=(i=o.next()).done)&&(a.push(i.value),!r||a.length!==r);l=!0);}catch(c){u=!0,s=c}finally{try{l||o.return==null||o.return()}finally{if(u)throw s}}return a}}(e,t)||function(n,r){if(!!n){if(typeof n=="string")return jl(n,r);var o=Object.prototype.toString.call(n).slice(8,-1);if(o==="Object"&&n.constructor&&(o=n.constructor.name),o==="Map"||o==="Set")return Array.from(n);if(o==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return jl(n,r)}}(e,t)||function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function jl(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function _y(e,t){if(e==null)return{};var n,r,o=function(s,a){if(s==null)return{};var l,u,c={},f=Object.keys(s);for(u=0;u<f.length;u++)l=f[u],a.indexOf(l)>=0||(c[l]=s[l]);return c}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function yy(e){var t=e.appId,n=e.apiKey,r=e.indexName,o=e.placeholder,i=o===void 0?"Search docs":o,s=e.searchParameters,a=e.onClose,l=a===void 0?B0:a,u=e.transformItems,c=u===void 0?Pl:u,f=e.hitComponent,d=f===void 0?O0:f,p=e.resultsFooterComponent,_=p===void 0?function(){return null}:p,g=e.navigator,O=e.initialScrollY,h=O===void 0?0:O,E=e.transformSearchClient,w=E===void 0?Pl:E,S=e.disableUserPersonalization,I=S!==void 0&&S,z=e.initialQuery,H=z===void 0?"":z,b=e.translations,M=b===void 0?{}:b,N=e.getMissingResultsUrl,K=M.footer,k=M.searchBox,R=_y(M,hy),$=gy(y.useState({query:"",collections:[],completion:null,context:{},isOpen:!1,activeItemId:null,status:"idle"}),2),ie=$[0],W=$[1],re=y.useRef(null),se=y.useRef(null),Le=y.useRef(null),De=y.useRef(null),Ne=y.useRef(null),Ae=y.useRef(10),ct=y.useRef(typeof window<"u"?window.getSelection().toString().slice(0,64):"").current,Ge=y.useRef(H||ct).current,x=function(v,P,C){return y.useMemo(function(){var A=Yu(v,P);return A.addAlgoliaAgent("docsearch","3.3.3"),/docsearch.js \(.*\)/.test(A.transporter.userAgent.value)===!1&&A.addAlgoliaAgent("docsearch-react","3.3.3"),C(A)},[v,P,C])}(t,n,w),U=y.useRef(Cl({key:"__DOCSEARCH_FAVORITE_SEARCHES__".concat(r),limit:10})).current,q=y.useRef(Cl({key:"__DOCSEARCH_RECENT_SEARCHES__".concat(r),limit:U.getAll().length===0?7:4})).current,Z=y.useCallback(function(v){if(!I){var P=v.type==="content"?v.__docsearch_parent:v;P&&U.getAll().findIndex(function(C){return C.objectID===P.objectID})===-1&&q.add(P)}},[U,q,I]),de=y.useMemo(function(){return y0({id:"docsearch",defaultActiveItemId:0,placeholder:i,openOnFocus:!0,initialState:{query:Ge,context:{searchSuggestions:[]}},navigator:g,onStateChange:function(v){W(v.state)},getSources:function(v){var P=v.query,C=v.state,A=v.setContext,D=v.setStatus;return P?x.search([{query:P,indexName:r,params:ni({attributesToRetrieve:["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"],attributesToSnippet:["hierarchy.lvl1:".concat(Ae.current),"hierarchy.lvl2:".concat(Ae.current),"hierarchy.lvl3:".concat(Ae.current),"hierarchy.lvl4:".concat(Ae.current),"hierarchy.lvl5:".concat(Ae.current),"hierarchy.lvl6:".concat(Ae.current),"content:".concat(Ae.current)],snippetEllipsisText:"…",highlightPreTag:"<mark>",highlightPostTag:"</mark>",hitsPerPage:20},s)}]).catch(function(j){throw j.name==="RetryError"&&D("error"),j}).then(function(j){var T=j.results[0],F=T.hits,L=T.nbHits,G=Sl(F,function(Y){return Bu(Y)});return C.context.searchSuggestions.length<Object.keys(G).length&&A({searchSuggestions:Object.keys(G)}),A({nbHits:L}),Object.values(G).map(function(Y,X){return{sourceId:"hits".concat(X),onSelect:function(ee){var ue=ee.item,ve=ee.event;Z(ue),ve.shiftKey||ve.ctrlKey||ve.metaKey||l()},getItemUrl:function(ee){return ee.item.url},getItems:function(){return Object.values(Sl(Y,function(ee){return ee.hierarchy.lvl1})).map(c).map(function(ee){return ee.map(function(ue){return ni(ni({},ue),{},{__docsearch_parent:ue.type!=="lvl1"&&ee.find(function(ve){return ve.type==="lvl1"&&ve.hierarchy.lvl1===ue.hierarchy.lvl1})})})}).flat()}}})}):I?[]:[{sourceId:"recentSearches",onSelect:function(j){var T=j.item,F=j.event;Z(T),F.shiftKey||F.ctrlKey||F.metaKey||l()},getItemUrl:function(j){return j.item.url},getItems:function(){return q.getAll()}},{sourceId:"favoriteSearches",onSelect:function(j){var T=j.item,F=j.event;Z(T),F.shiftKey||F.ctrlKey||F.metaKey||l()},getItemUrl:function(j){return j.item.url},getItems:function(){return U.getAll()}}]}})},[r,s,x,l,q,U,Z,Ge,i,g,c,I]),Pe=de.getEnvironmentProps,le=de.getRootProps,m=de.refresh;return function(v){var P=v.getEnvironmentProps,C=v.panelElement,A=v.formElement,D=v.inputElement;y.useEffect(function(){if(C&&A&&D){var j=P({panelElement:C,formElement:A,inputElement:D}),T=j.onTouchStart,F=j.onTouchMove;return window.addEventListener("touchstart",T),window.addEventListener("touchmove",F),function(){window.removeEventListener("touchstart",T),window.removeEventListener("touchmove",F)}}},[P,C,A,D])}({getEnvironmentProps:Pe,panelElement:De.current,formElement:Le.current,inputElement:Ne.current}),function(v){var P=v.container;y.useEffect(function(){if(P){var C=P.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), input:not([disabled])"),A=C[0],D=C[C.length-1];return P.addEventListener("keydown",j),function(){P.removeEventListener("keydown",j)}}function j(T){T.key==="Tab"&&(T.shiftKey?document.activeElement===A&&(T.preventDefault(),D.focus()):document.activeElement===D&&(T.preventDefault(),A.focus()))}},[P])}({container:re.current}),y.useEffect(function(){return document.body.classList.add("DocSearch--active"),function(){var v,P;document.body.classList.remove("DocSearch--active"),(v=(P=window).scrollTo)===null||v===void 0||v.call(P,0,h)}},[]),y.useEffect(function(){window.matchMedia("(max-width: 768px)").matches&&(Ae.current=5)},[]),y.useEffect(function(){De.current&&(De.current.scrollTop=0)},[ie.query]),y.useEffect(function(){Ge.length>0&&(m(),Ne.current&&Ne.current.focus())},[Ge,m]),y.useEffect(function(){function v(){if(se.current){var P=.01*window.innerHeight;se.current.style.setProperty("--docsearch-vh","".concat(P,"px"))}}return v(),window.addEventListener("resize",v),function(){window.removeEventListener("resize",v)}},[]),y.createElement("div",sr({ref:re},le({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container",ie.status==="stalled"&&"DocSearch-Container--Stalled",ie.status==="error"&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),role:"button",tabIndex:0,onMouseDown:function(v){v.target===v.currentTarget&&l()}}),y.createElement("div",{className:"DocSearch-Modal",ref:se},y.createElement("header",{className:"DocSearch-SearchBar",ref:Le},y.createElement(G0,sr({},de,{state:ie,autoFocus:Ge.length===0,inputRef:Ne,isFromSelection:Boolean(Ge)&&Ge===ct,translations:k,onClose:l}))),y.createElement("div",{className:"DocSearch-Dropdown",ref:De},y.createElement(Q0,sr({},de,{indexName:r,state:ie,hitComponent:d,resultsFooterComponent:_,disableUserPersonalization:I,recentSearches:q,favoriteSearches:U,inputRef:Ne,translations:R,getMissingResultsUrl:N,onItemClick:function(v){Z(v),l()}}))),y.createElement("footer",{className:"DocSearch-Footer"},y.createElement(E0,{translations:K}))))}function Li(){return Li=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Li.apply(this,arguments)}function Dl(e,t){return function(n){if(Array.isArray(n))return n}(e)||function(n,r){var o=n==null?null:typeof Symbol<"u"&&n[Symbol.iterator]||n["@@iterator"];if(o!=null){var i,s,a=[],l=!0,u=!1;try{for(o=o.call(n);!(l=(i=o.next()).done)&&(a.push(i.value),!r||a.length!==r);l=!0);}catch(c){u=!0,s=c}finally{try{l||o.return==null||o.return()}finally{if(u)throw s}}return a}}(e,t)||function(n,r){if(!!n){if(typeof n=="string")return Nl(n,r);var o=Object.prototype.toString.call(n).slice(8,-1);if(o==="Object"&&n.constructor&&(o=n.constructor.name),o==="Map"||o==="Set")return Array.from(n);if(o==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return Nl(n,r)}}(e,t)||function(){throw new TypeError(`Invalid attempt to destructure non-iterable instance. +In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}()}function Nl(e,t){(t==null||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function by(e){var t,n,r=y.useRef(null),o=Dl(y.useState(!1),2),i=o[0],s=o[1],a=Dl(y.useState((e==null?void 0:e.initialQuery)||void 0),2),l=a[0],u=a[1],c=y.useCallback(function(){s(!0)},[s]),f=y.useCallback(function(){s(!1)},[s]);return function(d){var p=d.isOpen,_=d.onOpen,g=d.onClose,O=d.onInput,h=d.searchButtonRef;y.useEffect(function(){function E(w){(w.keyCode===27&&p||w.key.toLowerCase()==="k"&&(w.metaKey||w.ctrlKey)||!function(S){var I=S.target,z=I.tagName;return I.isContentEditable||z==="INPUT"||z==="SELECT"||z==="TEXTAREA"}(w)&&w.key==="/"&&!p)&&(w.preventDefault(),p?g():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||_()),h&&h.current===document.activeElement&&O&&/[a-zA-Z0-9]/.test(String.fromCharCode(w.keyCode))&&O(w)}return window.addEventListener("keydown",E),function(){window.removeEventListener("keydown",E)}},[p,_,g,O,h])}({isOpen:i,onOpen:c,onClose:f,onInput:y.useCallback(function(d){s(!0),u(d.key)},[s,u]),searchButtonRef:r}),y.createElement(y.Fragment,null,y.createElement($_,{ref:r,translations:e==null||(t=e.translations)===null||t===void 0?void 0:t.button,onClick:c}),i&&Lu(y.createElement(yy,Li({},e,{initialScrollY:window.scrollY,initialQuery:l,translations:e==null||(n=e.translations)===null||n===void 0?void 0:n.modal,onClose:f})),document.body))}function Ey(e){ju(y.createElement(by,bi({},e,{transformSearchClient:function(t){return t.addAlgoliaAgent("docsearch.js","3.3.3"),e.transformSearchClient?e.transformSearchClient(t):t}})),function(t){var n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:window;return typeof t=="string"?n.document.querySelector(t):t}(e.container,e.environment))}const Oy=e=>e.button===1||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey,wy=()=>{const e=pn(),t=us();return{hitComponent:({hit:n,children:r})=>({type:"a",ref:void 0,constructor:void 0,key:void 0,props:{href:n.url,onClick:o=>{Oy(o)||(o.preventDefault(),e.push(Zs(n.url,t.value.base)))},children:r},__v:null}),navigator:{navigate:({itemUrl:n})=>{e.push(Zs(n,t.value.base))}},transformSearchClient:n=>{const r=Gi(n.search,500);return{...n,search:async(...o)=>r(...o)}}}};const Sy=me({name:"Docsearch",props:{containerId:{type:String,required:!1,default:"docsearch-container"},options:{type:Object,required:!0}},setup(e){const t=Fn(),n=rf(),r=wy(),o=Q(()=>{var a;return{...e.options,...(a=e.options.locales)==null?void 0:a[t.value]}}),i=[],s=()=>{var l,u;const a=(u=(l=o.value.searchParameters)==null?void 0:l.facetFilters)!=null?u:[];i.splice(0,i.length,`lang:${n.value}`,...oe(a)?a:[a]),Ey({...r,...o.value,container:`#${e.containerId}`,searchParameters:{...o.value.searchParameters,facetFilters:i}})};return Ye(()=>{s(),lt([t,o],([a,l],[u,c])=>{a!==u&&JSON.stringify(l)!==JSON.stringify(c)&&s()}),lt(n,(a,l)=>{if(a!==l){const u=i.findIndex(c=>c===`lang:${l}`);u>-1&&i.splice(u,1,`lang:${a}`)}})}),()=>he("div",{id:e.containerId})}}),Py={appId:"4ZF3BCJTP5",apiKey:"09ff75bbe16bc6e166e103ffb57e10ea",indexName:"fesjs",locales:{"/":{placeholder:"搜索文档"}}},Cy=Ot({enhance({app:e}){e.component("Docsearch",()=>he(Sy,{options:Py}))}});function Iy(e){return{all:e=e||new Map,on:function(t,n){var r=e.get(t);r?r.push(n):e.set(t,[n])},off:function(t,n){var r=e.get(t);r&&(n?r.splice(r.indexOf(n)>>>0,1):e.set(t,[]))},emit:function(t,n){var r=e.get(t);r&&r.slice().map(function(o){o(n)}),(r=e.get("*"))&&r.slice().map(function(o){o(t,n)})}}}const Gu=Symbol("pwaEvent"),ky=()=>{const e=Fe(Gu);if(!e)throw new Error("usePwaEvent() is called without provider.");return e},Ay=e=>{const t=e.waiting;if(!t)return;const n=new MessageChannel;t.postMessage({type:"SKIP_WAITING"},[n.port2])},xy="service-worker.js",Ty=Ot({setup(){const e=(...n)=>console.log("[@vuepress/plugin-pwa]",...n),t=Iy();Bt(Gu,t),Ye(async()=>{const{register:n}=await B(()=>import("./index.0b6f9a66.js"),[]);n(jo(xy),{ready(r){e("Service worker is active."),t.emit("ready",r)},registered(r){e("Service worker has been registered."),t.emit("registered",r)},cached(r){e("Content has been cached for offline use."),t.emit("cached",r)},updatefound(r){e("New content is downloading."),t.emit("updatefound",r)},updated(r){e("New content is available, please refresh."),t.emit("updated",r)},offline(){e("No internet connection found. App is running in offline mode."),t.emit("offline")},error(r){e("Error during service worker registration:",r),t.emit("error",r)}})})}});const Ly=me({name:"PwaPopup",props:{locales:{type:Object,required:!1,default:()=>({})}},setup(e){const t=ky(),n=Fn(),r=Q(()=>{var a;return(a=e.locales[n.value])!=null?a:{message:"New content is available.",buttonText:"Refresh"}}),o=Ce(!1),i=Ce(null),s=()=>{o.value=!1,i.value&&(Ay(i.value),location.reload(!0))};return t.on("updated",a=>{a&&(i.value=a,o.value=!0)}),()=>he($n,{name:"pwa-popup"},()=>o.value?he("div",{class:"pwa-popup"},[r.value.message,he("br"),he("button",{onClick:s},r.value.buttonText)]):null)}}),Ry={"/":{message:"发现新内容可用",buttonText:"刷新"}},jy=Ot({rootComponents:[me(()=>()=>he(Ly,{locales:Ry}))]}),Ml=()=>window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,Dy=()=>window.scrollTo({top:0,behavior:"smooth"});const Ny=me({name:"BackToTop",setup(){const e=Ce(0),t=Q(()=>e.value>300),n=Gi(()=>{e.value=Ml()},100);Ye(()=>{e.value=Ml(),window.addEventListener("scroll",()=>n())});const r=he("div",{class:"back-to-top",onClick:Dy});return()=>he($n,{name:"back-to-top"},()=>t.value?r:null)}}),My=Ot({rootComponents:[Ny]}),Qr=[eh,oh,vh,bh,Ch,h_,Cy,Ty,jy,My];var $y=Ce(lf),Xu=Oo({key:"",path:"",title:"",lang:"",frontmatter:{},excerpt:"",headers:[]}),an=Ce(Xu),Vt=()=>an,ef=Symbol(""),At=()=>{const e=Fe(ef);if(!e)throw new Error("usePageFrontmatter() is called without provider.");return e},tf=Symbol(""),Hy=()=>{const e=Fe(tf);if(!e)throw new Error("usePageHead() is called without provider.");return e},Fy=Symbol(""),nf=Symbol(""),rf=()=>{const e=Fe(nf);if(!e)throw new Error("usePageLang() is called without provider.");return e},cs=Symbol(""),Fn=()=>{const e=Fe(cs);if(!e)throw new Error("useRouteLocale() is called without provider.");return e},cn=Ce(Vp),us=()=>cn,of=Symbol(""),fs=()=>{const e=Fe(of);if(!e)throw new Error("useSiteLocaleData() is called without provider.");return e},By=Symbol(""),nn=Mn({resolvePageData:async e=>{const t=$y.value[e],n=await(t==null?void 0:t());return n!=null?n:Xu},resolvePageFrontmatter:e=>e.frontmatter,resolvePageHead:(e,t,n)=>{const r=Oe(t.description)?t.description:n.description,o=[...oe(t.head)?t.head:[],...n.head,["title",{},e],["meta",{name:"description",content:r}]];return Up(o)},resolvePageHeadTitle:(e,t)=>`${e.title?`${e.title}`:""}${t.title?` | ${t.title}`:""}`,resolvePageLang:e=>e.lang||"en",resolveRouteLocale:(e,t)=>Hc(e,t),resolveSiteLocaleData:(e,t)=>({...e,...e.locales[t]})}),ds=me({name:"ClientOnly",setup(e,t){const n=Ce(!1);return Ye(()=>{n.value=!0}),()=>{var r,o;return n.value?(o=(r=t.slots).default)==null?void 0:o.call(r):null}}}),Vy=me({name:"Content",props:{pageKey:{type:String,required:!1,default:""}},setup(e){const t=Vt(),n=Q(()=>Fc[e.pageKey||t.value.key]);return()=>n.value?he(n.value):he("div","404 Not Found")}}),qy="Layout",Uy="NotFound",zy=Qr.reduce((e,t)=>({...e,...t.layouts}),{}),$l=me({name:"Vuepress",setup(){const e=Vt(),t=Q(()=>{let n;if(e.value.path){const r=e.value.frontmatter.layout;Oe(r)?n=r:n=qy}else n=Uy;return zy[n]});return()=>he(t.value)}}),jo=e=>wr(e)?e:`${us().value.base}${$c(e)}`;const Ky=[["v-8daa1a0e","/",{title:"首页"},["/index.html","/README.md"]],["v-fffb8e28","/guide/",{title:"介绍"},["/guide/index.html","/guide/README.md"]],["v-0cca110a","/guide/builder.html",{title:"支持 Vite 和 Webpack 双构建"},["/guide/builder","/guide/builder.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-4acab794","/guide/upgrade3.html",{title:"从 2.0.x 迁移到 3.0.x"},["/guide/upgrade3","/guide/upgrade3.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-56ab05de","/reference/plugin/plugins/login.html",{title:"@fesjs/plugin-login"},["/reference/plugin/plugins/login","/reference/plugin/plugins/login.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-317f9008","/reference/plugin/plugins/swc.html",{title:"@fesjs/plugin-swc"},["/reference/plugin/plugins/swc","/reference/plugin/plugins/swc.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",{title:""},["/404"]]];var Wy=()=>Ky.reduce((e,[t,n,r,o])=>(e.push({name:t,path:n,component:$l,meta:r},...o.map(i=>({path:i,redirect:n}))),e),[{name:"404",path:"/:catchAll(.*)",component:$l}]),Jy=um,Qy=()=>{const e=Wm({history:Jy(Mc(cn.value.base)),routes:Wy(),scrollBehavior:(t,n,r)=>r||(t.hash?{el:t.hash}:{top:0})});return e.beforeResolve(async(t,n)=>{var r;(t.path!==n.path||n===St)&&([an.value]=await Promise.all([nn.resolvePageData(t.name),(r=Fc[t.name])==null?void 0:r.__asyncLoader()]))}),e},Zy=e=>{e.component("ClientOnly",ds),e.component("Content",Vy)},Yy=(e,t)=>{const n=Q(()=>nn.resolveRouteLocale(cn.value.locales,t.currentRoute.value.path)),r=Q(()=>nn.resolveSiteLocaleData(cn.value,n.value)),o=Q(()=>nn.resolvePageFrontmatter(an.value)),i=Q(()=>nn.resolvePageHeadTitle(an.value,r.value)),s=Q(()=>nn.resolvePageHead(i.value,o.value,r.value)),a=Q(()=>nn.resolvePageLang(an.value));return e.provide(cs,n),e.provide(of,r),e.provide(ef,o),e.provide(Fy,i),e.provide(tf,s),e.provide(nf,a),Object.defineProperties(e.config.globalProperties,{$frontmatter:{get:()=>o.value},$head:{get:()=>s.value},$headTitle:{get:()=>i.value},$lang:{get:()=>a.value},$page:{get:()=>an.value},$routeLocale:{get:()=>n.value},$site:{get:()=>cn.value},$siteLocale:{get:()=>r.value},$withBase:{get:()=>jo}}),{pageData:an,pageFrontmatter:o,pageHead:s,pageHeadTitle:i,pageLang:a,routeLocale:n,siteData:cn,siteLocaleData:r}},Gy=()=>{const e=Jt(),t=Hy(),n=rf(),r=Ce([]),o=()=>{t.value.forEach(s=>{const a=Xy(s);a&&r.value.push(a)})},i=()=>{document.documentElement.lang=n.value,r.value.forEach(s=>{s.parentNode===document.head&&document.head.removeChild(s)}),r.value.splice(0,r.value.length),t.value.forEach(s=>{const a=eb(s);a!==null&&(document.head.appendChild(a),r.value.push(a))})};Bt(By,i),Ye(()=>{o(),i(),lt(()=>e.path,()=>i())})},Xy=([e,t,n=""])=>{const r=Object.entries(t).map(([a,l])=>Oe(l)?`[${a}="${l}"]`:l===!0?`[${a}]`:"").join(""),o=`head > ${e}${r}`;return Array.from(document.querySelectorAll(o)).find(a=>a.innerText===n)||null},eb=([e,t,n])=>{if(!Oe(e))return null;const r=document.createElement(e);return Yi(t)&&Object.entries(t).forEach(([o,i])=>{Oe(i)?r.setAttribute(o,i):i===!0&&r.setAttribute(o,"")}),Oe(n)&&r.appendChild(document.createTextNode(n)),r},tb=Fp,nb=async()=>{var n;const e=tb({name:"VuepressApp",setup(){var r;Gy();for(const o of Qr)(r=o.setup)==null||r.call(o);return()=>[he(Yc),...Qr.flatMap(({rootComponents:o=[]})=>o.map(i=>he(i)))]}}),t=Qy();Zy(e),Yy(e,t);for(const r of Qr)await((n=r.enhance)==null?void 0:n.call(r,{app:e,router:t,siteData:cn}));return e.use(t),{app:e,router:t}};nb().then(({app:e,router:t})=>{t.isReady().then(()=>{e.mount("#app")})});export{Re as _,ae as a,ye as b,ne as c,nb as createVueApp,Kt as d,Me as e,tp as f,J as o,Tt as r,qe as w}; diff --git a/assets/img/back-to-top.8b37f773.svg b/assets/back-to-top.8efcbe56.svg similarity index 100% rename from assets/img/back-to-top.8b37f773.svg rename to assets/back-to-top.8efcbe56.svg diff --git a/assets/builder.html.246dbbe3.js b/assets/builder.html.246dbbe3.js new file mode 100644 index 00000000..511453f9 --- /dev/null +++ b/assets/builder.html.246dbbe3.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-0cca110a","path":"/guide/builder.html","title":"支持 Vite 和 Webpack 双构建","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"使用差异","slug":"使用差异","link":"#使用差异","children":[{"level":3,"title":"配置","slug":"配置","link":"#配置","children":[]},{"level":3,"title":"静态文件处理","slug":"静态文件处理","link":"#静态文件处理","children":[]},{"level":3,"title":"html 模版","slug":"html-模版","link":"#html-模版","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/builder.md"}');export{e as data}; diff --git a/assets/builder.html.5491993d.js b/assets/builder.html.5491993d.js new file mode 100644 index 00000000..409048f7 --- /dev/null +++ b/assets/builder.html.5491993d.js @@ -0,0 +1 @@ +import{_ as n,r as i,o as c,c as o,b as e,d as t,a as r,f as s}from"./app.bd9c95b7.js";const l={},h=s('<h1 id="支持-vite-和-webpack-双构建" tabindex="-1"><a class="header-anchor" href="#支持-vite-和-webpack-双构建" aria-hidden="true">#</a> 支持 Vite 和 Webpack 双构建</h1><p><code>Fes.js@3.0.x</code> 版本支持 Vite 和 Webpack 两种构建方式,不再内置构建方式,需要开发者自行选择:</p><ul><li>选用 Vite 构建,安装 <code>npm i @fesjs/builder-vite</code> 依赖即可。</li><li>选用 Webpack 构建,安装 <code>npm i @fesjs/builder-webpack</code> 依赖即可。</li></ul><h2 id="使用差异" tabindex="-1"><a class="header-anchor" href="#使用差异" aria-hidden="true">#</a> 使用差异</h2><p>由于 Fes.js 在 Vite 和 Webpack 上做了一层封装,开发者关心的构建配置不会太多。从使用上来说,主要存在以下几个差异点:</p><h3 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>Webpack 和 Vite 构建在配置方面有一些差异,具体可以查看<a href="../reference/config">配置</a>。</p><h3 id="静态文件处理" tabindex="-1"><a class="header-anchor" href="#静态文件处理" aria-hidden="true">#</a> 静态文件处理</h3>',8),d=e("code",null,"require",-1),p={href:"https://cn.vitejs.dev/guide/assets.html",target:"_blank",rel:"noopener noreferrer"},u=e("h3",{id:"html-模版",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#html-模版","aria-hidden":"true"},"#"),t(" html 模版")],-1),_={href:"https://github.com/jantimon/html-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},b={href:"https://github.com/vbenjs/vite-plugin-html",target:"_blank",rel:"noopener noreferrer"},m=e("div",{class:"custom-container tip"},[e("p",{class:"custom-container-title"},"提示"),e("p",null,[t("fes3.0+ html 模版文件从 "),e("code",null,"public/index.html"),t(" 挪到项目根目录。")])],-1);function f(k,x){const a=i("ExternalLinkIcon");return c(),o("div",null,[h,e("p",null,[t("由于 Vite 的限制,不支持 "),d,t(" 语法,具体 Vite 的用法可以查看"),e("a",p,[t("官网"),r(a)])]),u,e("p",null,[t("html 模版比较常规的需求,例如模版变量,Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求, Webpack 可以使用 "),e("a",_,[t("html-webpack-plugin"),r(a)]),t(",Vite 使用"),e("a",b,[t("vite-plugin-html"),r(a)]),t(" 进行个性化配置。")]),m])}const v=n(l,[["render",f],["__file","builder.html.vue"]]);export{v as default}; diff --git a/assets/cli.html.af8c16d8.js b/assets/cli.html.af8c16d8.js new file mode 100644 index 00000000..d1ca9bf8 --- /dev/null +++ b/assets/cli.html.af8c16d8.js @@ -0,0 +1,46 @@ +import{_ as r,r as t,o as p,c as o,b as a,d as e,a as s,w as c,f as i}from"./app.bd9c95b7.js";const d={},u=a("h1",{id:"命令行接口",tabindex:"-1"},[a("a",{class:"header-anchor",href:"#命令行接口","aria-hidden":"true"},"#"),e(" 命令行接口")],-1),v={href:"https://www.npmjs.com/package/@vuepress/cli",target:"_blank",rel:"noopener noreferrer"},m={href:"https://www.npmjs.com/package/vuepress",target:"_blank",rel:"noopener noreferrer"},b=i(`<p>执行 <code>vuepress --help</code> 来获取下列帮助信息:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>Usage: + $ vuepress <span class="token operator"><</span>command<span class="token operator">></span> <span class="token punctuation">[</span>options<span class="token punctuation">]</span> + +Commands: + dev <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span> Start development server + build <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span> Build to static site + info Display environment information + +For <span class="token function">more</span> info, run any <span class="token builtin class-name">command</span> with the <span class="token variable"><span class="token variable">\`</span><span class="token parameter variable">--help</span><span class="token variable">\`</span></span> flag: + $ vuepress dev <span class="token parameter variable">--help</span> + $ vuepress build <span class="token parameter variable">--help</span> + $ vuepress info <span class="token parameter variable">--help</span> + +Options: + -v, <span class="token parameter variable">--version</span> Display version number + -h, <span class="token parameter variable">--help</span> Display this message +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dev" tabindex="-1"><a class="header-anchor" href="#dev" aria-hidden="true">#</a> dev</h2><p>启动一个开发服务器,在本地开发你的 VuePress 站点。</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>Usage: + $ vuepress dev <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span> + +Options: + -c, <span class="token parameter variable">--config</span> <span class="token operator"><</span>config<span class="token operator">></span> Set path to config <span class="token function">file</span> + -p, <span class="token parameter variable">--port</span> <span class="token operator"><</span>port<span class="token operator">></span> Use specified port <span class="token punctuation">(</span>default: <span class="token number">8080</span><span class="token punctuation">)</span> + -t, <span class="token parameter variable">--temp</span> <span class="token operator"><</span>temp<span class="token operator">></span> Set the directory of the temporary files + <span class="token parameter variable">--host</span> <span class="token operator"><</span>host<span class="token operator">></span> Use specified <span class="token function">host</span> <span class="token punctuation">(</span>default: <span class="token number">0.0</span>.0.0<span class="token punctuation">)</span> + <span class="token parameter variable">--cache</span> <span class="token operator"><</span>cache<span class="token operator">></span> Set the directory of the cache files + --clean-temp Clean the temporary files before dev + --clean-cache Clean the cache files before dev + <span class="token parameter variable">--open</span> Open browser when ready + <span class="token parameter variable">--debug</span> Enable debug mode + --no-watch Disable watching page and config files <span class="token punctuation">(</span>default: <span class="token boolean">true</span><span class="token punctuation">)</span> + -v, <span class="token parameter variable">--version</span> Display version number + -h, <span class="token parameter variable">--help</span> Display this message +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>通过命令行设置的配置项,会覆盖你配置文件中的同名配置项。</p></div><h2 id="build" tabindex="-1"><a class="header-anchor" href="#build" aria-hidden="true">#</a> build</h2>`,7),h=i(`<div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>Usage: + $ vuepress build <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span> + +Options: + -c, <span class="token parameter variable">--config</span> <span class="token operator"><</span>config<span class="token operator">></span> Set path to config <span class="token function">file</span> + -d, <span class="token parameter variable">--dest</span> <span class="token operator"><</span>dest<span class="token operator">></span> Set the directory build output <span class="token punctuation">(</span>default: .vuepress/dist<span class="token punctuation">)</span> + -t, <span class="token parameter variable">--temp</span> <span class="token operator"><</span>temp<span class="token operator">></span> Set the directory of the temporary files + <span class="token parameter variable">--cache</span> <span class="token operator"><</span>cache<span class="token operator">></span> Set the directory of the cache files + --clean-temp Clean the temporary files before build + --clean-cache Clean the cache files before build + <span class="token parameter variable">--debug</span> Enable debug mode + -v, <span class="token parameter variable">--version</span> Display version number + -h, <span class="token parameter variable">--help</span> Display this message +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>通过命令行设置的配置项,会覆盖你配置文件中的同名配置项。</p></div><h2 id="info" tabindex="-1"><a class="header-anchor" href="#info" aria-hidden="true">#</a> info</h2><p>输出当前系统和依赖相关的信息。</p><p>在你想要检查你的环境,或者提交 Issue 时候,可以使用该命令。</p>`,5);function k(f,g){const n=t("ExternalLinkIcon"),l=t("RouterLink");return p(),o("div",null,[u,a("p",null,[e("VuePress 命令行接口是由 "),a("a",v,[e("@vuepress/cli"),s(n)]),e(" 包提供的。它是 "),a("a",m,[e("vuepress"),s(n)]),e(" 包的依赖之一,当然你也可以单独安装它。")]),b,a("p",null,[e("将你的 VuePress 站点构建成静态文件,以便你进行后续"),s(l,{to:"/guide/deployment.html"},{default:c(()=>[e("部署")]),_:1}),e("。")]),h])}const y=r(d,[["render",k],["__file","cli.html.vue"]]);export{y as default}; diff --git a/assets/cli.html.eb7c8bac.js b/assets/cli.html.eb7c8bac.js new file mode 100644 index 00000000..dc8cfa29 --- /dev/null +++ b/assets/cli.html.eb7c8bac.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-a951be94","path":"/reference/cli.html","title":"命令行接口","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"dev","slug":"dev","link":"#dev","children":[]},{"level":2,"title":"build","slug":"build","link":"#build","children":[]},{"level":2,"title":"info","slug":"info","link":"#info","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/cli.md"}');export{e as data}; diff --git a/assets/config.html.637a9806.js b/assets/config.html.637a9806.js new file mode 100644 index 00000000..2cc7b3f1 --- /dev/null +++ b/assets/config.html.637a9806.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-85fa9b2a","path":"/guide/config.html","title":"编译时配置","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"本地临时配置文件","slug":"本地临时配置文件","link":"#本地临时配置文件","children":[]},{"level":2,"title":"多环境多份配置","slug":"多环境多份配置","link":"#多环境多份配置","children":[]},{"level":2,"title":"优先级","slug":"优先级","link":"#优先级","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/config.md"}');export{e as data}; diff --git a/assets/config.html.bebaf600.js b/assets/config.html.bebaf600.js new file mode 100644 index 00000000..db0caa27 --- /dev/null +++ b/assets/config.html.bebaf600.js @@ -0,0 +1,59 @@ +import{_ as n,o as s,c as a,f as e}from"./app.bd9c95b7.js";const p={},t=e(`<h1 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h1><p>Fes.js 约定 <code>.fes.js</code> 文件为项目编译需要编译时配置文件,可以引入 <code>node</code> 端依赖项,不要引入浏览器端依赖项。</p><p>一份常见的配置示例如下(更多配置项请查阅<a href="../reference/config">配置</a>):</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineBuildConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineBuildConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/v2'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token string-property property">'/v2'</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">'https://api.douban.com/'</span><span class="token punctuation">,</span> + <span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Fes.js'</span><span class="token punctuation">,</span> + <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token string">'Created by MumbelFe'</span><span class="token punctuation">,</span> + <span class="token literal-property property">multiTabs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'simpleList'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="本地临时配置文件" tabindex="-1"><a class="header-anchor" href="#本地临时配置文件" aria-hidden="true">#</a> 本地临时配置文件</h2><p>可以新建 <code>.fes.local.js</code> 作为本地临时配置文件。这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> + +<span class="token comment">// .fes.local.js</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最终的配置是:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container warning"><p class="custom-container-title">注意</p><p><code>.fes.local.js</code> 是本地验证使用的临时配置,仅在 <code>fes dev</code> 时有效,请将其添加到 <code>.gitignore</code>,不要提交到 <code>git</code> 仓库中。</p></div><h2 id="多环境多份配置" tabindex="-1"><a class="header-anchor" href="#多环境多份配置" aria-hidden="true">#</a> 多环境多份配置</h2><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境,来指定当前环境的配置文件,这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配。</p><p>比如配置如下:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> + +<span class="token comment">// .fes.uat.js</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当我们运行:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">FES_ENV</span><span class="token operator">=</span>uat fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>这时候会命中 <code>.fes.uat.js</code> 这份环境配置,最终配置是:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="优先级" tabindex="-1"><a class="header-anchor" href="#优先级" aria-hidden="true">#</a> 优先级</h2><p>本地临时配置 > 环境配置 > 基础配置</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果多份配置中存在相同的配置项,<strong>则优先级高的会覆盖优先级低的</strong>。</p></div>`,21),o=[t];function l(c,r){return s(),a("div",null,o)}const u=n(p,[["render",l],["__file","config.html.vue"]]);export{u as default}; diff --git a/assets/contributing.html.3aa886b1.js b/assets/contributing.html.3aa886b1.js new file mode 100644 index 00000000..c3cd5e1c --- /dev/null +++ b/assets/contributing.html.3aa886b1.js @@ -0,0 +1,8 @@ +import{_ as d,r as t,o as i,c as r,b as e,d as a,a as n,f as o}from"./app.bd9c95b7.js";const c={},l=e("h1",{id:"贡献指南",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#贡献指南","aria-hidden":"true"},"#"),a(" 贡献指南")],-1),p=e("h2",{id:"包概览",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#包概览","aria-hidden":"true"},"#"),a(" 包概览")],-1),h={href:"https://pnpm.io/pnpm-workspace_yaml",target:"_blank",rel:"noopener noreferrer"},u={href:"https://en.wikipedia.org/wiki/Monorepo",target:"_blank",rel:"noopener noreferrer"},m=e("code",null,"packages",-1),f=o('<ul><li><p><code>@fesjs/create-fes-app</code>: 创建项目模板模块。提供<code>create-fes-app</code>命令,提供创建多种类型项目模板的能力。</p></li><li><p><code>@fesjs/compiler</code>: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。</p></li><li><p><code>@fesjs/runtime</code>: 运行时插件模块。集成了 vue-router,定义运行时插件生命周期、插件通讯机制。</p></li><li><p><code>@fesjs/preset-build-in</code>: 内置插件集。包含<code>dev</code>、<code>build</code>等命令,集成 webpack5+babel,提供方便编写插件的 API,入口文件处理,路由处理等能力。</p></li><li><p><code>@fesjs/fes-template</code>: 适用于 PC 类型的模板项目。</p></li><li><p><code>@fesjs/fes-template-h5</code>: 适用于 H5 类型的模板项目。</p></li><li><p><code>@fesjs/plugin-${name}</code>: 官方插件。</p></li><li><p><code>@fesjs/fes</code>: 入口模块。提供<code>fes</code>命令和 API 入口,封装<code>@fesjs/compiler</code> + <code>@fesjs/runtime</code> + <code>@fesjs/preset-build-in</code>,用户只需要安装此依赖和其他插件。</p></li></ul><h2 id="开发准备" tabindex="-1"><a class="header-anchor" href="#开发准备" aria-hidden="true">#</a> 开发准备</h2><p>开发要求:</p>',3),b={href:"http://nodejs.org",target:"_blank",rel:"noopener noreferrer"},v={href:"https://pnpm.io/",target:"_blank",rel:"noopener noreferrer"},g=e("p",null,"本项目开发使用的一些主要工具:",-1),_={href:"https://jestjs.io/",target:"_blank",rel:"noopener noreferrer"},k={href:"https://eslint.org/",target:"_blank",rel:"noopener noreferrer"},x={href:"https://prettier.io/",target:"_blank",rel:"noopener noreferrer"},j=o(`<p>克隆仓库:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">git</span> clone https://github.com/WeBankFinTech/fes.js.git +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>进入<code>fes.js</code>目录,安装依赖:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> i +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="贡献文档" tabindex="-1"><a class="header-anchor" href="#贡献文档" aria-hidden="true">#</a> 贡献文档</h2>`,5),w=e("code",null,"docs",-1),q={href:"https://v2.vuepress.vuejs.org/zh/",target:"_blank",rel:"noopener noreferrer"},P=o(`<h4 id="第一步-启动服务" tabindex="-1"><a class="header-anchor" href="#第一步-启动服务" aria-hidden="true">#</a> 第一步:启动服务</h4><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> docs:dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="第二步-修改-md-文件" tabindex="-1"><a class="header-anchor" href="#第二步-修改-md-文件" aria-hidden="true">#</a> 第二步:修改 md 文件</h4><p>菜单配置在<code>/docs/.vuepress/configs/sidebar/zh.ts</code>中,可以通过此配置找到对应想修改的文档。</p><p>如果想添加图片,则可以先把图片添加至<code>/docs/.vuepress/public</code>,在代码中使用:</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>$withBase('framework.png')<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>架构<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="第三步-查看更新" tabindex="-1"><a class="header-anchor" href="#第三步-查看更新" aria-hidden="true">#</a> 第三步:查看更新</h4><p>当 md 文档保存后,文档会自动更新,在<code>http://localhost:8080/</code>查看。</p><h2 id="贡献源码" tabindex="-1"><a class="header-anchor" href="#贡献源码" aria-hidden="true">#</a> 贡献源码</h2><p><code>Fes.js</code>统一使用<code>ES Module</code>规范编写源码,代码会在 node 端和浏览器端执行,所以源码需要编译后才能发布成包,再被执行。</p><h4 id="启动编译服务" tabindex="-1"><a class="header-anchor" href="#启动编译服务" aria-hidden="true">#</a> 启动编译服务</h4><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>当我们修改<code>build.config.js</code>中配置的包代码时,会把<code>src</code>目录的源码编译后到<code>lib</code>目录。</p><h4 id="修改源码" tabindex="-1"><a class="header-anchor" href="#修改源码" aria-hidden="true">#</a> 修改源码</h4><p>在了解<code>Fes.js</code>设计前提下,修改核心代码或者插件代码。</p><h4 id="验证修改内容" tabindex="-1"><a class="header-anchor" href="#验证修改内容" aria-hidden="true">#</a> 验证修改内容</h4><p>根据需求选择模板项目来验证修改内容,比如选择<code>fes-template</code>:</p><ol><li>查看需待验证包是否已经添加到模板项目的依赖中,如果没有则在模板项目的 package.json 中添加包依赖,添加后在根目录执行<code>pnpm</code>关联依赖</li><li>启动模板项目的开发服务</li></ol><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> packages/fes-template +<span class="token function">pnpm</span> dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>在项目模板中添加代码验证修改内容</li><li>打开<code>localhost:8000</code>查看结果</li></ol><h4 id="快速调试技巧" tabindex="-1"><a class="header-anchor" href="#快速调试技巧" aria-hidden="true">#</a> 快速调试技巧</h4><p>每次修改插件或者核心代码后,等待自动编译完,需要在模板目录重新执行<code>fes dev</code>,比较费时费力。</p><p>可以先在模板的 <code>.fes</code> 目录中找到对应临时代码,更改逻辑,验证完后再将变更逻辑保存到正式文件中。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>直接修改临时文件切莫重新执行<code>fes dev</code>,修改会被覆盖。</p></div><h2 id="提交-pr" tabindex="-1"><a class="header-anchor" href="#提交-pr" aria-hidden="true">#</a> 提交 PR</h2><ol><li>fork 项目!</li><li>创建你的功能分支: git checkout -b my-new-feature</li><li>本地提交新代码: git commit -am 'Add some feature'</li><li>推送本地到服务器分支: git push origin my-new-feature</li><li>创建一个 PR</li></ol>`,26);function B(E,N){const s=t("ExternalLinkIcon");return i(),r("div",null,[l,p,e("p",null,[a("项目仓库借助于 "),e("a",h,[a("pnpm 工作区"),n(s)]),a(" 来实现 "),e("a",u,[a(" Monorepo"),n(s)]),a(" ,在 "),m,a(" 目录下存放多个互相关联的独立包。")]),f,e("ul",null,[e("li",null,[e("a",b,[a("Node.js v14+"),n(s)])]),e("li",null,[e("a",v,[a("pnpm v8"),n(s)])])]),g,e("ul",null,[e("li",null,[e("a",_,[a("Jest"),n(s)]),a(" 用于单元测试")]),e("li",null,[e("a",k,[a("ESLint"),n(s)]),a(" + "),e("a",x,[a("Prettier"),n(s)]),a(" 用于代码检查和格式化")])]),j,e("p",null,[a("文档代码在"),w,a("目录,基于 "),e("a",q,[a("vuepress"),n(s)]),a(" 实现。")]),P])}const V=d(c,[["render",B],["__file","contributing.html.vue"]]);export{V as default}; diff --git a/assets/contributing.html.8f3528e9.js b/assets/contributing.html.8f3528e9.js new file mode 100644 index 00000000..ee2980e5 --- /dev/null +++ b/assets/contributing.html.8f3528e9.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-d7fa887a","path":"/guide/contributing.html","title":"贡献指南","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"包概览","slug":"包概览","link":"#包概览","children":[]},{"level":2,"title":"开发准备","slug":"开发准备","link":"#开发准备","children":[]},{"level":2,"title":"贡献文档","slug":"贡献文档","link":"#贡献文档","children":[]},{"level":2,"title":"贡献源码","slug":"贡献源码","link":"#贡献源码","children":[]},{"level":2,"title":"提交 PR","slug":"提交-pr","link":"#提交-pr","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/contributing.md"}');export{e as data}; diff --git a/assets/css.html.8c2b9f6e.js b/assets/css.html.8c2b9f6e.js new file mode 100644 index 00000000..a08df5fc --- /dev/null +++ b/assets/css.html.8c2b9f6e.js @@ -0,0 +1,17 @@ +import{_ as t,r as c,o,c as d,b as a,d as s,a as i,f as n}from"./app.bd9c95b7.js";const l={},p=n(`<h1 id="使用-css" tabindex="-1"><a class="header-anchor" href="#使用-css" aria-hidden="true">#</a> 使用 css</h1><div class="custom-container tip"><p class="custom-container-title">提示</p><p>本文档以 css 为示例,把后缀换成 <code>.less</code> 同样适用。</p></div><h2 id="全局样式" tabindex="-1"><a class="header-anchor" href="#全局样式" aria-hidden="true">#</a> 全局样式</h2><p>Fes.js 中约定 <code>src/global.css</code> 为全局样式,如果存在此文件,会被自动引入到入口文件最前面。</p><p>比如用于覆盖样式,</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.layout-content</span> <span class="token punctuation">{</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件内样式" tabindex="-1"><a class="header-anchor" href="#组件内样式" aria-hidden="true">#</a> 组件内样式</h2><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> +<span class="token selector">.layout-content</span> <span class="token punctuation">{</span> + <span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="引入第三方样式" tabindex="-1"><a class="header-anchor" href="#引入第三方样式" aria-hidden="true">#</a> 引入第三方样式</h2><p>可以直接通过 <code>import</code> 引入第三方组件,当然最好在入口文件<code>app.js</code>中引入</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// src/app.js</span> +<span class="token keyword">import</span> <span class="token string">'bootstrap/dist/css/bootstrap.css'</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="css-modules" tabindex="-1"><a class="header-anchor" href="#css-modules" aria-hidden="true">#</a> CSS Modules</h2>`,12),r=a("code",null,"Vue",-1),u={href:"https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},v=n(`<div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">module</span><span class="token punctuation">></span></span> +.layout-content { + max-width: 1000px; +} +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果想直接引入CSS文件的话,则CSS文件名需要包含<code>.module</code>,比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> style <span class="token keyword">from</span> <span class="token string">'@/styles/index.module.css'</span> +console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>style<span class="token punctuation">)</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="css-预处理器" tabindex="-1"><a class="header-anchor" href="#css-预处理器" aria-hidden="true">#</a> CSS 预处理器</h2><p>Fes.js 内置支持 <code>less</code>,不支持 <code>sass</code> 和 <code>stylus</code>,但如果有需求,可以通过 <code>chainWebpack</code> 配置或者 <code>fes-plugin</code> 插件的形式支持。</p>`,5);function m(h,k){const e=c("ExternalLinkIcon");return o(),d("div",null,[p,a("p",null,[s("支持 "),r,s(" 的 "),a("a",u,[s("CSS Modules"),i(e)]),s(" 用法,可以直接使用:")]),v])}const b=t(l,[["render",m],["__file","css.html.vue"]]);export{b as default}; diff --git a/assets/css.html.f4729d94.js b/assets/css.html.f4729d94.js new file mode 100644 index 00000000..e3489883 --- /dev/null +++ b/assets/css.html.f4729d94.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-884fd4bc","path":"/guide/css.html","title":"使用 css","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"全局样式","slug":"全局样式","link":"#全局样式","children":[]},{"level":2,"title":"组件内样式","slug":"组件内样式","link":"#组件内样式","children":[]},{"level":2,"title":"引入第三方样式","slug":"引入第三方样式","link":"#引入第三方样式","children":[]},{"level":2,"title":"CSS Modules","slug":"css-modules","link":"#css-modules","children":[]},{"level":2,"title":"CSS 预处理器","slug":"css-预处理器","link":"#css-预处理器","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/css.md"}');export{e as data}; diff --git a/assets/css/styles.8abd66bb.css b/assets/css/styles.8abd66bb.css deleted file mode 100644 index bcc8a574..00000000 --- a/assets/css/styles.8abd66bb.css +++ /dev/null @@ -1,12 +0,0 @@ -.icon.outbound{position:relative;display:inline-block;color:#aaa;vertical-align:middle;top:-1px} -:root{--c-brand:#3eaf7c;--c-brand-light:#4abf8a;--c-bg:#ffffff;--c-bg-light:#f3f4f5;--c-bg-lighter:#eeeeee;--c-bg-navbar:var(--c-bg);--c-bg-sidebar:var(--c-bg);--c-bg-arrow:#cccccc;--c-text:#2c3e50;--c-text-accent:var(--c-brand);--c-text-light:#3a5169;--c-text-lighter:#4e6e8e;--c-text-lightest:#6a8bad;--c-text-quote:#999999;--c-border:#eaecef;--c-border-dark:#dfe2e5;--c-tip:#42b983;--c-tip-bg:var(--c-bg-light);--c-tip-title:var(--c-text);--c-tip-text:var(--c-text);--c-tip-text-accent:var(--c-text-accent);--c-warning:#e7c000;--c-warning-bg:#fffae3;--c-warning-title:#ad9000;--c-warning-text:#746000;--c-warning-text-accent:var(--c-text);--c-danger:#cc0000;--c-danger-bg:#ffe0e0;--c-danger-title:#990000;--c-danger-text:#660000;--c-danger-text-accent:var(--c-text);--c-details-bg:#eeeeee;--c-badge-tip:var(--c-tip);--c-badge-warning:var(--c-warning);--c-badge-danger:var(--c-danger);--t-color:0.3s ease;--t-transform:0.3s ease;--code-bg-color:#282c34;--code-hl-bg-color:rgba(0, 0, 0, 0.66);--code-ln-color:#9e9e9e;--code-ln-wrapper-width:3.5rem;--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-code:Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;--navbar-height:3.6rem;--navbar-padding-v:0.7rem;--navbar-padding-h:1.5rem;--sidebar-width:20rem;--sidebar-width-mobile:calc(var(--sidebar-width) * 0.82);--content-width:740px;--homepage-width:960px}.back-to-top{--back-to-top-color:var(--c-brand);--back-to-top-color-hover:var(--c-brand-light)}.DocSearch{--docsearch-primary-color:var(--c-brand);--docsearch-text-color:var(--c-text);--docsearch-highlight-color:var(--c-brand);--docsearch-muted-color:var(--c-text-quote);--docsearch-container-background:rgba(9, 10, 17, 0.8);--docsearch-modal-background:var(--c-bg-light);--docsearch-searchbox-background:var(--c-bg-lighter);--docsearch-searchbox-focus-background:var(--c-bg);--docsearch-searchbox-shadow:inset 0 0 0 2px var(--c-brand);--docsearch-hit-color:var(--c-text-light);--docsearch-hit-active-color:var(--c-bg);--docsearch-hit-background:var(--c-bg);--docsearch-hit-shadow:0 1px 3px 0 var(--c-border-dark);--docsearch-footer-background:var(--c-bg)}.medium-zoom-overlay{--medium-zoom-bg-color:var(--c-bg)}#nprogress{--nprogress-color:var(--c-brand)}.pwa-popup{--pwa-popup-text-color:var(--c-text);--pwa-popup-bg-color:var(--c-bg);--pwa-popup-border-color:var(--c-brand);--pwa-popup-shadow:0 4px 16px var(--c-brand);--pwa-popup-btn-text-color:var(--c-bg);--pwa-popup-btn-bg-color:var(--c-brand);--pwa-popup-btn-hover-bg-color:var(--c-brand-light)}.search-box{--search-bg-color:var(--c-bg);--search-accent-color:var(--c-brand);--search-text-color:var(--c-text);--search-border-color:var(--c-border);--search-item-text-color:var(--c-text-lighter);--search-item-focus-bg-color:var(--c-bg-light)}html.dark{--c-brand:#3aa675;--c-brand-light:#349469;--c-bg:#22272e;--c-bg-light:#2b313a;--c-bg-lighter:#262c34;--c-text:#adbac7;--c-text-light:#96a7b7;--c-text-lighter:#8b9eb0;--c-text-lightest:#8094a8;--c-border:#3e4c5a;--c-border-dark:#34404c;--c-tip:#318a62;--c-warning:#ceab00;--c-warning-bg:#7e755b;--c-warning-title:#ceac03;--c-warning-text:#362e00;--c-danger:#940000;--c-danger-bg:#806161;--c-danger-title:#610000;--c-danger-text:#3a0000;--c-details-bg:#323843;--code-hl-bg-color:#363b46;color-scheme:dark}html.dark .DocSearch{--docsearch-logo-color:var(--c-text);--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;--docsearch-key-shadow:inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, 0.3);--docsearch-key-gradient:linear-gradient(-225deg, #444950, #1c1e21);--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2)}body,html{padding:0;margin:0;background-color:var(--c-bg);transition:background-color var(--t-color)}body{font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}a,p a code{color:var(--c-text-accent)}a{font-weight:500;overflow-wrap:break-word}p a code{font-weight:400}code,kbd{font-family:var(--font-family-code)}body,kbd{color:var(--c-text)}kbd{background:var(--c-bg-lighter);border:solid .15rem var(--c-border-dark);border-bottom:solid .25rem var(--c-border-dark);border-radius:.15rem;padding:0 .15em}code{color:var(--c-text-lighter);padding:.25rem .5rem;font-size:.85em;background-color:var(--c-bg-light);border-radius:3px;overflow-wrap:break-word;transition:background-color var(--t-color),color var(--t-color)}blockquote{color:var(--c-text-quote);border-left:.2rem solid var(--c-border-dark);margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p,code{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}h1:hover .header-anchor,h2:hover .header-anchor,h3:hover .header-anchor,h4:hover .header-anchor,h5:hover .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid var(--c-border);transition:border-color var(--t-color)}h3{font-size:1.35rem}h4{font-size:1.15rem}h5{font-size:1.05rem}blockquote,h6{font-size:1rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a,a.header-anchor:hover{text-decoration:none}a.header-anchor:focus-visible{opacity:1}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid var(--c-border)}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid var(--c-border-dark)}tr:nth-child(2n){background-color:var(--c-bg-light)}td,th{border:1px solid var(--c-border-dark);padding:.6em 1em}.arrow,.badge{display:inline-block}.arrow{width:0;height:0}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.up{border-bottom:6px solid var(--c-bg-arrow)}.arrow.down{border-top:6px solid var(--c-bg-arrow)}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.right{border-left:6px solid var(--c-bg-arrow)}.arrow.left{border-right:6px solid var(--c-bg-arrow)}.badge{font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:var(--c-bg);vertical-align:top;transition:color var(--t-color),background-color var(--t-color)}.badge.tip{background-color:var(--c-badge-tip)}.badge.warning{background-color:var(--c-badge-warning)}.badge.danger{background-color:var(--c-badge-danger)}.badge+.badge{margin-left:5px}code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:var(--font-family-code);font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#ec5975}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:#3eaf7c}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;border-radius:6px;overflow:auto}.theme-default-content pre code,.theme-default-content pre[class*=language-] code{color:#fff;padding:0;background-color:transparent;border-radius:0;overflow-wrap:unset;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.theme-default-content .line-number{font-family:var(--font-family-code)}div[class*=language-]{position:relative;background-color:var(--code-bg-color);border-radius:6px}div[class*=language-]::before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:var(--code-ln-color)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:0 0!important;position:relative;z-index:1}div[class*=language-] .highlight-lines{-webkit-user-select:none;-moz-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlight-line{background-color:var(--code-hl-bg-color)}div[class*=language-]:not(.line-numbers-mode) .line-numbers{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlight-line{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlight-line::before{content:" ";position:absolute;z-index:2;left:0;top:0;display:block;width:var(--code-ln-wrapper-width);height:100%}div[class*=language-].line-numbers-mode pre{margin-left:var(--code-ln-wrapper-width);padding-left:1rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers{position:absolute;top:0;width:var(--code-ln-wrapper-width);text-align:center;color:var(--code-ln-color);padding-top:1.25rem;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers br{-webkit-user-select:none;-moz-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers .line-number{position:relative;z-index:3;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode::after{content:"";position:absolute;top:0;left:0;width:var(--code-ln-wrapper-width);height:100%;border-radius:6px 0 0 6px;border-right:1px solid var(--code-hl-bg-color)}div[class*=language-].ext-c:before{content:"c"}div[class*=language-].ext-cpp:before{content:"cpp"}div[class*=language-].ext-cs:before{content:"cs"}div[class*=language-].ext-css:before{content:"css"}div[class*=language-].ext-dart:before{content:"dart"}div[class*=language-].ext-docker:before{content:"docker"}div[class*=language-].ext-fs:before{content:"fs"}div[class*=language-].ext-go:before{content:"go"}div[class*=language-].ext-html:before{content:"html"}div[class*=language-].ext-java:before{content:"java"}div[class*=language-].ext-js:before{content:"js"}div[class*=language-].ext-json:before{content:"json"}div[class*=language-].ext-kt:before{content:"kt"}div[class*=language-].ext-less:before{content:"less"}div[class*=language-].ext-makefile:before{content:"makefile"}div[class*=language-].ext-md:before{content:"md"}div[class*=language-].ext-php:before{content:"php"}div[class*=language-].ext-py:before{content:"py"}div[class*=language-].ext-rb:before{content:"rb"}div[class*=language-].ext-rs:before{content:"rs"}div[class*=language-].ext-sass:before{content:"sass"}div[class*=language-].ext-scss:before{content:"scss"}div[class*=language-].ext-sh:before{content:"sh"}div[class*=language-].ext-styl:before{content:"styl"}div[class*=language-].ext-ts:before{content:"ts"}div[class*=language-].ext-toml:before{content:"toml"}div[class*=language-].ext-vue:before{content:"vue"}div[class*=language-].ext-yml:before{content:"yml"}@media (max-width:419px){.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.code-group__nav{margin-top:.85rem;margin-bottom:calc(-1.7rem - 6px);padding-bottom:calc(1.7rem - 6px);padding-left:10px;padding-top:10px;border-top-left-radius:6px;border-top-right-radius:6px;background-color:var(--code-bg-color)}.code-group__ul{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.code-group__nav-tab{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:rgba(255,255,255,.9);font-weight:600}.code-group__nav-tab:focus{outline:0}.code-group__nav-tab:focus-visible{outline:1px solid rgba(255,255,255,.9)}.code-group__nav-tab-active{border-bottom:var(--c-brand) 1px solid}@media (max-width:419px){.code-group__nav{margin-left:-1.5rem;margin-right:-1.5rem;border-radius:0}}.code-group-item,.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subtitle>a.router-link-active::after{display:none}.code-group-item__active{display:block}.code-group-item>pre{background-color:orange}.custom-container{transition:color var(--t-color),border-color var(--t-color),background-color var(--t-color)}.custom-container .custom-container-title{font-weight:600;margin-bottom:-.4rem}.custom-container.danger,.custom-container.tip,.custom-container.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-container.tip{border-color:var(--c-tip);background-color:var(--c-tip-bg);color:var(--c-tip-text)}.custom-container.tip .custom-container-title{color:var(--c-tip-title)}.custom-container.tip a{color:var(--c-tip-text-accent)}.custom-container.warning{border-color:var(--c-warning);background-color:var(--c-warning-bg);color:var(--c-warning-text)}.custom-container.warning .custom-container-title{color:var(--c-warning-title)}.custom-container.warning a{color:var(--c-warning-text-accent)}.custom-container.danger{border-color:var(--c-danger);background-color:var(--c-danger-bg);color:var(--c-danger-text)}.custom-container.danger .custom-container-title{color:var(--c-danger-title)}.custom-container.danger a{color:var(--c-danger-text-accent)}.custom-container.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:var(--c-details-bg)}.custom-container.details h4{margin-top:0}.custom-container.details figure:last-child,.custom-container.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-container.details summary{outline:0;cursor:pointer}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:0 0;border:0;font-weight:500;color:var(--c-text)}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600;font-size:inherit}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title:hover{color:var(--c-text-accent)}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subtitle{margin:.45rem 0 0;border-top:1px solid var(--c-border);padding:1rem 0 .45rem;font-size:.9rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subtitle>span{padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subtitle>a{font-weight:inherit}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover,.navbar-links a.router-link-active,.navbar-links a:hover{color:var(--c-text-accent)}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after{content:"";width:0;height:0;border-left:5px solid var(--c-text-accent);border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child .dropdown-subtitle{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title,.dropdown-wrapper.open .mobile-dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subtitle{border-top:0;margin-top:0;padding-top:0;padding-bottom:0;font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item>a{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:720px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper.open:blur{display:none}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:var(--c-bg-navbar);padding:.6rem 0;border:1px solid var(--c-border);border-bottom-color:var(--c-border-dark);text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.dropdown-enter-from,.dropdown-leave-to{height:0!important}.home{padding:var(--navbar-height) 2rem 0;max-width:var(--homepage-width);margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .actions,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:var(--c-text-lightest)}.home .hero .action-button{display:inline-block;font-size:1.2rem;padding:.8rem 1.6rem;border-width:2px;border-style:solid;border-radius:4px;transition:background-color var(--t-color);box-sizing:border-box}.home .hero .action-button.primary{color:var(--c-bg);background-color:var(--c-brand);border-color:var(--c-brand)}.home .hero .action-button.primary:hover{background-color:var(--c-brand-light)}.home .hero .action-button.secondary{color:var(--c-brand);background-color:var(--c-bg);border-color:var(--c-brand)}.home .hero .action-button.secondary:hover{color:var(--c-bg);background-color:var(--c-brand-light)}.home .features{border-top:1px solid var(--c-border);transition:border-color var(--t-color);padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:var(--c-text-light)}.home .feature p,.home .footer{color:var(--c-text-lighter)}.home .footer{padding:2.5rem;border-top:1px solid var(--c-border);text-align:center;transition:border-color var(--t-color)}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .actions,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.theme-default-content:not(.custom){max-width:var(--content-width);margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.page{padding-top:var(--navbar-height);padding-left:var(--sidebar-width)}.navbar,.sidebar{position:fixed;left:0;box-sizing:border-box}.navbar{z-index:20;top:0;right:0;height:var(--navbar-height);border-bottom:1px solid var(--c-border);background-color:var(--c-bg-navbar);transition:background-color var(--t-color),border-color var(--t-color)}.sidebar{font-size:16px;width:var(--sidebar-width);z-index:10;margin:0;top:var(--navbar-height);bottom:0;border-right:1px solid var(--c-border);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--c-brand) var(--c-border);background-color:var(--c-bg-sidebar);transition:transform var(--t-transform),background-color var(--t-color),border-color var(--t-color)}.sidebar::-webkit-scrollbar{width:7px}.sidebar::-webkit-scrollbar-track{background-color:var(--c-border)}.sidebar::-webkit-scrollbar-thumb{background-color:var(--c-brand)}.sidebar-mask{position:fixed;z-index:9;top:0;left:0;width:100vw;height:100vh;display:none}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.sidebar-open .navbar>.toggle-sidebar-button .icon span:nth-child(1){transform:rotate(45deg) translate3d(5.5px,5.5px,0)}.theme-container.sidebar-open .navbar>.toggle-sidebar-button .icon span:nth-child(2){transform:scale3d(0,1,1)}.theme-container.sidebar-open .navbar>.toggle-sidebar-button .icon span:nth-child(3){transform:rotate(-45deg) translate3d(6px,-6px,0)}.theme-container.sidebar-open .navbar>.toggle-sidebar-button .icon span:nth-child(1),.theme-container.sidebar-open .navbar>.toggle-sidebar-button .icon span:nth-child(3){transform-origin:center}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .page{padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:calc(.5rem - var(--navbar-height));padding-top:calc(1rem + var(--navbar-height));margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-container,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-container,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-container,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-container,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-container,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-container,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}.theme-default-content:not(.custom){padding-top:0}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}@media (max-width:959px){.sidebar{font-size:15px;width:var(--sidebar-width-mobile)}.page{padding-left:var(--sidebar-width-mobile)}}@media (max-width:719px){.sidebar{top:0;padding-top:var(--navbar-height);transform:translateX(-100%)}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}}.navbar{--navbar-line-height:calc( var(--navbar-height) - 2 * var(--navbar-padding-v) );padding:var(--navbar-padding-v) var(--navbar-padding-h);line-height:var(--navbar-line-height)}.navbar .logo{height:var(--navbar-line-height);margin-right:var(--navbar-padding-v);vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:var(--c-text);position:relative}.navbar .navbar-links-wrapper{display:flex;position:absolute;box-sizing:border-box;top:var(--navbar-padding-v);right:var(--navbar-padding-h);height:var(--navbar-line-height);padding-left:var(--navbar-padding-h);white-space:nowrap;font-size:.9rem}.navbar .navbar-links-wrapper .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.navbar-links,.navbar-links a{display:inline-block}.navbar-links a{line-height:1.4rem;color:inherit}.navbar-links .navbar-links-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:var(--navbar-line-height)}.navbar-links .navbar-links-item:first-child{margin-left:0}@media (max-width:719px){.navbar-links .navbar-links-item{margin-left:0}}@media (min-width:719px){.navbar-links a.router-link-active,.navbar-links a:hover{color:var(--c-text)}.navbar-links-item>a:not(.external).router-link-active,.navbar-links-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid var(--c-text-accent)}}.toggle-sidebar-button{position:absolute;top:.6rem;left:1rem;display:none;padding:.6rem;cursor:pointer}.toggle-sidebar-button .icon{display:flex;flex-direction:column;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;cursor:inherit}.toggle-sidebar-button .icon span{display:inline-block;width:100%;height:2px;border-radius:2px;background-color:var(--c-text);transition:transform var(--t-transform)}.toggle-sidebar-button .icon span:nth-child(2){margin:6px 0}@media screen and (max-width:719px){.toggle-sidebar-button{display:block}}.toggle-dark-button{display:flex;margin:auto;margin-left:1rem;border:0;background:0 0;color:var(--c-text);opacity:.8;cursor:pointer}.toggle-dark-button:hover{opacity:1}.toggle-dark-button .icon{width:1.25rem;height:1.25rem}.page-meta,.page-nav{max-width:var(--content-width);margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-meta,.page-nav{padding:2rem}}@media (max-width:419px){.page-meta,.page-nav{padding:1.5rem}}.page{padding-bottom:2rem;display:block}.page-meta{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-meta .meta-item{cursor:default;margin-top:.8rem}.page-meta .meta-item .meta-item-label{font-weight:500;color:var(--c-text-lighter)}.page-meta .meta-item .meta-item-info{font-weight:400;color:var(--c-text-quote)}.page-meta .edit-link{display:inline-block;margin-right:.25rem}.page-meta .last-updated{float:right}@media (max-width:719px){.page-meta .last-updated{font-size:.8em;float:none}.page-meta .contributors{font-size:.8em}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid var(--c-border);transition:border-color var(--t-color);padding-top:1rem;overflow:auto}a .page-nav .prev:before{content:"←"}.page-nav .next{float:right}a .page-nav .next:after{content:"→"}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .navbar-links{display:none;border-bottom:1px solid var(--c-border);transition:border-color var(--t-color);padding:.5rem 0 .75rem}.sidebar .navbar-links a{font-weight:600}.sidebar .navbar-links .navbar-links-item{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar .sidebar-links{padding:1.5rem 0}.sidebar .sidebar-links>li:not(:first-child),.sidebar-links>.sidebar-item:not(.sidebar-heading):not(:first-child){margin-top:.75rem}.sidebar .sidebar-links .sidebar-sub-items{padding-left:1rem;font-size:.95em}@media (max-width:719px){.sidebar .navbar-links{display:block}.sidebar .navbar-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after{top:calc(1rem - 2px)}.sidebar .sidebar-links{padding:1rem 0}}.sidebar-heading{color:var(--c-text);transition:color .15s ease;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-item:not(.sidebar-heading){font-size:1em;font-weight:400;display:inline-block;color:var(--c-text);border-left:.25rem solid transparent;margin:0;padding:.35rem 1rem .35rem 2rem;line-height:1.4;width:100%;box-sizing:border-box}.sidebar-sub-items .sidebar-item:not(.sidebar-heading){padding:.25rem 1rem .25rem 1.75rem}.sidebar-item{cursor:default}a.sidebar-item{cursor:pointer}a.sidebar-item.active,a.sidebar-item:hover{color:var(--c-text-accent)}a.sidebar-item.active{font-weight:600;border-left-color:var(--c-text-accent)}a.sidebar-item.sidebar-heading.active{font-weight:700;border-left-color:transparent}.sidebar-sub-items a.sidebar-item.active{font-weight:500;border-left-color:transparent}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.table-of-contents .badge{vertical-align:middle}.fade-slide-y-enter-active{transition:all .3s ease}.fade-slide-y-leave-active{transition:all .3s cubic-bezier(1,.5,.8,1)}.fade-slide-y-enter-from,.fade-slide-y-leave-to{transform:translateY(10px);opacity:0} -:root{--medium-zoom-z-index:100;--medium-zoom-bg-color:#ffffff;--medium-zoom-opacity:1} -.medium-zoom-overlay{background-color:var(--medium-zoom-bg-color)!important;z-index:var(--medium-zoom-z-index)}.medium-zoom-overlay~img{z-index:calc(var(--medium-zoom-z-index) + 1)}.medium-zoom--opened .medium-zoom-overlay{opacity:var(--medium-zoom-opacity)} -/*! @docsearch/css 3.0.0-alpha.34 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ -@keyframes fade-in{0%{opacity:0}to{opacity:1}}:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,0.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,0.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,0.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,0.5),0 -4px 8px 0 rgba(0,0,0,0.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:0}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}@media (max-width:750px){.DocSearch-Button-Key,.DocSearch-Button-KeySeparator,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:0;padding:0 0 0 8px;width:80%}.DocSearch-Input::-moz-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel{margin:0;padding:0}.DocSearch-Reset{margin:0}.DocSearch-MagnifierLabel{color:var(--docsearch-highlight-color)}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Cancel,.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:focus{outline:0}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:0 0}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:0 0;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul,.DocSearch-Prefill{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:0;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:1px;width:20px}@media (max-width:750px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:0;overflow:hidden;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}} -:root{--back-to-top-z-index:5;--back-to-top-color:#3eaf7c;--back-to-top-color-hover:#71cda3} -.back-to-top{cursor:pointer;position:fixed;bottom:2rem;right:2.5rem;width:2rem;height:1.2rem;background-color:var(--back-to-top-color);-webkit-mask:url(/fes.js/assets/img/back-to-top.8b37f773.svg) no-repeat;mask:url(/fes.js/assets/img/back-to-top.8b37f773.svg) no-repeat;z-index:var(--back-to-top-z-index)}.back-to-top:hover{background-color:var(--back-to-top-color-hover)}@media (max-width:959px){.back-to-top{display:none}}.back-to-top-enter-active,.back-to-top-leave-active{transition:opacity .3s}.back-to-top-enter-from,.back-to-top-leave-to{opacity:0} -:root{--pwa-popup-z-index:10;--pwa-popup-text-color:#2c3e50;--pwa-popup-bg-color:#ffffff;--pwa-popup-border-color:#3eaf7c;--pwa-popup-shadow:0 4px 16px var(--pwa-popup-border-color);--pwa-popup-btn-text-color:#ffffff;--pwa-popup-btn-bg-color:#3eaf7c;--pwa-popup-btn-hover-bg-color:#4abf8a} -.pwa-popup{position:fixed;right:1em;bottom:1em;padding:1em;border:1px solid var(--pwa-popup-border-color);border-radius:3px;background-color:var(--pwa-popup-bg-color);box-shadow:var(--pwa-popup-shadow);text-align:center;z-index:var(--pwa-popup-z-index)}.pwa-popup>button{cursor:pointer;margin-top:.5em;padding:.25em 2em;border:0;color:var(--pwa-popup-btn-text-color);background-color:var(--pwa-popup-btn-bg-color)}.pwa-popup>button:hover{background-color:var(--pwa-popup-btn-hover-bg-color)}.pwa-popup-enter-active,.pwa-popup-leave-active{transition:opacity .3s,transform .3s}.pwa-popup-enter-from,.pwa-popup-leave-to{opacity:0;transform:translate(0,50%) scale(.5)} -:root{--nprogress-color:#29d;--nprogress-z-index:1031} -#nprogress{pointer-events:none}#nprogress .bar{background:var(--nprogress-color);position:fixed;z-index:var(--nprogress-z-index);top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px var(--nprogress-color),0 0 5px var(--nprogress-color);opacity:1;transform:rotate(3deg) translate(0,-4px)} diff --git a/assets/directory-structure.html.c7ccc960.js b/assets/directory-structure.html.c7ccc960.js new file mode 100644 index 00000000..f3a6cb06 --- /dev/null +++ b/assets/directory-structure.html.c7ccc960.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-040800dc","path":"/guide/directory-structure.html","title":"目录结构","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":3,"title":"package.json","slug":"package-json","link":"#package-json","children":[]},{"level":3,"title":"tsconfig.json","slug":"tsconfig-json","link":"#tsconfig-json","children":[]},{"level":3,"title":".fes.js","slug":"fes-js","link":"#fes-js","children":[]},{"level":3,"title":"mock.js","slug":"mock-js","link":"#mock-js","children":[]},{"level":3,"title":".env","slug":"env","link":"#env","children":[]},{"level":3,"title":"dist 目录","slug":"dist-目录","link":"#dist-目录","children":[]},{"level":3,"title":"public 目录","slug":"public-目录","link":"#public-目录","children":[]},{"level":3,"title":"index.html","slug":"index-html","link":"#index-html","children":[]},{"level":3,"title":"src 目录","slug":"src-目录","link":"#src-目录","children":[]},{"level":3,"title":".fes 目录","slug":"fes-目录","link":"#fes-目录","children":[]},{"level":3,"title":"pages 目录","slug":"pages-目录","link":"#pages-目录","children":[]},{"level":3,"title":"app.js","slug":"app-js","link":"#app-js","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/directory-structure.md"}');export{e as data}; diff --git a/assets/directory-structure.html.c7e6fd2d.js b/assets/directory-structure.html.c7e6fd2d.js new file mode 100644 index 00000000..009990d8 --- /dev/null +++ b/assets/directory-structure.html.c7e6fd2d.js @@ -0,0 +1,70 @@ +import{_ as e,r as t,o,c as p,b as n,d as s,a as c,w as i,f as u}from"./app.bd9c95b7.js";const l={},r=n("h1",{id:"目录结构",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#目录结构","aria-hidden":"true"},"#"),s(" 目录结构")],-1),d=n("code",null,"约定优于配置",-1),k=u(`<div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>fes-template +├── package.json +├── tsconfig.json +├── mock.js +├── .fes.js +├── .env +├── index.html +├── dist +├── public +│ └── logo.png +└── src + ├── .fes + └── pages + │ └── index.vue + └── app.js +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="package-json" tabindex="-1"><a class="header-anchor" href="#package-json" aria-hidden="true">#</a> package.json</h3><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"@fesjs/template"</span><span class="token punctuation">,</span> + <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"2.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"fes项目模版"</span><span class="token punctuation">,</span> + <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"fes build"</span><span class="token punctuation">,</span> + <span class="token property">"prod"</span><span class="token operator">:</span> <span class="token string">"FES_ENV=prod fes build"</span><span class="token punctuation">,</span> + <span class="token property">"analyze"</span><span class="token operator">:</span> <span class="token string">"ANALYZE=1 fes build"</span><span class="token punctuation">,</span> + <span class="token property">"dev"</span><span class="token operator">:</span> <span class="token string">"fes dev"</span><span class="token punctuation">,</span> + <span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"fes test"</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"keywords"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"管理端"</span><span class="token punctuation">,</span> <span class="token string">"fes"</span><span class="token punctuation">,</span> <span class="token string">"fast"</span><span class="token punctuation">,</span> <span class="token string">"easy"</span><span class="token punctuation">,</span> <span class="token string">"strong"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token property">"files"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">".eslintrc.js"</span><span class="token punctuation">,</span> <span class="token string">".gitignore"</span><span class="token punctuation">,</span> <span class="token string">".fes.js"</span><span class="token punctuation">,</span> <span class="token string">".fes.prod.js"</span><span class="token punctuation">,</span> <span class="token string">"mock.js"</span><span class="token punctuation">,</span> <span class="token string">"package.json"</span><span class="token punctuation">,</span> <span class="token string">"README.md"</span><span class="token punctuation">,</span> <span class="token string">"tsconfig.json"</span><span class="token punctuation">,</span> <span class="token string">"/src"</span><span class="token punctuation">,</span> <span class="token string">"/config"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token property">"repository"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"git"</span><span class="token punctuation">,</span> + <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"git+https://github.com/WeBankFinTech/fes.js.git"</span><span class="token punctuation">,</span> + <span class="token property">"directory"</span><span class="token operator">:</span> <span class="token string">"packages/fes-template"</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"author"</span><span class="token operator">:</span> <span class="token string">"harrywan"</span><span class="token punctuation">,</span> + <span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"MIT"</span><span class="token punctuation">,</span> + <span class="token property">"bugs"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://github.com/WeBankFinTech/fes.js/issues"</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"homepage"</span><span class="token operator">:</span> <span class="token string">"https://github.com/WeBankFinTech/fes.js#readme"</span><span class="token punctuation">,</span> + <span class="token property">"publishConfig"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"access"</span><span class="token operator">:</span> <span class="token string">"public"</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@webank/eslint-config-webank"</span><span class="token operator">:</span> <span class="token string">"1.2.1"</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/builder-webpack"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-access"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-layout"</span><span class="token operator">:</span> <span class="token string">"^5.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-enums"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-jest"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-vuex"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-qiankun"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-sass"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-monaco-editor"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-windicss"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/fes-design"</span><span class="token operator">:</span> <span class="token string">"^0.7.23"</span><span class="token punctuation">,</span> + <span class="token property">"vue"</span><span class="token operator">:</span> <span class="token string">"^3.2.47"</span><span class="token punctuation">,</span> + <span class="token property">"vuex"</span><span class="token operator">:</span> <span class="token string">"^4.0.0"</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"private"</span><span class="token operator">:</span> <span class="token boolean">true</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>其中<code>@fesjs/fes</code>是 Fes.js 核心依赖,另外以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被自动注册为插件或插件集。<code>@fesjs/builder-</code> 开头的会被注册为构建器。</p><h3 id="tsconfig-json" tabindex="-1"><a class="header-anchor" href="#tsconfig-json" aria-hidden="true">#</a> tsconfig.json</h3><p>解决 <code>@fesjs/fes</code> 和使用 <code>@</code> 的 API 提示</p><h3 id="fes-js" tabindex="-1"><a class="header-anchor" href="#fes-js" aria-hidden="true">#</a> .fes.js</h3><p>配置文件,包含 Fes.js 内置功能和安装的其他插件配置。</p><h3 id="mock-js" tabindex="-1"><a class="header-anchor" href="#mock-js" aria-hidden="true">#</a> mock.js</h3><p><code>mock</code> 数据的配置文件。</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> .env</h3><p>定义环境变量。</p><p>比如 <code>.env</code> 文件内容如下:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>PORT=8888 +FES_ENV=prod +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>等同于 node 端运行时,设置如下:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>p<wbr>rocess.env.PORT = '8888'; +p<wbr>rocess.env.FES_ENV = 'prod'; +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dist-目录" tabindex="-1"><a class="header-anchor" href="#dist-目录" aria-hidden="true">#</a> dist 目录</h3><p>执行 <code>fes build</code> 后,产物默认会存放在这里。</p><h3 id="public-目录" tabindex="-1"><a class="header-anchor" href="#public-目录" aria-hidden="true">#</a> public 目录</h3><p>此目录下所有文件为静态资源,会被复制到输出路径。</p><h3 id="index-html" tabindex="-1"><a class="header-anchor" href="#index-html" aria-hidden="true">#</a> index.html</h3><p>默认的 <code>html</code> 模板文件,如果删除此 <code>html</code> 则会使用内置的 <code>html</code> 模板文件。</p><h3 id="src-目录" tabindex="-1"><a class="header-anchor" href="#src-目录" aria-hidden="true">#</a> src 目录</h3><h3 id="fes-目录" tabindex="-1"><a class="header-anchor" href="#fes-目录" aria-hidden="true">#</a> .fes 目录</h3><p>临时文件目录,比如入口文件、路由等,都会被临时生成到这里。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>不要提交 <code>.fes</code> 目录到 <code>git</code> 仓库,他们会在 <code>fes dev</code> 和 <code>fes build</code> 时被删除并重新生成。</p></div><h3 id="pages-目录" tabindex="-1"><a class="header-anchor" href="#pages-目录" aria-hidden="true">#</a> pages 目录</h3><p>所有路由组件文件存放在这里。</p><h3 id="app-js" tabindex="-1"><a class="header-anchor" href="#app-js" aria-hidden="true">#</a> app.js</h3><p>运行时配置文件,可以在这里扩展运行时的能力,比如修改路由等。</p>`,30);function q(v,m){const a=t("RouterLink");return o(),p("div",null,[r,n("p",null,[s("在"),c(a,{to:"/guide/getting-started.html"},{default:i(()=>[s("快速上手")]),_:1}),s("中,大家对框架应该有初步的印象,接下来我们了解下目录结构。Fes.js 遵循 "),d,s(" 的原则,一个基础的 Fes.js 项目大致是这样的:")]),k])}const g=e(l,[["render",q],["__file","directory-structure.html.vue"]]);export{g as default}; diff --git a/assets/editor.html.0d361fe8.js b/assets/editor.html.0d361fe8.js new file mode 100644 index 00000000..324a5b7a --- /dev/null +++ b/assets/editor.html.0d361fe8.js @@ -0,0 +1,46 @@ +import{_ as o,r as p,o as c,c as l,b as s,d as n,a as t,f as e}from"./app.bd9c95b7.js";const i={},r=s("h1",{id:"fesjs-plugin-monaco-editor",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#fesjs-plugin-monaco-editor","aria-hidden":"true"},"#"),n(" @fesjs/plugin-monaco-editor")],-1),d=s("h2",{id:"介绍",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),n(" 介绍")],-1),u=s("code",null,"json",-1),k=s("code",null,"javascript",-1),h=s("code",null,"python",-1),v={href:"https://github.com/Microsoft/monaco-editor",target:"_blank",rel:"noopener noreferrer"},m=s("code",null,"Monaco Editor",-1),g=s("code",null,"Monaco Editor",-1),b=s("code",null,"1.9.1",-1),f=e(`<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-monaco-editor"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'typescript'</span><span class="token punctuation">,</span> <span class="token string">'html'</span><span class="token punctuation">,</span> <span class="token string">'json'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,6),y=s("code",null,"monaco-editor-webpack-plugin",-1),_=s("code",null,"Monaco Editor",-1),j=s("code",null,"ESM",-1),x=s("code",null,"monaco-editor-webpack-plugin",-1),q={href:"https://github.com/Microsoft/monaco-editor-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},w=e(`<h3 id="filename" tabindex="-1"><a class="header-anchor" href="#filename" aria-hidden="true">#</a> filename</h3><ul><li><strong>类型</strong>:自定义 worker 脚本名称</li><li><strong>默认值</strong>:<code>'[name].worker.js'</code></li></ul><h3 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h3><ul><li><strong>类型</strong>:自定义 worker 脚本的路径</li><li><strong>默认值</strong>:<code>''</code></li></ul><h3 id="languages" tabindex="-1"><a class="header-anchor" href="#languages" aria-hidden="true">#</a> languages</h3><ul><li><p><strong>类型</strong>:需要支持的语言类型</p></li><li><p><strong>默认值</strong>:<code>['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']</code></p></li><li><p><strong>详情</strong>:默认是全部,但是编译后包体积会非常大,建议用到什么语言则配置什么语言。特别某些语言依赖其他语言,例如<code>javascript</code>依赖<code>typescript</code>,需要使用<code>javascript</code>时需要配置为:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'typescript'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="monaco" tabindex="-1"><a class="header-anchor" href="#monaco" aria-hidden="true">#</a> monaco</h3>`,9),E={href:"https://microsoft.github.io/monaco-editor/",target:"_blank",rel:"noopener noreferrer"},M=e(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> monaco <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +monaco<span class="token punctuation">.</span>editor<span class="token punctuation">.</span><span class="token function">defineTheme</span><span class="token punctuation">(</span><span class="token string">'myCoolTheme'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'vs'</span><span class="token punctuation">,</span> + <span class="token literal-property property">inherit</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-info'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'808080'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-error'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'ff0000'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontStyle</span><span class="token operator">:</span> <span class="token string">'bold'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-notice'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'FFA500'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-date'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'008800'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="组件-monacoeditor" tabindex="-1"><a class="header-anchor" href="#组件-monacoeditor" aria-hidden="true">#</a> 组件 MonacoEditor</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MonacoEditor</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400px<span class="token punctuation">"</span></span> <span class="token attr-name">check</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MonacoEditor</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> MonacoEditor <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> + MonacoEditor<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> json <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + json<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> props</h4><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>theme</td><td>编辑器的主题,使用其他主题需要先使用<code>monaco.editor.defineTheme</code>定义主题</td><td>string</td><td><code>defaultTheme</code></td></tr><tr><td>language</td><td>编辑器的语言</td><td>string</td><td>-</td></tr><tr><td>height</td><td>编辑器的高度</td><td>string</td><td><code>100%</code></td></tr><tr><td>width</td><td>编辑器的宽度</td><td>string</td><td><code>100%</code></td></tr><tr><td>modelValue(v-model)</td><td>编辑器的代码</td><td>string</td><td>-</td></tr><tr><td>readOnly</td><td>是否只读</td><td>boolean</td><td><code>false</code></td></tr><tr><td>options</td><td>编辑器的配置对象</td><td>object</td><td><code>{}</code></td></tr><tr><td>check</td><td>是否检查代码,如果检查不通过则不更新数据,目前只支持<code>json</code></td><td>boolean</td><td><code>false</code></td></tr></tbody></table><h4 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> events</h4><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>onload</td><td>编辑器初始化后触发</td><td>({monaco, editor, editorModel}) => void</td></tr><tr><td>scrollChange</td><td>滚动时触发</td><td>(e) => void</td></tr></tbody></table>`,7);function T(V,I){const a=p("ExternalLinkIcon");return c(),l("div",null,[r,d,s("p",null,[n("我们会遇到需要编辑代码的场景,比如编辑"),u,n("、"),k,n("、"),h,n("等等,"),s("a",v,[n("Monaco Editor"),t(a)]),n(" 是 \b 一个好用而且强大的的代码编辑器库,引入"),m,n("有一定的成本,插件实现了胶水代码,提供轻松引入的能力。目前内置的 "),g,n(" 版本是 "),b,n("。")]),f,s("p",null,[n("我们通过 "),y,n(" 集成 "),_,n(" 的 "),j,n("版本,所以编辑时其实就是 "),x,n(" 的配置,具体配置项参考"),s("a",q,[n("文档"),t(a)]),n("。")]),w,s("p",null,[n("编辑器的全局对象,提供扩展语言,自定义主题等等 API,具体用法请查看"),s("a",E,[n("monaco"),t(a)]),n("官方文档。")]),M])}const A=o(i,[["render",T],["__file","editor.html.vue"]]);export{A as default}; diff --git a/assets/editor.html.45b1bf75.js b/assets/editor.html.45b1bf75.js new file mode 100644 index 00000000..dd3064cd --- /dev/null +++ b/assets/editor.html.45b1bf75.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-323bda7e","path":"/reference/plugin/plugins/editor.html","title":"@fesjs/plugin-monaco-editor","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"编译时配置","slug":"编译时配置","link":"#编译时配置","children":[{"level":3,"title":"filename","slug":"filename","link":"#filename","children":[]},{"level":3,"title":"publicPath","slug":"publicpath","link":"#publicpath","children":[]},{"level":3,"title":"languages","slug":"languages","link":"#languages","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"monaco","slug":"monaco","link":"#monaco","children":[]},{"level":3,"title":"组件 MonacoEditor","slug":"组件-monacoeditor","link":"#组件-monacoeditor","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/editor.md"}');export{e as data}; diff --git a/assets/enums.html.2b56cb9b.js b/assets/enums.html.2b56cb9b.js new file mode 100644 index 00000000..0612465b --- /dev/null +++ b/assets/enums.html.2b56cb9b.js @@ -0,0 +1,130 @@ +import{_ as n,o as s,c as a,f as t}from"./app.bd9c95b7.js";const p={},e=t(`<h1 id="fesjs-plugin-enums" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-enums" aria-hidden="true">#</a> @fesjs/plugin-enums</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>日常业务开发中,有很多场景会使用到枚举值,比如 select-options、table-column。</p><p>该插件提供统一的枚举存取及丰富的函数来处理枚举。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-enums"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="静态配置" tabindex="-1"><a class="header-anchor" href="#静态配置" aria-hidden="true">#</a> 静态配置</h3><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 配置格式:[[key, value], ...]</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">enums</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'无效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'有效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="动态配置" tabindex="-1"><a class="header-anchor" href="#动态配置" aria-hidden="true">#</a> 动态配置</h3><p>在业务代码中</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> enums <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token comment">// 动态添加</span> +enums<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'无效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'有效的'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> +enums<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span> <span class="token comment">// 有效的</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="场景使用" tabindex="-1"><a class="header-anchor" href="#场景使用" aria-hidden="true">#</a> 场景使用</h2><ul><li><p>动态添加的枚举项支持数组和对象</p></li><li><p>枚举项为对象时,可以指定 keyName 和 valueName 属性名</p></li><li><p>导出枚举值,可指定取值的路径</p></li><li><p>导出枚举可扩展属性</p></li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- 遍历枚举status --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in enumsGet('status')<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ item.value }}:{{ item.key }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- 遍历枚举扩展后的roles --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in roles<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ item.name }}:{{ item.disabled }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token comment"><!-- 获取枚举roles为2的英文名 --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{ enumsGet('roles', '2', { dir: 'eName' }) }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> enums <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 动态添加枚举,枚举项是对象,并指定key的属性名为id</span> + enums<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span> + <span class="token string">'roles'</span><span class="token punctuation">,</span> + <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> + <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'系统管理员'</span><span class="token punctuation">,</span> + <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'System'</span><span class="token punctuation">,</span> + <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">,</span> <span class="token string">'3'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> + <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'业务管理员'</span><span class="token punctuation">,</span> + <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'Business'</span><span class="token punctuation">,</span> + <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span> + <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'普通用户'</span><span class="token punctuation">,</span> + <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'User'</span><span class="token punctuation">,</span> + <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> <span class="token literal-property property">keyName</span><span class="token operator">:</span> <span class="token string">'id'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token comment">// 导出定制格式的roles,扩展枚举项新的属性name、disabled</span> + <span class="token keyword">const</span> roles <span class="token operator">=</span> enums<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'roles'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> + <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'cName'</span><span class="token punctuation">,</span> <span class="token comment">// 指定取值路径,取属性cName的值</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span> + <span class="token comment">// 传入函数,获取结果值</span> + <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>value<span class="token punctuation">.</span>perm<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token operator">=></span> i <span class="token operator">>=</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token comment">// [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token literal-property property">enumsGet</span><span class="token operator">:</span> enums<span class="token punctuation">.</span>get<span class="token punctuation">,</span> + roles<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="get" tabindex="-1"><a class="header-anchor" href="#get" aria-hidden="true">#</a> get</h3><ul><li><p><code>get(name: string)</code> 获取指定名字的枚举</p></li><li><p><code>get(name: string, key: string)</code> 获取指定名字及键枚举默认值</p></li><li><p><code>get(name: string, opt: {extend: Array<Object>})</code> 获取指定名字的自定义格式枚举,<a href="#extend%E9%85%8D%E7%BD%AE">查看 extend 配置</a></p></li><li><p><code>get(name: string, key: string, opt: {dir: string})</code> 获取指定名字及键枚举<a href="#dir%E8%A7%84%E5%88%99">dir 规则</a>的值</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> + <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span> + <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="push" tabindex="-1"><a class="header-anchor" href="#push" aria-hidden="true">#</a> push</h3><p>动态添加枚举,重复添加会覆盖</p><ul><li><code>push(name: string, _enum: Array<Array>)</code></li><li><code>push(name: string, _enum: Array<Object>, opt?: Object)</code><ul><li>opt.keyName 指定 key 的取值属性,默认是 key</li><li>opt.valueName 指定 value 的取值属性</li></ul></li></ul><p>枚举项为数组,枚举项的[0]解析为 key,枚举项的[1]解析为 value</p><p>枚举项为对象时,根据 opt 配置 keyName、valueName 取枚举项属性值分别作为 key 和 value,<code>如果valueName未设置则value就是枚举项</code></p><h3 id="remove" tabindex="-1"><a class="header-anchor" href="#remove" aria-hidden="true">#</a> remove</h3><ul><li>remove(name: string)</li></ul><p>移除指定的枚举</p><h3 id="concat" tabindex="-1"><a class="header-anchor" href="#concat" aria-hidden="true">#</a> concat</h3><p>基于现有的枚举,连接上新的枚举后返回新的枚举</p><ul><li><code>concat(name: string, _enum: Array<Array|Object>, opt?: Object))</code><ul><li>opt.keyName 指定 key 的取值属性,默认是 key</li><li>opt.valueName 指定 value 的取值属性</li><li>opt.before 是否添加在现有的之前,默认是 false</li><li>opt.extend:返回的枚举<a href="#extend%E9%85%8D%E7%BD%AE">extend 配置</a></li></ul></li></ul><h3 id="convert" tabindex="-1"><a class="header-anchor" href="#convert" aria-hidden="true">#</a> convert</h3><p>将传入的枚举格式转换为{key, value}的形式</p><ul><li><code>convert(name: string, _enum: Array<Array|Object>, opt?: Object))</code><ul><li>opt.keyName 指定 key 的取值属性,默认是 key</li><li>opt.valueName 指定 value 的取值属性</li></ul></li></ul><h3 id="extend-配置" tabindex="-1"><a class="header-anchor" href="#extend-配置" aria-hidden="true">#</a> extend 配置</h3><p>扩展枚举项属性的配置</p><ul><li><code>extend: Array<Object></code> _ <code>key</code> 指定扩展的属性名 _ <code>dir</code> 指定该属性的取值路径 * <code>transfer(item: {key: any, value: any})</code> 转换函数,参数未枚举项,返回就是该属性的值<div class="custom-container tip"><p class="custom-container-title">提示</p><p>同时设置<a href="#dir%E8%A7%84%E5%88%99">dir</a>和 transfer,transfer 优先</p></div></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> + <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span> + <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dir-规则" tabindex="-1"><a class="header-anchor" href="#dir-规则" aria-hidden="true">#</a> dir 规则</h3><p>dir 是指定枚举项 value 的取值方式,规则如下:</p><ul><li>对象属性 <code>A</code>、<code>A.B</code></li><li>数组 <code>[0]</code>、<code>[0][1]</code></li><li>混合 <code>A[0]</code>、<code>[0].A</code>、<code>A[0].B</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 假如枚举项value的结构如下</span> +<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'aring'</span><span class="token punctuation">,</span> + <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'管理员'</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'业务操作员'</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> +<span class="token punctuation">}</span> +<span class="token comment">// 那么规则解析是:</span> +dir value +<span class="token string">'age'</span> <span class="token operator">=></span> <span class="token number">18</span> +<span class="token string">'role[0]'</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'管理员'</span><span class="token punctuation">}</span> +<span class="token string">'role[1].id'</span> <span class="token operator">=></span> <span class="token number">2</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>枚举项 value 如果是基本类型,则规则不生效,value 就是当前值</p></div>`,44),o=[e];function c(l,i){return s(),a("div",null,o)}const r=n(p,[["render",c],["__file","enums.html.vue"]]);export{r as default}; diff --git a/assets/enums.html.9eba9e94.js b/assets/enums.html.9eba9e94.js new file mode 100644 index 00000000..394b87fd --- /dev/null +++ b/assets/enums.html.9eba9e94.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-c253c956","path":"/reference/plugin/plugins/enums.html","title":"@fesjs/plugin-enums","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"配置","slug":"配置","link":"#配置","children":[{"level":3,"title":"静态配置","slug":"静态配置","link":"#静态配置","children":[]},{"level":3,"title":"动态配置","slug":"动态配置","link":"#动态配置","children":[]}]},{"level":2,"title":"场景使用","slug":"场景使用","link":"#场景使用","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"get","slug":"get","link":"#get","children":[]},{"level":3,"title":"push","slug":"push","link":"#push","children":[]},{"level":3,"title":"remove","slug":"remove","link":"#remove","children":[]},{"level":3,"title":"concat","slug":"concat","link":"#concat","children":[]},{"level":3,"title":"convert","slug":"convert","link":"#convert","children":[]},{"level":3,"title":"extend 配置","slug":"extend-配置","link":"#extend-配置","children":[]},{"level":3,"title":"dir 规则","slug":"dir-规则","link":"#dir-规则","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/enums.md"}');export{e as data}; diff --git a/assets/env.html.2fbe8f51.js b/assets/env.html.2fbe8f51.js new file mode 100644 index 00000000..53031c7c --- /dev/null +++ b/assets/env.html.2fbe8f51.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-ef8c5e10","path":"/guide/env.html","title":"环境变量","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"配置环境变量","slug":"配置环境变量","link":"#配置环境变量","children":[{"level":3,"title":"命令行添加","slug":"命令行添加","link":"#命令行添加","children":[]},{"level":3,"title":".env 文件配置","slug":"env-文件配置","link":"#env-文件配置","children":[]}]},{"level":2,"title":"编译时配置列表","slug":"编译时配置列表","link":"#编译时配置列表","children":[{"level":3,"title":"FES_ENV","slug":"fes-env","link":"#fes-env","children":[]},{"level":3,"title":"FES_PRESETS","slug":"fes-presets","link":"#fes-presets","children":[]},{"level":3,"title":"FES_PLUGINS","slug":"fes-plugins","link":"#fes-plugins","children":[]},{"level":3,"title":"PORT","slug":"port","link":"#port","children":[]},{"level":3,"title":"HOST","slug":"host","link":"#host","children":[]},{"level":3,"title":"HTTPS","slug":"https","link":"#https","children":[]},{"level":3,"title":"WATCH","slug":"watch","link":"#watch","children":[]},{"level":3,"title":"BABEL_CACHE","slug":"babel-cache","link":"#babel-cache","children":[]},{"level":3,"title":"ANALYZE","slug":"analyze","link":"#analyze","children":[]},{"level":3,"title":"ANALYZE_MODE","slug":"analyze-mode","link":"#analyze-mode","children":[]},{"level":3,"title":"ANALYZE_PORT","slug":"analyze-port","link":"#analyze-port","children":[]},{"level":3,"title":"CLEAR_OUTPUT","slug":"clear-output","link":"#clear-output","children":[]},{"level":3,"title":"RM_TMPDIR","slug":"rm-tmpdir","link":"#rm-tmpdir","children":[]}]},{"level":2,"title":"process.env","slug":"process-env","link":"#process-env","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/env.md"}');export{e as data}; diff --git a/assets/env.html.5728b740.js b/assets/env.html.5728b740.js new file mode 100644 index 00000000..c2d6be45 --- /dev/null +++ b/assets/env.html.5728b740.js @@ -0,0 +1,18 @@ +import{_ as o,r as n,o as l,c as p,b as e,d as a,a as s,w as d,f as r}from"./app.bd9c95b7.js";const h={},u=r(`<h1 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量" aria-hidden="true">#</a> 环境变量</h1><p>在构建或者代码在端上运行中需要一些跟区分于环境的变量,用于配置构建流程或者运行时过程,这时候我们可以配置环境变量。</p><h2 id="配置环境变量" tabindex="-1"><a class="header-anchor" href="#配置环境变量" aria-hidden="true">#</a> 配置环境变量</h2><h3 id="命令行添加" tabindex="-1"><a class="header-anchor" href="#命令行添加" aria-hidden="true">#</a> 命令行添加</h3><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># OS X, Linux</span> +<span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> fes dev + +<span class="token comment"># Windows (cmd.exe)</span> +<span class="token builtin class-name">set</span> <span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> <span class="token operator">&&</span> fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,6),v={href:"https://github.com/kentcdodds/cross-env",target:"_blank",rel:"noopener noreferrer"},b=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token function"},"pnpm"),a(),e("span",{class:"token function"},"add"),a(" cross-env "),e("span",{class:"token parameter variable"},"--dev"),a(` +cross-env `),e("span",{class:"token assign-left variable"},"PORT"),e("span",{class:"token operator"},"="),e("span",{class:"token number"},"3000"),a(` fes dev +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),m=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token function"},"npm"),a(` i cross-env --save-dev +cross-env `),e("span",{class:"token assign-left variable"},"PORT"),e("span",{class:"token operator"},"="),e("span",{class:"token number"},"3000"),a(` fes dev +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),f=r(`<h3 id="env-文件配置" tabindex="-1"><a class="header-anchor" href="#env-文件配置" aria-hidden="true">#</a> <code>.env</code> 文件配置</h3><p>Fes.js 中约定根目录下以 <code>.env</code> 开头的文件为环境变量配置文件。</p><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>然后执行</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>会以 3000 端口启动 dev server。</p><h4 id="本地临时配置" tabindex="-1"><a class="header-anchor" href="#本地临时配置" aria-hidden="true">#</a> 本地临时配置</h4><p>可以新建 <code>.env.local</code>,这份配置会和 <code>.env</code> 做合并后形成最终配置。</p><h4 id="环境配置" tabindex="-1"><a class="header-anchor" href="#环境配置" aria-hidden="true">#</a> 环境配置</h4><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境来指定配置,这时候必须在执行命令前添加 <code>FES_ENV</code> 保证执行加载环境变量配置文件逻辑前 <code>FES_ENV</code> 已设置。</p><p>举个 🌰 :</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">FES_ENV</span><span class="token operator">=</span>sit fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>如果存在 <code>.env.sit</code> 文件,则会将 <code>.env.sit</code> 的配置和 <code>.env</code> 做合并后形成最终配置。</p><h4 id="配置优先级" tabindex="-1"><a class="header-anchor" href="#配置优先级" aria-hidden="true">#</a> 配置优先级</h4><p>本地临时配置 > 环境配置 > 基础配置</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果多份配置中存在相同的配置项,<strong>则优先级高的会覆盖优先级低的</strong>。</p></div><h2 id="编译时配置列表" tabindex="-1"><a class="header-anchor" href="#编译时配置列表" aria-hidden="true">#</a> 编译时配置列表</h2><p>编译时配置是在构建过程需要的变量,开放给用户配置。</p><h3 id="fes-env" tabindex="-1"><a class="header-anchor" href="#fes-env" aria-hidden="true">#</a> FES_ENV</h3><p>指定当前的环境,不同环境各自的配置文件。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p><code>FES_ENV</code> 在会在加载<code>.env</code>前使用,所以只能用命令行方式配置。</p></div><h3 id="fes-presets" tabindex="-1"><a class="header-anchor" href="#fes-presets" aria-hidden="true">#</a> FES_PRESETS</h3><p>添加额外的插件集入口</p><h3 id="fes-plugins" tabindex="-1"><a class="header-anchor" href="#fes-plugins" aria-hidden="true">#</a> FES_PLUGINS</h3><p>添加额外的插件入口</p><h3 id="port" tabindex="-1"><a class="header-anchor" href="#port" aria-hidden="true">#</a> PORT</h3><p><code>fes dev</code> 时服务指定的端口号,默认是 <code>8080</code></p><h3 id="host" tabindex="-1"><a class="header-anchor" href="#host" aria-hidden="true">#</a> HOST</h3><p>默认是 <code>localhost</code>。</p><h3 id="https" tabindex="-1"><a class="header-anchor" href="#https" aria-hidden="true">#</a> HTTPS</h3><p>默认是 <code>false</code>。</p><h3 id="watch" tabindex="-1"><a class="header-anchor" href="#watch" aria-hidden="true">#</a> WATCH</h3><p>设为 none 时不监听文件变更。比如:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>WATCH=none fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="babel-cache" tabindex="-1"><a class="header-anchor" href="#babel-cache" aria-hidden="true">#</a> BABEL_CACHE</h3><p>默认开启 Babel 编译缓存,值为 none 时禁用缓存。</p><h3 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> ANALYZE</h3><p>用于分析 bundle 构成,默认关闭。</p><p>比如:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>ANALYZE=1 fes build +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="analyze-mode" tabindex="-1"><a class="header-anchor" href="#analyze-mode" aria-hidden="true">#</a> ANALYZE_MODE</h3><p>默认是<code>server</code></p><h3 id="analyze-port" tabindex="-1"><a class="header-anchor" href="#analyze-port" aria-hidden="true">#</a> ANALYZE_PORT</h3><p>默认是<code>8888</code></p><h3 id="clear-output" tabindex="-1"><a class="header-anchor" href="#clear-output" aria-hidden="true">#</a> CLEAR_OUTPUT</h3><p>仅仅在 <code>build</code> 时生效。如果设置为 <code>none</code>,就不会在构建前清除 <code>Output</code> 文件内容。</p><h3 id="rm-tmpdir" tabindex="-1"><a class="header-anchor" href="#rm-tmpdir" aria-hidden="true">#</a> RM_TMPDIR</h3><p>仅仅在 <code>build</code> 时生效。如果设置为 <code>none</code>,就不会在构建后清除 <code>.fes</code> 临时文件内容。</p><h2 id="process-env" tabindex="-1"><a class="header-anchor" href="#process-env" aria-hidden="true">#</a> p<wbr>rocess.env</h2><p>运行时配置需要以 <code>FES_APP_</code> 开头,比如在 <code>.env</code> 中配置:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>FES_APP_KEY=123456789 +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>在代码中使用:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">FES_APP_KEY</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token comment">// 输出 123456789</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>除了用户自定义的以<code>FES_APP_</code>开头的变量,还提供如下配置:</p><ul><li><p><strong>NODE_ENV</strong>:Node 环境变量</p></li><li><p><strong>FES_ENV</strong>:Fes.js 环境变量</p></li><li><p><strong>BASE_URL</strong>:等同于 publicPath</p></li></ul>`,56);function g(_,x){const c=n("ExternalLinkIcon"),i=n("CodeGroupItem"),t=n("CodeGroup");return l(),p("div",null,[u,e("p",null,[a("如果要同时考虑 OS X 和 Windows,可借助三方工具 "),e("a",v,[a("cross-env"),s(c)])]),s(t,null,{default:d(()=>[s(i,{title:"PNPM",active:""},{default:d(()=>[b]),_:1}),s(i,{title:"NPM"},{default:d(()=>[m]),_:1})]),_:1}),f])}const E=o(h,[["render",g],["__file","env.html.vue"]]);export{E as default}; diff --git a/assets/faq.html.7f01d8a8.js b/assets/faq.html.7f01d8a8.js new file mode 100644 index 00000000..b3a606b2 --- /dev/null +++ b/assets/faq.html.7f01d8a8.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-37e1c06f","path":"/guide/faq.html","title":"常见问题","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/faq.md"}');export{e as data}; diff --git a/assets/faq.html.d692a6e2.js b/assets/faq.html.d692a6e2.js new file mode 100644 index 00000000..d4bef230 --- /dev/null +++ b/assets/faq.html.d692a6e2.js @@ -0,0 +1,3 @@ +import{_ as e,o as t,c as a,f as o}from"./app.bd9c95b7.js";const c={},d=o(`<h1 id="常见问题" tabindex="-1"><a class="header-anchor" href="#常见问题" aria-hidden="true">#</a> 常见问题</h1><h4 id="为什么代码提示不生效" tabindex="-1"><a class="header-anchor" href="#为什么代码提示不生效" aria-hidden="true">#</a> 为什么代码提示不生效?</h4><ol><li>需要先运行一次<code>fes dev</code></li><li>检查tsconfig.json,<code>include</code>包含当前编辑文件,<code>compilerOptions.path</code>包含</li></ol><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>"@/*": ["./src/*"], +"@@/*": ["./src/.fes/*"] +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div>`,4),i=[d];function s(n,r){return t(),a("div",null,i)}const u=e(c,[["render",s],["__file","faq.html.vue"]]);export{u as default}; diff --git a/assets/getting-started.html.0eb9c5e2.js b/assets/getting-started.html.0eb9c5e2.js new file mode 100644 index 00000000..447a781e --- /dev/null +++ b/assets/getting-started.html.0eb9c5e2.js @@ -0,0 +1,73 @@ +import{_ as o,r as t,o as u,c as m,b as e,d as n,a as s,w as a,f as r}from"./app.bd9c95b7.js";const p={},h=e("h1",{id:"快速上手",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#快速上手","aria-hidden":"true"},"#"),n(" 快速上手")],-1),b=e("h2",{id:"依赖环境",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#依赖环境","aria-hidden":"true"},"#"),n(" 依赖环境")],-1),v={href:"https://nodejs.org/",target:"_blank",rel:"noopener noreferrer"},_=r(`<div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 打印 node 版本</span> +<span class="token function">node</span> <span class="token parameter variable">-v</span> +v12.13.0 +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1),k={href:"https://pnpm.io/installation",target:"_blank",rel:"noopener noreferrer"},g=r(`<div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 全局安装 pnpm</span> +<span class="token function">npm</span> i <span class="token function">pnpm</span> <span class="token parameter variable">-g</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="创建项目" tabindex="-1"><a class="header-anchor" href="#创建项目" aria-hidden="true">#</a> 创建项目</h2><p>这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。</p><h5 id="步骤-1-创建工作空间" tabindex="-1"><a class="header-anchor" href="#步骤-1-创建工作空间" aria-hidden="true">#</a> 步骤 1 创建工作空间</h5><p>如果工作空间不存在,则先创建:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建目录 workspace</span> +<span class="token function">mkdir</span> workspace +<span class="token comment"># 进入目录 workspace</span> +<span class="token builtin class-name">cd</span> workspace +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果工作空间已存在,则直接进入</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 进入目录 workspace</span> +<span class="token builtin class-name">cd</span> workspace +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h5 id="步骤-2-在工作空间创建项目" tabindex="-1"><a class="header-anchor" href="#步骤-2-在工作空间创建项目" aria-hidden="true">#</a> 步骤 2 在工作空间创建项目</h5>`,9),f=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(` +`),e("span",{class:"token function"},"pnpm"),n(` create @fesjs/fes-app myapp +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),x=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(` +npx @fesjs/create-fes-app myapp +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),w=e("p",null,[n("如果项目文件夹 "),e("code",null,"workspace/myapp"),n(" 已经存在,会提示目录已存在:")],-1),y=["src"],N=e("p",null,"你可以选择:",-1),C=e("ul",null,[e("li",null,[e("code",null,"Overwrite"),n(" 删除项目文件夹,重新创建项目。")]),e("li",null,[e("code",null,"Merge"),n(" 保留原项目文件夹,存在相同文件则用模板文件覆盖当前目录文件。")])],-1),P=e("code",null,"Overwrite",-1),M=e("code",null,"Merge",-1),j=e("code",null,"workspace/myapp",-1),B=e("code",null,"template",-1),E=["src"],$=e("p",null,[n("你可以选默认适用于中后台前端应用的 "),e("code",null,"PC"),n(" 类型,也可以选适用于移动端的 "),e("code",null,"H5"),n(" 类型。")],-1),G=e("h5",{id:"步骤-3-安装依赖",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#步骤-3-安装依赖","aria-hidden":"true"},"#"),n(" 步骤 3 安装依赖")],-1),I=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 进入项目目录"),n(` +`),e("span",{class:"token builtin class-name"},"cd"),n(` myapp +`),e("span",{class:"token comment"},"# 安装依赖"),n(` +`),e("span",{class:"token function"},"pnpm"),n(` i +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),O=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 进入项目目录"),n(` +`),e("span",{class:"token builtin class-name"},"cd"),n(` myapp +`),e("span",{class:"token comment"},"# 安装依赖"),n(` +`),e("span",{class:"token function"},"npm"),n(` i +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),S=e("h2",{id:"启动项目",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#启动项目","aria-hidden":"true"},"#"),n(" 启动项目")],-1),T=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 开发调试"),n(` +`),e("span",{class:"token function"},"pnpm"),n(` dev + +`),e("span",{class:"token function"},"pnpm"),n(` run v1.22.4 +$ fes dev +Starting the development server http://localhost:8080 `),e("span",{class:"token punctuation"},".."),n(`. + +✔ Webpack + Compiled successfully `),e("span",{class:"token keyword"},"in"),n(),e("span",{class:"token number"},"15"),n(`.91s + + DONE Compiled successfully `),e("span",{class:"token keyword"},"in"),n(" 15917ms "),e("span",{class:"token number"},"11"),n(`:17:08 AM +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),V=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 开发调试"),n(` +`),e("span",{class:"token function"},"npm"),n(` run dev + +`),e("span",{class:"token operator"},">"),n(` fes dev +Starting the development server http://localhost:8080 `),e("span",{class:"token punctuation"},".."),n(`. + +✔ Webpack + Compiled successfully `),e("span",{class:"token keyword"},"in"),n(),e("span",{class:"token number"},"3"),n(`.66s + + DONE Compiled successfully `),e("span",{class:"token keyword"},"in"),n(" 3662ms "),e("span",{class:"token number"},"11"),n(`:17:46 AM +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),W={href:"http://localhost:8080",target:"_blank",rel:"noopener noreferrer"},D=["src"],A=e("h2",{id:"部署发布",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#部署发布","aria-hidden":"true"},"#"),n(" 部署发布")],-1),F=e("h3",{id:"构建",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#构建","aria-hidden":"true"},"#"),n(" 构建")],-1),L=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 构建"),n(` +`),e("span",{class:"token function"},"pnpm"),n(` build + +`),e("span",{class:"token function"},"pnpm"),n(` run v1.22.4 +$ fes build + +✔ Webpack + Compiled successfully `),e("span",{class:"token keyword"},"in"),n(),e("span",{class:"token number"},"45"),n(`.37s + +✨ Done `),e("span",{class:"token keyword"},"in"),n(),e("span",{class:"token number"},"48"),n(`.87s. +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),H=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 构建"),n(` +`),e("span",{class:"token function"},"npm"),n(` run build + +`),e("span",{class:"token operator"},">"),n(` fes build + +✔ Webpack + Compiled successfully `),e("span",{class:"token keyword"},"in"),n(),e("span",{class:"token number"},"45"),n(`.37s +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),q=r(`<p>构建产物默认生成到 ./dist 下,然后通过 tree 命令查看。</p><div class="language-base line-numbers-mode" data-ext="base"><pre class="language-base"><code>tree ./dist + +dist +├── chunk-vendors.27cd4686.js +├── chunk-vendors.a5f5de67.css +├── index.11411d43.css +├── index.d72f1ba2.js +├── index.html +├── logo.png +└── static + └── logo.0f85bba0.png +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="本地验证" tabindex="-1"><a class="header-anchor" href="#本地验证" aria-hidden="true">#</a> 本地验证</h3>`,3),z={href:"https://github.com/vercel/serve",target:"_blank",rel:"noopener noreferrer"},J=e("code",null,"fes dev",-1),K=e("h3",{id:"部署",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#部署","aria-hidden":"true"},"#"),n(" 部署")],-1),Q=e("p",null,"本地验证完,就可以部署了。你需要把 dist 目录部署到服务器上。",-1);function R(c,U){const i=t("ExternalLinkIcon"),l=t("CodeGroupItem"),d=t("CodeGroup");return u(),m("div",null,[h,b,e("p",null,[n("首先得有 "),e("a",v,[n("Node.js"),s(i)]),n(",并确保 node 版本是 12.13 或以上。")]),_,e("p",null,[n("推荐使用 "),e("a",k,[n("pnpm"),s(i)]),n(" 管理 npm 依赖")]),g,s(d,null,{default:a(()=>[s(l,{title:"PNPM",active:""},{default:a(()=>[f]),_:1}),s(l,{title:"NPM"},{default:a(()=>[x]),_:1})]),_:1}),w,e("img",{src:c.$withBase("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,y),N,C,e("p",null,[n("当选择 "),P,n(" 或者 "),M,n(" 或者项目目录 "),j,n(" 不存在,会提示选取一个 "),B,n(": "),e("img",{src:c.$withBase("pickTemplate.png"),alt:"选择模板类型"},null,8,E)]),$,G,s(d,null,{default:a(()=>[s(l,{title:"PNPM",active:""},{default:a(()=>[I]),_:1}),s(l,{title:"NPM"},{default:a(()=>[O]),_:1})]),_:1}),S,s(d,null,{default:a(()=>[s(l,{title:"PNPM",active:""},{default:a(()=>[T]),_:1}),s(l,{title:"NPM"},{default:a(()=>[V]),_:1})]),_:1}),e("p",null,[n("Fes.js 会在 "),e("a",W,[n("http://localhost:8080"),s(i)]),n(" 启动一个热重载的开发服务器。当你修改你的 .vue 文件时,浏览器中的内容也会自动更新。")]),e("img",{src:c.$withBase("home.png"),alt:"home"},null,8,D),A,F,s(d,null,{default:a(()=>[s(l,{title:"PNPM",active:""},{default:a(()=>[L]),_:1}),s(l,{title:"NPM"},{default:a(()=>[H]),_:1})]),_:1}),q,e("p",null,[n("发布之前,可以通过 "),e("a",z,[n("serve"),s(i)]),n(" 做本地验证,验证结果应该跟执行 "),J,n(" 的结果一样。")]),K,Q])}const Y=o(p,[["render",R],["__file","getting-started.html.vue"]]);export{Y as default}; diff --git a/assets/getting-started.html.f4fdc148.js b/assets/getting-started.html.f4fdc148.js new file mode 100644 index 00000000..79816717 --- /dev/null +++ b/assets/getting-started.html.f4fdc148.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-fb0f0066","path":"/guide/getting-started.html","title":"快速上手","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"依赖环境","slug":"依赖环境","link":"#依赖环境","children":[]},{"level":2,"title":"创建项目","slug":"创建项目","link":"#创建项目","children":[]},{"level":2,"title":"启动项目","slug":"启动项目","link":"#启动项目","children":[]},{"level":2,"title":"部署发布","slug":"部署发布","link":"#部署发布","children":[{"level":3,"title":"构建","slug":"构建","link":"#构建","children":[]},{"level":3,"title":"本地验证","slug":"本地验证","link":"#本地验证","children":[]},{"level":3,"title":"部署","slug":"部署","link":"#部署","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/getting-started.md"}');export{e as data}; diff --git a/assets/icon.html.09e6d802.js b/assets/icon.html.09e6d802.js new file mode 100644 index 00000000..ca30b89a --- /dev/null +++ b/assets/icon.html.09e6d802.js @@ -0,0 +1,8 @@ +import{_ as t,o as e,c as n,f as a}from"./app.bd9c95b7.js";const s={},o=a(`<h1 id="fesjs-plugin-icon" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-icon" aria-hidden="true">#</a> @fesjs/plugin-icon</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>提供以 <code>component</code> 的方式,直接使用 svg icon 的能力。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-icon"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><p>新建 <code>src/icons</code> 目录,将 svg 文件放入其中,在 <code>component</code> 中引用:</p><div class="language-jsx line-numbers-mode" data-ext="jsx"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fes-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconName<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h3><table><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">说明</th><th style="text-align:left;">类型</th></tr></thead><tbody><tr><td style="text-align:left;">type</td><td style="text-align:left;">svg 文件名</td><td style="text-align:left;"><code>string</code></td></tr><tr><td style="text-align:left;">spin</td><td style="text-align:left;">是否无限旋转</td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;">rotate</td><td style="text-align:left;">旋转角度</td><td style="text-align:left;"><code>number</code></td></tr></tbody></table>`,11),l=[o];function i(c,d){return e(),n("div",null,l)}const r=t(s,[["render",i],["__file","icon.html.vue"]]);export{r as default}; diff --git a/assets/icon.html.1ef9becf.js b/assets/icon.html.1ef9becf.js new file mode 100644 index 00000000..f6081a8a --- /dev/null +++ b/assets/icon.html.1ef9becf.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-0a0e491c","path":"/reference/plugin/plugins/icon.html","title":"@fesjs/plugin-icon","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[{"level":3,"title":"属性","slug":"属性","link":"#属性","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/icon.md"}');export{e as data}; diff --git a/assets/image.html.50bf0bdd.js b/assets/image.html.50bf0bdd.js new file mode 100644 index 00000000..72533dee --- /dev/null +++ b/assets/image.html.50bf0bdd.js @@ -0,0 +1,21 @@ +import{_ as a,o as n,c as s,f as e}from"./app.bd9c95b7.js";const t={},p=e(`<h1 id="使用图片" tabindex="-1"><a class="header-anchor" href="#使用图片" aria-hidden="true">#</a> 使用图片</h1><h2 id="使用图片-1" tabindex="-1"><a class="header-anchor" href="#使用图片-1" aria-hidden="true">#</a> 使用图片</h2><p>假设在 <code>src/images</code> 目录下有 <code>logo.png</code>。</p><h3 id="vue-里使用图片" tabindex="-1"><a class="header-anchor" href="#vue-里使用图片" aria-hidden="true">#</a> Vue 里使用图片</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@/images/logo.png\`<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="js-里使用图片" tabindex="-1"><a class="header-anchor" href="#js-里使用图片" aria-hidden="true">#</a> JS 里使用图片</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> imageUrl <span class="token keyword">from</span> <span class="token string">'@/images/logo.png\`'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="css-里使用图片" tabindex="-1"><a class="header-anchor" href="#css-里使用图片" aria-hidden="true">#</a> CSS 里使用图片</h3><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.logo</span> <span class="token punctuation">{</span> + <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'@/images/logo.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意:</p><ol><li>这是 <code>webpack</code> 的规则,如果切到其他打包工具,可能会有变化</li><li><code>less</code> 中同样适用</li></ol><h2 id="public-文件夹" tabindex="-1"><a class="header-anchor" href="#public-文件夹" aria-hidden="true">#</a> <code>public</code> 文件夹</h2><p>有些内容不需要经过 <code>webpack</code> 模块化处理,则可以将这些内容放在 <code>public</code> 文件夹,构建后会直接复制到 <code>dist</code> 目录,所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在-html-模板中使用" tabindex="-1"><a class="header-anchor" href="#在-html-模板中使用" aria-hidden="true">#</a> 在 HTML 模板中使用</h3><p>在 <code>index.html</code> 中需要设置:</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="在-vue-文件中使用" tabindex="-1"><a class="header-anchor" href="#在-vue-文件中使用" aria-hidden="true">#</a> 在.vue 文件中使用</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>\`\${publicPath}my-image.png\`<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token literal-property property">publicPath</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,18),c=[p];function o(l,i){return n(),s("div",null,c)}const d=a(t,[["render",o],["__file","image.html.vue"]]);export{d as default}; diff --git a/assets/image.html.f92a08c2.js b/assets/image.html.f92a08c2.js new file mode 100644 index 00000000..f9ae7965 --- /dev/null +++ b/assets/image.html.f92a08c2.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-528b8b6c","path":"/guide/image.html","title":"使用图片","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"使用图片","slug":"使用图片-1","link":"#使用图片-1","children":[{"level":3,"title":"Vue 里使用图片","slug":"vue-里使用图片","link":"#vue-里使用图片","children":[]},{"level":3,"title":"JS 里使用图片","slug":"js-里使用图片","link":"#js-里使用图片","children":[]},{"level":3,"title":"CSS 里使用图片","slug":"css-里使用图片","link":"#css-里使用图片","children":[]}]},{"level":2,"title":"public 文件夹","slug":"public-文件夹","link":"#public-文件夹","children":[{"level":3,"title":"在 HTML 模板中使用","slug":"在-html-模板中使用","link":"#在-html-模板中使用","children":[]},{"level":3,"title":"在.vue 文件中使用","slug":"在-vue-文件中使用","link":"#在-vue-文件中使用","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/image.md"}');export{e as data}; diff --git a/assets/index.0b6f9a66.js b/assets/index.0b6f9a66.js new file mode 100644 index 00000000..6d142a25 --- /dev/null +++ b/assets/index.0b6f9a66.js @@ -0,0 +1 @@ +var v=function(){return Boolean(window.location.hostname==="localhost"||window.location.hostname==="[::1]"||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/))},c;typeof window<"u"&&(typeof Promise<"u"?c=new Promise(function(t){return window.addEventListener("load",t)}):c={then:function(t){return window.addEventListener("load",t)}});function s(t,n){n===void 0&&(n={});var i=n.registrationOptions;i===void 0&&(i={}),delete n.registrationOptions;var e=function(r){for(var f=[],a=arguments.length-1;a-- >0;)f[a]=arguments[a+1];n&&n[r]&&n[r].apply(n,f)};"serviceWorker"in navigator&&c.then(function(){v()?(l(t,e,i),navigator.serviceWorker.ready.then(function(r){e("ready",r)}).catch(function(r){return o(e,r)})):(u(t,e,i),navigator.serviceWorker.ready.then(function(r){e("ready",r)}).catch(function(r){return o(e,r)}))})}function o(t,n){navigator.onLine||t("offline"),t("error",n)}function u(t,n,i){navigator.serviceWorker.register(t,i).then(function(e){if(n("registered",e),e.waiting){n("updated",e);return}e.onupdatefound=function(){n("updatefound",e);var r=e.installing;r.onstatechange=function(){r.state==="installed"&&(navigator.serviceWorker.controller?n("updated",e):n("cached",e))}}}).catch(function(e){return o(n,e)})}function l(t,n,i){fetch(t).then(function(e){e.status===404?(n("error",new Error("Service worker not found at "+t)),d()):e.headers.get("content-type").indexOf("javascript")===-1?(n("error",new Error("Expected "+t+" to have javascript content-type, but received "+e.headers.get("content-type"))),d()):u(t,n,i)}).catch(function(e){return o(n,e)})}function d(){"serviceWorker"in navigator&&navigator.serviceWorker.ready.then(function(t){t.unregister()}).catch(function(t){return o(emit,t)})}export{s as register,d as unregister}; diff --git a/assets/index.html.1e4e9bb2.js b/assets/index.html.1e4e9bb2.js new file mode 100644 index 00000000..fa56789c --- /dev/null +++ b/assets/index.html.1e4e9bb2.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-2c05b6e0","path":"/reference/config/","title":"","lang":"zh-CN","frontmatter":{"sidebar":"auto"},"excerpt":"","headers":[{"level":2,"title":"配置文件","slug":"配置文件","link":"#配置文件","children":[{"level":3,"title":"配置文件解析","slug":"配置文件解析","link":"#配置文件解析","children":[]},{"level":3,"title":"配置智能提示","slug":"配置智能提示","link":"#配置智能提示","children":[]}]},{"level":2,"title":"共享配置","slug":"共享配置","link":"#共享配置","children":[{"level":3,"title":"alias","slug":"alias","link":"#alias","children":[]},{"level":3,"title":"autoprefixer","slug":"autoprefixer","link":"#autoprefixer","children":[]},{"level":3,"title":"base","slug":"base","link":"#base","children":[]},{"level":3,"title":"define","slug":"define","link":"#define","children":[]},{"level":3,"title":"dynamicImport","slug":"dynamicimport","link":"#dynamicimport","children":[]},{"level":3,"title":"inlineLimit","slug":"inlinelimit","link":"#inlinelimit","children":[]},{"level":3,"title":"mock","slug":"mock","link":"#mock","children":[]},{"level":3,"title":"mountElementId","slug":"mountelementid","link":"#mountelementid","children":[]},{"level":3,"title":"outputPath","slug":"outputpath","link":"#outputpath","children":[]},{"level":3,"title":"plugins","slug":"plugins","link":"#plugins","children":[]},{"level":3,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":3,"title":"publicPath","slug":"publicpath","link":"#publicpath","children":[]},{"level":3,"title":"router","slug":"router","link":"#router","children":[]},{"level":3,"title":"singular","slug":"singular","link":"#singular","children":[]},{"level":3,"title":"targets","slug":"targets","link":"#targets","children":[]},{"level":3,"title":"terserOptions","slug":"terseroptions","link":"#terseroptions","children":[]},{"level":3,"title":"title","slug":"title","link":"#title","children":[]}]},{"level":2,"title":"webpack 专属配置","slug":"webpack-专属配置","link":"#webpack-专属配置","children":[{"level":3,"title":"analyze","slug":"analyze","link":"#analyze","children":[]},{"level":3,"title":"chainWebpack","slug":"chainwebpack","link":"#chainwebpack","children":[]},{"level":3,"title":"cssLoader","slug":"cssloader","link":"#cssloader","children":[]},{"level":3,"title":"copy","slug":"copy","link":"#copy","children":[]},{"level":3,"title":"devServer","slug":"devserver","link":"#devserver","children":[]},{"level":3,"title":"devtool","slug":"devtool","link":"#devtool","children":[]},{"level":3,"title":"exportStatic","slug":"exportstatic","link":"#exportstatic","children":[]},{"level":3,"title":"externals","slug":"externals","link":"#externals","children":[]},{"level":3,"title":"extraBabelPlugins","slug":"extrababelplugins","link":"#extrababelplugins","children":[]},{"level":3,"title":"extraBabelPresets","slug":"extrababelpresets","link":"#extrababelpresets","children":[]},{"level":3,"title":"extraPostCSSPlugins","slug":"extrapostcssplugins","link":"#extrapostcssplugins","children":[]},{"level":3,"title":"html","slug":"html","link":"#html","children":[]},{"level":3,"title":"lessLoader","slug":"lessloader","link":"#lessloader","children":[]},{"level":3,"title":"nodeModulesTransform","slug":"nodemodulestransform","link":"#nodemodulestransform","children":[]},{"level":3,"title":"postcssLoader","slug":"postcssloader","link":"#postcssloader","children":[]},{"level":3,"title":"vueLoader","slug":"vueloader","link":"#vueloader","children":[]}]},{"level":2,"title":"Vite 专属配置","slug":"vite-专属配置","link":"#vite-专属配置","children":[{"level":3,"title":"viteOption","slug":"viteoption","link":"#viteoption","children":[]},{"level":3,"title":"viteVuePlugin","slug":"vitevueplugin","link":"#vitevueplugin","children":[]},{"level":3,"title":"viteVueJsx","slug":"vitevuejsx","link":"#vitevuejsx","children":[]},{"level":3,"title":"viteLegacy","slug":"vitelegacy","link":"#vitelegacy","children":[]},{"level":3,"title":"viteHtml","slug":"vitehtml","link":"#vitehtml","children":[]}]},{"level":2,"title":"更多配置项","slug":"更多配置项","link":"#更多配置项","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/config/README.md"}');export{e as data}; diff --git a/assets/index.html.2877eae5.js b/assets/index.html.2877eae5.js new file mode 100644 index 00000000..080f29b1 --- /dev/null +++ b/assets/index.html.2877eae5.js @@ -0,0 +1 @@ +import{_ as d,r as i,o,c as r,b as l,a as t,w as s,d as e,e as c}from"./app.bd9c95b7.js";const a={},_=l("h1",{id:"介绍",tabindex:"-1"},[l("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),e(" 介绍")],-1),h=l("h2",{id:"插件列表",tabindex:"-1"},[l("a",{class:"header-anchor",href:"#插件列表","aria-hidden":"true"},"#"),e(" 插件列表")],-1),f=l("thead",null,[l("tr",null,[l("th",null,"插件"),l("th",null,"介绍")])],-1),p=l("td",null,"提供对页面资源的权限控制能力",-1),g=l("td",null,"提供统一的枚举存取及丰富的函数来处理枚举",-1),m=l("td",null,"svg 文件自动注册为组件",-1),j=l("td",null,[e("基于 "),l("code",null,"Jest"),e(",提供单元测试、覆盖测试能力")],-1),w=l("td",null,"简单的配置即可拥有布局,包括导航以及侧边栏",-1),x=l("td",null,[e("基于 "),l("code",null,"Vue I18n"),e(",提供国际化能力")],-1),k=l("td",null,"简易的数据管理方案",-1),V=l("td",null,[e("基于 "),l("code",null,"Axios"),e(" 封装的 request,内置防止重复请求、请求节流、错误处理等功能")],-1),b=l("td",null,[e("基于 "),l("code",null,"Vuex"),e(", 提供状态管理能力")],-1),q=l("td",null,[e("基于 "),l("code",null,"qiankun"),e(",提供微服务能力")],-1),v=l("td",null,"样式支持sass",-1),C=l("td",null,[e("提供代码编辑器能力, 基于"),l("code",null,"monaco-editor"),e("(VS Code使用的代码编辑器)")],-1),B=l("td",null,[e("基于 "),l("code",null,"windicss"),e(",提供原子化 CSS 能力")],-1),N=l("td",null,[e("基于 "),l("code",null,"pinia"),e(",提供状态管理")],-1),y=l("td",null,"水印",-1),S=l("td",null,"swc",-1),F=l("h2",{id:"架构",tabindex:"-1"},[l("a",{class:"header-anchor",href:"#架构","aria-hidden":"true"},"#"),e(" 架构")],-1),L=["src"],R=l("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1);function A(u,E){const n=i("RouterLink");return o(),r("div",null,[_,h,l("table",null,[f,l("tbody",null,[l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/access.html"},{default:s(()=>[e("@fesjs/plugin-access")]),_:1})]),p]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/enums.html"},{default:s(()=>[e("@fesjs/plugin-enums")]),_:1})]),g]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/icon.html"},{default:s(()=>[e("@fesjs/plugin-icon")]),_:1})]),m]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/jest.html"},{default:s(()=>[e("@fesjs/plugin-jest")]),_:1})]),j]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/layout.html"},{default:s(()=>[e("@fesjs/plugin-layout")]),_:1})]),w]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/locale.html"},{default:s(()=>[e("@fesjs/plugin-locale")]),_:1})]),x]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/model.html"},{default:s(()=>[e("@fesjs/plugin-model")]),_:1})]),k]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/request.html"},{default:s(()=>[e("@fesjs/plugin-request")]),_:1})]),V]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/vuex.html"},{default:s(()=>[e("@fesjs/plugin-vuex")]),_:1})]),b]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/qiankun.html"},{default:s(()=>[e("@fesjs/plugin-qiankun")]),_:1})]),q]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/sass.html"},{default:s(()=>[e("@fesjs/plugin-sass")]),_:1})]),v]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/editor.html"},{default:s(()=>[e("@fesjs/plugin-monaco-editor")]),_:1})]),C]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/windicss.html"},{default:s(()=>[e("@fesjs/plugin-windicss")]),_:1})]),B]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/pinia.html"},{default:s(()=>[e("@fesjs/plugin-pinia")]),_:1})]),N]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/watermark.html"},{default:s(()=>[e("@fesjs/plugin-watermark")]),_:1})]),y]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/swc.html"},{default:s(()=>[e("@fesjs/plugin-swc")]),_:1})]),S])])]),F,c('  '),l("img",{src:u.$withBase("framework.png"),alt:"架构"},null,8,L),R])}const J=d(a,[["render",A],["__file","index.html.vue"]]);export{J as default}; diff --git a/assets/index.html.4b24c667.js b/assets/index.html.4b24c667.js new file mode 100644 index 00000000..00ea4739 --- /dev/null +++ b/assets/index.html.4b24c667.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-d61a9282","path":"/reference/plugin/","title":"介绍","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"插件列表","slug":"插件列表","link":"#插件列表","children":[]},{"level":2,"title":"架构","slug":"架构","link":"#架构","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/README.md"}');export{e as data}; diff --git a/assets/index.html.4ecf73ea.js b/assets/index.html.4ecf73ea.js new file mode 100644 index 00000000..916e7674 --- /dev/null +++ b/assets/index.html.4ecf73ea.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-fffb8e28","path":"/guide/","title":"介绍","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"痛点","slug":"痛点","link":"#痛点","children":[]},{"level":2,"title":"Fes.js 是什么?","slug":"fes-js-是什么","link":"#fes-js-是什么","children":[]},{"level":2,"title":"Fes.js 如何工作?","slug":"fes-js-如何工作","link":"#fes-js-如何工作","children":[{"level":3,"title":"架构","slug":"架构","link":"#架构","children":[]},{"level":3,"title":"插件和插件集","slug":"插件和插件集","link":"#插件和插件集","children":[]},{"level":3,"title":".fes 临时文件","slug":"fes-临时文件","link":"#fes-临时文件","children":[]}]},{"level":2,"title":"为什么不是 ...?","slug":"为什么不是","link":"#为什么不是","children":[{"level":3,"title":"Vue CLI","slug":"vue-cli","link":"#vue-cli","children":[]},{"level":3,"title":"UMI","slug":"umi","link":"#umi","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/README.md"}');export{e as data}; diff --git a/assets/index.html.4f4b557d.js b/assets/index.html.4f4b557d.js new file mode 100644 index 00000000..1d333ce8 --- /dev/null +++ b/assets/index.html.4f4b557d.js @@ -0,0 +1 @@ +const e=JSON.parse('{"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","link":"#create-fes-app","children":[]},{"level":2,"title":"fes","slug":"fes","link":"#fes","children":[{"level":3,"title":"fes dev","slug":"fes-dev","link":"#fes-dev","children":[]},{"level":3,"title":"fes build","slug":"fes-build","link":"#fes-build","children":[]},{"level":3,"title":"fes help","slug":"fes-help","link":"#fes-help","children":[]},{"level":3,"title":"fes info","slug":"fes-info","link":"#fes-info","children":[]},{"level":3,"title":"fes webpack","slug":"fes-webpack","link":"#fes-webpack","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/cli/README.md"}');export{e as data}; diff --git a/assets/index.html.833852a3.js b/assets/index.html.833852a3.js new file mode 100644 index 00000000..0a5c130b --- /dev/null +++ b/assets/index.html.833852a3.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-76cd065c","path":"/reference/api/","title":"API","lang":"zh-CN","frontmatter":{"sidebar":"auto"},"excerpt":"","headers":[{"level":2,"title":"基础API","slug":"基础api","link":"#基础api","children":[{"level":3,"title":"plugin","slug":"plugin","link":"#plugin","children":[]},{"level":3,"title":"ApplyPluginsType","slug":"applypluginstype","link":"#applypluginstype","children":[]},{"level":3,"title":"defineRouteMeta","slug":"defineroutemeta","link":"#defineroutemeta","children":[]},{"level":3,"title":"defineBuildConfig","slug":"definebuildconfig","link":"#definebuildconfig","children":[]},{"level":3,"title":"defineRuntimeConfig","slug":"defineruntimeconfig","link":"#defineruntimeconfig","children":[]}]},{"level":2,"title":"路由API","slug":"路由api","link":"#路由api","children":[{"level":3,"title":"getRouter","slug":"getrouter","link":"#getrouter","children":[]},{"level":3,"title":"getHistory","slug":"gethistory","link":"#gethistory","children":[]},{"level":3,"title":"useRoute","slug":"useroute","link":"#useroute","children":[]},{"level":3,"title":"useRouter","slug":"userouter","link":"#userouter","children":[]},{"level":3,"title":"onBeforeRouteUpdate","slug":"onbeforerouteupdate","link":"#onbeforerouteupdate","children":[]},{"level":3,"title":"onBeforeRouteLeave","slug":"onbeforerouteleave","link":"#onbeforerouteleave","children":[]},{"level":3,"title":"createWebHashHistory","slug":"createwebhashhistory","link":"#createwebhashhistory","children":[]},{"level":3,"title":"createWebHistory","slug":"createwebhistory","link":"#createwebhistory","children":[]},{"level":3,"title":"createMemoryHistory","slug":"creatememoryhistory","link":"#creatememoryhistory","children":[]},{"level":3,"title":"createRouter","slug":"createrouter","link":"#createrouter","children":[]},{"level":3,"title":"RouterLink","slug":"routerlink","link":"#routerlink","children":[]},{"level":3,"title":"useLink","slug":"uselink","link":"#uselink","children":[]},{"level":3,"title":"RouterView","slug":"routerview","link":"#routerview","children":[]},{"level":3,"title":"其他 Router Methods","slug":"其他-router-methods","link":"#其他-router-methods","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/api/README.md"}');export{e as data}; diff --git a/assets/index.html.9bf5bab1.js b/assets/index.html.9bf5bab1.js new file mode 100644 index 00000000..dfcac15c --- /dev/null +++ b/assets/index.html.9bf5bab1.js @@ -0,0 +1,78 @@ +import{_ as p,r as o,o as i,c as r,b as s,d as n,a as e,f as t}from"./app.bd9c95b7.js";const c={},l=t(`<h1 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h1><p>Fes.js 统一了API的出口,所有运行时API(包含Fes.js内置API和插件提供的API)全部通过<code>@fesjs/fes</code>导出。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> someApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="基础api" tabindex="-1"><a class="header-anchor" href="#基础api" aria-hidden="true">#</a> 基础API</h2><h3 id="plugin" tabindex="-1"><a class="header-anchor" href="#plugin" aria-hidden="true">#</a> plugin</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>主要在插件里面使用,项目代码中一般用不到。</p></div><p>运行时插件接口,是 Fes.js 内置的跑在浏览器里的一套插件体系。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> plugin<span class="token punctuation">,</span> ApplyPluginsType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token comment">// 注册插件</span> +plugin<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">apply</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dva</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +plugin<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">apply</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dva</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// 执行插件</span> +<span class="token comment">// 得到 { foo: 1, bar: 1 }</span> +plugin<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'dva'</span><span class="token punctuation">,</span> + <span class="token literal-property property">type</span><span class="token operator">:</span> ApplyPluginsType<span class="token punctuation">.</span>modify<span class="token punctuation">,</span> + <span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">args</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">async</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="plugin-register-参数包含" tabindex="-1"><a class="header-anchor" href="#plugin-register-参数包含" aria-hidden="true">#</a> <strong>plugin.register</strong> 参数包含:</h4><ul><li>apply 插件文件导出的内容</li><li>path 插件文件路径</li></ul><h4 id="plugin-applyplugins-参数包含" tabindex="-1"><a class="header-anchor" href="#plugin-applyplugins-参数包含" aria-hidden="true">#</a> <strong>plugin.applyPlugins</strong> 参数包含:</h4><ul><li>key,坑位的 key</li><li>type,执行方式类型,详见 <a href="#applypluginstype">ApplyPluginsType</a></li><li>initialValue,初始值</li><li>args,参数</li><li>async,是否异步执行且返回 Promise</li></ul><h3 id="applypluginstype" tabindex="-1"><a class="header-anchor" href="#applypluginstype" aria-hidden="true">#</a> ApplyPluginsType</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>主要在插件里面使用,项目代码中一般用不到。</p></div><p>运行时插件执行类型,enum 类型,包含三个属性:</p><ul><li>compose,用于合并执行多个函数,函数可决定前序函数的执行时机</li><li>modify,用于修改值</li><li>event,用于执行事件,前面没有依赖关系</li></ul><h3 id="defineroutemeta" tabindex="-1"><a class="header-anchor" href="#defineroutemeta" aria-hidden="true">#</a> defineRouteMeta</h3><p>定义页面的元信息</p><h3 id="definebuildconfig" tabindex="-1"><a class="header-anchor" href="#definebuildconfig" aria-hidden="true">#</a> defineBuildConfig</h3><p>定义构建配置</p><h3 id="defineruntimeconfig" tabindex="-1"><a class="header-anchor" href="#defineruntimeconfig" aria-hidden="true">#</a> defineRuntimeConfig</h3><p>定义运行时配置</p><h2 id="路由api" tabindex="-1"><a class="header-anchor" href="#路由api" aria-hidden="true">#</a> 路由API</h2>`,23),u={href:"https://next.router.vuejs.org/introduction.html",target:"_blank",rel:"noopener noreferrer"},d=t(`<h3 id="getrouter" tabindex="-1"><a class="header-anchor" href="#getrouter" aria-hidden="true">#</a> getRouter</h3><p>返回当前 <code>router</code> 实例。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">getRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="gethistory" tabindex="-1"><a class="header-anchor" href="#gethistory" aria-hidden="true">#</a> getHistory</h3><p>返回当前路由的History</p><h3 id="useroute" tabindex="-1"><a class="header-anchor" href="#useroute" aria-hidden="true">#</a> useRoute</h3><p>返回当前 <code>route</code> 实例,相当于在模板内使用 <code>$route</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token function">useRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="userouter" tabindex="-1"><a class="header-anchor" href="#userouter" aria-hidden="true">#</a> useRouter</h3><p>返回 <code>router</code> 实例,相当于在模板语法中使用 <code>$router</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onbeforerouteupdate" tabindex="-1"><a class="header-anchor" href="#onbeforerouteupdate" aria-hidden="true">#</a> onBeforeRouteUpdate</h3><p>添加导航守卫,在当前路由即将更新时触发。类似于之前的<code>beforeRouteUpdate</code>,但是可用于任何组件。卸载组件时,将移除守卫。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onBeforeRouteUpdate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">onBeforeRouteUpdate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onbeforerouteleave" tabindex="-1"><a class="header-anchor" href="#onbeforerouteleave" aria-hidden="true">#</a> onBeforeRouteLeave</h3><p>添加导航守卫,在当前路由即将离开时触发。类似于之前的<code>beforeRouteLeave</code>,但可用于任何组件。卸载组件时,将移除守卫。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onBeforeRouteLeave <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">onBeforeRouteLeave</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="createwebhashhistory" tabindex="-1"><a class="header-anchor" href="#createwebhashhistory" aria-hidden="true">#</a> createWebHashHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://),或当配置服务器不能处理任意URL时这非常有用。注意:如果 SEO 对你很重要,你应该使用 <code>createWebHistory</code>。</p><h3 id="createwebhistory" tabindex="-1"><a class="header-anchor" href="#createwebhistory" aria-hidden="true">#</a> createWebHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。</p><h3 id="creatememoryhistory" tabindex="-1"><a class="header-anchor" href="#creatememoryhistory" aria-hidden="true">#</a> createMemoryHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始,这个位置无处不在。如果用户不在浏览器上下文中,它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。</p><h3 id="createrouter" tabindex="-1"><a class="header-anchor" href="#createrouter" aria-hidden="true">#</a> createRouter</h3>`,27),k={href:"https://next.router.vuejs.org/api/#routeroptions",target:"_blank",rel:"noopener noreferrer"},v=t(`<h3 id="routerlink" tabindex="-1"><a class="header-anchor" href="#routerlink" aria-hidden="true">#</a> RouterLink</h3><p>使用自定义组件路由器链接来创建链接,而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>`,3),h={href:"https://next.router.vuejs.org/api/#router-link-props",target:"_blank",rel:"noopener noreferrer"},m={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},b=s("h3",{id:"uselink",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#uselink","aria-hidden":"true"},"#"),n(" useLink")],-1),g={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},f=t(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> RouterLink<span class="token punctuation">,</span> useLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'AppLink'</span><span class="token punctuation">,</span> + + <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token comment">// add @ts-ignore if using TypeScript</span> + <span class="token operator">...</span>RouterLink<span class="token punctuation">.</span>props<span class="token punctuation">,</span> + <span class="token literal-property property">inactiveClass</span><span class="token operator">:</span> String<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// \`props\` contains \`to\` and any other prop that can be passed to <router-link></span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> navigate<span class="token punctuation">,</span> href<span class="token punctuation">,</span> route<span class="token punctuation">,</span> isActive<span class="token punctuation">,</span> isExactActive <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useLink</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> + + <span class="token comment">// profit!</span> + + <span class="token keyword">return</span> <span class="token punctuation">{</span> isExternalLink <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="routerview" tabindex="-1"><a class="header-anchor" href="#routerview" aria-hidden="true">#</a> RouterView</h3><p>router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方,以适应你的布局。</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ Component, route }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Component<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,4),y={href:"https://next.router.vuejs.org/api/#router-view-props",target:"_blank",rel:"noopener noreferrer"},x={href:"https://next.router.vuejs.org/api/#router-view-s-v-slot",target:"_blank",rel:"noopener noreferrer"},_=s("h3",{id:"其他-router-methods",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#其他-router-methods","aria-hidden":"true"},"#"),n(" 其他 Router Methods")],-1),w={href:"https://next.router.vuejs.org/api/#router-methods",target:"_blank",rel:"noopener noreferrer"};function j(R,L){const a=o("ExternalLinkIcon");return i(),r("div",null,[l,s("p",null,[n("Fes.js 路由基于 "),s("a",u,[n("Vue Router 4.0"),e(a)]),n(",想了解更多的同学可以看看官方文档。")]),d,s("p",null,[n("创建一个路由器实例,该实例可用于 Vue 应用程序。查看"),s("a",k,[n("路由器选项"),e(a)]),n(",了解可以传递的所有属性的列表。")]),v,s("p",null,[n("可以查看"),s("a",h,[n("官方文档"),e(a)]),n("了解更多 RouterLink 的 Porps。查看"),s("a",m,[n("官方文档"),e(a)]),n("了解 RouterLink 的作用域插槽。")]),b,s("p",null,[n("返回的结果跟 RouterLink 的作用域插槽的属性一致,查看"),s("a",g,[n("官方API"),e(a)]),n("了解更多。")]),f,s("p",null,[n("可以查看"),s("a",y,[n("官方文档"),e(a)]),n("了解更多 RouterView 的 Porps。查看"),s("a",x,[n("官方文档"),e(a)]),n("了解 RouterView 的作用域插槽。")]),_,s("p",null,[n("查看"),s("a",w,[n("vue-router 官方文档"),e(a)]),n("了解更多。")])])}const A=p(c,[["render",j],["__file","index.html.vue"]]);export{A as default}; diff --git a/assets/index.html.9f427ef5.js b/assets/index.html.9f427ef5.js new file mode 100644 index 00000000..0ebdda77 --- /dev/null +++ b/assets/index.html.9f427ef5.js @@ -0,0 +1,6 @@ +import{_ as r,o as d,c as n,e as t,b as e,d as a,f as i}from"./app.bd9c95b7.js";const l={},h=i('<h1 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h1><h2 id="痛点" tabindex="-1"><a class="header-anchor" href="#痛点" aria-hidden="true">#</a> 痛点</h2><p>在开发一个前端项目之前,我们可能需要做如下准备工作:</p><ul><li>搭建开发环境</li><li>约定代码规范</li><li>封装API请求</li><li>配置路由</li><li>实现布局、菜单、导航</li><li>实现登录</li><li>权限管理</li><li>...</li></ul><p>除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。</p><h2 id="fes-js-是什么" tabindex="-1"><a class="header-anchor" href="#fes-js-是什么" aria-hidden="true">#</a> Fes.js 是什么?</h2><p>Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础,同时支持配置式路由和约定式路由,并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系,支持各种功能扩展和业务需求。</p><p>它主要具备以下特点:</p><ul><li><p>🚀 <strong>快速</strong> ,内置了路由、开发、构建等,并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件,可以满足大部分日常开发需求。</p></li><li><p>🧨 <strong>简单</strong> ,基于Vue.js 3.0,上手简单。贯彻“约定优于配置”思想,设计插件上尽可能用约定替代配置,同时提供统一的插件配置入口,简单简洁又不失灵活。提供一致性的API入口,一致化的体验,学习起来更轻松。</p></li><li><p>💪 <strong>健壮</strong> ,只需要关心页面内容,减少写BUG的机会!提供单元测试、覆盖测试能力保障项目质量。</p></li><li><p>📦 <strong>可扩展</strong> ,借鉴Umi实现了完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序的运行。</p></li><li><p>📡 <strong>面向未来</strong> ,在满足需求的同时,我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能,已使用webpack5提升构建性能和实现微服务,未来会探索vite等新技术。</p></li></ul><h2 id="fes-js-如何工作" tabindex="-1"><a class="header-anchor" href="#fes-js-如何工作" aria-hidden="true">#</a> Fes.js 如何工作?</h2><h3 id="架构" tabindex="-1"><a class="header-anchor" href="#架构" aria-hidden="true">#</a> 架构</h3>',11),c=["src"],o=e("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),u=e("h3",{id:"插件和插件集",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#插件和插件集","aria-hidden":"true"},"#"),a(" 插件和插件集")],-1),p=["src"],f=i(`<h3 id="fes-临时文件" tabindex="-1"><a class="header-anchor" href="#fes-临时文件" aria-hidden="true">#</a> .fes 临时文件</h3><p>.fes 临时目录是整个 Fes.js 项目的发动机,你的入口文件、路由等等都在这里,这些是由 fes 内部插件及三方插件生成的。</p><p>你通常会在 .fes 下看到以下目录</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>+ .fes + + core # 内部插件生成 + + pluginA # 外部插件生成 + + presetB # 外部插件生成 + + fes.js # 入口文件 +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>临时文件是 Fes.js 中非常重要的一部分,框架或插件会根据你的代码生成临时文件,这些原来需要放在项目里的脏乱差的部分都被藏在了这里。</p><p>你可以在这里调试代码,但不要在 .git 仓库里提交他,因为他的临时性,每次启动 fes 时都会被删除并重新生成。</p><h2 id="为什么不是" tabindex="-1"><a class="header-anchor" href="#为什么不是" aria-hidden="true">#</a> 为什么不是 ...?</h2><h3 id="vue-cli" tabindex="-1"><a class="header-anchor" href="#vue-cli" aria-hidden="true">#</a> Vue CLI</h3><p>Vue CLI 是基于 Vue.js 进行快速开发的完整系统,提供交互式脚手架、丰富的官方插件,并且可通过插件进行扩展,他在打包层把体验做到了极致,但是不包含路由,不是框架。所以,如果大家想基于他修改部分配置,或者希望在打包层之外也做技术收敛时,就会遇到困难。</p><h3 id="umi" tabindex="-1"><a class="header-anchor" href="#umi" aria-hidden="true">#</a> UMI</h3><p>UMI 是个很好的选择,Fes.js 很多功能是借鉴 UMI 做的。UMI 是基于 React 封装的应用级框架,贯彻着函数式编程的思维。而 Vue 有所不同,虽然 Vue 3.0 向函数式迈了一大步,但大家可能依然喜欢编写 <code>.vue</code>文件,而非 <code>.jsx</code> 文件。两种思维方式会导致部分API设计上有所差异,虽然 UMI 有 <code>plugin-vue</code> ,但不太 "vue"。推荐喜欢 React 的同学使用 UMI。</p>`,11);function m(s,g){return d(),n("div",null,[h,t('  '),e("img",{src:s.$withBase("framework.png"),alt:"架构"},null,8,c),o,u,e("p",null,[e("img",{src:s.$withBase("plugins.png"),alt:"插件",title:"插件",style:{width:"500px"},class:"medium-zoom-image"},null,8,p)]),a(" Fes.js 支持插件和插件集,通过这张图应该很好理解到他们的关系,通过插件集我们把插件收敛依赖然后支持不同的业务类型。 "),f])}const _=r(l,[["render",m],["__file","index.html.vue"]]);export{_ as default}; diff --git a/assets/index.html.a2d6e9e6.js b/assets/index.html.a2d6e9e6.js new file mode 100644 index 00000000..792158d9 --- /dev/null +++ b/assets/index.html.a2d6e9e6.js @@ -0,0 +1,115 @@ +import{_ as p,r as o,o as l,c as i,b as n,d as s,a as e,f as t}from"./app.bd9c95b7.js";const c={},r=t(`<h2 id="配置文件" tabindex="-1"><a class="header-anchor" href="#配置文件" aria-hidden="true">#</a> 配置文件</h2><p>Fes.js 内置了比较通用的构建方式,如果没有个性化需求,不需要修改构建相关的配置。</p><h3 id="配置文件解析" tabindex="-1"><a class="header-anchor" href="#配置文件解析" aria-hidden="true">#</a> 配置文件解析</h3><p>Fes.js 会自动解析项目根目录下的 <code>.fes.js</code> 文件。</p><p>最基础的配置文件是这样的:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>可以通过环境变量 <code>FES_ENV</code> 进行环境差异化配置,当我们运行 <code>FES_ENV=prod fes dev</code> 时,Fes.js 会找到 <code>.fes.js</code> 和 <code>.fes.prod.js</code>(可选) 的配置文件进行 <code>deepmerge</code>。</p><h3 id="配置智能提示" tabindex="-1"><a class="header-anchor" href="#配置智能提示" aria-hidden="true">#</a> 配置智能提示</h3><p>可以通过 <code>defineBuildConfig</code> 工具函数获取类型提示:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineBuildConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineBuildConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="共享配置" tabindex="-1"><a class="header-anchor" href="#共享配置" aria-hidden="true">#</a> 共享配置</h2><h3 id="alias" tabindex="-1"><a class="header-anchor" href="#alias" aria-hidden="true">#</a> alias</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置别名,对引用路径进行映射。</p></li><li><p>示例:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">'src/assets/styles/main'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后 <code>import('main')</code>,实际上是 <code>import('src/assets/styles/main')</code>。</p><h3 id="autoprefixer" tabindex="-1"><a class="header-anchor" href="#autoprefixer" aria-hidden="true">#</a> autoprefixer</h3><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> + <span class="token literal-property property">flexbox</span><span class="token operator">:</span> <span class="token string">'no-2009'</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,18),d=n("p",null,"详情:",-1),u={href:"https://github.com/postcss/autoprefixer#options",target:"_blank",rel:"noopener noreferrer"},k=t(`<h3 id="base" tabindex="-1"><a class="header-anchor" href="#base" aria-hidden="true">#</a> base</h3><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>''</code></p></li><li><p>详情:</p><p>设置路由前缀,通常用于部署到非根目录。比如你有路由 <code>/pageA</code>、<code>/pageB</code>,然后设置了 <code>base</code> 为 <code>/manage/</code>,那么就可以通过 <code>/manage/pageA</code>、<code>/manage/pageB</code> 访问到它们。</p></li></ul><div class="custom-container warning"><p class="custom-container-title">2.1.x 已废弃</p><p>2.1.x 版本请使用 router.base 代替</p></div><h3 id="define" tabindex="-1"><a class="header-anchor" href="#define" aria-hidden="true">#</a> define</h3><ul><li>类型: <code>object</code></li><li>默认值: <code>{}</code></li><li>详情: 用于提供给代码中可用的变量。</li><li>示例:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">define</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">__DEV__</span><span class="token operator">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后你代码里写 <code>console.log(__DEV__)</code>,会被编译成 <code>console.log('development')</code>。</p><h3 id="dynamicimport" tabindex="-1"><a class="header-anchor" href="#dynamicimport" aria-hidden="true">#</a> dynamicImport</h3><ul><li><p>类型: <code>boolean</code></p></li><li><p>默认值: false</p></li><li><p>详情:</p><p>路由是否按需加载</p></li></ul><h3 id="inlinelimit" tabindex="-1"><a class="header-anchor" href="#inlinelimit" aria-hidden="true">#</a> inlineLimit</h3><ul><li><p>类型: <code>number</code></p></li><li><p>默认值: <code>8192</code>(8k)</p></li><li><p>详情:</p><p>配置图片文件是否走 base64 编译的阈值。默认是 <code>8192</code> 字节,小于它会被编译为 base64 编码,否则会生成单独的文件。</p></li></ul><h3 id="mock" tabindex="-1"><a class="header-anchor" href="#mock" aria-hidden="true">#</a> mock</h3><ul><li><p>类型: <code>object || boolean</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置 mock 属性。</p><ul><li>当 mock 为 <code>boolean</code> 类型时,<code>true</code> 表示打开 mock,<code>false</code> 表示关闭 mock。</li><li>当 mock 为 <code>object</code> 类型时,默认打开 mock。也可以通过子属性 <code>prefix</code> 添加过滤条件,满足条件的走 mock 文件。</li></ul></li><li><p>示例:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/api/auth'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后所有以 <code>/api/users</code> 开始的请求,就能进入 mock.js 文件处理,<a href="../../guide/mock">mock.js 示例</a>。</p><h3 id="mountelementid" tabindex="-1"><a class="header-anchor" href="#mountelementid" aria-hidden="true">#</a> mountElementId</h3><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>app</code></p></li><li><p>详情:</p><p>指定渲染到的 HTML 元素 id。</p></li></ul><h3 id="outputpath" tabindex="-1"><a class="header-anchor" href="#outputpath" aria-hidden="true">#</a> outputPath</h3><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>dist</code></p></li><li><p>详情:</p><p>指定输出路径。</p></li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不允许设定为 <code>src</code>、<code>public</code>、<code>pages</code> 等约定目录。</p></div><h3 id="plugins" tabindex="-1"><a class="header-anchor" href="#plugins" aria-hidden="true">#</a> plugins</h3><ul><li><p>类型: <code>Array(string)</code></p></li><li><p>默认值: <code>[]</code></p></li><li><p>详情:</p><p>配置额外的 <code>fes</code> 插件。 数组项为指向插件的路径,可以是 npm 依赖、相对路径或绝对路径。如果是相对路径,则会从项目根目录开始找。</p></li><li><p>示例:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token comment">// npm 依赖</span> + <span class="token string">'fes-plugin-hello'</span><span class="token punctuation">,</span> + <span class="token comment">// 相对路径</span> + <span class="token string">'./plugin'</span><span class="token punctuation">,</span> + <span class="token comment">// 绝对路径</span> + <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>__dirname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/plugin.js</span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="proxy" tabindex="-1"><a class="header-anchor" href="#proxy" aria-hidden="true">#</a> proxy</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置代理能力。</p></li><li><p>示例:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token string-property property">'/v2'</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">'https://api.douban.com/'</span><span class="token punctuation">,</span> + <span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,26),h=n("code",null,"/v2/movie/in_theaters_proxy",-1),v={href:"http://api.douban.com/v2/movie/in_theaters_proxy",target:"_blank",rel:"noopener noreferrer"},b=t(`<h3 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h3><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>/</code></p></li><li><p>详情:</p><p>静态资源 publicPath。当打包的时候在静态文件路径前面添加 <code>publicPath</code> 的值,当你需要修改静态文件地址时,比如使用 CDN 部署,把 <code>publicPath</code> 的值设为 CDN 的值就可以。</p></li></ul><h3 id="router" tabindex="-1"><a class="header-anchor" href="#router" aria-hidden="true">#</a> router</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{ mode: 'hash', base: '/' }</code></p></li><li><p>详情:</p><p>配置路由,具体请查看指南中关于路由的介绍</p></li></ul><h3 id="singular" tabindex="-1"><a class="header-anchor" href="#singular" aria-hidden="true">#</a> singular</h3><ul><li><p>类型: <code>boolean</code></p></li><li><p>默认值: <code>false</code></p></li><li><p>详情:</p><p>配置是否启用单数模式的目录。 比如 <code>src/pages</code> 的约定在开启后为 <code>src/page</code> 目录,@fesjs/fes-plugins 插件也遵照此配置的约定。</p></li></ul><h3 id="targets" tabindex="-1"><a class="header-anchor" href="#targets" aria-hidden="true">#</a> targets</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置需要兼容的浏览器最低版本,会自动引入 polyfill 和做语法转换。</p></li></ul><h3 id="terseroptions" tabindex="-1"><a class="header-anchor" href="#terseroptions" aria-hidden="true">#</a> terserOptions</h3><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> defaultTerserOptions <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token literal-property property">compress</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token comment">// turn off flags with small gains to speed up minification</span> + <span class="token literal-property property">arrows</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">collapse_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 0.3kb</span> + <span class="token literal-property property">comparisons</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">computed_props</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">hoist_funs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">hoist_props</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">hoist_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">inline</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">loops</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">negate_iife</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">reduce_funcs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">reduce_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">switches</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">toplevel</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">typeofs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + + <span class="token comment">// a few flags with noticeable gains/speed ratio</span> + <span class="token comment">// numbers based on out of the box vendor bundle</span> + <span class="token literal-property property">booleans</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.7kb</span> + <span class="token literal-property property">if_return</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.4kb</span> + <span class="token literal-property property">sequences</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.7kb</span> + <span class="token literal-property property">unused</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 2.3kb</span> + + <span class="token comment">// required features to drop conditional branches</span> + <span class="token literal-property property">conditionals</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token literal-property property">dead_code</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token literal-property property">evaluate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">mangle</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">safari10</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,11),m=n("p",null,"详情:",-1),g={href:"https://github.com/terser/terser#minify-options",target:"_blank",rel:"noopener noreferrer"},_=t(`<h3 id="title" tabindex="-1"><a class="header-anchor" href="#title" aria-hidden="true">#</a> title</h3><ul><li><p>类型: <code>string</code></p></li><li><p>详情:</p><p>html 页面标题</p></li></ul><h2 id="webpack-专属配置" tabindex="-1"><a class="header-anchor" href="#webpack-专属配置" aria-hidden="true">#</a> webpack 专属配置</h2><h3 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> analyze</h3><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> + <span class="token literal-property property">analyzerMode</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_MODE</span> <span class="token operator">||</span> <span class="token string">'server'</span><span class="token punctuation">,</span> + <span class="token literal-property property">analyzerPort</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_PORT</span> <span class="token operator">||</span> <span class="token number">8888</span><span class="token punctuation">,</span> + <span class="token literal-property property">openAnalyzer</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_OPEN</span> <span class="token operator">!==</span> <span class="token string">'none'</span><span class="token punctuation">,</span> + <span class="token comment">// generate stats file while ANALYZE_DUMP exist</span> + <span class="token literal-property property">generateStatsFile</span><span class="token operator">:</span> <span class="token operator">!</span><span class="token operator">!</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span><span class="token punctuation">,</span> + <span class="token literal-property property">statsFilename</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span> <span class="token operator">||</span> <span class="token string">'stats.json'</span><span class="token punctuation">,</span> + <span class="token literal-property property">logLevel</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_LOG_LEVEL</span> <span class="token operator">||</span> <span class="token string">'info'</span><span class="token punctuation">,</span> + <span class="token literal-property property">defaultSizes</span><span class="token operator">:</span> <span class="token string">'parsed'</span> <span class="token comment">// stat // gzip</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><p>详情:</p><p>构建结果分析,当配置 <code>p<wbr>rocess.env.ANALYZE</code> 时开启,例如执行<code>ANALYZE=1 fes build</code></p></li></ul><h3 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h3>`,8),f=n("li",null,[n("p",null,[s("类型:"),n("code",null,"function")])],-1),y=n("li",null,[n("p",null,[s("默认值:"),n("code",null,"null")])],-1),x=n("p",null,"详情:",-1),j={href:"https://github.com/neutrinojs/webpack-chain",target:"_blank",rel:"noopener noreferrer"},w=t(`<p>示例:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">memo<span class="token punctuation">,</span> <span class="token punctuation">{</span> env<span class="token punctuation">,</span> webpack <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 删除 fes 内置插件</span> + memo<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="cssloader" tabindex="-1"><a class="header-anchor" href="#cssloader" aria-hidden="true">#</a> cssLoader</h3>`,3),A=n("li",null,[n("p",null,[s("类型: "),n("code",null,"object")])],-1),E=n("li",null,[n("p",null,[s("默认值: "),n("code",null,"''")])],-1),L=n("p",null,"详情:",-1),P={href:"https://github.com/webpack-contrib/css-loader#options",target:"_blank",rel:"noopener noreferrer"},N=t(`<h3 id="copy" tabindex="-1"><a class="header-anchor" href="#copy" aria-hidden="true">#</a> copy</h3><ul><li><p>类型: <code>Array(string) || Array(object)</code></p></li><li><p>默认值: <code>[]</code></p></li><li><p>详情:</p><p>设置要复制到输出目录的文件、文件夹。</p><p>配置约定 <code>from-to</code> 规则, 其中 <code>from</code> 是相对于 <code>cwd</code> 的路径,<code>to</code> 是相对于输出路径的路径。</p></li><li><p>示例:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">copy</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">from</span><span class="token operator">:</span> <span class="token string">'/src/assets/images'</span><span class="token punctuation">,</span> + <span class="token literal-property property">to</span><span class="token operator">:</span> <span class="token string">'assets/images'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>上面示例中,实现了将 <code>cwd</code> 路径中的 <code>/src/assets/images</code> 文件夹,在编译完成后,<code>copy</code> 到输出路径下的 <code>assets/images</code> 文件夹。</p><h3 id="devserver" tabindex="-1"><a class="header-anchor" href="#devserver" aria-hidden="true">#</a> devServer</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置开发服务器。支持以下子配置项:</p><ul><li>port,端口号,默认 <code>8000</code></li><li>host,默认 <code>localhost</code></li><li>https,是否启用 https server,同时也会开启 HTTP/2</li></ul><p>启用 port 和 host 也可以通过环境变量 <code>PORT</code> 和 <code>HOST</code> 临时指定。</p></li></ul><h3 id="devtool" tabindex="-1"><a class="header-anchor" href="#devtool" aria-hidden="true">#</a> devtool</h3>`,7),V=n("li",null,[n("p",null,[s("类型: "),n("code",null,"string")])],-1),S=n("li",null,[n("p",null,[s("默认值: "),n("code",null,"cheap-module-source-map"),s(" in dev, "),n("code",null,"undefined"),s(" in build")])],-1),B=n("p",null,"详情:",-1),O={href:"https://webpack.js.org/configuration/devtool/#devtool",target:"_blank",rel:"noopener noreferrer"},z=t(`<h3 id="exportstatic" tabindex="-1"><a class="header-anchor" href="#exportstatic" aria-hidden="true">#</a> exportStatic</h3><ul><li>类型: <code>object</code></li><li>默认值: <code>{}</code></li><li>详情:</li></ul><p>配置 <code>html</code> 的输出形式,默认只输出 <code>index.html</code>。</p><p>如果开启 <code>exportStatic</code>,则会针对每个路由输出 <code>html</code> 文件。</p><p>比如以下路由,</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>/ +/users +/list +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>不开启 <code>exportStatic</code> 时,输出,</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>- index.html +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>设置 <code>exportStatic: {}</code> 后,输出,</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>- index.html +- users.html +- list.html +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="externals" tabindex="-1"><a class="header-anchor" href="#externals" aria-hidden="true">#</a> externals</h3><ul><li><p>类型:<code>object</code></p></li><li><p>默认值:<code>{}</code></p></li><li><p>详情:</p><p>设置哪些模块可以不被打包,通过 <code><script></code> 或其他方式引入。</p></li></ul><p>示例:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">vue</span><span class="token operator">:</span> <span class="token string">'window.Vue'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="extrababelplugins" tabindex="-1"><a class="header-anchor" href="#extrababelplugins" aria-hidden="true">#</a> extraBabelPlugins</h3><ul><li>类型: <code>array</code></li><li>默认值: <code>[]</code></li><li>详情:</li></ul><p>配置额外的 <code>babel</code> 插件。</p><ul><li>示例:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">extraBabelPlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">libraryName</span><span class="token operator">:</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">,</span> <span class="token literal-property property">libraryDirectory</span><span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">'css'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="extrababelpresets" tabindex="-1"><a class="header-anchor" href="#extrababelpresets" aria-hidden="true">#</a> extraBabelPresets</h3><ul><li>类型: <code>array</code></li><li>默认值: <code>[]</code></li><li>详情:</li></ul><p>配置额外的 <code>babel</code> 插件集。</p><h3 id="extrapostcssplugins" tabindex="-1"><a class="header-anchor" href="#extrapostcssplugins" aria-hidden="true">#</a> extraPostCSSPlugins</h3>`,23),D=n("li",null,[n("p",null,[s("类型: "),n("code",null,"array")])],-1),T=n("li",null,[n("p",null,[s("默认值: "),n("code",null,"[]")])],-1),Y=n("p",null,"详情:",-1),Z={href:"https://github.com/postcss/postcss/blob/master/docs/plugins.md",target:"_blank",rel:"noopener noreferrer"},C=n("h3",{id:"html",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#html","aria-hidden":"true"},"#"),s(" html")],-1),F=n("li",null,[n("p",null,[s("类型: "),n("code",null,"object")])],-1),M=n("li",null,[n("p",null,[s("默认值: "),n("code",null,"{}")])],-1),I=n("p",null,"详情:",-1),H={href:"https://github.com/jantimon/html-webpack-plugin#options",target:"_blank",rel:"noopener noreferrer"},U=n("h3",{id:"lessloader",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#lessloader","aria-hidden":"true"},"#"),s(" lessLoader")],-1),q=n("li",null,[n("p",null,[s("类型: "),n("code",null,"object")])],-1),R=n("li",null,[n("p",null,[s("默认值: "),n("code",null,"{}")])],-1),W=n("p",null,"详情:",-1),G={href:"https://github.com/webpack-contrib/less-loader",target:"_blank",rel:"noopener noreferrer"},J=t('<h3 id="nodemodulestransform" tabindex="-1"><a class="header-anchor" href="#nodemodulestransform" aria-hidden="true">#</a> nodeModulesTransform</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{ exclude: [] }</code></p></li><li><p>详情:</p><p>默认编译所有 <code>node_modules</code> 下的包,可以通过配置 <code>exclude</code> 来跳过某些包,以提高编译速度。</p></li></ul><h3 id="postcssloader" tabindex="-1"><a class="header-anchor" href="#postcssloader" aria-hidden="true">#</a> postcssLoader</h3>',3),$=n("li",null,[n("p",null,[s("类型: "),n("code",null,"object")])],-1),K=n("li",null,[n("p",null,[s("默认值: "),n("code",null,"{}")])],-1),Q=n("p",null,"详情:",-1),X={href:"https://github.com/postcss/postcss-loader#options",target:"_blank",rel:"noopener noreferrer"},nn=n("h3",{id:"vueloader",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vueloader","aria-hidden":"true"},"#"),s(" vueLoader")],-1),sn=n("li",null,[n("p",null,[s("类型: "),n("code",null,"object")])],-1),an=n("li",null,[n("p",null,[s("默认值:"),n("code",null,"{}")])],-1),en=n("p",null,"详情:",-1),tn={href:"https://vue-loader.vuejs.org/zh/options.html",target:"_blank",rel:"noopener noreferrer"},pn=n("h2",{id:"vite-专属配置",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vite-专属配置","aria-hidden":"true"},"#"),s(" Vite 专属配置")],-1),on=n("h3",{id:"viteoption",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#viteoption","aria-hidden":"true"},"#"),s(" viteOption")],-1),ln=n("li",null,[n("p",null,[s("类型: "),n("code",null,"object")])],-1),cn=n("p",null,"详情:",-1),rn={href:"https://cn.vitejs.dev/config/",target:"_blank",rel:"noopener noreferrer"},dn=n("h3",{id:"vitevueplugin",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitevueplugin","aria-hidden":"true"},"#"),s(" viteVuePlugin")],-1),un=n("li",null,[n("p",null,[s("类型: "),n("code",null,"object")])],-1),kn=n("p",null,"详情:",-1),hn={href:"https://github.com/vitejs/vite/tree/main/packages/plugin-vue",target:"_blank",rel:"noopener noreferrer"},vn=n("h3",{id:"vitevuejsx",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitevuejsx","aria-hidden":"true"},"#"),s(" viteVueJsx")],-1),bn=n("li",null,[n("p",null,[s("类型: "),n("code",null,"object")])],-1),mn=n("p",null,"详情:",-1),gn={href:"https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx",target:"_blank",rel:"noopener noreferrer"},_n=n("h3",{id:"vitelegacy",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitelegacy","aria-hidden":"true"},"#"),s(" viteLegacy")],-1),fn=n("li",null,[n("p",null,[s("类型: "),n("code",null,"object")])],-1),yn=n("p",null,"详情:",-1),xn={href:"https://github.com/vitejs/vite/tree/main/packages/plugin-legacy",target:"_blank",rel:"noopener noreferrer"},jn=n("h3",{id:"vitehtml",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#vitehtml","aria-hidden":"true"},"#"),s(" viteHtml")],-1),wn=n("li",null,[n("p",null,[s("类型: "),n("code",null,"object")])],-1),An=n("p",null,"详情:",-1),En={href:"https://github.com/vbenjs/vite-plugin-html",target:"_blank",rel:"noopener noreferrer"},Ln=n("h2",{id:"更多配置项",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#更多配置项","aria-hidden":"true"},"#"),s(" 更多配置项")],-1),Pn=n("p",null,"Fes.js 允许插件注册配置,如果你使用插件,肯定会在插件里找到更多配置项。",-1);function Nn(Vn,Sn){const a=o("ExternalLinkIcon");return l(),i("div",null,[r,n("ul",null,[n("li",null,[d,n("p",null,[n("a",u,[s("postcss autoprefixer 插件"),e(a)]),s(" 配置。")])])]),k,n("p",null,[s("然后访问 "),h,s(" 就能访问到 "),n("a",v,[s("http://api.douban.com/v2/movie/in_theaters_proxy"),e(a)]),s(" 的数据。")]),b,n("ul",null,[n("li",null,[m,n("p",null,[s("配置 "),n("a",g,[s("压缩器 terser 的配置项"),e(a)])])])]),_,n("ul",null,[f,y,n("li",null,[x,n("p",null,[s("通过 "),n("a",j,[s("webpack-chain"),e(a)]),s(" 的 API 修改 webpack 配置。")])])]),w,n("ul",null,[A,E,n("li",null,[L,n("p",null,[s("设置 "),n("a",P,[s("css-loader 配置项"),e(a)]),s("。")])])]),N,n("ul",null,[V,S,n("li",null,[B,n("p",null,[s("用户配置 sourcemap 类型。详见 "),n("a",O,[s(" webpack#devtool 配置"),e(a)]),s("。")])])]),z,n("ul",null,[D,T,n("li",null,[Y,n("p",null,[s("设置额外的 "),n("a",Z,[s("postcss 插件"),e(a)]),s("。")])])]),C,n("ul",null,[F,M,n("li",null,[I,n("p",null,[s("设置"),n("a",H,[s("html-webpack-plugin"),e(a)]),s("。")])])]),U,n("ul",null,[q,R,n("li",null,[W,n("p",null,[s("设置 "),n("a",G,[s("less-loader 配置项"),e(a)]),s("。")])])]),J,n("ul",null,[$,K,n("li",null,[Q,n("p",null,[s("设置 "),n("a",X,[s("postcss-loader 配置项"),e(a)]),s("。")])])]),nn,n("ul",null,[sn,an,n("li",null,[en,n("p",null,[s("配置 "),n("a",tn,[s("Vue Loader"),e(a)])])])]),pn,on,n("ul",null,[ln,n("li",null,[cn,n("p",null,[s("Vite 的配置,详情请看 "),n("a",rn,[s("Vite Config"),e(a)])])])]),dn,n("ul",null,[un,n("li",null,[kn,n("p",null,[s("自定义 "),n("a",hn,[s("@vitejs/plugin-vue"),e(a)]),s(" 的配置。")])])]),vn,n("ul",null,[bn,n("li",null,[mn,n("p",null,[s("自定义 "),n("a",gn,[s("@vitejs/plugin-vue-jsx"),e(a)]),s(" 的配置。")])])]),_n,n("ul",null,[fn,n("li",null,[yn,n("p",null,[s("自定义 "),n("a",xn,[s("@vitejs/plugin-legacy"),e(a)]),s(" 的配置。")])])]),jn,n("ul",null,[wn,n("li",null,[An,n("p",null,[s("自定义 "),n("a",En,[s("vite-plugin-html"),e(a)]),s(" 的配置。")])])]),Ln,Pn])}const On=p(c,[["render",Nn],["__file","index.html.vue"]]);export{On as default}; diff --git a/assets/index.html.b99c3eab.js b/assets/index.html.b99c3eab.js new file mode 100644 index 00000000..e2745813 --- /dev/null +++ b/assets/index.html.b99c3eab.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-494b840e","path":"/reference/plugin/dev/","title":"插件介绍","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"开始","slug":"开始","link":"#开始","children":[]},{"level":2,"title":"创建插件","slug":"创建插件","link":"#创建插件","children":[]},{"level":2,"title":"发布到 npm","slug":"发布到-npm","link":"#发布到-npm","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/dev/README.md"}');export{e as data}; diff --git a/assets/index.html.c52ea2ee.js b/assets/index.html.c52ea2ee.js new file mode 100644 index 00000000..76d4f0be --- /dev/null +++ b/assets/index.html.c52ea2ee.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-8daa1a0e","path":"/","title":"首页","lang":"zh-CN","frontmatter":{"home":true,"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-一样容易","link":"#像数-1-2-3-一样容易","children":[]},{"level":2,"title":"反馈","slug":"反馈","link":"#反馈","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"README.md"}');export{e as data}; diff --git a/assets/index.html.cbd2c491.js b/assets/index.html.cbd2c491.js new file mode 100644 index 00000000..f124083c --- /dev/null +++ b/assets/index.html.cbd2c491.js @@ -0,0 +1,86 @@ +import{_ as r,r as d,o as t,c as u,a as s,w as a,f as c,b as e,d as n}from"./app.bd9c95b7.js";const o={},v=c(`<h1 id="命令行工具" tabindex="-1"><a class="header-anchor" href="#命令行工具" aria-hidden="true">#</a> 命令行工具</h1><h2 id="create-fes-app" tabindex="-1"><a class="header-anchor" href="#create-fes-app" aria-hidden="true">#</a> create-fes-app</h2><p>通过 <code>create-fes-app</code> 命令创建项目模板,输入<code>create-fes-app -h</code>则可以看到如下信息:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: create-fes-app <name> + +Options: + -v, --version Output the current version + -h, --help Display help for command + -f, --force Overwrite target directory if it exists + -m, --merge Merge target directory if it exists +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>可以在本机安装后使用:</p>`,5),p=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 全局安装"),n(` +`),e("span",{class:"token function"},"pnpm"),n(" global "),e("span",{class:"token function"},"add"),n(` @fesjs/create-fes-app + +`),e("span",{class:"token comment"},"# 创建模板"),n(` +create-fes-app fes-app +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),m=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 全局安装"),n(` +`),e("span",{class:"token function"},"npm"),n(" i "),e("span",{class:"token parameter variable"},"-g"),n(` @fesjs/create-fes-app + +`),e("span",{class:"token comment"},"# 创建模板"),n(` +create-fes-app fes-app +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),b=e("p",null,[n("推荐使用 "),e("code",null,"pnpm create"),n(" 和 "),e("code",null,"npx"),n(" 方式创建模板,一直使用最新的模板:")],-1),h=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(` +`),e("span",{class:"token function"},"pnpm"),n(` create @fesjs/fes-app myapp + +`),e("span",{class:"token comment"},"# 安装依赖"),n(` +`),e("span",{class:"token function"},"pnpm"),n(` i + +`),e("span",{class:"token comment"},"# 运行"),n(` +`),e("span",{class:"token function"},"pnpm"),n(` dev +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),f=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(` +npx @fesjs/create-fes-app myapp + +`),e("span",{class:"token comment"},"# 安装依赖"),n(` +`),e("span",{class:"token function"},"npm"),n(),e("span",{class:"token function"},"install"),n(` + +`),e("span",{class:"token comment"},"# 运行"),n(` +`),e("span",{class:"token function"},"npm"),n(` run dev +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),g=c(`<h2 id="fes" tabindex="-1"><a class="header-anchor" href="#fes" aria-hidden="true">#</a> fes</h2><p>需要在项目根目录执行 <code>fes</code> 命令,输入<code>fes -h</code>则可以看到如下信息:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes <command> [options] + +一个好用的前端应用解决方案 + +Options: + -v, --vers output the current version + -h, --help display help for command + +Commands: + build build application for production + dev [options] start a local http service for development + help show command helps + info print debugging information about your environment + webpack [options] inspect webpack configurations + + Run fes <command> --help for detailed usage of given command. +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="fes-dev" tabindex="-1"><a class="header-anchor" href="#fes-dev" aria-hidden="true">#</a> fes dev</h3><p>启动本地开发服务器进行项目的开发调试。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes dev [options] + +start a local http service for development + +Options: + --port http service port, like 8080 + --https whether to turn on the https service + -h, --help display help for command +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes dev <span class="token parameter variable">--port</span><span class="token operator">=</span><span class="token number">8080</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-build" tabindex="-1"><a class="header-anchor" href="#fes-build" aria-hidden="true">#</a> fes build</h3><p>编译构建 web 产物。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes build [options] + +build application for production + +Options: + -h, --help display help for command +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>fes build +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-help" tabindex="-1"><a class="header-anchor" href="#fes-help" aria-hidden="true">#</a> fes help</h3><p>打印帮助文档。 比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes <span class="token builtin class-name">help</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-info" tabindex="-1"><a class="header-anchor" href="#fes-info" aria-hidden="true">#</a> fes info</h3><p>打印当前项目的有用的环境信息,用来帮助定位问题。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes info [options] + +print debugging information about your environment + +Options: + -h, --help display help for command +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes info +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-webpack" tabindex="-1"><a class="header-anchor" href="#fes-webpack" aria-hidden="true">#</a> fes webpack</h3><p>查看项目使用的 webpack 配置。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes webpack [options] + +inspect webpack configurations + +Options: + --rule <ruleName> inspect a specific module rule + --plugin <pluginName> inspect a specific plugin + --rules list all module rule names + --plugins list all plugin names + --verbose show full function definitions in output + -h, --help display help for command +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes webpack +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>`,26);function x(k,_){const i=d("CodeGroupItem"),l=d("CodeGroup");return t(),u("div",null,[v,s(l,null,{default:a(()=>[s(i,{title:"PNPM",active:""},{default:a(()=>[p]),_:1}),s(i,{title:"NPM"},{default:a(()=>[m]),_:1})]),_:1}),b,s(l,null,{default:a(()=>[s(i,{title:"PNPM",active:""},{default:a(()=>[h]),_:1}),s(i,{title:"NPM"},{default:a(()=>[f]),_:1})]),_:1}),g])}const y=r(o,[["render",x],["__file","index.html.vue"]]);export{y as default}; diff --git a/assets/index.html.d2f518d0.js b/assets/index.html.d2f518d0.js new file mode 100644 index 00000000..97612ffa --- /dev/null +++ b/assets/index.html.d2f518d0.js @@ -0,0 +1,17 @@ +import{_ as a,o as n,c as s,f as e}from"./app.bd9c95b7.js";const p={},i=e(`<h1 id="插件介绍" tabindex="-1"><a class="header-anchor" href="#插件介绍" aria-hidden="true">#</a> 插件介绍</h1><h2 id="开始" tabindex="-1"><a class="header-anchor" href="#开始" aria-hidden="true">#</a> 开始</h2><p>一个插件是一个 <code>npm</code> 包,它能够为 Fes.js 创建的项目添加额外的功能,这些功能包括:</p><ul><li>项目的 webpack 配置。</li><li>修改项目的 babel 配置。</li><li>添加新的 fes 命令 - 例如 <code>@fes/plugin-jest</code> 添加了 <code>fes test</code> 命令,允许开发者运行单元测试。</li><li>集成 Vue 的插件。</li><li>修改路由配置</li><li>提供运行时 API</li><li>...</li></ul><p>插件的入口是一个函数,函数会以 API 对象作为第一个参数:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">api</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'esbuild'</span><span class="token punctuation">,</span> + <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token function">schema</span><span class="token punctuation">(</span><span class="token parameter">joi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> joi<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">enableBy</span><span class="token operator">:</span> api<span class="token punctuation">.</span>EnableBy<span class="token punctuation">.</span>config<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>API 对象是构建流程管理 Service 类的实例,api 提供一些有用的方法帮助你开发插件。</p><p><code>api.describe</code>用来描述插件:</p><ul><li><strong>key</strong>, 插件的 <code>key</code>,可以理解为插件的名称,在 <code>.fes.js</code> 中用 <code>key</code> 配置此插件。</li><li><strong>config</strong>,插件的配置信息: <ul><li>schema,定义配置的类型</li><li>default,默认配置</li></ul></li><li><strong>enableBy</strong>, 是否开启插件,可配置某些场景下禁用插件。</li></ul><h2 id="创建插件" tabindex="-1"><a class="header-anchor" href="#创建插件" aria-hidden="true">#</a> 创建插件</h2><h5 id="第一步-安装create-fes-app" tabindex="-1"><a class="header-anchor" href="#第一步-安装create-fes-app" aria-hidden="true">#</a> 第一步:安装<code>create-fes-app</code></h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @fesjs/create-fes-app +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第二步-创建插件项目" tabindex="-1"><a class="header-anchor" href="#第二步-创建插件项目" aria-hidden="true">#</a> 第二步:创建插件项目</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>create-fes-app pluginName +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>在询问<code>Pick an template</code>时选择<code>Plugin</code>!</p><h5 id="第三步-进入插件目录-安装依赖" tabindex="-1"><a class="header-anchor" href="#第三步-进入插件目录-安装依赖" aria-hidden="true">#</a> 第三步:进入插件目录 & 安装依赖</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> pluginName <span class="token operator">&</span> <span class="token function">pnpm</span> i +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第四步-启动编译" tabindex="-1"><a class="header-anchor" href="#第四步-启动编译" aria-hidden="true">#</a> 第四步:启动编译</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" tabindex="-1"><a class="header-anchor" href="#第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" aria-hidden="true">#</a> 第五步:使用插件 API 完成你的插件!(可以参考其他插件理解 api 用法和场景)</h5><h2 id="发布到-npm" tabindex="-1"><a class="header-anchor" href="#发布到-npm" aria-hidden="true">#</a> 发布到 npm</h2><p>以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被 Fes.js 自动注册为插件或插件集。</p><p>所以编写好的插件想发布到 npm 供其他人使用,包名必须是 <code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头。</p>`,23),c=[i];function t(o,l){return n(),s("div",null,c)}const r=a(p,[["render",t],["__file","index.html.vue"]]);export{r as default}; diff --git a/assets/index.html.de0d80a1.js b/assets/index.html.de0d80a1.js new file mode 100644 index 00000000..e4f2f945 --- /dev/null +++ b/assets/index.html.de0d80a1.js @@ -0,0 +1,17 @@ +import{_ as i,r as a,o as r,c as d,a as s,w as t,b as e,d as n}from"./app.bd9c95b7.js";const u={},m=e("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-hidden":"true"},"#"),n(" 像数 1, 2, 3 一样容易")],-1),p=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(` +`),e("span",{class:"token function"},"pnpm"),n(` create @fesjs/fes-app myapp + +`),e("span",{class:"token comment"},"# 安装依赖"),n(` +`),e("span",{class:"token function"},"pnpm"),n(` i + +`),e("span",{class:"token comment"},"# 运行"),n(` +`),e("span",{class:"token function"},"pnpm"),n(` dev +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),h=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(` +npx @fesjs/create-fes-app myapp + +`),e("span",{class:"token comment"},"# 安装依赖"),n(` +`),e("span",{class:"token function"},"npm"),n(),e("span",{class:"token function"},"install"),n(` + +`),e("span",{class:"token comment"},"# 运行"),n(` +`),e("span",{class:"token function"},"npm"),n(` run dev +`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),_=e("h2",{id:"反馈",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#反馈","aria-hidden":"true"},"#"),n(" 反馈")],-1),b=e("thead",null,[e("tr",null,[e("th",null,"Github Issue"),e("th",null,"Fes.js 开源运营小助手")])],-1),f={href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noopener noreferrer"},v=e("td",null,[e("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})],-1);function k(g,x){const l=a("CodeGroupItem"),c=a("CodeGroup"),o=a("ExternalLinkIcon");return r(),d("div",null,[m,s(c,null,{default:t(()=>[s(l,{title:"PNPM",active:""},{default:t(()=>[p]),_:1}),s(l,{title:"NPM"},{default:t(()=>[h]),_:1})]),_:1}),_,e("table",null,[b,e("tbody",null,[e("tr",null,[e("td",null,[e("a",f,[n("@fesjs/fes.js/issues"),s(o)])]),v])])])])}const C=i(u,[["render",k],["__file","index.html.vue"]]);export{C as default}; diff --git a/assets/jest.html.b6be70f6.js b/assets/jest.html.b6be70f6.js new file mode 100644 index 00000000..918b59b4 --- /dev/null +++ b/assets/jest.html.b6be70f6.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-3cd5a4ef","path":"/reference/plugin/plugins/jest.html","title":"@fesjs/plugin-jest","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"约定","slug":"约定","link":"#约定","children":[]},{"level":2,"title":"命令","slug":"命令","link":"#命令","children":[]},{"level":2,"title":"配置","slug":"配置","link":"#配置","children":[{"level":3,"title":"args 变量","slug":"args-变量","link":"#args-变量","children":[]},{"level":3,"title":"配置文件","slug":"配置文件","link":"#配置文件","children":[]},{"level":3,"title":"优先级","slug":"优先级","link":"#优先级","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/jest.md"}');export{e as data}; diff --git a/assets/jest.html.da327ef6.js b/assets/jest.html.da327ef6.js new file mode 100644 index 00000000..543be7a3 --- /dev/null +++ b/assets/jest.html.da327ef6.js @@ -0,0 +1,307 @@ +import{_ as a,r as l,o as r,c as d,b as n,d as e,a as i,f as t}from"./app.bd9c95b7.js";const o={},c=n("h1",{id:"fesjs-plugin-jest",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#fesjs-plugin-jest","aria-hidden":"true"},"#"),e(" @fesjs/plugin-jest")],-1),u={href:"https://www.jestjs.cn/",target:"_blank",rel:"noopener noreferrer"},v=t(`<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-jest"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="约定" tabindex="-1"><a class="header-anchor" href="#约定" aria-hidden="true">#</a> 约定</h2><ul><li>项目根目录下 <code>tests</code> 和 <code>__tests__</code> 文件夹中的 <code>js</code> 或者 <code>jsx</code> 文件为测试文件。</li><li>需要覆盖测试的文件范围是<code>src/index.{js,jsx,ts,tsx,vue}</code></li></ul><p>例如测试文件 <code>add.js</code>:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>fes-template +├── __tests__ +│ └── add.js +└── src + ├── .fes + └── utils + └── sum.js +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>内容如下:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">'@/utils/sum'</span><span class="token punctuation">;</span> +<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'adds 1 + 2 to equal 3'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">expect</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="命令" tabindex="-1"><a class="header-anchor" href="#命令" aria-hidden="true">#</a> 命令</h2><p>在 <code>fes</code> 上注册 <code>test</code> 命令:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>$ fes <span class="token builtin class-name">test</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2>`,13),m={href:"https://www.jestjs.cn/docs/configuration#reference",target:"_blank",rel:"noopener noreferrer"},b=n("code",null,"-h",-1),h=t(`<h3 id="args-变量" tabindex="-1"><a class="header-anchor" href="#args-变量" aria-hidden="true">#</a> args 变量</h3><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>$ fes <span class="token builtin class-name">test</span> <span class="token parameter variable">-h</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>打印配置帮助信息:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>$ fes test -h +Usage: fes test [options] + +run unit tests with jest + +Options: + --all The opposite of \`onlyChanged\`. If \`onlyChanged\` + is set by default, running jest with \`--all\` + will force Jest to run all tests instead of + running only tests related to changed files. + --automock Automock all files by default. + -b --bail Exit the test suite immediately after \`n\` + number of failing tests. + --browser Respect the "browser" field in package.json + when resolving modules. Some packages export + different versions based on whether they are + operating in node.js or a browser. + --cache Whether to use the transform cache. Disable the + cache using --no-cache. + --cacheDirectory The directory where Jest should store its + cached dependency information. + --changedFilesWithAncestor Runs tests related to the current changes and + the changes made in the last commit. Behaves + similarly to \`--onlyChanged\`. + --changedSince Runs tests related to the changes since the + provided branch. If the current branch has + diverged from the given branch, then only + changes made locally will be tested. Behaves + similarly to \`--onlyChanged\`. + --ci Whether to run Jest in continuous integration + (CI) mode. This option is on by default in most + popular CI environments. It will prevent + snapshots from being written unless explicitly + requested. + --clearCache Clears the configured Jest cache directory and + then exits. Default directory can be found by + calling jest --showConfig + --clearMocks Automatically clear mock calls and instances + between every test. Equivalent to calling + jest.clearAllMocks() between each test. + --collectCoverage Alias for --coverage. + --collectCoverageFrom A glob pattern relative to <rootDir> matching + the files that coverage info needs to be + collected from. + --collectCoverageOnlyFrom Explicit list of paths coverage will be + restricted to. + --color Forces test results output color highlighting + (even if stdout is not a TTY). Set to false if + you would like to have no colors. + --colors Alias for \`--color\`. + -c --config The path to a jest config file specifying how + to find and execute tests. If no rootDir is set + in the config, the directory containing the + config file is assumed to be the rootDir for + the project.This can also be a JSON encoded + value which Jest will use as configuration. + --coverage Indicates that test coverage information should + be collected and reported in the output. + --coverageDirectory The directory where Jest should output its + coverage files. + --coveragePathIgnorePatterns An array of regexp pattern strings that are + matched against all file paths before executing + the test. If the file pathmatches any of the + patterns, coverage information will be skipped. + --coverageProvider Select between Babel and V8 to collect coverage + --coverageReporters A list of reporter names that Jest uses when + writing coverage reports. Any istanbul reporter + can be used. + --coverageThreshold A JSON string with which will be used to + configure minimum threshold enforcement for + coverage results + --debug Print debugging info about your jest config. + --detectLeaks **EXPERIMENTAL**: Detect memory leaks in tests. + After executing a test, it will try to garbage + collect the global object used, and fail if it + was leaked + --detectOpenHandles Print out remaining open handles preventing + Jest from exiting at the end of a test run. + Implies \`runInBand\`. + --env The test environment used for all tests. This + can point to any file or node module. Examples: + \`jsdom\`, \`node\` or \`path/to/my-environment.js\` + --errorOnDeprecated Make calling deprecated APIs throw helpful + error messages. + -e --expand Use this flag to show full diffs instead of a + patch. + --filter Path to a module exporting a filtering + function. This method receives a list of tests + which can be manipulated to exclude tests from + running. Especially useful when used in + conjunction with a testing infrastructure to + filter known broken tests. + --findRelatedTests Find related tests for a list of source files + that were passed in as arguments. Useful for + pre-commit hook integration to run the minimal + amount of tests necessary. + --forceExit Force Jest to exit after all tests have + completed running. This is useful when + resources set up by test code cannot be + adequately cleaned up. + --globalSetup The path to a module that runs before All + Tests. + --globalTeardown The path to a module that runs after All Tests. + --globals A JSON string with map of global variables that + need to be available in all test environments. + --haste A JSON string with map of variables for the + haste module system + --init Generate a basic configuration file + --injectGlobals Should Jest inject global variables or not + --json Prints the test results in JSON. This mode will + send all other test output and user messages to + stderr. + --lastCommit Run all tests affected by file changes in the + last commit made. Behaves similarly to + \`--onlyChanged\`. + --listTests Lists all tests Jest will run given the + arguments and exits. Most useful in a CI system + together with \`--findRelatedTests\` to determine + the tests Jest will run based on specific files + --logHeapUsage Logs the heap usage after every test. Useful to + debug memory leaks. Use together with + \`--runInBand\` and \`--expose-gc\` in node. + --mapCoverage Maps code coverage reports against original source code when transformers supply source maps. + + DEPRECATED + --maxConcurrency Specifies the maximum number of tests that are + allowed to runconcurrently. This only affects + tests using \`test.concurrent\`. + -w --maxWorkers Specifies the maximum number of workers the + worker-pool will spawn for running tests. This + defaults to the number of the cores available + on your machine. (its usually best not to + override this default) + --moduleDirectories An array of directory names to be searched + recursively up from the requiring module's + location. + --moduleFileExtensions An array of file extensions your modules use. + If you require modules without specifying a + file extension, these are the extensions Jest + will look for. + --moduleNameMapper A JSON string with a map from regular + expressions to module names or to arrays of + module names that allow to stub out resources, + like images or styles with a single module + --modulePathIgnorePatterns An array of regexp pattern strings that are + matched against all module paths before those + paths are to be considered "visible" to the + module loader. + --modulePaths An alternative API to setting the NODE_PATH env + variable, modulePaths is an array of absolute + paths to additional locations to search when + resolving modules. + --noStackTrace Disables stack trace in test results output + --notify Activates notifications for test results. + --notifyMode Specifies when notifications will appear for + test results. + -o --onlyChanged Attempts to identify which tests to run based + on which files have changed in the current + repository. Only works if you're running tests + in a git or hg repository at the moment. + -f --onlyFailures Run tests that failed in the previous + execution. + --outputFile Write test results to a file when the --json + option is also specified. + --passWithNoTests Will not fail if no tests are found (for + example while using \`--testPathPattern\`.) + --preset A preset that is used as a base for Jest's + configuration. + --prettierPath The path to the "prettier" module used for + inline snapshots. + --projects A list of projects that use Jest to run all + tests of all projects in a single instance of + Jest. + --reporters A list of custom reporters for the test suite. + --resetMocks Automatically reset mock state between every + test. Equivalent to calling + jest.resetAllMocks() between each test. + --resetModules If enabled, the module registry for every test + file will be reset before running each + individual test. + --resolver A JSON string which allows the use of a custom + resolver. + --restoreMocks Automatically restore mock state and + implementation between every test. Equivalent + to calling jest.restoreAllMocks() between each + test. + --rootDir The root directory that Jest should scan for + tests and modules within. + --roots A list of paths to directories that Jest should + use to search for files in. + -i --runInBand Run all tests serially in the current process + (rather than creating a worker pool of child + processes that run tests). This is sometimes + useful for debugging, but such use cases are + pretty rare. + --runTestsByPath Used when provided patterns are exact file + paths. This avoids converting them into a + regular expression and matching it against + every single file. + --runner Allows to use a custom runner instead of Jest's + default test runner. + --selectProjects Run only the tests of the specified + projects.Jest uses the attribute \`displayName\` + in the configuration to identify each project. + --setupFiles A list of paths to modules that run some code + to configure or set up the testing environment + before each test. + --setupFilesAfterEnv A list of paths to modules that run some code + to configure or set up the testing framework + before each test + --showConfig Print your jest config and then exits. + --silent Prevent tests from printing messages through + the console. + --skipFilter Disables the filter provided by --filter. + Useful for CI jobs, or local enforcement when + fixing tests. + --snapshotSerializers A list of paths to snapshot serializer modules + Jest should use for snapshot testing. + --testEnvironment Alias for --env + --testEnvironmentOptions Test environment options that will be passed to + the testEnvironment. The relevant options + depend on the environment. + --testFailureExitCode Exit code of \`jest\` command if the test run + failed + --testLocationInResults Add \`location\` information to the test results + --testMatch The glob patterns Jest uses to detect test + files. + -t --testNamePattern Run only tests with a name that matches the + regex pattern. + --testPathIgnorePatterns An array of regexp pattern strings that are + matched against all test paths before executing + the test. If the test path matches any of the + patterns, it will be skipped. + --testPathPattern A regexp pattern string that is matched against + all tests paths before executing the test. + --testRegex A string or array of string regexp patterns + that Jest uses to detect test files. + --testResultsProcessor Allows the use of a custom results processor. + This processor must be a node module that + exports a function expecting as the first + argument the result object. + --testRunner Allows to specify a custom test runner. The + default is \`jasmine2\`. A path to a custom test + runner can be provided: + \`<rootDir>/path/to/testRunner.js\`. + --testSequencer Allows to specify a custom test sequencer. The + default is \`@jest/test-sequencer\`. A path to a + custom test sequencer can be provided: + \`<rootDir>/path/to/testSequencer.js\` + --testTimeout This option sets the default timeouts of test + cases. + --testURL This option sets the URL for the jsdom + environment. + --timers Setting this value to fake allows the use of + fake timers for functions such as setTimeout. + --transform A JSON string which maps from regular + expressions to paths to transformers. + --transformIgnorePatterns An array of regexp pattern strings that are + matched against all source file paths before + transformation. + --unmockedModulePathPatterns An array of regexp pattern strings that are + matched against all modules before the module + loader will automatically return a mock for + them. + -u --updateSnapshot Use this flag to re-record snapshots. Can be + used together with a test suite pattern or with + \`--testNamePattern\` to re-record snapshot for + test matching the pattern + --useStderr Divert all output to stderr. + --verbose Display individual test results with the test + suite hierarchy. + --watch Watch files for changes and rerun tests related + to changed files. If you want to re-run all + tests when a file has changed, use the + \`--watchAll\` option. + --watchAll Watch files for changes and rerun all tests. If + you want to re-run only the tests related to + the changed files, use the \`--watch\` option. + --watchPathIgnorePatterns An array of regexp pattern strings that are + matched against all paths before trigger test + re-run in watch mode. If the test path matches + any of the patterns, it will be skipped. + --watchman Whether to use watchman for file crawling. + Disable using --no-watchman. + -h, --help display help for command + +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如覆盖测试:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>fes test --coverage +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="配置文件" tabindex="-1"><a class="header-anchor" href="#配置文件" aria-hidden="true">#</a> 配置文件</h3><p>除了插件内置的默认配置之外,插件遵循 <code>Jest</code>的配置文件规范,约定项目根目录下的 <code>jest.config.js</code> 为用户配置文件,约定 <code>packages.json</code> 的 <code>jest</code> 属性内容也是配置。</p><h3 id="优先级" tabindex="-1"><a class="header-anchor" href="#优先级" aria-hidden="true">#</a> 优先级</h3><p><code>args</code> 配置 > <code>package.json</code>中的 <code>jest</code> > <code>jest.config.js</code> > 默认配置</p>`,10);function p(f,g){const s=l("ExternalLinkIcon");return r(),d("div",null,[c,n("p",null,[e("集成 "),n("a",u,[e("Jest"),i(s)]),e(" 测试框架,目前只支持单元测试和覆盖测试。")]),v,n("p",null,[e("插件实现 Jest 的全部配置,具体请查看 "),n("a",m,[e("文档-configuration"),i(s)]),e("。 也可以使用 "),b,e(" 打印配置帮助信息:")]),h])}const y=a(o,[["render",p],["__file","jest.html.vue"]]);export{y as default}; diff --git a/assets/js/205.d4ef4058.js b/assets/js/205.d4ef4058.js deleted file mode 100644 index 6b499c52..00000000 --- a/assets/js/205.d4ef4058.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[205],{5205:(e,n,t)=>{t.r(n),t.d(n,{register:()=>i,unregister:()=>u});var r,o=function(){return Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/))};function i(e,n){void 0===n&&(n={});var t=n.registrationOptions;void 0===t&&(t={}),delete n.registrationOptions;var i=function(e){for(var t=[],r=arguments.length-1;r-- >0;)t[r]=arguments[r+1];n&&n[e]&&n[e].apply(n,t)};"serviceWorker"in navigator&&r.then((function(){o()?(function(e,n,t){fetch(e).then((function(r){404===r.status?(n("error",new Error("Service worker not found at "+e)),u()):-1===r.headers.get("content-type").indexOf("javascript")?(n("error",new Error("Expected "+e+" to have javascript content-type, but received "+r.headers.get("content-type"))),u()):c(e,n,t)})).catch((function(e){return a(n,e)}))}(e,i,t),navigator.serviceWorker.ready.then((function(e){i("ready",e)})).catch((function(e){return a(i,e)}))):(c(e,i,t),navigator.serviceWorker.ready.then((function(e){i("ready",e)})).catch((function(e){return a(i,e)})))}))}function a(e,n){navigator.onLine||e("offline"),e("error",n)}function c(e,n,t){navigator.serviceWorker.register(e,t).then((function(e){n("registered",e),e.waiting?n("updated",e):e.onupdatefound=function(){n("updatefound",e);var t=e.installing;t.onstatechange=function(){"installed"===t.state&&(navigator.serviceWorker.controller?n("updated",e):n("cached",e))}}})).catch((function(e){return a(n,e)}))}function u(){"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()})).catch((function(e){return a(emit,e)}))}"undefined"!=typeof window&&(r="undefined"!=typeof Promise?new Promise((function(e){return window.addEventListener("load",e)})):{then:function(e){return window.addEventListener("load",e)}})}}]); \ No newline at end of file diff --git a/assets/js/293.f5289c13.js b/assets/js/293.f5289c13.js deleted file mode 100644 index 125a6801..00000000 --- a/assets/js/293.f5289c13.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[293],{3293:(e,l,t)=>{t.r(l),t.d(l,{default:()=>ye});var a=t(6252),n=t(3577),i=t(2262),u=t(9963),r=t(7621),o=t(2201),s=t(7788),c=t(5885);const v=["href","rel","target","aria-label"],d=(0,a.aZ)({inheritAttrs:!1}),p=(0,a.aZ)({...d,__name:"NavLink",props:{item:{type:Object,required:!0}},setup(e){const l=e,t=(0,o.yj)(),u=(0,r.WF)(),{item:c}=(0,i.BK)(l),d=(0,a.Fl)((()=>(0,s.ak)(c.value.link))),p=(0,a.Fl)((()=>(0,s.B2)(c.value.link)||(0,s.R5)(c.value.link))),h=(0,a.Fl)((()=>{if(!p.value)return c.value.target?c.value.target:d.value?"_blank":void 0})),g=(0,a.Fl)((()=>"_blank"===h.value)),m=(0,a.Fl)((()=>!d.value&&!p.value&&!g.value)),k=(0,a.Fl)((()=>{if(!p.value)return c.value.rel?c.value.rel:g.value?"noopener noreferrer":void 0})),b=(0,a.Fl)((()=>c.value.ariaLabel||c.value.text)),w=(0,a.Fl)((()=>{const e=Object.keys(u.value.locales);return e.length?!e.some((e=>e===c.value.link)):"/"!==c.value.link})),f=(0,a.Fl)((()=>!!w.value&&t.path.startsWith(c.value.link))),U=(0,a.Fl)((()=>!!m.value&&(c.value.activeMatch?new RegExp(c.value.activeMatch).test(t.path):f.value)));return(e,l)=>{const t=(0,a.up)("RouterLink"),u=(0,a.up)("OutboundLink");return(0,i.SU)(m)?((0,a.wg)(),(0,a.j4)(t,(0,a.dG)({key:0,class:["nav-link",{"router-link-active":(0,i.SU)(U)}],to:(0,i.SU)(c).link,"aria-label":(0,i.SU)(b)},e.$attrs),{default:(0,a.w5)((()=>[(0,a.WI)(e.$slots,"before"),(0,a.Uk)(" "+(0,n.zw)((0,i.SU)(c).text)+" ",1),(0,a.WI)(e.$slots,"after")])),_:3},16,["class","to","aria-label"])):((0,a.wg)(),(0,a.iD)("a",(0,a.dG)({key:1,class:"nav-link external",href:(0,i.SU)(c).link,rel:(0,i.SU)(k),target:(0,i.SU)(h),"aria-label":(0,i.SU)(b)},e.$attrs),[(0,a.WI)(e.$slots,"before"),(0,a.Uk)(" "+(0,n.zw)((0,i.SU)(c).text)+" ",1),(0,i.SU)(g)?((0,a.wg)(),(0,a.j4)(u,{key:0})):(0,a.kq)("",!0),(0,a.WI)(e.$slots,"after")],16,v))}}}),h=["aria-labelledby"],g={class:"hero"},m=["src","alt"],k={key:0,id:"main-title"},b={key:1,class:"description"},w={key:2,class:"actions"},f={key:0,class:"features"},U={class:"theme-default-content custom"},S=["innerHTML"],y=["textContent"],_=(0,a.aZ)({__name:"Home",setup(e){const l=(0,r.I2)(),t=(0,r.I5)(),u=(0,c.vs)(),o=(0,a.Fl)((()=>u.value&&void 0!==l.value.heroImageDark?l.value.heroImageDark:l.value.heroImage)),v=(0,a.Fl)((()=>null===l.value.heroText?null:l.value.heroText||t.value.title||"Hello")),d=(0,a.Fl)((()=>l.value.heroAlt||v.value||"hero")),_=(0,a.Fl)((()=>null===l.value.tagline?null:l.value.tagline||t.value.description||"Welcome to your VuePress site")),D=(0,a.Fl)((()=>(0,s.kJ)(l.value.actions)?l.value.actions.map((({text:e,link:l,type:t="primary"})=>({text:e,link:l,type:t}))):[])),F=(0,a.Fl)((()=>(0,s.kJ)(l.value.features)?l.value.features:[])),W=(0,a.Fl)((()=>l.value.footer)),x=(0,a.Fl)((()=>l.value.footerHtml));return(e,l)=>{const t=(0,a.up)("ClientOnly"),u=(0,a.up)("Content");return(0,a.wg)(),(0,a.iD)("main",{class:"home","aria-labelledby":(0,i.SU)(v)?"main-title":void 0},[(0,a._)("header",g,[(0,a.Wm)(t,null,{default:(0,a.w5)((()=>[(0,i.SU)(o)?((0,a.wg)(),(0,a.iD)("img",{key:0,src:(0,i.SU)(r.pJ)((0,i.SU)(o)),alt:(0,i.SU)(d)},null,8,m)):(0,a.kq)("",!0)])),_:1}),(0,i.SU)(v)?((0,a.wg)(),(0,a.iD)("h1",k,(0,n.zw)((0,i.SU)(v)),1)):(0,a.kq)("",!0),(0,i.SU)(_)?((0,a.wg)(),(0,a.iD)("p",b,(0,n.zw)((0,i.SU)(_)),1)):(0,a.kq)("",!0),(0,i.SU)(D).length?((0,a.wg)(),(0,a.iD)("p",w,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)((0,i.SU)(D),(e=>((0,a.wg)(),(0,a.j4)(p,{key:e.text,class:(0,n.C_)(["action-button",[e.type]]),item:e},null,8,["class","item"])))),128))])):(0,a.kq)("",!0)]),(0,i.SU)(F).length?((0,a.wg)(),(0,a.iD)("div",f,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)((0,i.SU)(F),(e=>((0,a.wg)(),(0,a.iD)("div",{key:e.title,class:"feature"},[(0,a._)("h2",null,(0,n.zw)(e.title),1),(0,a._)("p",null,(0,n.zw)(e.details),1)])))),128))])):(0,a.kq)("",!0),(0,a._)("div",U,[(0,a.Wm)(u)]),(0,i.SU)(W)?((0,a.wg)(),(0,a.iD)(a.HY,{key:1},[(0,i.SU)(x)?((0,a.wg)(),(0,a.iD)("div",{key:0,class:"footer",innerHTML:(0,i.SU)(W)},null,8,S)):((0,a.wg)(),(0,a.iD)("div",{key:1,class:"footer",textContent:(0,n.zw)((0,i.SU)(W))},null,8,y))],64)):(0,a.kq)("",!0)],8,h)}}}),D=e=>!(0,s.ak)(e)||/github\.com/.test(e)?"GitHub":/bitbucket\.org/.test(e)?"Bitbucket":/gitlab\.com/.test(e)?"GitLab":/gitee\.com/.test(e)?"Gitee":null,F={GitHub:":repo/edit/:branch/:path",GitLab:":repo/-/edit/:branch/:path",Gitee:":repo/edit/:branch/:path",Bitbucket:":repo/src/:branch/:path?mode=edit&spa=0&at=:branch&fileviewer=file-view-default"},W=(0,a.aZ)({__name:"DropdownTransition",setup(e){const l=e=>{e.style.height=e.scrollHeight+"px"},t=e=>{e.style.height=""};return(e,n)=>((0,a.wg)(),(0,a.j4)(u.uT,{name:"dropdown",onEnter:l,onAfterEnter:t,onBeforeLeave:l},{default:(0,a.w5)((()=>[(0,a.WI)(e.$slots,"default")])),_:3}))}}),x=["aria-label"],I={class:"title"},L=(0,a._)("span",{class:"arrow down"},null,-1),C=["aria-label"],$={class:"title"},H={class:"nav-dropdown"},j={class:"dropdown-subtitle"},z={key:1},q={class:"dropdown-subitem-wrapper"},T=(0,a.aZ)({__name:"DropdownLink",props:{item:{type:Object,required:!0}},setup(e){const l=e,{item:t}=(0,i.BK)(l),r=(0,a.Fl)((()=>t.value.ariaLabel||t.value.text)),s=(0,i.iH)(!1),c=(0,o.yj)();(0,a.YP)((()=>c.path),(()=>{s.value=!1}));const v=e=>{const l=0===e.detail;s.value=!!l&&!s.value},d=(e,l)=>l[l.length-1]===e;return(e,l)=>((0,a.wg)(),(0,a.iD)("div",{class:(0,n.C_)(["dropdown-wrapper",{open:s.value}])},[(0,a._)("button",{class:"dropdown-title",type:"button","aria-label":(0,i.SU)(r),onClick:v},[(0,a._)("span",I,(0,n.zw)((0,i.SU)(t).text),1),L],8,x),(0,a._)("button",{class:"mobile-dropdown-title",type:"button","aria-label":(0,i.SU)(r),onClick:l[0]||(l[0]=e=>s.value=!s.value)},[(0,a._)("span",$,(0,n.zw)((0,i.SU)(t).text),1),(0,a._)("span",{class:(0,n.C_)(["arrow",s.value?"down":"right"])},null,2)],8,C),(0,a.Wm)(W,null,{default:(0,a.w5)((()=>[(0,a.wy)((0,a._)("ul",H,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)((0,i.SU)(t).children,((e,l)=>((0,a.wg)(),(0,a.iD)("li",{key:e.link||l,class:"dropdown-item"},[e.children?((0,a.wg)(),(0,a.iD)(a.HY,{key:0},[(0,a._)("h4",j,[e.link?((0,a.wg)(),(0,a.j4)(p,{key:0,item:e,onFocusout:l=>d(e,(0,i.SU)(t).children)&&0===e.children.length&&(s.value=!1)},null,8,["item","onFocusout"])):((0,a.wg)(),(0,a.iD)("span",z,(0,n.zw)(e.text),1))]),(0,a._)("ul",q,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)(e.children,(l=>((0,a.wg)(),(0,a.iD)("li",{key:l.link,class:"dropdown-subitem"},[(0,a.Wm)(p,{item:l,onFocusout:a=>d(l,e.children)&&d(e,(0,i.SU)(t).children)&&(s.value=!1)},null,8,["item","onFocusout"])])))),128))])],64)):((0,a.wg)(),(0,a.j4)(p,{key:1,item:e,onFocusout:l=>d(e,(0,i.SU)(t).children)&&(s.value=!1)},null,8,["item","onFocusout"]))])))),128))],512),[[u.F8,s.value]])])),_:1})],2))}}),M={key:0,class:"navbar-links"},B=(0,a.aZ)({__name:"NavbarLinks",setup(e){const l=e=>(0,s.HD)(e)?(0,c.sC)(e):e.children?{...e,children:e.children.map(l)}:e,t=(()=>{const e=(0,c.X6)();return(0,a.Fl)((()=>(e.value.navbar||[]).map(l)))})(),n=(()=>{const e=(0,o.tv)(),l=(0,r.I)(),t=(0,r.I5)(),n=(0,c.X6)();return(0,a.Fl)((()=>{var a,i;const u=Object.keys(t.value.locales);if(u.length<2)return[];const r=e.currentRoute.value.path,o=e.currentRoute.value.fullPath;return[{text:null!=(a=n.value.selectLanguageText)?a:"unkown language",ariaLabel:null!=(i=n.value.selectLanguageAriaLabel)?i:"unkown language",children:u.map((a=>{var i,u,s,c,v,d;const p=null!=(u=null==(i=t.value.locales)?void 0:i[a])?u:{},h=null!=(c=null==(s=n.value.locales)?void 0:s[a])?c:{},g=`${p.lang}`,m=null!=(v=h.selectLanguageName)?v:g;let k;if(g===t.value.lang)k=o;else{const t=r.replace(l.value,a);k=e.getRoutes().some((e=>e.path===t))?t:null!=(d=h.home)?d:a}return{text:m,link:k}}))}]}))})(),u=(()=>{const e=(0,c.X6)(),l=(0,a.Fl)((()=>e.value.repo)),t=(0,a.Fl)((()=>l.value?D(l.value):null)),n=(0,a.Fl)((()=>l.value&&!(0,s.ak)(l.value)?`https://github.com/${l.value}`:l.value)),i=(0,a.Fl)((()=>n.value?e.value.repoLabel?e.value.repoLabel:null===t.value?"Source":t.value:null));return(0,a.Fl)((()=>n.value&&i.value?[{text:i.value,link:n.value}]:[]))})(),v=(0,a.Fl)((()=>[...t.value,...n.value,...u.value]));return(e,l)=>(0,i.SU)(v).length?((0,a.wg)(),(0,a.iD)("nav",M,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)((0,i.SU)(v),(e=>((0,a.wg)(),(0,a.iD)("div",{key:e.text,class:"navbar-links-item"},[e.children?((0,a.wg)(),(0,a.j4)(T,{key:0,item:e},null,8,["item"])):((0,a.wg)(),(0,a.j4)(p,{key:1,item:e},null,8,["item"]))])))),128))])):(0,a.kq)("",!0)}}),P=["title"],R={class:"icon",focusable:"false",viewBox:"0 0 32 32"},Y=[(0,a.uE)('<path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path>',9)],Z={class:"icon",focusable:"false",viewBox:"0 0 32 32"},X=[(0,a._)("path",{d:"M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z",fill:"currentColor"},null,-1)],N=(0,a.aZ)({__name:"ToggleDarkModeButton",setup(e){const l=(0,c.X6)(),t=(0,c.vs)(),n=()=>{t.value=!t.value};return(e,r)=>((0,a.wg)(),(0,a.iD)("button",{class:"toggle-dark-button",title:(0,i.SU)(l).toggleDarkMode,onClick:n},[(0,a.wy)(((0,a.wg)(),(0,a.iD)("svg",R,Y,512)),[[u.F8,!(0,i.SU)(t)]]),(0,a.wy)(((0,a.wg)(),(0,a.iD)("svg",Z,X,512)),[[u.F8,(0,i.SU)(t)]])],8,P))}}),E=["title"],O=[(0,a._)("div",{class:"icon","aria-hidden":"true"},[(0,a._)("span"),(0,a._)("span"),(0,a._)("span")],-1)],K=(0,a.aZ)({__name:"ToggleSidebarButton",emits:["toggle"],setup(e){const l=(0,c.X6)();return(e,t)=>((0,a.wg)(),(0,a.iD)("div",{class:"toggle-sidebar-button",title:(0,i.SU)(l).toggleSidebar,"aria-expanded":"false",role:"button",tabindex:"0",onClick:t[0]||(t[0]=l=>e.$emit("toggle"))},O,8,E))}}),V=["src","alt"],G=(0,a.aZ)({__name:"Navbar",emits:["toggle-sidebar"],setup(e){const l=(0,r.I)(),t=(0,r.I5)(),u=(0,c.X6)(),o=(0,c.vs)(),s=(0,i.iH)(null),v=(0,i.iH)(null),d=(0,a.Fl)((()=>u.value.home||l.value)),p=(0,a.Fl)((()=>o.value&&void 0!==u.value.logoDark?u.value.logoDark:u.value.logo)),h=(0,a.Fl)((()=>t.value.title)),g=(0,i.iH)(0),m=(0,a.Fl)((()=>g.value?{maxWidth:g.value+"px"}:{})),k=(0,a.Fl)((()=>u.value.darkMode));function b(e,l){var t,a,n;const i=null==(n=null==(a=null==(t=null==e?void 0:e.ownerDocument)?void 0:t.defaultView)?void 0:a.getComputedStyle(e,null))?void 0:n[l],u=Number.parseInt(i,10);return Number.isNaN(u)?0:u}return(0,a.bv)((()=>{const e=b(s.value,"paddingLeft")+b(s.value,"paddingRight"),l=()=>{var l;window.innerWidth<=719?g.value=0:g.value=s.value.offsetWidth-e-((null==(l=v.value)?void 0:l.offsetWidth)||0)};l(),window.addEventListener("resize",l,!1),window.addEventListener("orientationchange",l,!1)})),(e,l)=>{const t=(0,a.up)("ClientOnly"),u=(0,a.up)("RouterLink"),o=(0,a.up)("NavbarSearch");return(0,a.wg)(),(0,a.iD)("header",{ref_key:"navbar",ref:s,class:"navbar"},[(0,a.Wm)(K,{onToggle:l[0]||(l[0]=l=>e.$emit("toggle-sidebar"))}),(0,a._)("span",{ref_key:"siteBrand",ref:v},[(0,a.Wm)(u,{to:(0,i.SU)(d)},{default:(0,a.w5)((()=>[(0,a.Wm)(t,null,{default:(0,a.w5)((()=>[(0,i.SU)(p)?((0,a.wg)(),(0,a.iD)("img",{key:0,class:"logo",src:(0,i.SU)(r.pJ)((0,i.SU)(p)),alt:(0,i.SU)(h)},null,8,V)):(0,a.kq)("",!0)])),_:1}),(0,i.SU)(h)?((0,a.wg)(),(0,a.iD)("span",{key:0,class:(0,n.C_)(["site-name",{"can-hide":(0,i.SU)(p)}])},(0,n.zw)((0,i.SU)(h)),3)):(0,a.kq)("",!0)])),_:1},8,["to"])],512),(0,a._)("div",{class:"navbar-links-wrapper",style:(0,n.j5)((0,i.SU)(m))},[(0,a.WI)(e.$slots,"before"),(0,a.Wm)(B,{class:"can-hide"}),(0,a.WI)(e.$slots,"after"),(0,i.SU)(k)?((0,a.wg)(),(0,a.j4)(N,{key:0})):(0,a.kq)("",!0),(0,a.Wm)(o)],4)],512)}}}),A={class:"page-meta"},J={key:0,class:"meta-item edit-link"},Q={key:1,class:"meta-item last-updated"},ee={class:"meta-item-label"},le={class:"meta-item-info"},te={key:2,class:"meta-item contributors"},ae={class:"meta-item-label"},ne={class:"meta-item-info"},ie=["title"],ue=(0,a.aZ)({__name:"PageMeta",setup(e){const l=(0,c.X6)(),t=(()=>{const e=(0,c.X6)(),l=(0,r.Vi)(),t=(0,r.I2)();return(0,a.Fl)((()=>{var a,n,i;if(null!=(n=null!=(a=t.value.editLink)?a:e.value.editLink)&&!n)return null;const{repo:u,docsRepo:r=u,docsBranch:o="main",docsDir:c="",editLinkText:v}=e.value;if(!r)return null;const d=(({docsRepo:e,docsBranch:l,docsDir:t,filePathRelative:a,editLinkPattern:n})=>{if(!a)return null;const i=(({docsRepo:e,editLinkPattern:l})=>{if(l)return l;const t=D(e);return null!==t?F[t]:null})({docsRepo:e,editLinkPattern:n});return i?i.replace(/:repo/,(0,s.ak)(e)?e:`https://github.com/${e}`).replace(/:branch/,l).replace(/:path/,(0,s.FY)(`${(0,s.U1)(t)}/${a}`)):null})({docsRepo:r,docsBranch:o,docsDir:c,filePathRelative:l.value.filePathRelative,editLinkPattern:null!=(i=t.value.editLinkPattern)?i:e.value.editLinkPattern});return d?{text:null!=v?v:"Edit this page",link:d}:null}))})(),u=(()=>{(0,r.I5)();const e=(0,c.X6)(),l=(0,r.Vi)(),t=(0,r.I2)();return(0,a.Fl)((()=>{var a,n,i,u;return(null==(n=null!=(a=t.value.lastUpdated)?a:e.value.lastUpdated)||n)&&(null==(i=l.value.git)?void 0:i.updatedTime)?new Date(null==(u=l.value.git)?void 0:u.updatedTime).toLocaleString():null}))})(),o=(()=>{const e=(0,c.X6)(),l=(0,r.Vi)(),t=(0,r.I2)();return(0,a.Fl)((()=>{var a,n,i,u;return null!=(n=null!=(a=t.value.contributors)?a:e.value.contributors)&&!n||null==(u=null==(i=l.value.git)?void 0:i.contributors)?null:u}))})();return(e,r)=>{const s=(0,a.up)("ClientOnly");return(0,a.wg)(),(0,a.iD)("footer",A,[(0,i.SU)(t)?((0,a.wg)(),(0,a.iD)("div",J,[(0,a.Wm)(p,{class:"meta-item-label",item:(0,i.SU)(t)},null,8,["item"])])):(0,a.kq)("",!0),(0,i.SU)(u)?((0,a.wg)(),(0,a.iD)("div",Q,[(0,a._)("span",ee,(0,n.zw)((0,i.SU)(l).lastUpdatedText)+": ",1),(0,a.Wm)(s,null,{default:(0,a.w5)((()=>[(0,a._)("span",le,(0,n.zw)((0,i.SU)(u)),1)])),_:1})])):(0,a.kq)("",!0),(0,i.SU)(o)&&(0,i.SU)(o).length?((0,a.wg)(),(0,a.iD)("div",te,[(0,a._)("span",ae,(0,n.zw)((0,i.SU)(l).contributorsText)+": ",1),(0,a._)("span",ne,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)((0,i.SU)(o),((e,l)=>((0,a.wg)(),(0,a.iD)(a.HY,{key:l},[(0,a._)("span",{class:"contributor",title:`email: ${e.email}`},(0,n.zw)(e.name),9,ie),l!==(0,i.SU)(o).length-1?((0,a.wg)(),(0,a.iD)(a.HY,{key:0},[(0,a.Uk)(", ")],64)):(0,a.kq)("",!0)],64)))),128))])])):(0,a.kq)("",!0)])}}}),re={key:0,class:"page-nav"},oe={class:"inner"},se={key:0,class:"prev"},ce={key:1,class:"next"},ve=(0,a.aZ)({__name:"PageNav",setup(e){const l=e=>!1===e?null:(0,s.HD)(e)?(0,c.sC)(e):!!(0,s.PO)(e)&&e,t=(e,l,a)=>{const n=e.findIndex((e=>e.link===l));if(-1!==n){const l=e[n+a];return(null==l?void 0:l.link)?l:null}for(const n of e)if(n.children){const e=t(n.children,l,a);if(e)return e}return null},n=(0,r.I2)(),u=(0,c.VU)(),v=(0,o.yj)(),d=(0,a.Fl)((()=>{const e=l(n.value.prev);return!1!==e?e:t(u.value,v.path,-1)})),h=(0,a.Fl)((()=>{const e=l(n.value.next);return!1!==e?e:t(u.value,v.path,1)}));return(e,l)=>(0,i.SU)(d)||(0,i.SU)(h)?((0,a.wg)(),(0,a.iD)("nav",re,[(0,a._)("p",oe,[(0,i.SU)(d)?((0,a.wg)(),(0,a.iD)("span",se,[(0,a.Wm)(p,{item:(0,i.SU)(d)},null,8,["item"])])):(0,a.kq)("",!0),(0,i.SU)(h)?((0,a.wg)(),(0,a.iD)("span",ce,[(0,a.Wm)(p,{item:(0,i.SU)(h)},null,8,["item"])])):(0,a.kq)("",!0)])])):(0,a.kq)("",!0)}}),de={class:"page"},pe={class:"theme-default-content"},he=(0,a.aZ)({__name:"Page",setup:e=>(e,l)=>{const t=(0,a.up)("Content");return(0,a.wg)(),(0,a.iD)("main",de,[(0,a.WI)(e.$slots,"top"),(0,a._)("div",pe,[(0,a.Wm)(t)]),(0,a.Wm)(ue),(0,a.Wm)(ve),(0,a.WI)(e.$slots,"bottom")])}}),ge=e=>decodeURI(e).replace(/#.*$/,"").replace(/(index)?\.(md|html)$/,""),me=(e,l)=>!!((e,l)=>void 0!==l&&(e.hash===l||ge(e.path)===ge(l)))(e,l.link)||!!l.children&&l.children.some((l=>me(e,l))),ke=(e,l)=>e.link?(0,a.h)(p,{...l,item:e}):(0,a.h)("p",l,e.text),be=(e,l)=>{var t;return(null===(t=e.children)||void 0===t?void 0:t.length)?(0,a.h)("ul",{class:{"sidebar-sub-items":l>0}},e.children.map((e=>(0,a.h)("li",(0,a.h)(we,{item:e,depth:l+1}))))):null},we=({item:e,depth:l=0})=>{const t=(0,o.yj)(),a=me(t,e);return[ke(e,{class:{"sidebar-heading":0===l,"sidebar-item":!0,active:a}}),be(e,l)]};we.displayName="SidebarChild",we.props={item:{type:Object,required:!0},depth:{type:Number,required:!1}};const fe={class:"sidebar"},Ue={class:"sidebar-links"},Se=(0,a.aZ)({__name:"Sidebar",setup(e){const l=(0,c.VU)();return(e,t)=>((0,a.wg)(),(0,a.iD)("aside",fe,[(0,a.Wm)(B),(0,a.WI)(e.$slots,"top"),(0,a._)("ul",Ue,[((0,a.wg)(!0),(0,a.iD)(a.HY,null,(0,a.Ko)((0,i.SU)(l),(e=>((0,a.wg)(),(0,a.j4)((0,i.SU)(we),{key:e.link||e.text,item:e},null,8,["item"])))),128))]),(0,a.WI)(e.$slots,"bottom")]))}}),ye=(0,a.aZ)({__name:"Layout",setup(e){const l=(0,r.Vi)(),t=(0,r.I2)(),s=(0,c.X6)(),v=(0,a.Fl)((()=>!1!==t.value.navbar&&!1!==s.value.navbar)),d=(0,c.VU)(),p=(0,i.iH)(!1),h=e=>{p.value="boolean"==typeof e?e:!p.value},g={x:0,y:0},m=e=>{g.x=e.changedTouches[0].clientX,g.y=e.changedTouches[0].clientY},k=e=>{const l=e.changedTouches[0].clientX-g.x,t=e.changedTouches[0].clientY-g.y;Math.abs(l)>Math.abs(t)&&Math.abs(l)>40&&(l>0&&g.x<=80?h(!0):h(!1))},b=(0,a.Fl)((()=>[{"no-navbar":!v.value,"no-sidebar":!d.value.length,"sidebar-open":p.value},t.value.pageClass]));let w;(0,a.bv)((()=>{const e=(0,o.tv)();w=e.afterEach((()=>{h(!1)}))})),(0,a.Ah)((()=>{w()}));const f=(0,c.P$)(),U=f.resolve,S=f.pending;return(e,r)=>((0,a.wg)(),(0,a.iD)("div",{class:(0,n.C_)(["theme-container",(0,i.SU)(b)]),onTouchstart:m,onTouchend:k},[(0,a.WI)(e.$slots,"navbar",{},(()=>[(0,i.SU)(v)?((0,a.wg)(),(0,a.j4)(G,{key:0,onToggleSidebar:h},{before:(0,a.w5)((()=>[(0,a.WI)(e.$slots,"navbar-before")])),after:(0,a.w5)((()=>[(0,a.WI)(e.$slots,"navbar-after")])),_:3})):(0,a.kq)("",!0)])),(0,a._)("div",{class:"sidebar-mask",onClick:r[0]||(r[0]=e=>h(!1))}),(0,a.WI)(e.$slots,"sidebar",{},(()=>[(0,a.Wm)(Se,null,{top:(0,a.w5)((()=>[(0,a.WI)(e.$slots,"sidebar-top")])),bottom:(0,a.w5)((()=>[(0,a.WI)(e.$slots,"sidebar-bottom")])),_:3})])),(0,a.WI)(e.$slots,"page",{},(()=>[(0,i.SU)(t).home?((0,a.wg)(),(0,a.j4)(_,{key:0})):((0,a.wg)(),(0,a.j4)(u.uT,{key:1,name:"fade-slide-y",mode:"out-in",onBeforeEnter:(0,i.SU)(U),onBeforeLeave:(0,i.SU)(S)},{default:(0,a.w5)((()=>[((0,a.wg)(),(0,a.j4)(he,{key:(0,i.SU)(l).path},{top:(0,a.w5)((()=>[(0,a.WI)(e.$slots,"page-top")])),bottom:(0,a.w5)((()=>[(0,a.WI)(e.$slots,"page-bottom")])),_:3}))])),_:3},8,["onBeforeEnter","onBeforeLeave"]))]))],34))}})}}]); \ No newline at end of file diff --git a/assets/js/399.ae8be0a6.js b/assets/js/399.ae8be0a6.js deleted file mode 100644 index 8fe473ac..00000000 --- a/assets/js/399.ae8be0a6.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 399.ae8be0a6.js.LICENSE.txt */ -(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[399],{2262:(e,t,n)=>{"use strict";n.d(t,{BK:()=>Me,Bj:()=>i,EB:()=>c,Fl:()=>qe,IU:()=>Se,Jd:()=>w,OT:()=>ye,PG:()=>ge,SU:()=>Te,Um:()=>ve,WL:()=>Le,X$:()=>P,X3:()=>we,XI:()=>Ae,Xl:()=>Ee,dq:()=>Ie,iH:()=>xe,j:()=>E,lk:()=>S,nZ:()=>l,qj:()=>me,qq:()=>_,yT:()=>Oe});var r=n(3577);let o;class i{constructor(e=!1){this.detached=e,this._active=!0,this.effects=[],this.cleanups=[],this.parent=o,!e&&o&&(this.index=(o.scopes||(o.scopes=[])).push(this)-1)}get active(){return this._active}run(e){if(this._active){const t=o;try{return o=this,e()}finally{o=t}}}on(){o=this}off(){o=this.parent}stop(e){if(this._active){let t,n;for(t=0,n=this.effects.length;t<n;t++)this.effects[t].stop();for(t=0,n=this.cleanups.length;t<n;t++)this.cleanups[t]();if(this.scopes)for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].stop(!0);if(!this.detached&&this.parent&&!e){const e=this.parent.scopes.pop();e&&e!==this&&(this.parent.scopes[this.index]=e,e.index=this.index)}this.parent=void 0,this._active=!1}}}function l(){return o}function c(e){o&&o.cleanups.push(e)}const a=e=>{const t=new Set(e);return t.w=0,t.n=0,t},s=e=>(e.w&d)>0,u=e=>(e.n&d)>0,f=new WeakMap;let p=0,d=1;const h=30;let m;const v=Symbol(""),y=Symbol("");class _{constructor(e,t=null,n){this.fn=e,this.scheduler=t,this.active=!0,this.deps=[],this.parent=void 0,function(e,t=o){t&&t.active&&t.effects.push(e)}(this,n)}run(){if(!this.active)return this.fn();let e=m,t=b;for(;e;){if(e===this)return;e=e.parent}try{return this.parent=m,m=this,b=!0,d=1<<++p,p<=h?(({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=d})(this):g(this),this.fn()}finally{p<=h&&(e=>{const{deps:t}=e;if(t.length){let n=0;for(let r=0;r<t.length;r++){const o=t[r];s(o)&&!u(o)?o.delete(e):t[n++]=o,o.w&=~d,o.n&=~d}t.length=n}})(this),d=1<<--p,m=this.parent,b=t,this.parent=void 0,this.deferStop&&this.stop()}}stop(){m===this?this.deferStop=!0:this.active&&(g(this),this.onStop&&this.onStop(),this.active=!1)}}function g(e){const{deps:t}=e;if(t.length){for(let n=0;n<t.length;n++)t[n].delete(e);t.length=0}}let b=!0;const O=[];function w(){O.push(b),b=!1}function S(){const e=O.pop();b=void 0===e||e}function E(e,t,n){if(b&&m){let t=f.get(e);t||f.set(e,t=new Map);let r=t.get(n);r||t.set(n,r=a()),j(r)}}function j(e,t){let n=!1;p<=h?u(e)||(e.n|=d,n=!s(e)):n=!e.has(m),n&&(e.add(m),m.deps.push(e))}function P(e,t,n,o,i,l){const c=f.get(e);if(!c)return;let s=[];if("clear"===t)s=[...c.values()];else if("length"===n&&(0,r.kJ)(e)){const e=Number(o);c.forEach(((t,n)=>{("length"===n||n>=e)&&s.push(t)}))}else switch(void 0!==n&&s.push(c.get(n)),t){case"add":(0,r.kJ)(e)?(0,r.S0)(n)&&s.push(c.get("length")):(s.push(c.get(v)),(0,r._N)(e)&&s.push(c.get(y)));break;case"delete":(0,r.kJ)(e)||(s.push(c.get(v)),(0,r._N)(e)&&s.push(c.get(y)));break;case"set":(0,r._N)(e)&&s.push(c.get(v))}if(1===s.length)s[0]&&k(s[0]);else{const e=[];for(const t of s)t&&e.push(...t);k(a(e))}}function k(e,t){const n=(0,r.kJ)(e)?e:[...e];for(const e of n)e.computed&&C(e);for(const e of n)e.computed||C(e)}function C(e,t){(e!==m||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}const I=(0,r.fY)("__proto__,__v_isRef,__isVue"),x=new Set(Object.getOwnPropertyNames(Symbol).filter((e=>"arguments"!==e&&"caller"!==e)).map((e=>Symbol[e])).filter(r.yk)),A=M(),D=M(!1,!0),N=M(!0),T=R();function R(){const e={};return["includes","indexOf","lastIndexOf"].forEach((t=>{e[t]=function(...e){const n=Se(this);for(let e=0,t=this.length;e<t;e++)E(n,0,e+"");const r=n[t](...e);return-1===r||!1===r?n[t](...e.map(Se)):r}})),["push","pop","shift","unshift","splice"].forEach((t=>{e[t]=function(...e){w();const n=Se(this)[t].apply(this,e);return S(),n}})),e}function L(e){const t=Se(this);return E(t,0,e),t.hasOwnProperty(e)}function M(e=!1,t=!1){return function(n,o,i){if("__v_isReactive"===o)return!e;if("__v_isReadonly"===o)return e;if("__v_isShallow"===o)return t;if("__v_raw"===o&&i===(e?t?he:de:t?pe:fe).get(n))return n;const l=(0,r.kJ)(n);if(!e){if(l&&(0,r.RI)(T,o))return Reflect.get(T,o,i);if("hasOwnProperty"===o)return L}const c=Reflect.get(n,o,i);return((0,r.yk)(o)?x.has(o):I(o))?c:(e||E(n,0,o),t?c:Ie(c)?l&&(0,r.S0)(o)?c:c.value:(0,r.Kn)(c)?e?ye(c):me(c):c)}}const F=U(),H=U(!0);function U(e=!1){return function(t,n,o,i){let l=t[n];if(be(l)&&Ie(l)&&!Ie(o))return!1;if(!e&&(Oe(o)||be(o)||(l=Se(l),o=Se(o)),!(0,r.kJ)(t)&&Ie(l)&&!Ie(o)))return l.value=o,!0;const c=(0,r.kJ)(t)&&(0,r.S0)(n)?Number(n)<t.length:(0,r.RI)(t,n),a=Reflect.set(t,n,o,i);return t===Se(i)&&(c?(0,r.aU)(o,l)&&P(t,"set",n,o):P(t,"add",n,o)),a}}const z={get:A,set:F,deleteProperty:function(e,t){const n=(0,r.RI)(e,t),o=(e[t],Reflect.deleteProperty(e,t));return o&&n&&P(e,"delete",t,void 0),o},has:function(e,t){const n=Reflect.has(e,t);return(0,r.yk)(t)&&x.has(t)||E(e,0,t),n},ownKeys:function(e){return E(e,0,(0,r.kJ)(e)?"length":v),Reflect.ownKeys(e)}},q={get:N,set:(e,t)=>!0,deleteProperty:(e,t)=>!0},$=(0,r.l7)({},z,{get:D,set:H}),B=e=>e,V=e=>Reflect.getPrototypeOf(e);function J(e,t,n=!1,r=!1){const o=Se(e=e.__v_raw),i=Se(t);n||(t!==i&&E(o,0,t),E(o,0,i));const{has:l}=V(o),c=r?B:n?Pe:je;return l.call(o,t)?c(e.get(t)):l.call(o,i)?c(e.get(i)):void(e!==o&&e.get(t))}function W(e,t=!1){const n=this.__v_raw,r=Se(n),o=Se(e);return t||(e!==o&&E(r,0,e),E(r,0,o)),e===o?n.has(e):n.has(e)||n.has(o)}function K(e,t=!1){return e=e.__v_raw,!t&&E(Se(e),0,v),Reflect.get(e,"size",e)}function G(e){e=Se(e);const t=Se(this);return V(t).has.call(t,e)||(t.add(e),P(t,"add",e,e)),this}function Y(e,t){t=Se(t);const n=Se(this),{has:o,get:i}=V(n);let l=o.call(n,e);l||(e=Se(e),l=o.call(n,e));const c=i.call(n,e);return n.set(e,t),l?(0,r.aU)(t,c)&&P(n,"set",e,t):P(n,"add",e,t),this}function Z(e){const t=Se(this),{has:n,get:r}=V(t);let o=n.call(t,e);o||(e=Se(e),o=n.call(t,e)),r&&r.call(t,e);const i=t.delete(e);return o&&P(t,"delete",e,void 0),i}function X(){const e=Se(this),t=0!==e.size,n=e.clear();return t&&P(e,"clear",void 0,void 0),n}function Q(e,t){return function(n,r){const o=this,i=o.__v_raw,l=Se(i),c=t?B:e?Pe:je;return!e&&E(l,0,v),i.forEach(((e,t)=>n.call(r,c(e),c(t),o)))}}function ee(e,t,n){return function(...o){const i=this.__v_raw,l=Se(i),c=(0,r._N)(l),a="entries"===e||e===Symbol.iterator&&c,s="keys"===e&&c,u=i[e](...o),f=n?B:t?Pe:je;return!t&&E(l,0,s?y:v),{next(){const{value:e,done:t}=u.next();return t?{value:e,done:t}:{value:a?[f(e[0]),f(e[1])]:f(e),done:t}},[Symbol.iterator](){return this}}}}function te(e){return function(...t){return"delete"!==e&&this}}function ne(){const e={get(e){return J(this,e)},get size(){return K(this)},has:W,add:G,set:Y,delete:Z,clear:X,forEach:Q(!1,!1)},t={get(e){return J(this,e,!1,!0)},get size(){return K(this)},has:W,add:G,set:Y,delete:Z,clear:X,forEach:Q(!1,!0)},n={get(e){return J(this,e,!0)},get size(){return K(this,!0)},has(e){return W.call(this,e,!0)},add:te("add"),set:te("set"),delete:te("delete"),clear:te("clear"),forEach:Q(!0,!1)},r={get(e){return J(this,e,!0,!0)},get size(){return K(this,!0)},has(e){return W.call(this,e,!0)},add:te("add"),set:te("set"),delete:te("delete"),clear:te("clear"),forEach:Q(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((o=>{e[o]=ee(o,!1,!1),n[o]=ee(o,!0,!1),t[o]=ee(o,!1,!0),r[o]=ee(o,!0,!0)})),[e,n,t,r]}const[re,oe,ie,le]=ne();function ce(e,t){const n=t?e?le:ie:e?oe:re;return(t,o,i)=>"__v_isReactive"===o?!e:"__v_isReadonly"===o?e:"__v_raw"===o?t:Reflect.get((0,r.RI)(n,o)&&o in t?n:t,o,i)}const ae={get:ce(!1,!1)},se={get:ce(!1,!0)},ue={get:ce(!0,!1)},fe=new WeakMap,pe=new WeakMap,de=new WeakMap,he=new WeakMap;function me(e){return be(e)?e:_e(e,!1,z,ae,fe)}function ve(e){return _e(e,!1,$,se,pe)}function ye(e){return _e(e,!0,q,ue,de)}function _e(e,t,n,o,i){if(!(0,r.Kn)(e))return e;if(e.__v_raw&&(!t||!e.__v_isReactive))return e;const l=i.get(e);if(l)return l;const c=(a=e).__v_skip||!Object.isExtensible(a)?0:function(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((0,r.W7)(a));var a;if(0===c)return e;const s=new Proxy(e,2===c?o:n);return i.set(e,s),s}function ge(e){return be(e)?ge(e.__v_raw):!(!e||!e.__v_isReactive)}function be(e){return!(!e||!e.__v_isReadonly)}function Oe(e){return!(!e||!e.__v_isShallow)}function we(e){return ge(e)||be(e)}function Se(e){const t=e&&e.__v_raw;return t?Se(t):e}function Ee(e){return(0,r.Nj)(e,"__v_skip",!0),e}const je=e=>(0,r.Kn)(e)?me(e):e,Pe=e=>(0,r.Kn)(e)?ye(e):e;function ke(e){b&&m&&j((e=Se(e)).dep||(e.dep=a()))}function Ce(e,t){const n=(e=Se(e)).dep;n&&k(n)}function Ie(e){return!(!e||!0!==e.__v_isRef)}function xe(e){return De(e,!1)}function Ae(e){return De(e,!0)}function De(e,t){return Ie(e)?e:new Ne(e,t)}class Ne{constructor(e,t){this.__v_isShallow=t,this.dep=void 0,this.__v_isRef=!0,this._rawValue=t?e:Se(e),this._value=t?e:je(e)}get value(){return ke(this),this._value}set value(e){const t=this.__v_isShallow||Oe(e)||be(e);e=t?e:Se(e),(0,r.aU)(e,this._rawValue)&&(this._rawValue=e,this._value=t?e:je(e),Ce(this))}}function Te(e){return Ie(e)?e.value:e}const Re={get:(e,t,n)=>Te(Reflect.get(e,t,n)),set:(e,t,n,r)=>{const o=e[t];return Ie(o)&&!Ie(n)?(o.value=n,!0):Reflect.set(e,t,n,r)}};function Le(e){return ge(e)?e:new Proxy(e,Re)}function Me(e){const t=(0,r.kJ)(e)?new Array(e.length):{};for(const n in e)t[n]=He(e,n);return t}class Fe{constructor(e,t,n){this._object=e,this._key=t,this._defaultValue=n,this.__v_isRef=!0}get value(){const e=this._object[this._key];return void 0===e?this._defaultValue:e}set value(e){this._object[this._key]=e}get dep(){return e=Se(this._object),t=this._key,null===(n=f.get(e))||void 0===n?void 0:n.get(t);var e,t,n}}function He(e,t,n){const r=e[t];return Ie(r)?r:new Fe(e,t,n)}var Ue;class ze{constructor(e,t,n,r){this._setter=t,this.dep=void 0,this.__v_isRef=!0,this[Ue]=!1,this._dirty=!0,this.effect=new _(e,(()=>{this._dirty||(this._dirty=!0,Ce(this))})),this.effect.computed=this,this.effect.active=this._cacheable=!r,this.__v_isReadonly=n}get value(){const e=Se(this);return ke(e),!e._dirty&&e._cacheable||(e._dirty=!1,e._value=e.effect.run()),e._value}set value(e){this._setter(e)}}function qe(e,t,n=!1){let o,i;const l=(0,r.mf)(e);return l?(o=e,i=r.dG):(o=e.get,i=e.set),new ze(o,i,l||!i,n)}Ue="__v_isReadonly"},6252:(e,t,n)=>{"use strict";n.d(t,{$d:()=>l,Ah:()=>ve,Eo:()=>dt,FN:()=>Wt,Fl:()=>rn,HY:()=>vt,JJ:()=>M,Jd:()=>me,Ko:()=>ke,P$:()=>W,Q6:()=>Q,RC:()=>ne,U2:()=>G,Uk:()=>Lt,WI:()=>Ce,Wm:()=>Tt,Y3:()=>y,Y8:()=>V,YP:()=>U,_:()=>Nt,aZ:()=>ee,bv:()=>pe,dG:()=>qt,f3:()=>F,h:()=>on,iD:()=>Pt,ic:()=>he,j4:()=>kt,kq:()=>Ft,nK:()=>X,uE:()=>Mt,up:()=>Ee,w5:()=>A,wg:()=>wt,wy:()=>Oe});var r=n(2262),o=n(3577);function i(e,t,n,r){let o;try{o=r?e(...r):e()}catch(e){c(e,t,n)}return o}function l(e,t,n,r){if((0,o.mf)(e)){const l=i(e,t,n,r);return l&&(0,o.tI)(l)&&l.catch((e=>{c(e,t,n)})),l}const a=[];for(let o=0;o<e.length;o++)a.push(l(e[o],t,n,r));return a}function c(e,t,n,r=!0){if(t&&t.vnode,t){let r=t.parent;const o=t.proxy,l=n;for(;r;){const t=r.ec;if(t)for(let n=0;n<t.length;n++)if(!1===t[n](e,o,l))return;r=r.parent}const c=t.appContext.config.errorHandler;if(c)return void i(c,null,10,[e,o,l])}!function(e,t,n,r=!0){console.error(e)}(e,0,0,r)}let a=!1,s=!1;const u=[];let f=0;const p=[];let d=null,h=0;const m=Promise.resolve();let v=null;function y(e){const t=v||m;return e?t.then(this?e.bind(this):e):t}function _(e){u.length&&u.includes(e,a&&e.allowRecurse?f+1:f)||(null==e.id?u.push(e):u.splice(function(e){let t=f+1,n=u.length;for(;t<n;){const r=t+n>>>1;w(u[r])<e?t=r+1:n=r}return t}(e.id),0,e),g())}function g(){a||s||(s=!0,v=m.then(E))}function b(e,t=(a?f+1:0)){for(;t<u.length;t++){const e=u[t];e&&e.pre&&(u.splice(t,1),t--,e())}}function O(e){if(p.length){const e=[...new Set(p)];if(p.length=0,d)return void d.push(...e);for(d=e,d.sort(((e,t)=>w(e)-w(t))),h=0;h<d.length;h++)d[h]();d=null,h=0}}const w=e=>null==e.id?1/0:e.id,S=(e,t)=>{const n=w(e)-w(t);if(0===n){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function E(e){s=!1,a=!0,u.sort(S),o.dG;try{for(f=0;f<u.length;f++){const e=u[f];e&&!1!==e.active&&i(e,null,14)}}finally{f=0,u.length=0,O(),a=!1,v=null,(u.length||p.length)&&E(e)}}function j(e,t,...n){if(e.isUnmounted)return;const r=e.vnode.props||o.kT;let i=n;const c=t.startsWith("update:"),a=c&&t.slice(7);if(a&&a in r){const e=`${"modelValue"===a?"model":a}Modifiers`,{number:t,trim:l}=r[e]||o.kT;l&&(i=n.map((e=>(0,o.HD)(e)?e.trim():e))),t&&(i=n.map(o.h5))}let s,u=r[s=(0,o.hR)(t)]||r[s=(0,o.hR)((0,o._A)(t))];!u&&c&&(u=r[s=(0,o.hR)((0,o.rs)(t))]),u&&l(u,e,6,i);const f=r[s+"Once"];if(f){if(e.emitted){if(e.emitted[s])return}else e.emitted={};e.emitted[s]=!0,l(f,e,6,i)}}function P(e,t,n=!1){const r=t.emitsCache,i=r.get(e);if(void 0!==i)return i;const l=e.emits;let c={},a=!1;if(!(0,o.mf)(e)){const r=e=>{const n=P(e,t,!0);n&&(a=!0,(0,o.l7)(c,n))};!n&&t.mixins.length&&t.mixins.forEach(r),e.extends&&r(e.extends),e.mixins&&e.mixins.forEach(r)}return l||a?((0,o.kJ)(l)?l.forEach((e=>c[e]=null)):(0,o.l7)(c,l),(0,o.Kn)(e)&&r.set(e,c),c):((0,o.Kn)(e)&&r.set(e,null),null)}function k(e,t){return!(!e||!(0,o.F7)(t))&&(t=t.slice(2).replace(/Once$/,""),(0,o.RI)(e,t[0].toLowerCase()+t.slice(1))||(0,o.RI)(e,(0,o.rs)(t))||(0,o.RI)(e,t))}new Set,new Map;let C=null,I=null;function x(e){const t=C;return C=e,I=e&&e.type.__scopeId||null,t}function A(e,t=C,n){if(!t)return e;if(e._n)return e;const r=(...n)=>{r._d&&Et(-1);const o=x(t);let i;try{i=e(...n)}finally{x(o),r._d&&Et(1)}return i};return r._n=!0,r._c=!0,r._d=!0,r}function D(e){const{type:t,vnode:n,proxy:r,withProxy:i,props:l,propsOptions:[a],slots:s,attrs:u,emit:f,render:p,renderCache:d,data:h,setupState:m,ctx:v,inheritAttrs:y}=e;let _,g;const b=x(e);try{if(4&n.shapeFlag){const e=i||r;_=Ht(p.call(e,e,d,l,m,h,v)),g=u}else{const e=t;_=Ht(e.length>1?e(l,{attrs:u,slots:s,emit:f}):e(l,null)),g=t.props?u:N(u)}}catch(t){bt.length=0,c(t,e,1),_=Tt(_t)}let O=_;if(g&&!1!==y){const e=Object.keys(g),{shapeFlag:t}=O;e.length&&7&t&&(a&&e.some(o.tR)&&(g=T(g,a)),O=Rt(O,g))}return n.dirs&&(O=Rt(O),O.dirs=O.dirs?O.dirs.concat(n.dirs):n.dirs),n.transition&&(O.transition=n.transition),_=O,x(b),_}const N=e=>{let t;for(const n in e)("class"===n||"style"===n||(0,o.F7)(n))&&((t||(t={}))[n]=e[n]);return t},T=(e,t)=>{const n={};for(const r in e)(0,o.tR)(r)&&r.slice(9)in t||(n[r]=e[r]);return n};function R(e,t,n){const r=Object.keys(t);if(r.length!==Object.keys(e).length)return!0;for(let o=0;o<r.length;o++){const i=r[o];if(t[i]!==e[i]&&!k(n,i))return!0}return!1}function L(e,t){var n;t&&t.pendingBranch?(0,o.kJ)(e)?t.effects.push(...e):t.effects.push(e):(n=e,(0,o.kJ)(n)?p.push(...n):d&&d.includes(n,n.allowRecurse?h+1:h)||p.push(n),g())}function M(e,t){if(Jt){let n=Jt.provides;const r=Jt.parent&&Jt.parent.provides;r===n&&(n=Jt.provides=Object.create(r)),n[e]=t}}function F(e,t,n=!1){const r=Jt||C;if(r){const i=null==r.parent?r.vnode.appContext&&r.vnode.appContext.provides:r.parent.provides;if(i&&e in i)return i[e];if(arguments.length>1)return n&&(0,o.mf)(t)?t.call(r.proxy):t}}const H={};function U(e,t,n){return z(e,t,n)}function z(e,t,{immediate:n,deep:c,flush:a,onTrack:s,onTrigger:u}=o.kT){const f=(0,r.nZ)()===(null==Jt?void 0:Jt.scope)?Jt:null;let p,d,h=!1,m=!1;if((0,r.dq)(e)?(p=()=>e.value,h=(0,r.yT)(e)):(0,r.PG)(e)?(p=()=>e,c=!0):(0,o.kJ)(e)?(m=!0,h=e.some((e=>(0,r.PG)(e)||(0,r.yT)(e))),p=()=>e.map((e=>(0,r.dq)(e)?e.value:(0,r.PG)(e)?B(e):(0,o.mf)(e)?i(e,f,2):void 0))):p=(0,o.mf)(e)?t?()=>i(e,f,2):()=>{if(!f||!f.isUnmounted)return d&&d(),l(e,f,3,[y])}:o.dG,t&&c){const e=p;p=()=>B(e())}let v,y=e=>{d=w.onStop=()=>{i(e,f,4)}};if(Qt){if(y=o.dG,t?n&&l(t,f,3,[p(),m?[]:void 0,y]):p(),"sync"!==a)return o.dG;{const e=cn();v=e.__watcherHandles||(e.__watcherHandles=[])}}let g=m?new Array(e.length).fill(H):H;const b=()=>{if(w.active)if(t){const e=w.run();(c||h||(m?e.some(((e,t)=>(0,o.aU)(e,g[t]))):(0,o.aU)(e,g)))&&(d&&d(),l(t,f,3,[e,g===H?void 0:m&&g[0]===H?[]:g,y]),g=e)}else w.run()};let O;b.allowRecurse=!!t,"sync"===a?O=b:"post"===a?O=()=>pt(b,f&&f.suspense):(b.pre=!0,f&&(b.id=f.uid),O=()=>_(b));const w=new r.qq(p,O);t?n?b():g=w.run():"post"===a?pt(w.run.bind(w),f&&f.suspense):w.run();const S=()=>{w.stop(),f&&f.scope&&(0,o.Od)(f.scope.effects,w)};return v&&v.push(S),S}function q(e,t,n){const r=this.proxy,i=(0,o.HD)(e)?e.includes(".")?$(r,e):()=>r[e]:e.bind(r,r);let l;(0,o.mf)(t)?l=t:(l=t.handler,n=t);const c=Jt;Kt(this);const a=z(i,l.bind(r),n);return c?Kt(c):Gt(),a}function $(e,t){const n=t.split(".");return()=>{let t=e;for(let e=0;e<n.length&&t;e++)t=t[n[e]];return t}}function B(e,t){if(!(0,o.Kn)(e)||e.__v_skip)return e;if((t=t||new Set).has(e))return e;if(t.add(e),(0,r.dq)(e))B(e.value,t);else if((0,o.kJ)(e))for(let n=0;n<e.length;n++)B(e[n],t);else if((0,o.DM)(e)||(0,o._N)(e))e.forEach((e=>{B(e,t)}));else if((0,o.PO)(e))for(const n in e)B(e[n],t);return e}function V(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return pe((()=>{e.isMounted=!0})),me((()=>{e.isUnmounting=!0})),e}const J=[Function,Array],W={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:J,onEnter:J,onAfterEnter:J,onEnterCancelled:J,onBeforeLeave:J,onLeave:J,onAfterLeave:J,onLeaveCancelled:J,onBeforeAppear:J,onAppear:J,onAfterAppear:J,onAppearCancelled:J},setup(e,{slots:t}){const n=Wt(),o=V();let i;return()=>{const l=t.default&&Q(t.default(),!0);if(!l||!l.length)return;let c=l[0];if(l.length>1){let e=!1;for(const t of l)if(t.type!==_t){c=t,e=!0;break}}const a=(0,r.IU)(e),{mode:s}=a;if(o.isLeaving)return Y(c);const u=Z(c);if(!u)return Y(c);const f=G(u,a,o,n);X(u,f);const p=n.subTree,d=p&&Z(p);let h=!1;const{getTransitionKey:m}=u.type;if(m){const e=m();void 0===i?i=e:e!==i&&(i=e,h=!0)}if(d&&d.type!==_t&&(!It(u,d)||h)){const e=G(d,a,o,n);if(X(d,e),"out-in"===s)return o.isLeaving=!0,e.afterLeave=()=>{o.isLeaving=!1,!1!==n.update.active&&n.update()},Y(c);"in-out"===s&&u.type!==_t&&(e.delayLeave=(e,t,n)=>{K(o,d)[String(d.key)]=d,e._leaveCb=()=>{t(),e._leaveCb=void 0,delete f.delayedLeave},f.delayedLeave=n})}return c}}};function K(e,t){const{leavingVNodes:n}=e;let r=n.get(t.type);return r||(r=Object.create(null),n.set(t.type,r)),r}function G(e,t,n,r){const{appear:i,mode:c,persisted:a=!1,onBeforeEnter:s,onEnter:u,onAfterEnter:f,onEnterCancelled:p,onBeforeLeave:d,onLeave:h,onAfterLeave:m,onLeaveCancelled:v,onBeforeAppear:y,onAppear:_,onAfterAppear:g,onAppearCancelled:b}=t,O=String(e.key),w=K(n,e),S=(e,t)=>{e&&l(e,r,9,t)},E=(e,t)=>{const n=t[1];S(e,t),(0,o.kJ)(e)?e.every((e=>e.length<=1))&&n():e.length<=1&&n()},j={mode:c,persisted:a,beforeEnter(t){let r=s;if(!n.isMounted){if(!i)return;r=y||s}t._leaveCb&&t._leaveCb(!0);const o=w[O];o&&It(e,o)&&o.el._leaveCb&&o.el._leaveCb(),S(r,[t])},enter(e){let t=u,r=f,o=p;if(!n.isMounted){if(!i)return;t=_||u,r=g||f,o=b||p}let l=!1;const c=e._enterCb=t=>{l||(l=!0,S(t?o:r,[e]),j.delayedLeave&&j.delayedLeave(),e._enterCb=void 0)};t?E(t,[e,c]):c()},leave(t,r){const o=String(e.key);if(t._enterCb&&t._enterCb(!0),n.isUnmounting)return r();S(d,[t]);let i=!1;const l=t._leaveCb=n=>{i||(i=!0,r(),S(n?v:m,[t]),t._leaveCb=void 0,w[o]===e&&delete w[o])};w[o]=e,h?E(h,[t,l]):l()},clone:e=>G(e,t,n,r)};return j}function Y(e){if(oe(e))return(e=Rt(e)).children=null,e}function Z(e){return oe(e)?e.children?e.children[0]:void 0:e}function X(e,t){6&e.shapeFlag&&e.component?X(e.component.subTree,t):128&e.shapeFlag?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function Q(e,t=!1,n){let r=[],o=0;for(let i=0;i<e.length;i++){let l=e[i];const c=null==n?l.key:String(n)+String(null!=l.key?l.key:i);l.type===vt?(128&l.patchFlag&&o++,r=r.concat(Q(l.children,t,c))):(t||l.type!==_t)&&r.push(null!=c?Rt(l,{key:c}):l)}if(o>1)for(let e=0;e<r.length;e++)r[e].patchFlag=-2;return r}function ee(e){return(0,o.mf)(e)?{setup:e,name:e.name}:e}const te=e=>!!e.type.__asyncLoader;function ne(e){(0,o.mf)(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:i,delay:l=200,timeout:a,suspensible:s=!0,onError:u}=e;let f,p=null,d=0;const h=()=>{let e;return p||(e=p=t().catch((e=>{if(e=e instanceof Error?e:new Error(String(e)),u)return new Promise(((t,n)=>{u(e,(()=>t((d++,p=null,h()))),(()=>n(e)),d+1)}));throw e})).then((t=>e!==p&&p?p:(t&&(t.__esModule||"Module"===t[Symbol.toStringTag])&&(t=t.default),f=t,t))))};return ee({name:"AsyncComponentWrapper",__asyncLoader:h,get __asyncResolved(){return f},setup(){const e=Jt;if(f)return()=>re(f,e);const t=t=>{p=null,c(t,e,13,!i)};if(s&&e.suspense||Qt)return h().then((t=>()=>re(t,e))).catch((e=>(t(e),()=>i?Tt(i,{error:e}):null)));const o=(0,r.iH)(!1),u=(0,r.iH)(),d=(0,r.iH)(!!l);return l&&setTimeout((()=>{d.value=!1}),l),null!=a&&setTimeout((()=>{if(!o.value&&!u.value){const e=new Error(`Async component timed out after ${a}ms.`);t(e),u.value=e}}),a),h().then((()=>{o.value=!0,e.parent&&oe(e.parent.vnode)&&_(e.parent.update)})).catch((e=>{t(e),u.value=e})),()=>o.value&&f?re(f,e):u.value&&i?Tt(i,{error:u.value}):n&&!d.value?Tt(n):void 0}})}function re(e,t){const{ref:n,props:r,children:o,ce:i}=t.vnode,l=Tt(e,r,o);return l.ref=n,l.ce=i,delete t.vnode.ce,l}const oe=e=>e.type.__isKeepAlive;function ie(e,t){ce(e,"a",t)}function le(e,t){ce(e,"da",t)}function ce(e,t,n=Jt){const r=e.__wdc||(e.__wdc=()=>{let t=n;for(;t;){if(t.isDeactivated)return;t=t.parent}return e()});if(se(t,r,n),n){let e=n.parent;for(;e&&e.parent;)oe(e.parent.vnode)&&ae(r,t,n,e),e=e.parent}}function ae(e,t,n,r){const i=se(t,e,r,!0);ve((()=>{(0,o.Od)(r[t],i)}),n)}function se(e,t,n=Jt,o=!1){if(n){const i=n[e]||(n[e]=[]),c=t.__weh||(t.__weh=(...o)=>{if(n.isUnmounted)return;(0,r.Jd)(),Kt(n);const i=l(t,n,e,o);return Gt(),(0,r.lk)(),i});return o?i.unshift(c):i.push(c),c}}RegExp,RegExp;const ue=e=>(t,n=Jt)=>(!Qt||"sp"===e)&&se(e,((...e)=>t(...e)),n),fe=ue("bm"),pe=ue("m"),de=ue("bu"),he=ue("u"),me=ue("bum"),ve=ue("um"),ye=ue("sp"),_e=ue("rtg"),ge=ue("rtc");function be(e,t=Jt){se("ec",e,t)}function Oe(e,t){const n=C;if(null===n)return e;const r=nn(n)||n.proxy,i=e.dirs||(e.dirs=[]);for(let e=0;e<t.length;e++){let[n,l,c,a=o.kT]=t[e];n&&((0,o.mf)(n)&&(n={mounted:n,updated:n}),n.deep&&B(l),i.push({dir:n,instance:r,value:l,oldValue:void 0,arg:c,modifiers:a}))}return e}function we(e,t,n,o){const i=e.dirs,c=t&&t.dirs;for(let a=0;a<i.length;a++){const s=i[a];c&&(s.oldValue=c[a].value);let u=s.dir[o];u&&((0,r.Jd)(),l(u,n,8,[e.el,s,e,t]),(0,r.lk)())}}const Se="components";function Ee(e,t){return function(e,t,n=!0,r=!1){const i=C||Jt;if(i){const n=i.type;if(e===Se){const e=function(e,t=!0){return(0,o.mf)(e)?e.displayName||e.name:e.name||t&&e.__name}(n,!1);if(e&&(e===t||e===(0,o._A)(t)||e===(0,o.kC)((0,o._A)(t))))return n}const l=Pe(i[e]||n[e],t)||Pe(i.appContext[e],t);return!l&&r?n:l}}(Se,e,!0,t)||e}const je=Symbol();function Pe(e,t){return e&&(e[t]||e[(0,o._A)(t)]||e[(0,o.kC)((0,o._A)(t))])}function ke(e,t,n,r){let i;const l=n&&n[r];if((0,o.kJ)(e)||(0,o.HD)(e)){i=new Array(e.length);for(let n=0,r=e.length;n<r;n++)i[n]=t(e[n],n,void 0,l&&l[n])}else if("number"==typeof e){i=new Array(e);for(let n=0;n<e;n++)i[n]=t(n+1,n,void 0,l&&l[n])}else if((0,o.Kn)(e))if(e[Symbol.iterator])i=Array.from(e,((e,n)=>t(e,n,void 0,l&&l[n])));else{const n=Object.keys(e);i=new Array(n.length);for(let r=0,o=n.length;r<o;r++){const o=n[r];i[r]=t(e[o],o,r,l&&l[r])}}else i=[];return n&&(n[r]=i),i}function Ce(e,t,n={},r,o){if(C.isCE||C.parent&&te(C.parent)&&C.parent.isCE)return"default"!==t&&(n.name=t),Tt("slot",n,r&&r());let i=e[t];i&&i._c&&(i._d=!1),wt();const l=i&&Ie(i(n)),c=kt(vt,{key:n.key||l&&l.key||`_${t}`},l||(r?r():[]),l&&1===e._?64:-2);return!o&&c.scopeId&&(c.slotScopeIds=[c.scopeId+"-s"]),i&&i._c&&(i._d=!0),c}function Ie(e){return e.some((e=>!Ct(e)||e.type!==_t&&!(e.type===vt&&!Ie(e.children))))?e:null}const xe=e=>e?Yt(e)?nn(e)||e.proxy:xe(e.parent):null,Ae=(0,o.l7)(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>xe(e.parent),$root:e=>xe(e.root),$emit:e=>e.emit,$options:e=>Me(e),$forceUpdate:e=>e.f||(e.f=()=>_(e.update)),$nextTick:e=>e.n||(e.n=y.bind(e.proxy)),$watch:e=>q.bind(e)}),De=(e,t)=>e!==o.kT&&!e.__isScriptSetup&&(0,o.RI)(e,t),Ne={get({_:e},t){const{ctx:n,setupState:i,data:l,props:c,accessCache:a,type:s,appContext:u}=e;let f;if("$"!==t[0]){const r=a[t];if(void 0!==r)switch(r){case 1:return i[t];case 2:return l[t];case 4:return n[t];case 3:return c[t]}else{if(De(i,t))return a[t]=1,i[t];if(l!==o.kT&&(0,o.RI)(l,t))return a[t]=2,l[t];if((f=e.propsOptions[0])&&(0,o.RI)(f,t))return a[t]=3,c[t];if(n!==o.kT&&(0,o.RI)(n,t))return a[t]=4,n[t];Te&&(a[t]=0)}}const p=Ae[t];let d,h;return p?("$attrs"===t&&(0,r.j)(e,"get",t),p(e)):(d=s.__cssModules)&&(d=d[t])?d:n!==o.kT&&(0,o.RI)(n,t)?(a[t]=4,n[t]):(h=u.config.globalProperties,(0,o.RI)(h,t)?h[t]:void 0)},set({_:e},t,n){const{data:r,setupState:i,ctx:l}=e;return De(i,t)?(i[t]=n,!0):r!==o.kT&&(0,o.RI)(r,t)?(r[t]=n,!0):!((0,o.RI)(e.props,t)||"$"===t[0]&&t.slice(1)in e||(l[t]=n,0))},has({_:{data:e,setupState:t,accessCache:n,ctx:r,appContext:i,propsOptions:l}},c){let a;return!!n[c]||e!==o.kT&&(0,o.RI)(e,c)||De(t,c)||(a=l[0])&&(0,o.RI)(a,c)||(0,o.RI)(r,c)||(0,o.RI)(Ae,c)||(0,o.RI)(i.config.globalProperties,c)},defineProperty(e,t,n){return null!=n.get?e._.accessCache[t]=0:(0,o.RI)(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};let Te=!0;function Re(e,t,n){l((0,o.kJ)(e)?e.map((e=>e.bind(t.proxy))):e.bind(t.proxy),t,n)}function Le(e,t,n,r){const i=r.includes(".")?$(n,r):()=>n[r];if((0,o.HD)(e)){const n=t[e];(0,o.mf)(n)&&U(i,n)}else if((0,o.mf)(e))U(i,e.bind(n));else if((0,o.Kn)(e))if((0,o.kJ)(e))e.forEach((e=>Le(e,t,n,r)));else{const r=(0,o.mf)(e.handler)?e.handler.bind(n):t[e.handler];(0,o.mf)(r)&&U(i,r,e)}}function Me(e){const t=e.type,{mixins:n,extends:r}=t,{mixins:i,optionsCache:l,config:{optionMergeStrategies:c}}=e.appContext,a=l.get(t);let s;return a?s=a:i.length||n||r?(s={},i.length&&i.forEach((e=>Fe(s,e,c,!0))),Fe(s,t,c)):s=t,(0,o.Kn)(t)&&l.set(t,s),s}function Fe(e,t,n,r=!1){const{mixins:o,extends:i}=t;i&&Fe(e,i,n,!0),o&&o.forEach((t=>Fe(e,t,n,!0)));for(const o in t)if(r&&"expose"===o);else{const r=He[o]||n&&n[o];e[o]=r?r(e[o],t[o]):t[o]}return e}const He={data:Ue,props:$e,emits:$e,methods:$e,computed:$e,beforeCreate:qe,created:qe,beforeMount:qe,mounted:qe,beforeUpdate:qe,updated:qe,beforeDestroy:qe,beforeUnmount:qe,destroyed:qe,unmounted:qe,activated:qe,deactivated:qe,errorCaptured:qe,serverPrefetch:qe,components:$e,directives:$e,watch:function(e,t){if(!e)return t;if(!t)return e;const n=(0,o.l7)(Object.create(null),e);for(const r in t)n[r]=qe(e[r],t[r]);return n},provide:Ue,inject:function(e,t){return $e(ze(e),ze(t))}};function Ue(e,t){return t?e?function(){return(0,o.l7)((0,o.mf)(e)?e.call(this,this):e,(0,o.mf)(t)?t.call(this,this):t)}:t:e}function ze(e){if((0,o.kJ)(e)){const t={};for(let n=0;n<e.length;n++)t[e[n]]=e[n];return t}return e}function qe(e,t){return e?[...new Set([].concat(e,t))]:t}function $e(e,t){return e?(0,o.l7)((0,o.l7)(Object.create(null),e),t):t}function Be(e,t,n,i){const[l,c]=e.propsOptions;let a,s=!1;if(t)for(let r in t){if((0,o.Gg)(r))continue;const u=t[r];let f;l&&(0,o.RI)(l,f=(0,o._A)(r))?c&&c.includes(f)?(a||(a={}))[f]=u:n[f]=u:k(e.emitsOptions,r)||r in i&&u===i[r]||(i[r]=u,s=!0)}if(c){const t=(0,r.IU)(n),i=a||o.kT;for(let r=0;r<c.length;r++){const a=c[r];n[a]=Ve(l,t,a,i[a],e,!(0,o.RI)(i,a))}}return s}function Ve(e,t,n,r,i,l){const c=e[n];if(null!=c){const e=(0,o.RI)(c,"default");if(e&&void 0===r){const e=c.default;if(c.type!==Function&&(0,o.mf)(e)){const{propsDefaults:o}=i;n in o?r=o[n]:(Kt(i),r=o[n]=e.call(null,t),Gt())}else r=e}c[0]&&(l&&!e?r=!1:!c[1]||""!==r&&r!==(0,o.rs)(n)||(r=!0))}return r}function Je(e,t,n=!1){const r=t.propsCache,i=r.get(e);if(i)return i;const l=e.props,c={},a=[];let s=!1;if(!(0,o.mf)(e)){const r=e=>{s=!0;const[n,r]=Je(e,t,!0);(0,o.l7)(c,n),r&&a.push(...r)};!n&&t.mixins.length&&t.mixins.forEach(r),e.extends&&r(e.extends),e.mixins&&e.mixins.forEach(r)}if(!l&&!s)return(0,o.Kn)(e)&&r.set(e,o.Z6),o.Z6;if((0,o.kJ)(l))for(let e=0;e<l.length;e++){const t=(0,o._A)(l[e]);We(t)&&(c[t]=o.kT)}else if(l)for(const e in l){const t=(0,o._A)(e);if(We(t)){const n=l[e],r=c[t]=(0,o.kJ)(n)||(0,o.mf)(n)?{type:n}:Object.assign({},n);if(r){const e=Ye(Boolean,r.type),n=Ye(String,r.type);r[0]=e>-1,r[1]=n<0||e<n,(e>-1||(0,o.RI)(r,"default"))&&a.push(t)}}}const u=[c,a];return(0,o.Kn)(e)&&r.set(e,u),u}function We(e){return"$"!==e[0]}function Ke(e){const t=e&&e.toString().match(/^\s*(function|class) (\w+)/);return t?t[2]:null===e?"null":""}function Ge(e,t){return Ke(e)===Ke(t)}function Ye(e,t){return(0,o.kJ)(t)?t.findIndex((t=>Ge(t,e))):(0,o.mf)(t)&&Ge(t,e)?0:-1}const Ze=e=>"_"===e[0]||"$stable"===e,Xe=e=>(0,o.kJ)(e)?e.map(Ht):[Ht(e)],Qe=(e,t,n)=>{if(t._n)return t;const r=A(((...e)=>Xe(t(...e))),n);return r._c=!1,r},et=(e,t,n)=>{const r=e._ctx;for(const n in e){if(Ze(n))continue;const i=e[n];if((0,o.mf)(i))t[n]=Qe(0,i,r);else if(null!=i){const e=Xe(i);t[n]=()=>e}}},tt=(e,t)=>{const n=Xe(t);e.slots.default=()=>n},nt=(e,t)=>{if(32&e.vnode.shapeFlag){const n=t._;n?(e.slots=(0,r.IU)(t),(0,o.Nj)(t,"_",n)):et(t,e.slots={})}else e.slots={},t&&tt(e,t);(0,o.Nj)(e.slots,xt,1)},rt=(e,t,n)=>{const{vnode:r,slots:i}=e;let l=!0,c=o.kT;if(32&r.shapeFlag){const e=t._;e?n&&1===e?l=!1:((0,o.l7)(i,t),n||1!==e||delete i._):(l=!t.$stable,et(t,i)),c=t}else t&&(tt(e,t),c={default:1});if(l)for(const e in i)Ze(e)||e in c||delete i[e]};function ot(){return{app:null,config:{isNativeTag:o.NO,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let it=0;function lt(e,t){return function(n,r=null){(0,o.mf)(n)||(n=Object.assign({},n)),null==r||(0,o.Kn)(r)||(r=null);const i=ot(),l=new Set;let c=!1;const a=i.app={_uid:it++,_component:n,_props:r,_container:null,_context:i,_instance:null,version:an,get config(){return i.config},set config(e){},use:(e,...t)=>(l.has(e)||(e&&(0,o.mf)(e.install)?(l.add(e),e.install(a,...t)):(0,o.mf)(e)&&(l.add(e),e(a,...t))),a),mixin:e=>(i.mixins.includes(e)||i.mixins.push(e),a),component:(e,t)=>t?(i.components[e]=t,a):i.components[e],directive:(e,t)=>t?(i.directives[e]=t,a):i.directives[e],mount(o,l,s){if(!c){const u=Tt(n,r);return u.appContext=i,l&&t?t(u,o):e(u,o,s),c=!0,a._container=o,o.__vue_app__=a,nn(u.component)||u.component.proxy}},unmount(){c&&(e(null,a._container),delete a._container.__vue_app__)},provide:(e,t)=>(i.provides[e]=t,a)};return a}}function ct(e,t,n,l,c=!1){if((0,o.kJ)(e))return void e.forEach(((e,r)=>ct(e,t&&((0,o.kJ)(t)?t[r]:t),n,l,c)));if(te(l)&&!c)return;const a=4&l.shapeFlag?nn(l.component)||l.component.proxy:l.el,s=c?null:a,{i:u,r:f}=e,p=t&&t.r,d=u.refs===o.kT?u.refs={}:u.refs,h=u.setupState;if(null!=p&&p!==f&&((0,o.HD)(p)?(d[p]=null,(0,o.RI)(h,p)&&(h[p]=null)):(0,r.dq)(p)&&(p.value=null)),(0,o.mf)(f))i(f,u,12,[s,d]);else{const t=(0,o.HD)(f),i=(0,r.dq)(f);if(t||i){const r=()=>{if(e.f){const n=t?(0,o.RI)(h,f)?h[f]:d[f]:f.value;c?(0,o.kJ)(n)&&(0,o.Od)(n,a):(0,o.kJ)(n)?n.includes(a)||n.push(a):t?(d[f]=[a],(0,o.RI)(h,f)&&(h[f]=d[f])):(f.value=[a],e.k&&(d[e.k]=f.value))}else t?(d[f]=s,(0,o.RI)(h,f)&&(h[f]=s)):i&&(f.value=s,e.k&&(d[e.k]=s))};s?(r.id=-1,pt(r,n)):r()}}}let at=!1;const st=e=>/svg/.test(e.namespaceURI)&&"foreignObject"!==e.tagName,ut=e=>8===e.nodeType;function ft(e){const{mt:t,p:n,o:{patchProp:r,createText:i,nextSibling:l,parentNode:c,remove:a,insert:s,createComment:u}}=e,f=(n,r,o,a,u,y=!1)=>{const _=ut(n)&&"["===n.data,g=()=>m(n,r,o,a,u,_),{type:b,ref:O,shapeFlag:w,patchFlag:S}=r;let E=n.nodeType;r.el=n,-2===S&&(y=!1,r.dynamicChildren=null);let j=null;switch(b){case yt:3!==E?""===r.children?(s(r.el=i(""),c(n),n),j=n):j=g():(n.data!==r.children&&(at=!0,n.data=r.children),j=l(n));break;case _t:j=8!==E||_?g():l(n);break;case gt:if(_&&(E=(n=l(n)).nodeType),1===E||3===E){j=n;const e=!r.children.length;for(let t=0;t<r.staticCount;t++)e&&(r.children+=1===j.nodeType?j.outerHTML:j.data),t===r.staticCount-1&&(r.anchor=j),j=l(j);return _?l(j):j}g();break;case vt:j=_?h(n,r,o,a,u,y):g();break;default:if(1&w)j=1!==E||r.type.toLowerCase()!==n.tagName.toLowerCase()?g():p(n,r,o,a,u,y);else if(6&w){r.slotScopeIds=u;const e=c(n);if(t(r,e,null,o,a,st(e),y),j=_?v(n):l(n),j&&ut(j)&&"teleport end"===j.data&&(j=l(j)),te(r)){let t;_?(t=Tt(vt),t.anchor=j?j.previousSibling:e.lastChild):t=3===n.nodeType?Lt(""):Tt("div"),t.el=n,r.component.subTree=t}}else 64&w?j=8!==E?g():r.type.hydrate(n,r,o,a,u,y,e,d):128&w&&(j=r.type.hydrate(n,r,o,a,st(c(n)),u,y,e,f))}return null!=O&&ct(O,null,a,r),j},p=(e,t,n,i,l,c)=>{c=c||!!t.dynamicChildren;const{type:s,props:u,patchFlag:f,shapeFlag:p,dirs:h}=t,m="input"===s&&h||"option"===s;if(m||-1!==f){if(h&&we(t,null,n,"created"),u)if(m||!c||48&f)for(const t in u)(m&&t.endsWith("value")||(0,o.F7)(t)&&!(0,o.Gg)(t))&&r(e,t,null,u[t],!1,void 0,n);else u.onClick&&r(e,"onClick",null,u.onClick,!1,void 0,n);let s;if((s=u&&u.onVnodeBeforeMount)&&$t(s,n,t),h&&we(t,null,n,"beforeMount"),((s=u&&u.onVnodeMounted)||h)&&L((()=>{s&&$t(s,n,t),h&&we(t,null,n,"mounted")}),i),16&p&&(!u||!u.innerHTML&&!u.textContent)){let r=d(e.firstChild,t,e,n,i,l,c);for(;r;){at=!0;const e=r;r=r.nextSibling,a(e)}}else 8&p&&e.textContent!==t.children&&(at=!0,e.textContent=t.children)}return e.nextSibling},d=(e,t,r,o,i,l,c)=>{c=c||!!t.dynamicChildren;const a=t.children,s=a.length;for(let t=0;t<s;t++){const s=c?a[t]:a[t]=Ht(a[t]);if(e)e=f(e,s,o,i,l,c);else{if(s.type===yt&&!s.children)continue;at=!0,n(null,s,r,null,o,i,st(r),l)}}return e},h=(e,t,n,r,o,i)=>{const{slotScopeIds:a}=t;a&&(o=o?o.concat(a):a);const f=c(e),p=d(l(e),t,f,n,r,o,i);return p&&ut(p)&&"]"===p.data?l(t.anchor=p):(at=!0,s(t.anchor=u("]"),f,p),p)},m=(e,t,r,o,i,s)=>{if(at=!0,t.el=null,s){const t=v(e);for(;;){const n=l(e);if(!n||n===t)break;a(n)}}const u=l(e),f=c(e);return a(e),n(null,t,f,u,r,o,st(f),i),u},v=e=>{let t=0;for(;e;)if((e=l(e))&&ut(e)&&("["===e.data&&t++,"]"===e.data)){if(0===t)return l(e);t--}return e};return[(e,t)=>{if(!t.hasChildNodes())return n(null,e,t),O(),void(t._vnode=e);at=!1,f(t.firstChild,e,null,null,null),O(),t._vnode=e,at&&console.error("Hydration completed but contains mismatches.")},f]}const pt=L;function dt(e){return function(e,t){(0,o.E9)().__VUE__=!0;const{insert:n,remove:l,patchProp:a,createElement:s,createText:p,createComment:d,setText:h,setElementText:m,parentNode:v,nextSibling:y,setScopeId:g=o.dG,insertStaticContent:w}=e,S=(e,t,n,r=null,o=null,i=null,l=!1,c=null,a=!!t.dynamicChildren)=>{if(e===t)return;e&&!It(e,t)&&(r=ne(e),Y(e,o,i,!0),e=null),-2===t.patchFlag&&(a=!1,t.dynamicChildren=null);const{type:s,ref:u,shapeFlag:f}=t;switch(s){case yt:E(e,t,n,r);break;case _t:C(e,t,n,r);break;case gt:null==e&&I(t,n,r,l);break;case vt:U(e,t,n,r,o,i,l,c,a);break;default:1&f?A(e,t,n,r,o,i,l,c,a):6&f?z(e,t,n,r,o,i,l,c,a):(64&f||128&f)&&s.process(e,t,n,r,o,i,l,c,a,ie)}null!=u&&o&&ct(u,e&&e.ref,i,t||e,!t)},E=(e,t,r,o)=>{if(null==e)n(t.el=p(t.children),r,o);else{const n=t.el=e.el;t.children!==e.children&&h(n,t.children)}},C=(e,t,r,o)=>{null==e?n(t.el=d(t.children||""),r,o):t.el=e.el},I=(e,t,n,r)=>{[e.el,e.anchor]=w(e.children,t,n,r,e.el,e.anchor)},x=({el:e,anchor:t})=>{let n;for(;e&&e!==t;)n=y(e),l(e),e=n;l(t)},A=(e,t,n,r,o,i,l,c,a)=>{l=l||"svg"===t.type,null==e?N(t,n,r,o,i,l,c,a):M(e,t,o,i,l,c,a)},N=(e,t,r,i,l,c,u,f)=>{let p,d;const{type:h,props:v,shapeFlag:y,transition:_,dirs:g}=e;if(p=e.el=s(e.type,c,v&&v.is,v),8&y?m(p,e.children):16&y&&L(e.children,p,null,i,l,c&&"foreignObject"!==h,u,f),g&&we(e,null,i,"created"),T(p,e,e.scopeId,u,i),v){for(const t in v)"value"===t||(0,o.Gg)(t)||a(p,t,null,v[t],c,e.children,i,l,ee);"value"in v&&a(p,"value",null,v.value),(d=v.onVnodeBeforeMount)&&$t(d,i,e)}g&&we(e,null,i,"beforeMount");const b=(!l||l&&!l.pendingBranch)&&_&&!_.persisted;b&&_.beforeEnter(p),n(p,t,r),((d=v&&v.onVnodeMounted)||b||g)&&pt((()=>{d&&$t(d,i,e),b&&_.enter(p),g&&we(e,null,i,"mounted")}),l)},T=(e,t,n,r,o)=>{if(n&&g(e,n),r)for(let t=0;t<r.length;t++)g(e,r[t]);if(o&&t===o.subTree){const t=o.vnode;T(e,t,t.scopeId,t.slotScopeIds,o.parent)}},L=(e,t,n,r,o,i,l,c,a=0)=>{for(let s=a;s<e.length;s++){const a=e[s]=c?Ut(e[s]):Ht(e[s]);S(null,a,t,n,r,o,i,l,c)}},M=(e,t,n,r,i,l,c)=>{const s=t.el=e.el;let{patchFlag:u,dynamicChildren:f,dirs:p}=t;u|=16&e.patchFlag;const d=e.props||o.kT,h=t.props||o.kT;let v;n&&ht(n,!1),(v=h.onVnodeBeforeUpdate)&&$t(v,n,t,e),p&&we(t,e,n,"beforeUpdate"),n&&ht(n,!0);const y=i&&"foreignObject"!==t.type;if(f?F(e.dynamicChildren,f,s,n,r,y,l):c||J(e,t,s,null,n,r,y,l,!1),u>0){if(16&u)H(s,t,d,h,n,r,i);else if(2&u&&d.class!==h.class&&a(s,"class",null,h.class,i),4&u&&a(s,"style",d.style,h.style,i),8&u){const o=t.dynamicProps;for(let t=0;t<o.length;t++){const l=o[t],c=d[l],u=h[l];u===c&&"value"!==l||a(s,l,c,u,i,e.children,n,r,ee)}}1&u&&e.children!==t.children&&m(s,t.children)}else c||null!=f||H(s,t,d,h,n,r,i);((v=h.onVnodeUpdated)||p)&&pt((()=>{v&&$t(v,n,t,e),p&&we(t,e,n,"updated")}),r)},F=(e,t,n,r,o,i,l)=>{for(let c=0;c<t.length;c++){const a=e[c],s=t[c],u=a.el&&(a.type===vt||!It(a,s)||70&a.shapeFlag)?v(a.el):n;S(a,s,u,null,r,o,i,l,!0)}},H=(e,t,n,r,i,l,c)=>{if(n!==r){if(n!==o.kT)for(const s in n)(0,o.Gg)(s)||s in r||a(e,s,n[s],null,c,t.children,i,l,ee);for(const s in r){if((0,o.Gg)(s))continue;const u=r[s],f=n[s];u!==f&&"value"!==s&&a(e,s,f,u,c,t.children,i,l,ee)}"value"in r&&a(e,"value",n.value,r.value)}},U=(e,t,r,o,i,l,c,a,s)=>{const u=t.el=e?e.el:p(""),f=t.anchor=e?e.anchor:p("");let{patchFlag:d,dynamicChildren:h,slotScopeIds:m}=t;m&&(a=a?a.concat(m):m),null==e?(n(u,r,o),n(f,r,o),L(t.children,r,f,i,l,c,a,s)):d>0&&64&d&&h&&e.dynamicChildren?(F(e.dynamicChildren,h,r,i,l,c,a),(null!=t.key||i&&t===i.subTree)&&mt(e,t,!0)):J(e,t,r,f,i,l,c,a,s)},z=(e,t,n,r,o,i,l,c,a)=>{t.slotScopeIds=c,null==e?512&t.shapeFlag?o.ctx.activate(t,n,r,l,a):q(t,n,r,o,i,l,a):$(e,t,a)},q=(e,t,n,l,a,s,u)=>{const f=e.component=function(e,t,n){const i=e.type,l=(t?t.appContext:e.appContext)||Bt,c={uid:Vt++,vnode:e,type:i,parent:t,appContext:l,root:null,next:null,subTree:null,effect:null,update:null,scope:new r.Bj(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(l.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Je(i,l),emitsOptions:P(i,l),emit:null,emitted:null,propsDefaults:o.kT,inheritAttrs:i.inheritAttrs,ctx:o.kT,data:o.kT,props:o.kT,attrs:o.kT,slots:o.kT,refs:o.kT,setupState:o.kT,setupContext:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return c.ctx={_:c},c.root=t?t.root:c,c.emit=j.bind(null,c),e.ce&&e.ce(c),c}(e,l,a);if(oe(e)&&(f.ctx.renderer=ie),function(e,t=!1){Qt=t;const{props:n,children:l}=e.vnode,a=Yt(e);!function(e,t,n,i=!1){const l={},c={};(0,o.Nj)(c,xt,1),e.propsDefaults=Object.create(null),Be(e,t,l,c);for(const t in e.propsOptions[0])t in l||(l[t]=void 0);n?e.props=i?l:(0,r.Um)(l):e.type.props?e.props=l:e.props=c,e.attrs=c}(e,n,a,t),nt(e,l);const s=a?function(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=(0,r.Xl)(new Proxy(e.ctx,Ne));const{setup:l}=n;if(l){const n=e.setupContext=l.length>1?function(e){const t=t=>{e.exposed=t||{}};let n;return{get attrs(){return n||(n=function(e){return new Proxy(e.attrs,{get:(t,n)=>((0,r.j)(e,"get","$attrs"),t[n])})}(e))},slots:e.slots,emit:e.emit,expose:t}}(e):null;Kt(e),(0,r.Jd)();const a=i(l,e,0,[e.props,n]);if((0,r.lk)(),Gt(),(0,o.tI)(a)){if(a.then(Gt,Gt),t)return a.then((n=>{en(e,n,t)})).catch((t=>{c(t,e,0)}));e.asyncDep=a}else en(e,a,t)}else tn(e,t)}(e,t):void 0;Qt=!1}(f),f.asyncDep){if(a&&a.registerDep(f,B),!e.el){const e=f.subTree=Tt(_t);C(null,e,t,n)}}else B(f,e,t,n,a,s,u)},$=(e,t,n)=>{const r=t.component=e.component;if(function(e,t,n){const{props:r,children:o,component:i}=e,{props:l,children:c,patchFlag:a}=t,s=i.emitsOptions;if(t.dirs||t.transition)return!0;if(!(n&&a>=0))return!(!o&&!c||c&&c.$stable)||r!==l&&(r?!l||R(r,l,s):!!l);if(1024&a)return!0;if(16&a)return r?R(r,l,s):!!l;if(8&a){const e=t.dynamicProps;for(let t=0;t<e.length;t++){const n=e[t];if(l[n]!==r[n]&&!k(s,n))return!0}}return!1}(e,t,n)){if(r.asyncDep&&!r.asyncResolved)return void V(r,t,n);r.next=t,function(e){const t=u.indexOf(e);t>f&&u.splice(t,1)}(r.update),r.update()}else t.el=e.el,r.vnode=t},B=(e,t,n,i,l,c,a)=>{const s=e.effect=new r.qq((()=>{if(e.isMounted){let t,{next:n,bu:r,u:i,parent:s,vnode:u}=e,f=n;ht(e,!1),n?(n.el=u.el,V(e,n,a)):n=u,r&&(0,o.ir)(r),(t=n.props&&n.props.onVnodeBeforeUpdate)&&$t(t,s,n,u),ht(e,!0);const p=D(e),d=e.subTree;e.subTree=p,S(d,p,v(d.el),ne(d),e,l,c),n.el=p.el,null===f&&function({vnode:e,parent:t},n){for(;t&&t.subTree===e;)(e=t.vnode).el=n,t=t.parent}(e,p.el),i&&pt(i,l),(t=n.props&&n.props.onVnodeUpdated)&&pt((()=>$t(t,s,n,u)),l)}else{let r;const{el:a,props:s}=t,{bm:u,m:f,parent:p}=e,d=te(t);if(ht(e,!1),u&&(0,o.ir)(u),!d&&(r=s&&s.onVnodeBeforeMount)&&$t(r,p,t),ht(e,!0),a&&ce){const n=()=>{e.subTree=D(e),ce(a,e.subTree,e,l,null)};d?t.type.__asyncLoader().then((()=>!e.isUnmounted&&n())):n()}else{const r=e.subTree=D(e);S(null,r,n,i,e,l,c),t.el=r.el}if(f&&pt(f,l),!d&&(r=s&&s.onVnodeMounted)){const e=t;pt((()=>$t(r,p,e)),l)}(256&t.shapeFlag||p&&te(p.vnode)&&256&p.vnode.shapeFlag)&&e.a&&pt(e.a,l),e.isMounted=!0,t=n=i=null}}),(()=>_(u)),e.scope),u=e.update=()=>s.run();u.id=e.uid,ht(e,!0),u()},V=(e,t,n)=>{t.component=e;const i=e.vnode.props;e.vnode=t,e.next=null,function(e,t,n,i){const{props:l,attrs:c,vnode:{patchFlag:a}}=e,s=(0,r.IU)(l),[u]=e.propsOptions;let f=!1;if(!(i||a>0)||16&a){let r;Be(e,t,l,c)&&(f=!0);for(const i in s)t&&((0,o.RI)(t,i)||(r=(0,o.rs)(i))!==i&&(0,o.RI)(t,r))||(u?!n||void 0===n[i]&&void 0===n[r]||(l[i]=Ve(u,s,i,void 0,e,!0)):delete l[i]);if(c!==s)for(const e in c)t&&(0,o.RI)(t,e)||(delete c[e],f=!0)}else if(8&a){const n=e.vnode.dynamicProps;for(let r=0;r<n.length;r++){let i=n[r];if(k(e.emitsOptions,i))continue;const a=t[i];if(u)if((0,o.RI)(c,i))a!==c[i]&&(c[i]=a,f=!0);else{const t=(0,o._A)(i);l[t]=Ve(u,s,t,a,e,!1)}else a!==c[i]&&(c[i]=a,f=!0)}}f&&(0,r.X$)(e,"set","$attrs")}(e,t.props,i,n),rt(e,t.children,n),(0,r.Jd)(),b(),(0,r.lk)()},J=(e,t,n,r,o,i,l,c,a=!1)=>{const s=e&&e.children,u=e?e.shapeFlag:0,f=t.children,{patchFlag:p,shapeFlag:d}=t;if(p>0){if(128&p)return void K(s,f,n,r,o,i,l,c,a);if(256&p)return void W(s,f,n,r,o,i,l,c,a)}8&d?(16&u&&ee(s,o,i),f!==s&&m(n,f)):16&u?16&d?K(s,f,n,r,o,i,l,c,a):ee(s,o,i,!0):(8&u&&m(n,""),16&d&&L(f,n,r,o,i,l,c,a))},W=(e,t,n,r,i,l,c,a,s)=>{e=e||o.Z6,t=t||o.Z6;const u=e.length,f=t.length,p=Math.min(u,f);let d;for(d=0;d<p;d++){const r=t[d]=s?Ut(t[d]):Ht(t[d]);S(e[d],r,n,null,i,l,c,a,s)}u>f?ee(e,i,l,!0,!1,p):L(t,n,r,i,l,c,a,s,p)},K=(e,t,n,r,i,l,c,a,s)=>{let u=0;const f=t.length;let p=e.length-1,d=f-1;for(;u<=p&&u<=d;){const r=e[u],o=t[u]=s?Ut(t[u]):Ht(t[u]);if(!It(r,o))break;S(r,o,n,null,i,l,c,a,s),u++}for(;u<=p&&u<=d;){const r=e[p],o=t[d]=s?Ut(t[d]):Ht(t[d]);if(!It(r,o))break;S(r,o,n,null,i,l,c,a,s),p--,d--}if(u>p){if(u<=d){const e=d+1,o=e<f?t[e].el:r;for(;u<=d;)S(null,t[u]=s?Ut(t[u]):Ht(t[u]),n,o,i,l,c,a,s),u++}}else if(u>d)for(;u<=p;)Y(e[u],i,l,!0),u++;else{const h=u,m=u,v=new Map;for(u=m;u<=d;u++){const e=t[u]=s?Ut(t[u]):Ht(t[u]);null!=e.key&&v.set(e.key,u)}let y,_=0;const g=d-m+1;let b=!1,O=0;const w=new Array(g);for(u=0;u<g;u++)w[u]=0;for(u=h;u<=p;u++){const r=e[u];if(_>=g){Y(r,i,l,!0);continue}let o;if(null!=r.key)o=v.get(r.key);else for(y=m;y<=d;y++)if(0===w[y-m]&&It(r,t[y])){o=y;break}void 0===o?Y(r,i,l,!0):(w[o-m]=u+1,o>=O?O=o:b=!0,S(r,t[o],n,null,i,l,c,a,s),_++)}const E=b?function(e){const t=e.slice(),n=[0];let r,o,i,l,c;const a=e.length;for(r=0;r<a;r++){const a=e[r];if(0!==a){if(o=n[n.length-1],e[o]<a){t[r]=o,n.push(r);continue}for(i=0,l=n.length-1;i<l;)c=i+l>>1,e[n[c]]<a?i=c+1:l=c;a<e[n[i]]&&(i>0&&(t[r]=n[i-1]),n[i]=r)}}for(i=n.length,l=n[i-1];i-- >0;)n[i]=l,l=t[l];return n}(w):o.Z6;for(y=E.length-1,u=g-1;u>=0;u--){const e=m+u,o=t[e],p=e+1<f?t[e+1].el:r;0===w[u]?S(null,o,n,p,i,l,c,a,s):b&&(y<0||u!==E[y]?G(o,n,p,2):y--)}}},G=(e,t,r,o,i=null)=>{const{el:l,type:c,transition:a,children:s,shapeFlag:u}=e;if(6&u)G(e.component.subTree,t,r,o);else if(128&u)e.suspense.move(t,r,o);else if(64&u)c.move(e,t,r,ie);else if(c!==vt)if(c!==gt)if(2!==o&&1&u&&a)if(0===o)a.beforeEnter(l),n(l,t,r),pt((()=>a.enter(l)),i);else{const{leave:e,delayLeave:o,afterLeave:i}=a,c=()=>n(l,t,r),s=()=>{e(l,(()=>{c(),i&&i()}))};o?o(l,c,s):s()}else n(l,t,r);else(({el:e,anchor:t},r,o)=>{let i;for(;e&&e!==t;)i=y(e),n(e,r,o),e=i;n(t,r,o)})(e,t,r);else{n(l,t,r);for(let e=0;e<s.length;e++)G(s[e],t,r,o);n(e.anchor,t,r)}},Y=(e,t,n,r=!1,o=!1)=>{const{type:i,props:l,ref:c,children:a,dynamicChildren:s,shapeFlag:u,patchFlag:f,dirs:p}=e;if(null!=c&&ct(c,null,n,e,!0),256&u)return void t.ctx.deactivate(e);const d=1&u&&p,h=!te(e);let m;if(h&&(m=l&&l.onVnodeBeforeUnmount)&&$t(m,t,e),6&u)Q(e.component,n,r);else{if(128&u)return void e.suspense.unmount(n,r);d&&we(e,null,t,"beforeUnmount"),64&u?e.type.remove(e,t,n,o,ie,r):s&&(i!==vt||f>0&&64&f)?ee(s,t,n,!1,!0):(i===vt&&384&f||!o&&16&u)&&ee(a,t,n),r&&Z(e)}(h&&(m=l&&l.onVnodeUnmounted)||d)&&pt((()=>{m&&$t(m,t,e),d&&we(e,null,t,"unmounted")}),n)},Z=e=>{const{type:t,el:n,anchor:r,transition:o}=e;if(t===vt)return void X(n,r);if(t===gt)return void x(e);const i=()=>{l(n),o&&!o.persisted&&o.afterLeave&&o.afterLeave()};if(1&e.shapeFlag&&o&&!o.persisted){const{leave:t,delayLeave:r}=o,l=()=>t(n,i);r?r(e.el,i,l):l()}else i()},X=(e,t)=>{let n;for(;e!==t;)n=y(e),l(e),e=n;l(t)},Q=(e,t,n)=>{const{bum:r,scope:i,update:l,subTree:c,um:a}=e;r&&(0,o.ir)(r),i.stop(),l&&(l.active=!1,Y(c,e,t,n)),a&&pt(a,t),pt((()=>{e.isUnmounted=!0}),t),t&&t.pendingBranch&&!t.isUnmounted&&e.asyncDep&&!e.asyncResolved&&e.suspenseId===t.pendingId&&(t.deps--,0===t.deps&&t.resolve())},ee=(e,t,n,r=!1,o=!1,i=0)=>{for(let l=i;l<e.length;l++)Y(e[l],t,n,r,o)},ne=e=>6&e.shapeFlag?ne(e.component.subTree):128&e.shapeFlag?e.suspense.next():y(e.anchor||e.el),re=(e,t,n)=>{null==e?t._vnode&&Y(t._vnode,null,null,!0):S(t._vnode||null,e,t,null,null,null,n),b(),O(),t._vnode=e},ie={p:S,um:Y,m:G,r:Z,mt:q,mc:L,pc:J,pbc:F,n:ne,o:e};let le,ce;return t&&([le,ce]=t(ie)),{render:re,hydrate:le,createApp:lt(re,le)}}(e,ft)}function ht({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function mt(e,t,n=!1){const r=e.children,i=t.children;if((0,o.kJ)(r)&&(0,o.kJ)(i))for(let e=0;e<r.length;e++){const t=r[e];let o=i[e];1&o.shapeFlag&&!o.dynamicChildren&&((o.patchFlag<=0||32===o.patchFlag)&&(o=i[e]=Ut(i[e]),o.el=t.el),n||mt(t,o)),o.type===yt&&(o.el=t.el)}}const vt=Symbol(void 0),yt=Symbol(void 0),_t=Symbol(void 0),gt=Symbol(void 0),bt=[];let Ot=null;function wt(e=!1){bt.push(Ot=e?null:[])}let St=1;function Et(e){St+=e}function jt(e){return e.dynamicChildren=St>0?Ot||o.Z6:null,bt.pop(),Ot=bt[bt.length-1]||null,St>0&&Ot&&Ot.push(e),e}function Pt(e,t,n,r,o,i){return jt(Nt(e,t,n,r,o,i,!0))}function kt(e,t,n,r,o){return jt(Tt(e,t,n,r,o,!0))}function Ct(e){return!!e&&!0===e.__v_isVNode}function It(e,t){return e.type===t.type&&e.key===t.key}const xt="__vInternal",At=({key:e})=>null!=e?e:null,Dt=({ref:e,ref_key:t,ref_for:n})=>null!=e?(0,o.HD)(e)||(0,r.dq)(e)||(0,o.mf)(e)?{i:C,r:e,k:t,f:!!n}:e:null;function Nt(e,t=null,n=null,r=0,i=null,l=(e===vt?0:1),c=!1,a=!1){const s={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&At(t),ref:t&&Dt(t),scopeId:I,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:l,patchFlag:r,dynamicProps:i,dynamicChildren:null,appContext:null,ctx:C};return a?(zt(s,n),128&l&&e.normalize(s)):n&&(s.shapeFlag|=(0,o.HD)(n)?8:16),St>0&&!c&&Ot&&(s.patchFlag>0||6&l)&&32!==s.patchFlag&&Ot.push(s),s}const Tt=function(e,t=null,n=null,i=0,l=null,c=!1){if(e&&e!==je||(e=_t),Ct(e)){const r=Rt(e,t,!0);return n&&zt(r,n),St>0&&!c&&Ot&&(6&r.shapeFlag?Ot[Ot.indexOf(e)]=r:Ot.push(r)),r.patchFlag|=-2,r}if(a=e,(0,o.mf)(a)&&"__vccOpts"in a&&(e=e.__vccOpts),t){t=function(e){return e?(0,r.X3)(e)||xt in e?(0,o.l7)({},e):e:null}(t);let{class:e,style:n}=t;e&&!(0,o.HD)(e)&&(t.class=(0,o.C_)(e)),(0,o.Kn)(n)&&((0,r.X3)(n)&&!(0,o.kJ)(n)&&(n=(0,o.l7)({},n)),t.style=(0,o.j5)(n))}var a;return Nt(e,t,n,i,l,(0,o.HD)(e)?1:(e=>e.__isSuspense)(e)?128:(e=>e.__isTeleport)(e)?64:(0,o.Kn)(e)?4:(0,o.mf)(e)?2:0,c,!0)};function Rt(e,t,n=!1){const{props:r,ref:i,patchFlag:l,children:c}=e,a=t?qt(r||{},t):r;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:a,key:a&&At(a),ref:t&&t.ref?n&&i?(0,o.kJ)(i)?i.concat(Dt(t)):[i,Dt(t)]:Dt(t):i,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:c,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==vt?-1===l?16:16|l:l,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&Rt(e.ssContent),ssFallback:e.ssFallback&&Rt(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function Lt(e=" ",t=0){return Tt(yt,null,e,t)}function Mt(e,t){const n=Tt(gt,null,e);return n.staticCount=t,n}function Ft(e="",t=!1){return t?(wt(),kt(_t,null,e)):Tt(_t,null,e)}function Ht(e){return null==e||"boolean"==typeof e?Tt(_t):(0,o.kJ)(e)?Tt(vt,null,e.slice()):"object"==typeof e?Ut(e):Tt(yt,null,String(e))}function Ut(e){return null===e.el&&-1!==e.patchFlag||e.memo?e:Rt(e)}function zt(e,t){let n=0;const{shapeFlag:r}=e;if(null==t)t=null;else if((0,o.kJ)(t))n=16;else if("object"==typeof t){if(65&r){const n=t.default;return void(n&&(n._c&&(n._d=!1),zt(e,n()),n._c&&(n._d=!0)))}{n=32;const r=t._;r||xt in t?3===r&&C&&(1===C.slots._?t._=1:(t._=2,e.patchFlag|=1024)):t._ctx=C}}else(0,o.mf)(t)?(t={default:t,_ctx:C},n=32):(t=String(t),64&r?(n=16,t=[Lt(t)]):n=8);e.children=t,e.shapeFlag|=n}function qt(...e){const t={};for(let n=0;n<e.length;n++){const r=e[n];for(const e in r)if("class"===e)t.class!==r.class&&(t.class=(0,o.C_)([t.class,r.class]));else if("style"===e)t.style=(0,o.j5)([t.style,r.style]);else if((0,o.F7)(e)){const n=t[e],i=r[e];!i||n===i||(0,o.kJ)(n)&&n.includes(i)||(t[e]=n?[].concat(n,i):i)}else""!==e&&(t[e]=r[e])}return t}function $t(e,t,n,r=null){l(e,t,7,[n,r])}const Bt=ot();let Vt=0;let Jt=null;const Wt=()=>Jt||C,Kt=e=>{Jt=e,e.scope.on()},Gt=()=>{Jt&&Jt.scope.off(),Jt=null};function Yt(e){return 4&e.vnode.shapeFlag}let Zt,Xt,Qt=!1;function en(e,t,n){(0,o.mf)(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:(0,o.Kn)(t)&&(e.setupState=(0,r.WL)(t)),tn(e,n)}function tn(e,t,n){const i=e.type;if(!e.render){if(!t&&Zt&&!i.render){const t=i.template||Me(e).template;if(t){const{isCustomElement:n,compilerOptions:r}=e.appContext.config,{delimiters:l,compilerOptions:c}=i,a=(0,o.l7)((0,o.l7)({isCustomElement:n,delimiters:l},r),c);i.render=Zt(t,a)}}e.render=i.render||o.dG,Xt&&Xt(e)}Kt(e),(0,r.Jd)(),function(e){const t=Me(e),n=e.proxy,i=e.ctx;Te=!1,t.beforeCreate&&Re(t.beforeCreate,e,"bc");const{data:l,computed:c,methods:a,watch:s,provide:u,inject:f,created:p,beforeMount:d,mounted:h,beforeUpdate:m,updated:v,activated:y,deactivated:_,beforeDestroy:g,beforeUnmount:b,destroyed:O,unmounted:w,render:S,renderTracked:E,renderTriggered:j,errorCaptured:P,serverPrefetch:k,expose:C,inheritAttrs:I,components:x,directives:A,filters:D}=t;if(f&&function(e,t,n=o.dG,i=!1){(0,o.kJ)(e)&&(e=ze(e));for(const n in e){const l=e[n];let c;c=(0,o.Kn)(l)?"default"in l?F(l.from||n,l.default,!0):F(l.from||n):F(l),(0,r.dq)(c)&&i?Object.defineProperty(t,n,{enumerable:!0,configurable:!0,get:()=>c.value,set:e=>c.value=e}):t[n]=c}}(f,i,null,e.appContext.config.unwrapInjectedRef),a)for(const e in a){const t=a[e];(0,o.mf)(t)&&(i[e]=t.bind(n))}if(l){const t=l.call(n,n);(0,o.Kn)(t)&&(e.data=(0,r.qj)(t))}if(Te=!0,c)for(const e in c){const t=c[e],r=(0,o.mf)(t)?t.bind(n,n):(0,o.mf)(t.get)?t.get.bind(n,n):o.dG,l=!(0,o.mf)(t)&&(0,o.mf)(t.set)?t.set.bind(n):o.dG,a=rn({get:r,set:l});Object.defineProperty(i,e,{enumerable:!0,configurable:!0,get:()=>a.value,set:e=>a.value=e})}if(s)for(const e in s)Le(s[e],i,n,e);if(u){const e=(0,o.mf)(u)?u.call(n):u;Reflect.ownKeys(e).forEach((t=>{M(t,e[t])}))}function N(e,t){(0,o.kJ)(t)?t.forEach((t=>e(t.bind(n)))):t&&e(t.bind(n))}if(p&&Re(p,e,"c"),N(fe,d),N(pe,h),N(de,m),N(he,v),N(ie,y),N(le,_),N(be,P),N(ge,E),N(_e,j),N(me,b),N(ve,w),N(ye,k),(0,o.kJ)(C))if(C.length){const t=e.exposed||(e.exposed={});C.forEach((e=>{Object.defineProperty(t,e,{get:()=>n[e],set:t=>n[e]=t})}))}else e.exposed||(e.exposed={});S&&e.render===o.dG&&(e.render=S),null!=I&&(e.inheritAttrs=I),x&&(e.components=x),A&&(e.directives=A)}(e),(0,r.lk)(),Gt()}function nn(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy((0,r.WL)((0,r.Xl)(e.exposed)),{get:(t,n)=>n in t?t[n]:n in Ae?Ae[n](e):void 0,has:(e,t)=>t in e||t in Ae}))}const rn=(e,t)=>(0,r.Fl)(e,t,Qt);function on(e,t,n){const r=arguments.length;return 2===r?(0,o.Kn)(t)&&!(0,o.kJ)(t)?Ct(t)?Tt(e,null,[t]):Tt(e,t):Tt(e,null,t):(r>3?n=Array.prototype.slice.call(arguments,2):3===r&&Ct(n)&&(n=[n]),Tt(e,t,n))}const ln=Symbol(""),cn=()=>F(ln),an="3.2.47"},9963:(e,t,n)=>{"use strict";n.d(t,{F8:()=>D,uT:()=>b,vr:()=>M});var r=n(3577),o=n(6252);n(2262);const i="undefined"!=typeof document?document:null,l=i&&i.createElement("template"),c={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,r)=>{const o=t?i.createElementNS("http://www.w3.org/2000/svg",e):i.createElement(e,n?{is:n}:void 0);return"select"===e&&r&&null!=r.multiple&&o.setAttribute("multiple",r.multiple),o},createText:e=>i.createTextNode(e),createComment:e=>i.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>i.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,r,o,i){const c=n?n.previousSibling:t.lastChild;if(o&&(o===i||o.nextSibling))for(;t.insertBefore(o.cloneNode(!0),n),o!==i&&(o=o.nextSibling););else{l.innerHTML=r?`<svg>${e}</svg>`:e;const o=l.content;if(r){const e=o.firstChild;for(;e.firstChild;)o.appendChild(e.firstChild);o.removeChild(e)}t.insertBefore(o,n)}return[c?c.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},a=/\s*!important$/;function s(e,t,n){if((0,r.kJ)(n))n.forEach((n=>s(e,t,n)));else if(null==n&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const o=function(e,t){const n=f[t];if(n)return n;let o=(0,r._A)(t);if("filter"!==o&&o in e)return f[t]=o;o=(0,r.kC)(o);for(let n=0;n<u.length;n++){const r=u[n]+o;if(r in e)return f[t]=r}return t}(e,t);a.test(n)?e.setProperty((0,r.rs)(o),n.replace(a,""),"important"):e[o]=n}}const u=["Webkit","Moz","ms"],f={},p="http://www.w3.org/1999/xlink";const d=/(?:Once|Passive|Capture)$/;let h=0;const m=Promise.resolve(),v=()=>h||(m.then((()=>h=0)),h=Date.now()),y=/^on[a-z]/;"undefined"!=typeof HTMLElement&&HTMLElement;const _="transition",g="animation",b=(e,{slots:t})=>(0,o.h)(o.P$,function(e){const t={};for(const n in e)n in O||(t[n]=e[n]);if(!1===e.css)return t;const{name:n="v",type:o,duration:i,enterFromClass:l=`${n}-enter-from`,enterActiveClass:c=`${n}-enter-active`,enterToClass:a=`${n}-enter-to`,appearFromClass:s=l,appearActiveClass:u=c,appearToClass:f=a,leaveFromClass:p=`${n}-leave-from`,leaveActiveClass:d=`${n}-leave-active`,leaveToClass:h=`${n}-leave-to`}=e,m=function(e){if(null==e)return null;if((0,r.Kn)(e))return[E(e.enter),E(e.leave)];{const t=E(e);return[t,t]}}(i),v=m&&m[0],y=m&&m[1],{onBeforeEnter:_,onEnter:g,onEnterCancelled:b,onLeave:C,onLeaveCancelled:x,onBeforeAppear:A=_,onAppear:D=g,onAppearCancelled:N=b}=t,T=(e,t,n)=>{P(e,t?f:a),P(e,t?u:c),n&&n()},R=(e,t)=>{e._isLeaving=!1,P(e,p),P(e,h),P(e,d),t&&t()},L=e=>(t,n)=>{const r=e?D:g,i=()=>T(t,e,n);w(r,[t,i]),k((()=>{P(t,e?s:l),j(t,e?f:a),S(r)||I(t,o,v,i)}))};return(0,r.l7)(t,{onBeforeEnter(e){w(_,[e]),j(e,l),j(e,c)},onBeforeAppear(e){w(A,[e]),j(e,s),j(e,u)},onEnter:L(!1),onAppear:L(!0),onLeave(e,t){e._isLeaving=!0;const n=()=>R(e,t);j(e,p),document.body.offsetHeight,j(e,d),k((()=>{e._isLeaving&&(P(e,p),j(e,h),S(C)||I(e,o,y,n))})),w(C,[e,n])},onEnterCancelled(e){T(e,!1),w(b,[e])},onAppearCancelled(e){T(e,!0),w(N,[e])},onLeaveCancelled(e){R(e),w(x,[e])}})}(e),t);b.displayName="Transition";const O={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String},w=(b.props=(0,r.l7)({},o.P$.props,O),(e,t=[])=>{(0,r.kJ)(e)?e.forEach((e=>e(...t))):e&&e(...t)}),S=e=>!!e&&((0,r.kJ)(e)?e.some((e=>e.length>1)):e.length>1);function E(e){return(0,r.He)(e)}function j(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.add(t))),(e._vtc||(e._vtc=new Set)).add(t)}function P(e,t){t.split(/\s+/).forEach((t=>t&&e.classList.remove(t)));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function k(e){requestAnimationFrame((()=>{requestAnimationFrame(e)}))}let C=0;function I(e,t,n,r){const o=e._endId=++C,i=()=>{o===e._endId&&r()};if(n)return setTimeout(i,n);const{type:l,timeout:c,propCount:a}=function(e,t){const n=window.getComputedStyle(e),r=e=>(n[e]||"").split(", "),o=r(`${_}Delay`),i=r(`${_}Duration`),l=x(o,i),c=r(`${g}Delay`),a=r(`${g}Duration`),s=x(c,a);let u=null,f=0,p=0;return t===_?l>0&&(u=_,f=l,p=i.length):t===g?s>0&&(u=g,f=s,p=a.length):(f=Math.max(l,s),u=f>0?l>s?_:g:null,p=u?u===_?i.length:a.length:0),{type:u,timeout:f,propCount:p,hasTransform:u===_&&/\b(transform|all)(,|$)/.test(r(`${_}Property`).toString())}}(e,t);if(!l)return r();const s=l+"end";let u=0;const f=()=>{e.removeEventListener(s,p),i()},p=t=>{t.target===e&&++u>=a&&f()};setTimeout((()=>{u<a&&f()}),c+1),e.addEventListener(s,p)}function x(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max(...t.map(((t,n)=>A(t)+A(e[n]))))}function A(e){return 1e3*Number(e.slice(0,-1).replace(",","."))}new WeakMap,new WeakMap;const D={beforeMount(e,{value:t},{transition:n}){e._vod="none"===e.style.display?"":e.style.display,n&&t?n.beforeEnter(e):N(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:r}){!t!=!n&&(r?t?(r.beforeEnter(e),N(e,!0),r.enter(e)):r.leave(e,(()=>{N(e,!1)})):N(e,t))},beforeUnmount(e,{value:t}){N(e,t)}};function N(e,t){e.style.display=t?e._vod:"none"}const T=(0,r.l7)({patchProp:(e,t,n,i,l=!1,c,a,u,f)=>{"class"===t?function(e,t,n){const r=e._vtc;r&&(t=(t?[t,...r]:[...r]).join(" ")),null==t?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}(e,i,l):"style"===t?function(e,t,n){const o=e.style,i=(0,r.HD)(n);if(n&&!i){if(t&&!(0,r.HD)(t))for(const e in t)null==n[e]&&s(o,e,"");for(const e in n)s(o,e,n[e])}else{const r=o.display;i?t!==n&&(o.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(o.display=r)}}(e,n,i):(0,r.F7)(t)?(0,r.tR)(t)||function(e,t,n,i,l=null){const c=e._vei||(e._vei={}),a=c[t];if(i&&a)a.value=i;else{const[n,s]=function(e){let t;if(d.test(e)){let n;for(t={};n=e.match(d);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}return[":"===e[2]?e.slice(3):(0,r.rs)(e.slice(2)),t]}(t);if(i){const a=c[t]=function(e,t){const n=e=>{if(e._vts){if(e._vts<=n.attached)return}else e._vts=Date.now();(0,o.$d)(function(e,t){if((0,r.kJ)(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map((e=>t=>!t._stopped&&e&&e(t)))}return t}(e,n.value),t,5,[e])};return n.value=e,n.attached=v(),n}(i,l);!function(e,t,n,r){e.addEventListener(t,n,r)}(e,n,a,s)}else a&&(function(e,t,n,r){e.removeEventListener(t,n,r)}(e,n,a,s),c[t]=void 0)}}(e,t,0,i,a):("."===t[0]?(t=t.slice(1),1):"^"===t[0]?(t=t.slice(1),0):function(e,t,n,o){return o?"innerHTML"===t||"textContent"===t||!!(t in e&&y.test(t)&&(0,r.mf)(n)):"spellcheck"!==t&&"draggable"!==t&&"translate"!==t&&("form"!==t&&(("list"!==t||"INPUT"!==e.tagName)&&(("type"!==t||"TEXTAREA"!==e.tagName)&&((!y.test(t)||!(0,r.HD)(n))&&t in e))))}(e,t,i,l))?function(e,t,n,o,i,l,c){if("innerHTML"===t||"textContent"===t)return o&&c(o,i,l),void(e[t]=null==n?"":n);if("value"===t&&"PROGRESS"!==e.tagName&&!e.tagName.includes("-")){e._value=n;const r=null==n?"":n;return e.value===r&&"OPTION"!==e.tagName||(e.value=r),void(null==n&&e.removeAttribute(t))}let a=!1;if(""===n||null==n){const o=typeof e[t];"boolean"===o?n=(0,r.yA)(n):null==n&&"string"===o?(n="",a=!0):"number"===o&&(n=0,a=!0)}try{e[t]=n}catch(e){}a&&e.removeAttribute(t)}(e,t,i,c,a,u,f):("true-value"===t?e._trueValue=i:"false-value"===t&&(e._falseValue=i),function(e,t,n,o,i){if(o&&t.startsWith("xlink:"))null==n?e.removeAttributeNS(p,t.slice(6,t.length)):e.setAttributeNS(p,t,n);else{const o=(0,r.Pq)(t);null==n||o&&!(0,r.yA)(n)?e.removeAttribute(t):e.setAttribute(t,o?"":n)}}(e,t,i,l))}},c);let R,L=!1;const M=(...e)=>{const t=(R=L?R:(0,o.Eo)(T),L=!0,R).createApp(...e),{mount:n}=t;return t.mount=e=>{const t=function(e){if((0,r.HD)(e))return document.querySelector(e);return e}(e);if(t)return n(t,!0,t instanceof SVGElement)},t}},3577:(e,t,n)=>{"use strict";function r(e,t){const n=Object.create(null),r=e.split(",");for(let e=0;e<r.length;e++)n[r[e]]=!0;return t?e=>!!n[e.toLowerCase()]:e=>!!n[e]}n.d(t,{C_:()=>u,DM:()=>x,E9:()=>re,F7:()=>w,Gg:()=>$,HD:()=>T,He:()=>te,Kj:()=>D,Kn:()=>L,NO:()=>b,Nj:()=>Q,Od:()=>j,PO:()=>z,Pq:()=>f,RI:()=>k,S0:()=>q,W7:()=>U,WV:()=>d,Z6:()=>_,_A:()=>J,_N:()=>I,aU:()=>Z,dG:()=>g,e1:()=>o,fY:()=>r,h5:()=>ee,hR:()=>Y,hq:()=>h,ir:()=>X,j5:()=>i,kC:()=>G,kJ:()=>C,kT:()=>y,l7:()=>E,mf:()=>N,rs:()=>K,tI:()=>M,tR:()=>S,yA:()=>p,yk:()=>R,zw:()=>m});const o=r("Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt");function i(e){if(C(e)){const t={};for(let n=0;n<e.length;n++){const r=e[n],o=T(r)?s(r):i(r);if(o)for(const e in o)t[e]=o[e]}return t}return T(e)||L(e)?e:void 0}const l=/;(?![^(]*\))/g,c=/:([^]+)/,a=/\/\*.*?\*\//gs;function s(e){const t={};return e.replace(a,"").split(l).forEach((e=>{if(e){const n=e.split(c);n.length>1&&(t[n[0].trim()]=n[1].trim())}})),t}function u(e){let t="";if(T(e))t=e;else if(C(e))for(let n=0;n<e.length;n++){const r=u(e[n]);r&&(t+=r+" ")}else if(L(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const f=r("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function p(e){return!!e||""===e}function d(e,t){if(e===t)return!0;let n=A(e),r=A(t);if(n||r)return!(!n||!r)&&e.getTime()===t.getTime();if(n=R(e),r=R(t),n||r)return e===t;if(n=C(e),r=C(t),n||r)return!(!n||!r)&&function(e,t){if(e.length!==t.length)return!1;let n=!0;for(let r=0;n&&r<e.length;r++)n=d(e[r],t[r]);return n}(e,t);if(n=L(e),r=L(t),n||r){if(!n||!r)return!1;if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e){const r=e.hasOwnProperty(n),o=t.hasOwnProperty(n);if(r&&!o||!r&&o||!d(e[n],t[n]))return!1}}return String(e)===String(t)}function h(e,t){return e.findIndex((e=>d(e,t)))}const m=e=>T(e)?e:null==e?"":C(e)||L(e)&&(e.toString===F||!N(e.toString))?JSON.stringify(e,v,2):String(e),v=(e,t)=>t&&t.__v_isRef?v(e,t.value):I(t)?{[`Map(${t.size})`]:[...t.entries()].reduce(((e,[t,n])=>(e[`${t} =>`]=n,e)),{})}:x(t)?{[`Set(${t.size})`]:[...t.values()]}:!L(t)||C(t)||z(t)?t:String(t),y={},_=[],g=()=>{},b=()=>!1,O=/^on[^a-z]/,w=e=>O.test(e),S=e=>e.startsWith("onUpdate:"),E=Object.assign,j=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},P=Object.prototype.hasOwnProperty,k=(e,t)=>P.call(e,t),C=Array.isArray,I=e=>"[object Map]"===H(e),x=e=>"[object Set]"===H(e),A=e=>"[object Date]"===H(e),D=e=>"[object RegExp]"===H(e),N=e=>"function"==typeof e,T=e=>"string"==typeof e,R=e=>"symbol"==typeof e,L=e=>null!==e&&"object"==typeof e,M=e=>L(e)&&N(e.then)&&N(e.catch),F=Object.prototype.toString,H=e=>F.call(e),U=e=>H(e).slice(8,-1),z=e=>"[object Object]"===H(e),q=e=>T(e)&&"NaN"!==e&&"-"!==e[0]&&""+parseInt(e,10)===e,$=r(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),B=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},V=/-(\w)/g,J=B((e=>e.replace(V,((e,t)=>t?t.toUpperCase():"")))),W=/\B([A-Z])/g,K=B((e=>e.replace(W,"-$1").toLowerCase())),G=B((e=>e.charAt(0).toUpperCase()+e.slice(1))),Y=B((e=>e?`on${G(e)}`:"")),Z=(e,t)=>!Object.is(e,t),X=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},Q=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},ee=e=>{const t=parseFloat(e);return isNaN(t)?e:t},te=e=>{const t=T(e)?Number(e):NaN;return isNaN(t)?e:t};let ne;const re=()=>ne||(ne="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{})},5698:(e,t,n)=>{"use strict";var r=n(3131),o=n(9947),i=n(4611),l=n(6056),c=n(4634),a=n(7788),s=n(9963),u=n(6252),f=n(2201),p=n(4546),d=n(3447),h=n(704);const m=s.vr,v=f.PO;(async()=>{const e=m({name:"VuepressApp",setup(){(0,p.BK)();for(const e of i.l)e();return()=>[(0,u.h)(f.MA),...o.p.map((e=>(0,u.h)(e)))]}}),t=(0,f.p7)({history:v((0,a.U1)(p.HM.value.base)),routes:c.g,scrollBehavior:(e,t,n)=>n||(e.hash?{el:e.hash}:{top:0})});t.beforeResolve((async(e,t)=>{var n;e.path===t.path&&t!==f.AJ||([p.Xp.value]=await Promise.all([(0,p.C4)(e.name),null===(n=l.b[e.name])||void 0===n?void 0:n.__asyncLoader()]))})),((e,t)=>{const n=(0,u.Fl)((()=>(0,p.S)(p.HM.value.locales,t.currentRoute.value.path))),r=(0,u.Fl)((()=>(0,p.kY)(p.HM.value,n.value))),o=(0,u.Fl)((()=>(0,p.hN)(p.Xp.value))),i=(0,u.Fl)((()=>(0,p.lp)(p.Xp.value,r.value))),l=(0,u.Fl)((()=>(0,p.nl)(i.value,o.value,r.value))),c=(0,u.Fl)((()=>(0,p.Vo)(p.Xp.value)));e.provide(p.C3,n),e.provide(p.AE,r),e.provide(p.PY,o),e.provide(p.et,i),e.provide(p.VV,l),e.provide(p.b5,c),Object.defineProperties(e.config.globalProperties,{$frontmatter:{get:()=>o.value},$headTitle:{get:()=>i.value},$lang:{get:()=>c.value},$page:{get:()=>p.Xp.value},$routeLocale:{get:()=>n.value},$site:{get:()=>p.HM.value},$siteLocale:{get:()=>r.value},$withBase:{get:()=>d.pJ}})})(e,t),(e=>{e.component("ClientOnly",h.qx),e.component("Content",h.VY),e.component("OutboundLink",h.MS)})(e);for(const n of r.g)await n({app:e,router:t,siteData:p.HM});return e.use(t),{app:e,router:t}})().then((({app:e,router:t})=>{t.isReady().then((()=>{e.mount("#app")}))}))},4802:(e,t,n)=>{"use strict";n.d(t,{Y:()=>c});var r=n(4150),o=n(7788),i=n(6252),l=n(4546);const c=(0,i.aZ)({name:"Vuepress",setup(){const e=(0,l.Vi)(),t=(0,i.Fl)((()=>{let t;if(e.value.path){const n=e.value.frontmatter.layout;t=(0,o.HD)(n)?n:"Layout"}else t="404";return r.Z[t]||(0,i.up)(t,!1)}));return()=>(0,i.h)(t.value)}})},704:(e,t,n)=>{"use strict";n.d(t,{qx:()=>i,VY:()=>a,MS:()=>u});var r=n(6252),o=n(2262);const i=(0,r.aZ)({setup(e,t){const n=(0,o.iH)(!1);return(0,r.bv)((()=>{n.value=!0})),()=>{var e,r;return n.value?null===(r=(e=t.slots).default)||void 0===r?void 0:r.call(e):null}}});var l=n(6056),c=n(4546);const a=e=>{let t;t=e.pageKey?e.pageKey:(0,c.Vi)().value.key;const n=l.b[t];return n?(0,r.h)(n):(0,r.h)("div","404 Not Found")};a.displayName="Content",a.props={pageKey:{type:String,required:!1}};const s=(0,r.h)("svg",{class:"icon outbound",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"},[(0,r.h)("path",{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}),(0,r.h)("polygon",{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"})]),u=(e,{slots:t})=>{var n;return(0,r.h)("span",[s,null===(n=t.default)||void 0===n?void 0:n.call(t)])};u.displayName="OutboundLink",n(4802)},4546:(e,t,n)=>{"use strict";n.d(t,{Xp:()=>c,PY:()=>f,VV:()=>m,et:()=>y,b5:()=>g,C4:()=>s,hN:()=>d,nl:()=>v,lp:()=>_,Vo:()=>O,S:()=>E,kY:()=>x,C3:()=>w,BK:()=>N,HM:()=>P,AE:()=>C,Vi:()=>a,I2:()=>p,Ym:()=>b,I:()=>S,WF:()=>k,I5:()=>I});var r=n(2262),o=n(9706);const i=(0,r.iH)(o.T),l=(0,r.OT)({key:"",path:"",title:"",lang:"",frontmatter:{},excerpt:"",headers:[]}),c=(0,r.iH)(l),a=()=>c,s=async e=>{const t=i.value[e];if(!t)return l;const n=await t();return null!=n?n:l};var u=n(6252);const f=Symbol(""),p=()=>{const e=(0,u.f3)(f);if(!e)throw new Error("usePageFrontmatter() is called without provider.");return e},d=e=>e.frontmatter;var h=n(7788);const m=Symbol(""),v=(e,t,n)=>{const r=(0,h.HD)(t.description)?t.description:n.description,o=[...(0,h.kJ)(t.head)?t.head:[],...n.head,["title",{},e],["meta",{name:"description",content:r}]];return(0,h.H7)(o)},y=Symbol(""),_=(e,t)=>`${e.title?`${e.title} | `:""}${t.title}`,g=Symbol(""),b=()=>{const e=(0,u.f3)(g);if(!e)throw new Error("usePageLang() is called without provider.");return e},O=e=>e.lang||"en",w=Symbol(""),S=()=>{const e=(0,u.f3)(w);if(!e)throw new Error("useRouteLocale() is called without provider.");return e},E=(e,t)=>(0,h.gb)(e,t);var j=n(5220);const P=(0,r.iH)(j.H),k=()=>P,C=Symbol(""),I=()=>{const e=(0,u.f3)(C);if(!e)throw new Error("useSiteLocaleData() is called without provider.");return e},x=(e,t)=>({...e,...e.locales[t]});var A=n(2201);const D=Symbol(""),N=()=>{const e=(0,A.yj)(),t=(()=>{const e=(0,u.f3)(m);if(!e)throw new Error("usePageHead() is called without provider.");return e})(),n=b(),o=(0,r.iH)([]),i=()=>{document.documentElement.lang=n.value,o.value.forEach((e=>{e.parentNode===document.head&&document.head.removeChild(e)})),o.value.splice(0,o.value.length),t.value.forEach((e=>{const t=R(e);null!==t&&(document.head.appendChild(t),o.value.push(t))}))};(0,u.JJ)(D,i),(0,u.bv)((()=>{t.value.forEach((e=>{const t=T(e);t&&o.value.push(t)})),i(),(0,u.YP)((()=>e.path),(()=>i()))}))},T=([e,t,n=""])=>{const r=`head > ${e}${Object.entries(t).map((([e,t])=>(0,h.HD)(t)?`[${e}="${t}"]`:!0===t?`[${e}]`:"")).join("")}`;return Array.from(document.querySelectorAll(r)).find((e=>e.innerText===n))||null},R=([e,t,n])=>{if(!(0,h.HD)(e))return null;const r=document.createElement(e);return(0,h.PO)(t)&&Object.entries(t).forEach((([e,t])=>{(0,h.HD)(t)?r.setAttribute(e,t):!0===t&&r.setAttribute(e,"")})),(0,h.HD)(n)&&r.appendChild(document.createTextNode(n)),r}},7621:(e,t,n)=>{"use strict";n.d(t,{C3:()=>o.C3,F2:()=>i.F2,I:()=>o.I,I2:()=>o.I2,I5:()=>o.I5,MS:()=>r.MS,Vi:()=>o.Vi,WF:()=>o.WF,Ym:()=>o.Ym,pJ:()=>i.pJ,vW:()=>i.vW}),n(5698);var r=n(704),o=n(4546),i=n(3447)},3447:(e,t,n)=>{"use strict";n.d(t,{vW:()=>r,F2:()=>o,pJ:()=>c});const r=e=>e,o=e=>e;var i=n(7788),l=n(4546);const c=e=>(0,i.ak)(e)?e:`${(0,l.WF)().value.base}${(0,i.FY)(e)}`},1263:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var r=n(7621),o=n(2938),i=n(6252),l=n(2201);const c=async(e,...t)=>{const{scrollBehavior:n}=e.options;e.options.scrollBehavior=void 0,await e.replace(...t).finally((()=>e.options.scrollBehavior=n))},a=(0,r.F2)((()=>{(({headerLinkSelector:e,headerAnchorSelector:t,delay:n,offset:a=5})=>{const s=(0,l.tv)(),u=(0,r.Vi)(),f=(0,o.D)((()=>(()=>{var n,r,o,i;const l=Array.from(document.querySelectorAll(e)),u=Array.from(document.querySelectorAll(t)).filter((e=>l.some((t=>t.hash===e.hash)))),f=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),p=window.innerHeight+f,d=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),h=Math.abs(d-p)<a;for(let e=0;e<u.length;e++){const t=u[e],l=u[e+1],p=0===e&&0===f,d=f>=(null!==(r=null===(n=t.parentElement)||void 0===n?void 0:n.offsetTop)&&void 0!==r?r:0)-a,m=!l||f<(null!==(i=null===(o=l.parentElement)||void 0===o?void 0:o.offsetTop)&&void 0!==i?i:0)-a;if(!(p||d&&m))continue;const v=decodeURIComponent(s.currentRoute.value.hash),y=decodeURIComponent(t.hash);if(v===y)return;if(h)for(let t=e+1;t<u.length;t++)if(v===decodeURIComponent(u[t].hash))return;return void c(s,{hash:y,force:!0})}})()),n);(0,i.bv)((()=>{f(),window.addEventListener("scroll",(()=>f()))})),(0,i.Jd)((()=>{window.removeEventListener("scroll",(()=>f()))})),(0,i.YP)((()=>u.value.path),(()=>f()))})({headerLinkSelector:"a.sidebar-item",headerAnchorSelector:".header-anchor",delay:200,offset:5})}))},3051:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s});var r=n(2938),o=n(6252),i=n(2262),l=n(9963);const c=()=>window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,a=()=>window.scrollTo({top:0,behavior:"smooth"}),s=(0,o.aZ)({name:"BackToTop",setup(){const e=(0,i.iH)(0),t=(0,o.Fl)((()=>e.value>300));(0,o.bv)((()=>{e.value=c(),window.addEventListener("scroll",(()=>(0,r.D)((()=>{e.value=c()}),100)))}));const n=(0,o.h)("div",{class:"back-to-top",onClick:a});return()=>(0,o.h)(l.uT,{name:"back-to-top"},{default:()=>t.value?n:null})}})},6934:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Qr});var r=n(7621),o=n(6252);function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,o=!1,i=void 0;try{for(var l,c=e[Symbol.iterator]();!(r=(l=c.next()).done)&&(n.push(l.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return n}}(e,t)||p(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e){return function(e){if(Array.isArray(e))return d(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||p(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e,t){if(e){if("string"==typeof e)return d(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?d(e,t):void 0}}function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var h,m,v,y,_,g={},b=[],O=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function w(e,t){for(var n in t)e[n]=t[n];return e}function S(e){var t=e.parentNode;t&&t.removeChild(e)}function E(e,t,n){var r,o,i,l=arguments,c={};for(i in t)"key"==i?r=t[i]:"ref"==i?o=t[i]:c[i]=t[i];if(arguments.length>3)for(n=[n],i=3;i<arguments.length;i++)n.push(l[i]);if(null!=n&&(c.children=n),"function"==typeof e&&null!=e.defaultProps)for(i in e.defaultProps)void 0===c[i]&&(c[i]=e.defaultProps[i]);return j(e,c,r,o,null)}function j(e,t,n,r,o){var i={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==o?++h.__v:o};return null!=h.vnode&&h.vnode(i),i}function P(e){return e.children}function k(e,t){this.props=e,this.context=t}function C(e,t){if(null==t)return e.__?C(e.__,e.__.__k.indexOf(e)+1):null;for(var n;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e)return n.__e;return"function"==typeof e.type?C(e):null}function I(e){var t,n;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,t=0;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e){e.__e=e.__c.base=n.__e;break}return I(e)}}function x(e){(!e.__d&&(e.__d=!0)&&m.push(e)&&!A.__r++||y!==h.debounceRendering)&&((y=h.debounceRendering)||v)(A)}function A(){for(var e;A.__r=m.length;)e=m.sort((function(e,t){return e.__v.__b-t.__v.__b})),m=[],e.some((function(e){var t,n,r,o,i,l;e.__d&&(i=(o=(t=e).__v).__e,(l=t.__P)&&(n=[],(r=w({},o)).__v=o.__v+1,U(l,o,r,t.__n,void 0!==l.ownerSVGElement,null!=o.__h?[i]:null,n,null==i?C(o):i,o.__h),z(n,o),o.__e!=i&&I(o)))}))}function D(e,t,n,r,o,i,l,c,a,s){var u,f,p,d,h,m,v,y=r&&r.__k||b,_=y.length;for(n.__k=[],u=0;u<t.length;u++)if(null!=(d=n.__k[u]=null==(d=t[u])||"boolean"==typeof d?null:"string"==typeof d||"number"==typeof d?j(null,d,null,null,d):Array.isArray(d)?j(P,{children:d},null,null,null):d.__b>0?j(d.type,d.props,d.key,null,d.__v):d)){if(d.__=n,d.__b=n.__b+1,null===(p=y[u])||p&&d.key==p.key&&d.type===p.type)y[u]=void 0;else for(f=0;f<_;f++){if((p=y[f])&&d.key==p.key&&d.type===p.type){y[f]=void 0;break}p=null}U(e,d,p=p||g,o,i,l,c,a,s),h=d.__e,(f=d.ref)&&p.ref!=f&&(v||(v=[]),p.ref&&v.push(p.ref,null,d),v.push(f,d.__c||h,d)),null!=h?(null==m&&(m=h),"function"==typeof d.type&&null!=d.__k&&d.__k===p.__k?d.__d=a=N(d,a,e):a=R(e,d,p,y,h,a),s||"option"!==n.type?"function"==typeof n.type&&(n.__d=a):e.value=""):a&&p.__e==a&&a.parentNode!=e&&(a=C(p))}for(n.__e=m,u=_;u--;)null!=y[u]&&("function"==typeof n.type&&null!=y[u].__e&&y[u].__e==n.__d&&(n.__d=C(r,u+1)),B(y[u],y[u]));if(v)for(u=0;u<v.length;u++)$(v[u],v[++u],v[++u])}function N(e,t,n){var r,o;for(r=0;r<e.__k.length;r++)(o=e.__k[r])&&(o.__=e,t="function"==typeof o.type?N(o,t,n):R(n,o,o,e.__k,o.__e,t));return t}function T(e,t){return t=t||[],null==e||"boolean"==typeof e||(Array.isArray(e)?e.some((function(e){T(e,t)})):t.push(e)),t}function R(e,t,n,r,o,i){var l,c,a;if(void 0!==t.__d)l=t.__d,t.__d=void 0;else if(null==n||o!=i||null==o.parentNode)e:if(null==i||i.parentNode!==e)e.appendChild(o),l=null;else{for(c=i,a=0;(c=c.nextSibling)&&a<r.length;a+=2)if(c==o)break e;e.insertBefore(o,i),l=i}return void 0!==l?l:o.nextSibling}function L(e,t,n){"-"===t[0]?e.setProperty(t,n):e[t]=null==n?"":"number"!=typeof n||O.test(t)?n:n+"px"}function M(e,t,n,r,o){var i;e:if("style"===t)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof r&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||L(e.style,t,"");if(n)for(t in n)r&&n[t]===r[t]||L(e.style,t,n[t])}else if("o"===t[0]&&"n"===t[1])i=t!==(t=t.replace(/Capture$/,"")),t=t.toLowerCase()in e?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.l[t+i]=n,n?r||e.addEventListener(t,i?H:F,i):e.removeEventListener(t,i?H:F,i);else if("dangerouslySetInnerHTML"!==t){if(o)t=t.replace(/xlink[H:h]/,"h").replace(/sName$/,"s");else if("href"!==t&&"list"!==t&&"form"!==t&&"download"!==t&&t in e)try{e[t]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null!=n&&(!1!==n||"a"===t[0]&&"r"===t[1])?e.setAttribute(t,n):e.removeAttribute(t))}}function F(e){this.l[e.type+!1](h.event?h.event(e):e)}function H(e){this.l[e.type+!0](h.event?h.event(e):e)}function U(e,t,n,r,o,i,l,c,a){var s,u,f,p,d,m,v,y,_,g,b,O=t.type;if(void 0!==t.constructor)return null;null!=n.__h&&(a=n.__h,c=t.__e=n.__e,t.__h=null,i=[c]),(s=h.__b)&&s(t);try{e:if("function"==typeof O){if(y=t.props,_=(s=O.contextType)&&r[s.__c],g=s?_?_.props.value:s.__:r,n.__c?v=(u=t.__c=n.__c).__=u.__E:("prototype"in O&&O.prototype.render?t.__c=u=new O(y,g):(t.__c=u=new k(y,g),u.constructor=O,u.render=V),_&&_.sub(u),u.props=y,u.state||(u.state={}),u.context=g,u.__n=r,f=u.__d=!0,u.__h=[]),null==u.__s&&(u.__s=u.state),null!=O.getDerivedStateFromProps&&(u.__s==u.state&&(u.__s=w({},u.__s)),w(u.__s,O.getDerivedStateFromProps(y,u.__s))),p=u.props,d=u.state,f)null==O.getDerivedStateFromProps&&null!=u.componentWillMount&&u.componentWillMount(),null!=u.componentDidMount&&u.__h.push(u.componentDidMount);else{if(null==O.getDerivedStateFromProps&&y!==p&&null!=u.componentWillReceiveProps&&u.componentWillReceiveProps(y,g),!u.__e&&null!=u.shouldComponentUpdate&&!1===u.shouldComponentUpdate(y,u.__s,g)||t.__v===n.__v){u.props=y,u.state=u.__s,t.__v!==n.__v&&(u.__d=!1),u.__v=t,t.__e=n.__e,t.__k=n.__k,u.__h.length&&l.push(u);break e}null!=u.componentWillUpdate&&u.componentWillUpdate(y,u.__s,g),null!=u.componentDidUpdate&&u.__h.push((function(){u.componentDidUpdate(p,d,m)}))}u.context=g,u.props=y,u.state=u.__s,(s=h.__r)&&s(t),u.__d=!1,u.__v=t,u.__P=e,s=u.render(u.props,u.state,u.context),u.state=u.__s,null!=u.getChildContext&&(r=w(w({},r),u.getChildContext())),f||null==u.getSnapshotBeforeUpdate||(m=u.getSnapshotBeforeUpdate(p,d)),b=null!=s&&s.type===P&&null==s.key?s.props.children:s,D(e,Array.isArray(b)?b:[b],t,n,r,o,i,l,c,a),u.base=t.__e,t.__h=null,u.__h.length&&l.push(u),v&&(u.__E=u.__=null),u.__e=!1}else null==i&&t.__v===n.__v?(t.__k=n.__k,t.__e=n.__e):t.__e=q(n.__e,t,n,r,o,i,l,a);(s=h.diffed)&&s(t)}catch(e){t.__v=null,(a||null!=i)&&(t.__e=c,t.__h=!!a,i[i.indexOf(c)]=null),h.__e(e,t,n)}}function z(e,t){h.__c&&h.__c(t,e),e.some((function(t){try{e=t.__h,t.__h=[],e.some((function(e){e.call(t)}))}catch(e){h.__e(e,t.__v)}}))}function q(e,t,n,r,o,i,l,c){var a,s,u,f,p=n.props,d=t.props,h=t.type,m=0;if("svg"===h&&(o=!0),null!=i)for(;m<i.length;m++)if((a=i[m])&&(a===e||(h?a.localName==h:3==a.nodeType))){e=a,i[m]=null;break}if(null==e){if(null===h)return document.createTextNode(d);e=o?document.createElementNS("http://www.w3.org/2000/svg",h):document.createElement(h,d.is&&d),i=null,c=!1}if(null===h)p===d||c&&e.data===d||(e.data=d);else{if(i=i&&b.slice.call(e.childNodes),s=(p=n.props||g).dangerouslySetInnerHTML,u=d.dangerouslySetInnerHTML,!c){if(null!=i)for(p={},f=0;f<e.attributes.length;f++)p[e.attributes[f].name]=e.attributes[f].value;(u||s)&&(u&&(s&&u.__html==s.__html||u.__html===e.innerHTML)||(e.innerHTML=u&&u.__html||""))}if(function(e,t,n,r,o){var i;for(i in n)"children"===i||"key"===i||i in t||M(e,i,null,n[i],r);for(i in t)o&&"function"!=typeof t[i]||"children"===i||"key"===i||"value"===i||"checked"===i||n[i]===t[i]||M(e,i,t[i],n[i],r)}(e,d,p,o,c),u)t.__k=[];else if(m=t.props.children,D(e,Array.isArray(m)?m:[m],t,n,r,o&&"foreignObject"!==h,i,l,e.firstChild,c),null!=i)for(m=i.length;m--;)null!=i[m]&&S(i[m]);c||("value"in d&&void 0!==(m=d.value)&&(m!==e.value||"progress"===h&&!m)&&M(e,"value",m,p.value,!1),"checked"in d&&void 0!==(m=d.checked)&&m!==e.checked&&M(e,"checked",m,p.checked,!1))}return e}function $(e,t,n){try{"function"==typeof e?e(t):e.current=t}catch(e){h.__e(e,n)}}function B(e,t,n){var r,o,i;if(h.unmount&&h.unmount(e),(r=e.ref)&&(r.current&&r.current!==e.__e||$(r,null,t)),n||"function"==typeof e.type||(n=null!=(o=e.__e)),e.__e=e.__d=void 0,null!=(r=e.__c)){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(e){h.__e(e,t)}r.base=r.__P=null}if(r=e.__k)for(i=0;i<r.length;i++)r[i]&&B(r[i],t,n);null!=o&&S(o)}function V(e,t,n){return this.constructor(e,n)}function J(e,t,n){var r,o,i;h.__&&h.__(e,t),o=(r="function"==typeof n)?null:n&&n.__k||t.__k,i=[],U(t,e=(!r&&n||t).__k=E(P,null,[e]),o||g,g,void 0!==t.ownerSVGElement,!r&&n?[n]:o?null:t.firstChild?b.slice.call(t.childNodes):null,i,!r&&n?n:o?o.__e:t.firstChild,r),z(i,e)}function W(e,t){J(e,t,W)}function K(e,t,n){var r,o,i,l=arguments,c=w({},e.props);for(i in t)"key"==i?r=t[i]:"ref"==i?o=t[i]:c[i]=t[i];if(arguments.length>3)for(n=[n],i=3;i<arguments.length;i++)n.push(l[i]);return null!=n&&(c.children=n),j(e.type,c,r||e.key,o||e.ref,null)}h={__e:function(e,t){for(var n,r,o;t=t.__;)if((n=t.__c)&&!n.__)try{if((r=n.constructor)&&null!=r.getDerivedStateFromError&&(n.setState(r.getDerivedStateFromError(e)),o=n.__d),null!=n.componentDidCatch&&(n.componentDidCatch(e),o=n.__d),o)return n.__E=n}catch(t){e=t}throw e},__v:0},k.prototype.setState=function(e,t){var n;n=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=w({},this.state),"function"==typeof e&&(e=e(w({},n),this.props)),e&&w(n,e),null!=e&&this.__v&&(t&&this.__h.push(t),x(this))},k.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),x(this))},k.prototype.render=P,m=[],v="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,A.__r=0,_=0;var G,Y,Z,X=0,Q=[],ee=h.__b,te=h.__r,ne=h.diffed,re=h.__c,oe=h.unmount;function ie(e,t){h.__h&&h.__h(Y,e,X||t),X=0;var n=Y.__H||(Y.__H={__:[],__h:[]});return e>=n.__.length&&n.__.push({}),n.__[e]}function le(e){return X=1,ce(ve,e)}function ce(e,t,n){var r=ie(G++,2);return r.t=e,r.__c||(r.__=[n?n(t):ve(void 0,t),function(e){var t=r.t(r.__[0],e);r.__[0]!==t&&(r.__=[t,r.__[1]],r.__c.setState({}))}],r.__c=Y),r.__}function ae(e,t){var n=ie(G++,3);!h.__s&&me(n.__H,t)&&(n.__=e,n.__H=t,Y.__H.__h.push(n))}function se(e,t){var n=ie(G++,4);!h.__s&&me(n.__H,t)&&(n.__=e,n.__H=t,Y.__h.push(n))}function ue(e,t){var n=ie(G++,7);return me(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function fe(){Q.forEach((function(e){if(e.__P)try{e.__H.__h.forEach(de),e.__H.__h.forEach(he),e.__H.__h=[]}catch(t){e.__H.__h=[],h.__e(t,e.__v)}})),Q=[]}h.__b=function(e){Y=null,ee&&ee(e)},h.__r=function(e){te&&te(e),G=0;var t=(Y=e.__c).__H;t&&(t.__h.forEach(de),t.__h.forEach(he),t.__h=[])},h.diffed=function(e){ne&&ne(e);var t=e.__c;t&&t.__H&&t.__H.__h.length&&(1!==Q.push(t)&&Z===h.requestAnimationFrame||((Z=h.requestAnimationFrame)||function(e){var t,n=function(){clearTimeout(r),pe&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,100);pe&&(t=requestAnimationFrame(n))})(fe)),Y=void 0},h.__c=function(e,t){t.some((function(e){try{e.__h.forEach(de),e.__h=e.__h.filter((function(e){return!e.__||he(e)}))}catch(n){t.some((function(e){e.__h&&(e.__h=[])})),t=[],h.__e(n,e.__v)}})),re&&re(e,t)},h.unmount=function(e){oe&&oe(e);var t=e.__c;if(t&&t.__H)try{t.__H.__.forEach(de)}catch(e){h.__e(e,t.__v)}};var pe="function"==typeof requestAnimationFrame;function de(e){var t=Y;"function"==typeof e.__c&&e.__c(),Y=t}function he(e){var t=Y;e.__c=e.__(),Y=t}function me(e,t){return!e||e.length!==t.length||t.some((function(t,n){return t!==e[n]}))}function ve(e,t){return"function"==typeof t?t(e):t}function ye(e,t){for(var n in t)e[n]=t[n];return e}function _e(e,t){for(var n in e)if("__source"!==n&&!(n in t))return!0;for(var r in t)if("__source"!==r&&e[r]!==t[r])return!0;return!1}function ge(e){this.props=e}(ge.prototype=new k).isPureReactComponent=!0,ge.prototype.shouldComponentUpdate=function(e,t){return _e(this.props,e)||_e(this.state,t)};var be=h.__b;h.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),be&&be(e)};var Oe="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,we=function(e,t){return null==e?null:T(T(e).map(t))},Se={map:we,forEach:we,count:function(e){return e?T(e).length:0},only:function(e){var t=T(e);if(1!==t.length)throw"Children.only";return t[0]},toArray:T},Ee=h.__e;function je(){this.__u=0,this.t=null,this.__b=null}function Pe(e){var t=e.__.__c;return t&&t.__e&&t.__e(e)}function ke(){this.u=null,this.o=null}h.__e=function(e,t,n){if(e.then)for(var r,o=t;o=o.__;)if((r=o.__c)&&r.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),r.__c(e,t);Ee(e,t,n)},(je.prototype=new k).__c=function(e,t){var n=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(n);var o=Pe(r.__v),i=!1,l=function(){i||(i=!0,n.componentWillUnmount=n.__c,o?o(c):c())};n.__c=n.componentWillUnmount,n.componentWillUnmount=function(){l(),n.__c&&n.__c()};var c=function(){if(!--r.__u){if(r.state.__e){var e=r.state.__e;r.__v.__k[0]=function e(t,n,r){return t&&(t.__v=null,t.__k=t.__k&&t.__k.map((function(t){return e(t,n,r)})),t.__c&&t.__c.__P===n&&(t.__e&&r.insertBefore(t.__e,t.__d),t.__c.__e=!0,t.__c.__P=r)),t}(e,e.__c.__P,e.__c.__O)}var t;for(r.setState({__e:r.__b=null});t=r.t.pop();)t.forceUpdate()}},a=!0===t.__h;r.__u++||a||r.setState({__e:r.__b=r.__v.__k[0]}),e.then(l,l)},je.prototype.componentWillUnmount=function(){this.t=[]},je.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function e(t,n,r){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach((function(e){"function"==typeof e.__c&&e.__c()})),t.__c.__H=null),null!=(t=ye({},t)).__c&&(t.__c.__P===r&&(t.__c.__P=n),t.__c=null),t.__k=t.__k&&t.__k.map((function(t){return e(t,n,r)}))),t}(this.__b,n,r.__O=r.__P)}this.__b=null}var o=t.__e&&E(P,null,e.fallback);return o&&(o.__h=null),[E(P,null,t.__e?null:e.children),o]};var Ce=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&("t"!==e.props.revealOrder[0]||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]<n[0])break;e.u=n=n[2]}};function Ie(e){return this.getChildContext=function(){return e.context},e.children}function xe(e){var t=this,n=e.i;t.componentWillUnmount=function(){J(null,t.l),t.l=null,t.i=null},t.i&&t.i!==n&&t.componentWillUnmount(),e.__v?(t.l||(t.i=n,t.l={nodeType:1,parentNode:n,childNodes:[],appendChild:function(e){this.childNodes.push(e),t.i.appendChild(e)},insertBefore:function(e,n){this.childNodes.push(e),t.i.appendChild(e)},removeChild:function(e){this.childNodes.splice(this.childNodes.indexOf(e)>>>1,1),t.i.removeChild(e)}}),J(E(Ie,{context:t.context},e.__v),t.l)):t.l&&t.componentWillUnmount()}function Ae(e,t){return E(xe,{__v:e,i:t})}(ke.prototype=new k).__e=function(e){var t=this,n=Pe(t.__v),r=t.o.get(e);return r[0]++,function(o){var i=function(){t.props.revealOrder?(r.push(o),Ce(t,e,r)):o()};n?n(i):i()}},ke.prototype.render=function(e){this.u=null,this.o=new Map;var t=T(e.children);e.revealOrder&&"b"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.o.set(t[n],this.u=[1,0,this.u]);return e.children},ke.prototype.componentDidUpdate=ke.prototype.componentDidMount=function(){var e=this;this.o.forEach((function(t,n){Ce(e,n,t)}))};var De="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,Ne=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Te=function(e){return("undefined"!=typeof Symbol&&"symbol"==i(Symbol())?/fil|che|rad/i:/fil|che|ra/i).test(e)};function Re(e,t,n){return null==t.__k&&(t.textContent=""),J(e,t),"function"==typeof n&&n(),e?e.__c:null}k.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach((function(e){Object.defineProperty(k.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})}));var Le=h.event;function Me(){}function Fe(){return this.cancelBubble}function He(){return this.defaultPrevented}h.event=function(e){return Le&&(e=Le(e)),e.persist=Me,e.isPropagationStopped=Fe,e.isDefaultPrevented=He,e.nativeEvent=e};var Ue,ze={configurable:!0,get:function(){return this.class}},qe=h.vnode;h.vnode=function(e){var t=e.type,n=e.props,r=n;if("string"==typeof t){for(var o in r={},n){var i=n[o];"value"===o&&"defaultValue"in n&&null==i||("defaultValue"===o&&"value"in n&&null==n.value?o="value":"download"===o&&!0===i?i="":/ondoubleclick/i.test(o)?o="ondblclick":/^onchange(textarea|input)/i.test(o+t)&&!Te(n.type)?o="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(o)?o=o.toLowerCase():Ne.test(o)?o=o.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===i&&(i=void 0),r[o]=i)}"select"==t&&r.multiple&&Array.isArray(r.value)&&(r.value=T(n.children).forEach((function(e){e.props.selected=-1!=r.value.indexOf(e.props.value)}))),"select"==t&&null!=r.defaultValue&&(r.value=T(n.children).forEach((function(e){e.props.selected=r.multiple?-1!=r.defaultValue.indexOf(e.props.value):r.defaultValue==e.props.value}))),e.props=r}t&&n.class!=n.className&&(ze.enumerable="className"in n,null!=n.className&&(r.class=n.className),Object.defineProperty(r,"className",ze)),e.$$typeof=De,qe&&qe(e)};var $e=h.__r;h.__r=function(e){$e&&$e(e),Ue=e.__c};var Be={ReactCurrentDispatcher:{current:{readContext:function(e){return Ue.__n[e.__c].props.value}}}};function Ve(e){return!!e&&e.$$typeof===De}"object"==("undefined"==typeof performance?"undefined":i(performance))&&"function"==typeof performance.now&&performance.now.bind(performance);var Je={useState:le,useReducer:ce,useEffect:ae,useLayoutEffect:se,useRef:function(e){return X=5,ue((function(){return{current:e}}),[])},useImperativeHandle:function(e,t,n){X=6,se((function(){"function"==typeof e?e(t()):e&&(e.current=t())}),null==n?n:n.concat(e))},useMemo:ue,useCallback:function(e,t){return X=8,ue((function(){return e}),t)},useContext:function(e){var t=Y.context[e.__c],n=ie(G++,9);return n.__c=e,t?(null==n.__&&(n.__=!0,t.sub(Y)),t.props.value):e.__},useDebugValue:function(e,t){h.useDebugValue&&h.useDebugValue(t?t(e):e)},version:"16.8.0",Children:Se,render:Re,hydrate:function(e,t,n){return W(e,t),"function"==typeof n&&n(),e?e.__c:null},unmountComponentAtNode:function(e){return!!e.__k&&(J(null,e),!0)},createPortal:Ae,createElement:E,createContext:function(e,t){var n={__c:t="__cC"+_++,__:e,Consumer:function(e,t){return e.children(t)},Provider:function(e){var n,r;return this.getChildContext||(n=[],(r={})[t]=this,this.getChildContext=function(){return r},this.shouldComponentUpdate=function(e){this.props.value!==e.value&&n.some(x)},this.sub=function(e){n.push(e);var t=e.componentWillUnmount;e.componentWillUnmount=function(){n.splice(n.indexOf(e),1),t&&t.call(e)}}),e.children}};return n.Provider.__=n.Consumer.contextType=n},createFactory:function(e){return E.bind(null,e)},cloneElement:function(e){return Ve(e)?K.apply(null,arguments):e},createRef:function(){return{current:null}},Fragment:P,isValidElement:Ve,findDOMNode:function(e){return e&&(e.base||1===e.nodeType&&e)||null},Component:k,PureComponent:ge,memo:function(e,t){function n(e){var n=this.props.ref,r=n==e.ref;return!r&&n&&(n.call?n(null):n.current=null),t?!t(this.props,e)||!r:_e(this.props,e)}function r(t){return this.shouldComponentUpdate=n,E(e,t)}return r.displayName="Memo("+(e.displayName||e.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r},forwardRef:function(e){function t(t,n){var r=ye({},t);return delete r.ref,e(r,(n=t.ref||n)&&("object"!=i(n)||"current"in n)?n:null)}return t.$$typeof=Oe,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(e.displayName||e.name)+")",t},unstable_batchedUpdates:function(e,t){return e(t)},StrictMode:P,Suspense:je,SuspenseList:ke,lazy:function(e){var t,n,r;function o(o){if(t||(t=e()).then((function(e){n=e.default||e}),(function(e){r=e})),r)throw r;if(!n)throw t;return E(n,o)}return o.displayName="Lazy",o.__f=!0,o},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Be};function We(){return Je.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},Je.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function Ke(){return Je.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},Je.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Ge(){return(Ge=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function Ye(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var Ze=Je.forwardRef((function(e,t){var n=e.translations,r=void 0===n?{}:n,o=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["translations"]),i=r.buttonText,l=void 0===i?"Search":i,c=r.buttonAriaLabel,a=void 0===c?"Search":c,s=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,o=!1,i=void 0;try{for(var l,c=e[Symbol.iterator]();!(r=(l=c.next()).done)&&(n.push(l.value),2!==n.length);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return n}}(e)||function(e,t){if(e){if("string"==typeof e)return Ye(e,2);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Ye(e,2):void 0}}(e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(le(null)),u=s[0],f=s[1];return ae((function(){"undefined"!=typeof navigator&&f(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl")}),[]),Je.createElement("button",Ge({type:"button",className:"DocSearch DocSearch-Button","aria-label":a},o,{ref:t}),Je.createElement("span",{className:"DocSearch-Button-Container"},Je.createElement(Ke,null),Je.createElement("span",{className:"DocSearch-Button-Placeholder"},l)),null!==u&&Je.createElement("span",{className:"DocSearch-Button-Keys"},Je.createElement("span",{className:"DocSearch-Button-Key"},"Ctrl"===u?Je.createElement(We,null):u),Je.createElement("span",{className:"DocSearch-Button-Key"},"K")))}));function Xe(e){return 0===e.collections.length?0:e.collections.reduce((function(e,t){return e+t.items.length}),0)}function Qe(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function et(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function tt(e){return e.reduce((function(e,t){return e.concat(t)}),[])}var nt=0;function rt(e,t,n,r){if(e<0&&(null===t||null!==r&&0===t))return n+e;var o=(null===t?-1:t)+e;return o<=-1||o>=n?null===r?null:0:o}var ot=function(){};function it(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function lt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function ct(e){return(ct="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function at(e){var t=function(e){var t=e.collections.map((function(e){return e.items.length})).reduce((function(e,t,n){var r=(e[n-1]||0)+t;return e.push(r),e}),[]).reduce((function(t,n){return n<=e.activeItemId?t+1:t}),0);return e.collections[t]}(e);if(!t)return null;var n=t.items[function(e){for(var t=e.state,n=e.collection,r=!1,o=0,i=0;!1===r;){var l=t.collections[o];if(l===n){r=!0;break}i+=l.items.length,o++}return t.activeItemId-i}({state:e,collection:t})],r=t.source;return{item:n,itemInputValue:r.getItemInputValue({item:n,state:e}),itemUrl:r.getItemUrl({item:n,state:e}),source:r}}function st(e,t){return e===t||e.contains(t)}function ut(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function ft(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ut(Object(n),!0).forEach((function(t){pt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ut(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function pt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function dt(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function ht(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function mt(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ht(Object(n),!0).forEach((function(t){vt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ht(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function vt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function yt(e){return(yt="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function gt(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?_t(Object(n),!0).forEach((function(t){bt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):_t(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function bt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var Ot=null;function wt(e){var t=e.event,n=e.nextState,r=void 0===n?{}:n,o=e.props,i=e.query,l=e.refresh,c=e.store,a=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["event","nextState","props","query","refresh","store"]);Ot&&o.environment.clearTimeout(Ot);var s,u=a.setCollections,f=a.setIsOpen,p=a.setQuery,d=a.setActiveItemId,h=a.setStatus;return p(i),d(o.defaultActiveItemId),i||!1!==o.openOnFocus?(h("loading"),Ot=o.environment.setTimeout((function(){h("stalled")}),o.stallThreshold),o.getSources(gt({query:i,refresh:l,state:c.getState()},a)).then((function(e){return h("loading"),Promise.all(e.map((function(e){return Promise.resolve(e.getItems(gt({query:i,refresh:l,state:c.getState()},a))).then((function(t){return Array.isArray(t),"The `getItems` function must return an array of items but returned type ".concat(JSON.stringify(yt(t)),":\n\n").concat(JSON.stringify(t,null,2)),{source:e,items:t}}))}))).then((function(e){var n;h("idle"),u(e);var s=o.shouldPanelOpen({state:c.getState()});f(null!==(n=r.isOpen)&&void 0!==n?n:o.openOnFocus&&!i&&s||s);var p=at(c.getState());if(null!==c.getState().activeItemId&&p){var d=p.item,m=p.itemInputValue,v=p.itemUrl,y=p.source;y.onActive(gt({event:t,item:d,itemInputValue:m,itemUrl:v,refresh:l,source:y,state:c.getState()},a))}})).finally((function(){Ot&&o.environment.clearTimeout(Ot)}))}))):(h("idle"),u(c.getState().collections.map((function(e){return gt(gt({},e),{},{items:[]})}))),f(null!==(s=r.isOpen)&&void 0!==s?s:o.shouldPanelOpen({state:c.getState()})),Promise.resolve())}function St(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Et(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?St(Object(n),!0).forEach((function(t){jt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):St(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function jt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Pt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function kt(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Pt(Object(n),!0).forEach((function(t){Ct(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Pt(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Ct(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function It(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function xt(e){var t=e.state;return!1===t.isOpen||null===t.activeItemId?null:at(t).itemInputValue||null}function At(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Dt(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?At(Object(n),!0).forEach((function(t){Nt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):At(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Nt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var Tt=function(e,t){switch(t.type){case"setActiveItemId":case"mousemove":return Dt(Dt({},e),{},{activeItemId:t.payload});case"setQuery":return Dt(Dt({},e),{},{query:t.payload,completion:null});case"setCollections":return Dt(Dt({},e),{},{collections:t.payload});case"setIsOpen":return Dt(Dt({},e),{},{isOpen:t.payload});case"setStatus":return Dt(Dt({},e),{},{status:t.payload});case"setContext":return Dt(Dt({},e),{},{context:Dt(Dt({},e.context),t.payload)});case"ArrowDown":var n=Dt(Dt({},e),{},{activeItemId:rt(1,e.activeItemId,Xe(e),t.props.defaultActiveItemId)});return Dt(Dt({},n),{},{completion:xt({state:n})});case"ArrowUp":var r=Dt(Dt({},e),{},{activeItemId:rt(-1,e.activeItemId,Xe(e),t.props.defaultActiveItemId)});return Dt(Dt({},r),{},{completion:xt({state:r})});case"Escape":return e.isOpen?Dt(Dt({},e),{},{isOpen:!1,completion:null}):Dt(Dt({},e),{},{query:"",status:"idle",collections:[]});case"submit":return Dt(Dt({},e),{},{activeItemId:null,isOpen:!1,status:"idle"});case"reset":return Dt(Dt({},e),{},{activeItemId:!0===t.props.openOnFocus?t.props.defaultActiveItemId:null,status:"idle",query:""});case"focus":return Dt(Dt({},e),{},{activeItemId:t.props.defaultActiveItemId,isOpen:(t.props.openOnFocus||Boolean(e.query))&&t.props.shouldPanelOpen({state:e})});case"blur":return t.props.debug?e:Dt(Dt({},e),{},{isOpen:!1,activeItemId:null});case"mouseleave":return Dt(Dt({},e),{},{activeItemId:t.props.defaultActiveItemId});default:return"The reducer action ".concat(JSON.stringify(t.type)," is not supported."),e}};function Rt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Lt(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Rt(Object(n),!0).forEach((function(t){Mt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Rt(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Mt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Ft(e){var t=[],n=function(e,t){var n,r="undefined"!=typeof window?window:{},o=e.plugins||[];return mt(mt({debug:!1,openOnFocus:!1,placeholder:"",autoFocus:!1,defaultActiveItemId:null,stallThreshold:300,environment:r,shouldPanelOpen:function(e){return Xe(e.state)>0}},e),{},{id:null!==(n=e.id)&&void 0!==n?n:"autocomplete-".concat(nt++),plugins:o,initialState:mt({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},e.initialState),onStateChange:function(t){var n;null===(n=e.onStateChange)||void 0===n||n.call(e,t),o.forEach((function(e){var n;return null===(n=e.onStateChange)||void 0===n?void 0:n.call(e,t)}))},onSubmit:function(t){var n;null===(n=e.onSubmit)||void 0===n||n.call(e,t),o.forEach((function(e){var n;return null===(n=e.onSubmit)||void 0===n?void 0:n.call(e,t)}))},onReset:function(t){var n;null===(n=e.onReset)||void 0===n||n.call(e,t),o.forEach((function(e){var n;return null===(n=e.onReset)||void 0===n?void 0:n.call(e,t)}))},getSources:function(n){return Promise.all([].concat(function(e){return function(e){if(Array.isArray(e))return dt(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return dt(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?dt(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(o.map((function(e){return e.getSources}))),[e.getSources]).filter(Boolean).map((function(e){return function(e,t){return Promise.resolve(e(t)).then((function(e){return Array.isArray(e),"The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(ct(e)),":\n\n").concat(JSON.stringify(e,null,2)),Promise.all(e.filter((function(e){return Boolean(e)})).map((function(e){e.sourceId;var t=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?it(Object(n),!0).forEach((function(t){lt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):it(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({getItemInputValue:function(e){return e.state.query},getItemUrl:function(){},onSelect:function(e){(0,e.setIsOpen)(!1)},onActive:ot},e);return Promise.resolve(t)})))}))}(e,n)}))).then((function(e){return tt(e)})).then((function(e){return e.map((function(e){return mt(mt({},e),{},{onSelect:function(n){e.onSelect(n),t.forEach((function(e){var t;return null===(t=e.onSelect)||void 0===t?void 0:t.call(e,n)}))},onActive:function(n){e.onActive(n),t.forEach((function(e){var t;return null===(t=e.onActive)||void 0===t?void 0:t.call(e,n)}))}})}))}))},navigator:mt({navigate:function(e){var t=e.itemUrl;r.location.assign(t)},navigateNewTab:function(e){var t=e.itemUrl,n=r.open(t,"_blank","noopener");null==n||n.focus()},navigateNewWindow:function(e){var t=e.itemUrl;r.open(t,"_blank","noopener")}},e.navigator)})}(e,t),r=function(e,t,n){var r=t.initialState;return{getState:function(){return r},dispatch:function(o,i){var l=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Qe(Object(n),!0).forEach((function(t){et(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Qe(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},r);r=e(r,{type:o,props:t,payload:i}),n({state:r,prevState:l})}}}(Tt,n,(function(e){var t=e.prevState,r=e.state;n.onStateChange(Lt({prevState:t,state:r,refresh:l},o))})),o=function(e){var t=e.store;return{setActiveItemId:function(e){t.dispatch("setActiveItemId",e)},setQuery:function(e){t.dispatch("setQuery",e)},setCollections:function(e){var n=0,r=e.map((function(e){return ft(ft({},e),{},{items:tt(e.items).map((function(e){return ft(ft({},e),{},{__autocomplete_id:n++})}))})}));t.dispatch("setCollections",r)},setIsOpen:function(e){t.dispatch("setIsOpen",e)},setStatus:function(e){t.dispatch("setStatus",e)},setContext:function(e){t.dispatch("setContext",e)}}}({store:r}),i=function(e){var t=e.props,n=e.refresh,r=e.store,o=It(e,["props","refresh","store"]);return{getEnvironmentProps:function(e){var n=e.inputElement,o=e.formElement,i=e.panelElement;return kt({onTouchStart:function(e){!1!==r.getState().isOpen&&e.target!==n&&!1===[o,i].some((function(n){return st(n,e.target)||st(n,t.environment.document.activeElement)}))&&r.dispatch("blur",null)},onTouchMove:function(e){!1!==r.getState().isOpen&&n===t.environment.document.activeElement&&e.target!==n&&n.blur()}},It(e,["inputElement","formElement","panelElement"]))},getRootProps:function(e){return kt({role:"combobox","aria-expanded":r.getState().isOpen,"aria-haspopup":"listbox","aria-owns":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label")},e)},getFormProps:function(e){return e.inputElement,kt({action:"",noValidate:!0,role:"search",onSubmit:function(i){var l;i.preventDefault(),t.onSubmit(kt({event:i,refresh:n,state:r.getState()},o)),r.dispatch("submit",null),null===(l=e.inputElement)||void 0===l||l.blur()},onReset:function(i){var l;i.preventDefault(),t.onReset(kt({event:i,refresh:n,state:r.getState()},o)),r.dispatch("reset",null),null===(l=e.inputElement)||void 0===l||l.focus()}},It(e,["inputElement"]))},getLabelProps:function(e){return kt({htmlFor:"".concat(t.id,"-input"),id:"".concat(t.id,"-label")},e)},getInputProps:function(e){function i(e){(t.openOnFocus||Boolean(r.getState().query))&&wt(kt({event:e,props:t,query:r.getState().completion||r.getState().query,refresh:n,store:r},o)),r.dispatch("focus",null)}var l="ontouchstart"in t.environment,c=e||{},a=(c.inputElement,c.maxLength),s=void 0===a?512:a,u=It(c,["inputElement","maxLength"]),f=at(r.getState());return kt({"aria-autocomplete":"both","aria-activedescendant":r.getState().isOpen&&null!==r.getState().activeItemId?"".concat(t.id,"-item-").concat(r.getState().activeItemId):void 0,"aria-controls":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label"),value:r.getState().completion||r.getState().query,id:"".concat(t.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:null!=f&&f.itemUrl?"go":"search",spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:s,type:"search",onChange:function(e){wt(kt({event:e,props:t,query:e.currentTarget.value.slice(0,s),refresh:n,store:r},o))},onKeyDown:function(e){!function(e){var t=e.event,n=e.props,r=e.refresh,o=e.store,i=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["event","props","refresh","store"]);if("ArrowUp"===t.key||"ArrowDown"===t.key){t.preventDefault(),o.dispatch(t.key,null);var l=n.environment.document.getElementById("".concat(n.id,"-item-").concat(o.getState().activeItemId));l&&(l.scrollIntoViewIfNeeded?l.scrollIntoViewIfNeeded(!1):l.scrollIntoView(!1));var c=at(o.getState());if(null!==o.getState().activeItemId&&c){var a=c.item,s=c.itemInputValue,u=c.itemUrl,f=c.source;f.onActive(Et({event:t,item:a,itemInputValue:s,itemUrl:u,refresh:r,source:f,state:o.getState()},i))}}else if("Escape"===t.key)t.preventDefault(),o.dispatch(t.key,null);else if("Enter"===t.key){if(null===o.getState().activeItemId||o.getState().collections.every((function(e){return 0===e.items.length})))return;t.preventDefault();var p=at(o.getState()),d=p.item,h=p.itemInputValue,m=p.itemUrl,v=p.source;if(t.metaKey||t.ctrlKey)void 0!==m&&(v.onSelect(Et({event:t,item:d,itemInputValue:h,itemUrl:m,refresh:r,source:v,state:o.getState()},i)),n.navigator.navigateNewTab({itemUrl:m,item:d,state:o.getState()}));else if(t.shiftKey)void 0!==m&&(v.onSelect(Et({event:t,item:d,itemInputValue:h,itemUrl:m,refresh:r,source:v,state:o.getState()},i)),n.navigator.navigateNewWindow({itemUrl:m,item:d,state:o.getState()}));else if(t.altKey);else{if(void 0!==m)return v.onSelect(Et({event:t,item:d,itemInputValue:h,itemUrl:m,refresh:r,source:v,state:o.getState()},i)),void n.navigator.navigate({itemUrl:m,item:d,state:o.getState()});wt(Et({event:t,nextState:{isOpen:!1},props:n,query:h,refresh:r,store:o},i)).then((function(){v.onSelect(Et({event:t,item:d,itemInputValue:h,itemUrl:m,refresh:r,source:v,state:o.getState()},i))}))}}}(kt({event:e,props:t,refresh:n,store:r},o))},onFocus:i,onBlur:function(){l||r.dispatch("blur",null)},onClick:function(n){e.inputElement!==t.environment.document.activeElement||r.getState().isOpen||i(n)}},u)},getPanelProps:function(e){return kt({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){r.dispatch("mouseleave",null)}},e)},getListProps:function(e){return kt({role:"listbox","aria-labelledby":"".concat(t.id,"-label"),id:"".concat(t.id,"-list")},e)},getItemProps:function(e){var i=e.item,l=e.source,c=It(e,["item","source"]);return kt({id:"".concat(t.id,"-item-").concat(i.__autocomplete_id),role:"option","aria-selected":r.getState().activeItemId===i.__autocomplete_id,onMouseMove:function(e){if(i.__autocomplete_id!==r.getState().activeItemId){r.dispatch("mousemove",i.__autocomplete_id);var t=at(r.getState());if(null!==r.getState().activeItemId&&t){var l=t.item,c=t.itemInputValue,a=t.itemUrl,s=t.source;s.onActive(kt({event:e,item:l,itemInputValue:c,itemUrl:a,refresh:n,source:s,state:r.getState()},o))}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var c=l.getItemInputValue({item:i,state:r.getState()}),a=l.getItemUrl({item:i,state:r.getState()});(a?Promise.resolve():wt(kt({event:e,nextState:{isOpen:!1},props:t,query:c,refresh:n,store:r},o))).then((function(){l.onSelect(kt({event:e,item:i,itemInputValue:c,itemUrl:a,refresh:n,source:l,state:r.getState()},o))}))}},c)}}}(Lt({props:n,refresh:l,store:r},o));function l(){return wt(Lt({event:new Event("input"),nextState:{isOpen:r.getState().isOpen},props:n,query:r.getState().query,refresh:l,store:r},o))}return n.plugins.forEach((function(e){var n;return null===(n=e.subscribe)||void 0===n?void 0:n.call(e,Lt(Lt({},o),{},{refresh:l,onSelect:function(e){t.push({onSelect:e})},onActive:function(e){t.push({onActive:e})}}))})),Lt(Lt({refresh:l},i),o)}var Ht="1.0.0-alpha.44";function Ut(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function zt(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Ut(Object(n),!0).forEach((function(t){qt(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Ut(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function qt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function $t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function Bt(){return Je.createElement("a",{href:"https://www.algolia.com/docsearch",target:"_blank",rel:"noopener noreferrer"},Je.createElement("span",{className:"DocSearch-Label"},"Search by"),Je.createElement("svg",{width:"77",height:"19"},Je.createElement("path",{d:"M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z",fill:"currentColor",fillRule:"evenodd"})))}function Vt(){return Je.createElement(Je.Fragment,null,Je.createElement("div",{className:"DocSearch-Logo"},Je.createElement(Bt,null)),Je.createElement("ul",{className:"DocSearch-Commands"},Je.createElement("li",null,Je.createElement("span",{className:"DocSearch-Commands-Key"},Je.createElement(Jt,null,Je.createElement("path",{d:"M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"}))),Je.createElement("span",{className:"DocSearch-Label"},"to select")),Je.createElement("li",null,Je.createElement("span",{className:"DocSearch-Commands-Key"},Je.createElement(Jt,null,Je.createElement("path",{d:"M7.5 3.5v8M10.5 8.5l-3 3-3-3"}))),Je.createElement("span",{className:"DocSearch-Commands-Key"},Je.createElement(Jt,null,Je.createElement("path",{d:"M7.5 11.5v-8M10.5 6.5l-3-3-3 3"}))),Je.createElement("span",{className:"DocSearch-Label"},"to navigate")),Je.createElement("li",null,Je.createElement("span",{className:"DocSearch-Commands-Key"},Je.createElement(Jt,null,Je.createElement("path",{d:"M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"}))),Je.createElement("span",{className:"DocSearch-Label"},"to close"))))}function Jt(e){return Je.createElement("svg",{width:"15",height:"15"},Je.createElement("g",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.2"},e.children))}function Wt(e){var t=e.hit,n=e.children;return Je.createElement("a",{href:t.url},n)}function Kt(){return Je.createElement("svg",{viewBox:"0 0 38 38",stroke:"currentColor",strokeOpacity:".5"},Je.createElement("g",{fill:"none",fillRule:"evenodd"},Je.createElement("g",{transform:"translate(1 1)",strokeWidth:"2"},Je.createElement("circle",{strokeOpacity:".3",cx:"18",cy:"18",r:"18"}),Je.createElement("path",{d:"M36 18c0-9.94-8.06-18-18-18"},Je.createElement("animateTransform",{attributeName:"transform",type:"rotate",from:"0 18 18",to:"360 18 18",dur:"1s",repeatCount:"indefinite"})))))}function Gt(){return Je.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},Je.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},Je.createElement("path",{d:"M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0"}),Je.createElement("path",{d:"M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13"})))}function Yt(){return Je.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},Je.createElement("path",{d:"M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Zt(){return Je.createElement("svg",{className:"DocSearch-Hit-Select-Icon",width:"20",height:"20",viewBox:"0 0 20 20"},Je.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},Je.createElement("path",{d:"M18 3v4c0 2-2 4-4 4H2"}),Je.createElement("path",{d:"M8 17l-6-6 6-6"})))}function Xt(e){switch(e.type){case"lvl1":return Je.createElement(Qt,null);case"content":return Je.createElement(tn,null);default:return Je.createElement(en,null)}}function Qt(){return Je.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},Je.createElement("path",{d:"M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function en(){return Je.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},Je.createElement("path",{d:"M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function tn(){return Je.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},Je.createElement("path",{d:"M17 5H3h14zm0 5H3h14zm0 5H3h14z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function nn(){return Je.createElement("svg",{width:"20",height:"20",viewBox:"0 0 20 20"},Je.createElement("path",{d:"M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinejoin:"round"}))}function rn(){return Je.createElement("svg",{width:"40",height:"40",viewBox:"0 0 20 20",fill:"none",fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"},Je.createElement("path",{d:"M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0"}))}function on(){return Je.createElement("svg",{width:"40",height:"40",viewBox:"0 0 20 20",fill:"none",fillRule:"evenodd",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round"},Je.createElement("path",{d:"M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"}))}function ln(){return Je.createElement("div",{className:"DocSearch-ErrorScreen"},Je.createElement("div",{className:"DocSearch-Screen-Icon"},Je.createElement(rn,null)),Je.createElement("p",{className:"DocSearch-Title"},"Unable to fetch results"),Je.createElement("p",{className:"DocSearch-Help"},"You might want to check your network connection."))}function cn(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function an(e){var t=e.state.context.searchSuggestions;return Je.createElement("div",{className:"DocSearch-NoResults"},Je.createElement("div",{className:"DocSearch-Screen-Icon"},Je.createElement(on,null)),Je.createElement("p",{className:"DocSearch-Title"},'No results for "',Je.createElement("strong",null,e.state.query),'"'),t&&t.length>0&&Je.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},Je.createElement("p",{className:"DocSearch-Help"},"Try searching for:"),Je.createElement("ul",null,t.slice(0,3).reduce((function(t,n){return[].concat(function(e){return function(e){if(Array.isArray(e))return cn(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return cn(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?cn(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(t),[Je.createElement("li",{key:n},Je.createElement("button",{className:"DocSearch-Prefill",key:n,onClick:function(){e.setQuery(n.toLowerCase()+" "),e.refresh(),e.inputRef.current.focus()}},n))])}),[]))),Je.createElement("p",{className:"DocSearch-Help"},"Believe this query should return results?"," ",Je.createElement("a",{href:"https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md&title=[".concat(e.indexName,']+Missing+results+for+query+"').concat(e.state.query,'"'),target:"_blank",rel:"noopener noreferrer"},"Let us know"),"."))}function sn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function un(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?sn(Object(n),!0).forEach((function(t){fn(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):sn(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function fn(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function pn(e,t){return t.split(".").reduce((function(e,t){return e&&e[t]}),e)}function dn(e){var t=e.hit,n=e.attribute,r=e.tagName;return E(void 0===r?"span":r,un(un({},function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["hit","attribute","tagName"])),{},{dangerouslySetInnerHTML:{__html:pn(t,"_snippetResult.".concat(n,".value"))||pn(t,n)}}))}function hn(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,o=!1,i=void 0;try{for(var l,c=e[Symbol.iterator]();!(r=(l=c.next()).done)&&(n.push(l.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return n}}(e,t)||function(e,t){if(e){if("string"==typeof e)return mn(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?mn(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function mn(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function vn(){return(vn=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function yn(e){return e.collection&&0!==e.collection.items.length?Je.createElement("section",{className:"DocSearch-Hits"},Je.createElement("div",{className:"DocSearch-Hit-source"},e.title),Je.createElement("ul",e.getListProps(),e.collection.items.map((function(t,n){return Je.createElement(_n,vn({key:[e.title,t.objectID].join(":"),item:t,index:n},e))})))):null}function _n(e){var t=e.item,n=e.index,r=e.renderIcon,o=e.renderAction,i=e.getItemProps,l=e.onItemClick,c=e.collection,a=e.hitComponent,s=hn(Je.useState(!1),2),u=s[0],f=s[1],p=hn(Je.useState(!1),2),d=p[0],h=p[1],m=Je.useRef(null),v=a;return Je.createElement("li",vn({className:["DocSearch-Hit",t.__docsearch_parent&&"DocSearch-Hit--Child",u&&"DocSearch-Hit--deleting",d&&"DocSearch-Hit--favoriting"].filter(Boolean).join(" "),onTransitionEnd:function(){m.current&&m.current()}},i({item:t,source:c.source,onClick:function(){l(t)}})),Je.createElement(v,{hit:t},Je.createElement("div",{className:"DocSearch-Hit-Container"},r({item:t,index:n}),t.hierarchy[t.type]&&"lvl1"===t.type&&Je.createElement("div",{className:"DocSearch-Hit-content-wrapper"},Je.createElement(dn,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.lvl1"}),t.content&&Je.createElement(dn,{className:"DocSearch-Hit-path",hit:t,attribute:"content"})),t.hierarchy[t.type]&&("lvl2"===t.type||"lvl3"===t.type||"lvl4"===t.type||"lvl5"===t.type||"lvl6"===t.type)&&Je.createElement("div",{className:"DocSearch-Hit-content-wrapper"},Je.createElement(dn,{className:"DocSearch-Hit-title",hit:t,attribute:"hierarchy.".concat(t.type)}),Je.createElement(dn,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),"content"===t.type&&Je.createElement("div",{className:"DocSearch-Hit-content-wrapper"},Je.createElement(dn,{className:"DocSearch-Hit-title",hit:t,attribute:"content"}),Je.createElement(dn,{className:"DocSearch-Hit-path",hit:t,attribute:"hierarchy.lvl1"})),o({item:t,runDeleteTransition:function(e){f(!0),m.current=e},runFavoriteTransition:function(e){h(!0),m.current=e}}))))}function gn(){return(gn=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function bn(e){return Je.createElement("div",{className:"DocSearch-Dropdown-Container"},e.state.collections.map((function(t,n){if(0===t.items.length)return null;var r=t.items[0].hierarchy.lvl0;return Je.createElement(yn,gn({},e,{key:n,title:r,collection:t,renderIcon:function(e){var n,r=e.item,o=e.index;return Je.createElement(Je.Fragment,null,r.__docsearch_parent&&Je.createElement("svg",{className:"DocSearch-Hit-Tree",viewBox:"0 0 24 54"},Je.createElement("g",{stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"},r.__docsearch_parent!==(null===(n=t.items[o+1])||void 0===n?void 0:n.__docsearch_parent)?Je.createElement("path",{d:"M8 6v21M20 27H8.3"}):Je.createElement("path",{d:"M8 6v42M20 27H8.3"}))),Je.createElement("div",{className:"DocSearch-Hit-icon"},Je.createElement(Xt,{type:r.type})))},renderAction:function(){return Je.createElement("div",{className:"DocSearch-Hit-action"},Je.createElement(Zt,null))}}))})),e.resultsFooterComponent&&Je.createElement("section",{className:"DocSearch-HitsFooter"},Je.createElement(e.resultsFooterComponent,{state:e.state})))}function On(){return(On=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function wn(e){return"idle"===e.state.status&&!1===e.hasCollections?e.disableUserPersonalization?null:Je.createElement("div",{className:"DocSearch-StartScreen"},Je.createElement("p",{className:"DocSearch-Help"},"No recent searches")):!1===e.hasCollections?null:Je.createElement("div",{className:"DocSearch-Dropdown-Container"},Je.createElement(yn,On({},e,{title:"Recent",collection:e.state.collections[0],renderIcon:function(){return Je.createElement("div",{className:"DocSearch-Hit-icon"},Je.createElement(Gt,null))},renderAction:function(t){var n=t.item,r=t.runFavoriteTransition,o=t.runDeleteTransition;return Je.createElement(Je.Fragment,null,Je.createElement("div",{className:"DocSearch-Hit-action"},Je.createElement("button",{className:"DocSearch-Hit-action-button",title:"Save this search",onClick:function(t){t.preventDefault(),t.stopPropagation(),r((function(){e.favoriteSearches.add(n),e.recentSearches.remove(n),e.refresh()}))}},Je.createElement(nn,null))),Je.createElement("div",{className:"DocSearch-Hit-action"},Je.createElement("button",{className:"DocSearch-Hit-action-button",title:"Remove this search from history",onClick:function(t){t.preventDefault(),t.stopPropagation(),o((function(){e.recentSearches.remove(n),e.refresh()}))}},Je.createElement(Yt,null))))}})),Je.createElement(yn,On({},e,{title:"Favorites",collection:e.state.collections[1],renderIcon:function(){return Je.createElement("div",{className:"DocSearch-Hit-icon"},Je.createElement(nn,null))},renderAction:function(t){var n=t.item,r=t.runDeleteTransition;return Je.createElement("div",{className:"DocSearch-Hit-action"},Je.createElement("button",{className:"DocSearch-Hit-action-button",title:"Remove this search from favorites",onClick:function(t){t.preventDefault(),t.stopPropagation(),r((function(){e.favoriteSearches.remove(n),e.refresh()}))}},Je.createElement(Yt,null)))}})))}function Sn(){return(Sn=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var En=Je.memo((function(e){if("error"===e.state.status)return Je.createElement(ln,null);var t=e.state.collections.some((function(e){return e.items.length>0}));return e.state.query?!1===t?Je.createElement(an,e):Je.createElement(bn,e):Je.createElement(wn,Sn({},e,{hasCollections:t}))}),(function(e,t){return"loading"===t.state.status||"stalled"===t.state.status}));function jn(){return(jn=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function Pn(e){var t=e.getFormProps({inputElement:e.inputRef.current}).onReset;return Je.useEffect((function(){e.autoFocus&&e.inputRef.current&&e.inputRef.current.focus()}),[e.autoFocus,e.inputRef]),Je.useEffect((function(){e.isFromSelection&&e.inputRef.current&&e.inputRef.current.select()}),[e.isFromSelection,e.inputRef]),Je.createElement(Je.Fragment,null,Je.createElement("form",{className:"DocSearch-Form",onSubmit:function(e){e.preventDefault()},onReset:t},Je.createElement("label",jn({className:"DocSearch-MagnifierLabel"},e.getLabelProps()),Je.createElement(Ke,null)),Je.createElement("div",{className:"DocSearch-LoadingIndicator"},Je.createElement(Kt,null)),Je.createElement("input",jn({className:"DocSearch-Input",ref:e.inputRef},e.getInputProps({inputElement:e.inputRef.current,autoFocus:e.autoFocus,maxLength:64}))),Je.createElement("button",{type:"reset",title:"Clear the query",className:"DocSearch-Reset",hidden:!e.state.query},Je.createElement(Yt,null))),Je.createElement("button",{className:"DocSearch-Cancel",onClick:e.onClose},"Cancel"))}function kn(e){var t=e.key,n=e.limit,r=void 0===n?5:n,o=function(e){return!1===function(){var e="__TEST_KEY__";try{return localStorage.setItem(e,""),localStorage.removeItem(e),!0}catch(e){return!1}}()?{setItem:function(){},getItem:function(){return[]}}:{setItem:function(t){return window.localStorage.setItem(e,JSON.stringify(t))},getItem:function(){var t=window.localStorage.getItem(e);return t?JSON.parse(t):[]}}}(t),i=o.getItem().slice(0,r);return{add:function(e){var t=e,n=(t._highlightResult,t._snippetResult,function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(t,["_highlightResult","_snippetResult"])),l=i.findIndex((function(e){return e.objectID===n.objectID}));l>-1&&i.splice(l,1),i.unshift(n),i=i.slice(0,r),o.setItem(i)},remove:function(e){i=i.filter((function(t){return t.objectID!==e.objectID})),o.setItem(i)},getAll:function(){return i}}}function Cn(e){var t,n="algoliasearch-client-js-".concat(e.key),r=function(){return void 0===t&&(t=e.localStorage||window.localStorage),t},o=function(){return JSON.parse(r().getItem(n)||"{}")};return{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var n=JSON.stringify(e),r=o()[n];return Promise.all([r||t(),void 0!==r])})).then((function(e){var t=u(e,2),r=t[0],o=t[1];return Promise.all([r,o||n.miss(r)])})).then((function(e){return u(e,1)[0]}))},set:function(e,t){return Promise.resolve().then((function(){var i=o();return i[JSON.stringify(e)]=t,r().setItem(n,JSON.stringify(i)),t}))},delete:function(e){return Promise.resolve().then((function(){var t=o();delete t[JSON.stringify(e)],r().setItem(n,JSON.stringify(t))}))},clear:function(){return Promise.resolve().then((function(){r().removeItem(n)}))}}}function In(e){var t=f(e.caches),n=t.shift();return void 0===n?{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return t().then((function(e){return Promise.all([e,n.miss(e)])})).then((function(e){return u(e,1)[0]}))},set:function(e,t){return Promise.resolve(t)},delete:function(e){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(e,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return n.get(e,r,o).catch((function(){return In({caches:t}).get(e,r,o)}))},set:function(e,r){return n.set(e,r).catch((function(){return In({caches:t}).set(e,r)}))},delete:function(e){return n.delete(e).catch((function(){return In({caches:t}).delete(e)}))},clear:function(){return n.clear().catch((function(){return In({caches:t}).clear()}))}}}function xn(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},t={};return{get:function(n,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},i=JSON.stringify(n);if(i in t)return Promise.resolve(e.serializable?JSON.parse(t[i]):t[i]);var l=r(),c=o&&o.miss||function(){return Promise.resolve()};return l.then((function(e){return c(e)})).then((function(){return l}))},set:function(n,r){return t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)},delete:function(e){return delete t[JSON.stringify(e)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function An(e){for(var t=e.length-1;t>0;t--){var n=Math.floor(Math.random()*(t+1)),r=e[t];e[t]=e[n],e[n]=r}return e}function Dn(e,t){return t?(Object.keys(t).forEach((function(n){e[n]=t[n](e)})),e):e}function Nn(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=0;return e.replace(/%s/g,(function(){return encodeURIComponent(n[o++])}))}var Tn={WithinQueryParameters:0,WithinHeaders:1};function Rn(e,t){var n=e||{},r=n.data||{};return Object.keys(n).forEach((function(e){-1===["timeout","headers","queryParameters","data","cacheable"].indexOf(e)&&(r[e]=n[e])})),{data:Object.entries(r).length>0?r:void 0,timeout:n.timeout||t,headers:n.headers||{},queryParameters:n.queryParameters||{},cacheable:n.cacheable}}var Ln={Read:1,Write:2,Any:3},Mn=1;function Fn(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Mn;return s(s({},e),{},{status:t,lastUpdate:Date.now()})}function Hn(e){return"string"==typeof e?{protocol:"https",url:e,accept:Ln.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||Ln.Any}}var Un="POST";function zn(e,t,n,r){var o=[],i=function(e,t){if("GET"!==e.method&&(void 0!==e.data||void 0!==t.data)){var n=Array.isArray(e.data)?e.data:s(s({},e.data),t.data);return JSON.stringify(n)}}(n,r),l=function(e,t){var n=s(s({},e.headers),t.headers),r={};return Object.keys(n).forEach((function(e){var t=n[e];r[e.toLowerCase()]=t})),r}(e,r),c=n.method,a="GET"!==n.method?{}:s(s({},n.data),r.data),u=s(s(s({"x-algolia-agent":e.userAgent.value},e.queryParameters),a),r.queryParameters),p=0,d=function t(a,s){var f=a.pop();if(void 0===f)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:Vn(o)};var d={data:i,headers:l,method:c,url:$n(f,n.path,u),connectTimeout:s(p,e.timeouts.connect),responseTimeout:s(p,r.timeout)},h=function(e){var t={request:d,response:e,host:f,triesLeft:a.length};return o.push(t),t},m={onSucess:function(e){return function(e){try{return JSON.parse(e.content)}catch(t){throw function(e,t){return{name:"DeserializationError",message:e,response:t}}(t.message,e)}}(e)},onRetry:function(n){var r=h(n);return n.isTimedOut&&p++,Promise.all([e.logger.info("Retryable failure",Jn(r)),e.hostsCache.set(f,Fn(f,n.isTimedOut?3:2))]).then((function(){return t(a,s)}))},onFail:function(e){throw h(e),function(e,t){var n=e.content,r=e.status,o=n;try{o=JSON.parse(n).message}catch(e){}return function(e,t,n){return{name:"ApiError",message:e,status:t,transporterStackTrace:n}}(o,r,t)}(e,Vn(o))}};return e.requester.send(d).then((function(e){return function(e,t){return function(e){var t=e.status;return e.isTimedOut||function(e){var t=e.isTimedOut,n=e.status;return!t&&0==~~n}(e)||2!=~~(t/100)&&4!=~~(t/100)}(e)?t.onRetry(e):2==~~(e.status/100)?t.onSucess(e):t.onFail(e)}(e,m)}))};return function(e,t){return Promise.all(t.map((function(t){return e.get(t,(function(){return Promise.resolve(Fn(t))}))}))).then((function(e){var n=e.filter((function(e){return function(e){return e.status===Mn||Date.now()-e.lastUpdate>12e4}(e)})),r=e.filter((function(e){return function(e){return 3===e.status&&Date.now()-e.lastUpdate<=12e4}(e)})),o=[].concat(f(n),f(r));return{getTimeout:function(e,t){return(0===r.length&&0===e?1:r.length+3+e)*t},statelessHosts:o.length>0?o.map((function(e){return Hn(e)})):t}}))}(e.hostsCache,t).then((function(e){return d(f(e.statelessHosts).reverse(),e.getTimeout)}))}function qn(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(e){var n="; ".concat(e.segment).concat(void 0!==e.version?" (".concat(e.version,")"):"");return-1===t.value.indexOf(n)&&(t.value="".concat(t.value).concat(n)),t}};return t}function $n(e,t,n){var r=Bn(n),o="".concat(e.protocol,"://").concat(e.url,"/").concat("/"===t.charAt(0)?t.substr(1):t);return r.length&&(o+="?".concat(r)),o}function Bn(e){return Object.keys(e).map((function(t){return Nn("%s=%s",t,(n=e[t],"[object Object]"===Object.prototype.toString.call(n)||"[object Array]"===Object.prototype.toString.call(n)?JSON.stringify(e[t]):e[t]));var n})).join("&")}function Vn(e){return e.map((function(e){return Jn(e)}))}function Jn(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return s(s({},e),{},{request:s(s({},e.request),{},{headers:s(s({},e.request.headers),t)})})}var Wn=function(e){var t=e.appId,n=function(e,t,n){var r={"x-algolia-api-key":n,"x-algolia-application-id":t};return{headers:function(){return e===Tn.WithinHeaders?r:{}},queryParameters:function(){return e===Tn.WithinQueryParameters?r:{}}}}(void 0!==e.authMode?e.authMode:Tn.WithinHeaders,t,e.apiKey),r=function(e){var t=e.hostsCache,n=e.logger,r=e.requester,o=e.requestsCache,i=e.responsesCache,l=e.timeouts,c=e.userAgent,a=e.hosts,s=e.queryParameters,f={hostsCache:t,logger:n,requester:r,requestsCache:o,responsesCache:i,timeouts:l,userAgent:c,headers:e.headers,queryParameters:s,hosts:a.map((function(e){return Hn(e)})),read:function(e,t){var n=Rn(t,f.timeouts.read),r=function(){return zn(f,f.hosts.filter((function(e){return 0!=(e.accept&Ln.Read)})),e,n)};if(!0!==(void 0!==n.cacheable?n.cacheable:e.cacheable))return r();var o={request:e,mappedRequestOptions:n,transporter:{queryParameters:f.queryParameters,headers:f.headers}};return f.responsesCache.get(o,(function(){return f.requestsCache.get(o,(function(){return f.requestsCache.set(o,r()).then((function(e){return Promise.all([f.requestsCache.delete(o),e])}),(function(e){return Promise.all([f.requestsCache.delete(o),Promise.reject(e)])})).then((function(e){var t=u(e,2);return t[0],t[1]}))}))}),{miss:function(e){return f.responsesCache.set(o,e)}})},write:function(e,t){return zn(f,f.hosts.filter((function(e){return 0!=(e.accept&Ln.Write)})),e,Rn(t,f.timeouts.write))}};return f}(s(s({hosts:[{url:"".concat(t,"-dsn.algolia.net"),accept:Ln.Read},{url:"".concat(t,".algolia.net"),accept:Ln.Write}].concat(An([{url:"".concat(t,"-1.algolianet.com")},{url:"".concat(t,"-2.algolianet.com")},{url:"".concat(t,"-3.algolianet.com")}]))},e),{},{headers:s(s(s({},n.headers()),{"content-type":"application/x-www-form-urlencoded"}),e.headers),queryParameters:s(s({},n.queryParameters()),e.queryParameters)}));return Dn({transporter:r,appId:t,addAlgoliaAgent:function(e,t){r.userAgent.add({segment:e,version:t})},clearCache:function(){return Promise.all([r.requestsCache.clear(),r.responsesCache.clear()]).then((function(){}))}},e.methods)},Kn=function(e){return function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return Dn({transporter:e.transporter,appId:e.appId,indexName:t},n.methods)}},Gn=function(e){return function(t,n){var r=t.map((function(e){return s(s({},e),{},{params:Bn(e.params||{})})}));return e.transporter.read({method:Un,path:"1/indexes/*/queries",data:{requests:r},cacheable:!0},n)}},Yn=function(e){return function(t,n){return Promise.all(t.map((function(t){var r=t.params,o=r.facetName,i=r.facetQuery,l=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(r,["facetName","facetQuery"]);return Kn(e)(t.indexName,{methods:{searchForFacetValues:Qn}}).searchForFacetValues(o,i,s(s({},n),l))})))}},Zn=function(e){return function(t,n,r){return e.transporter.read({method:Un,path:Nn("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:n},cacheable:!0},r)}},Xn=function(e){return function(t,n){return e.transporter.read({method:Un,path:Nn("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},n)}},Qn=function(e){return function(t,n,r){return e.transporter.read({method:Un,path:Nn("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:n},cacheable:!0},r)}},er=1,tr=2,nr=3;function rr(e,t,n){var r,o={appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:function(e){return new Promise((function(t){var n=new XMLHttpRequest;n.open(e.method,e.url,!0),Object.keys(e.headers).forEach((function(t){return n.setRequestHeader(t,e.headers[t])}));var r,o=function(e,r){return setTimeout((function(){n.abort(),t({status:0,content:r,isTimedOut:!0})}),1e3*e)},i=o(e.connectTimeout,"Connection timeout");n.onreadystatechange=function(){n.readyState>n.OPENED&&void 0===r&&(clearTimeout(i),r=o(e.responseTimeout,"Socket timeout"))},n.onerror=function(){0===n.status&&(clearTimeout(i),clearTimeout(r),t({content:n.responseText||"Network request failed",status:n.status,isTimedOut:!1}))},n.onload=function(){clearTimeout(i),clearTimeout(r),t({content:n.responseText,status:n.status,isTimedOut:!1})},n.send(e.data)}))}},logger:(r=nr,{debug:function(e,t){return er>=r&&console.debug(e,t),Promise.resolve()},info:function(e,t){return tr>=r&&console.info(e,t),Promise.resolve()},error:function(e,t){return console.error(e,t),Promise.resolve()}}),responsesCache:xn(),requestsCache:xn({serializable:!1}),hostsCache:In({caches:[Cn({key:"".concat("4.8.5","-").concat(e)}),xn()]}),userAgent:qn("4.8.5").add({segment:"Browser",version:"lite"}),authMode:Tn.WithinQueryParameters};return Wn(s(s(s({},o),n),{},{methods:{search:Gn,searchForFacetValues:Yn,multipleQueries:Gn,multipleSearchForFacetValues:Yn,initIndex:function(e){return function(t){return Kn(e)(t,{methods:{search:Xn,searchForFacetValues:Qn,findAnswers:Zn}})}}}}))}function or(e,t){return e.reduce((function(e,n){var r=t(n);return e.hasOwnProperty(r)||(e[r]=[]),e[r].length<5&&e[r].push(n),e}),{})}function ir(e){return e}function lr(){}function cr(){return(cr=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function ar(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function sr(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ar(Object(n),!0).forEach((function(t){ur(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ar(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function ur(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function fr(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function pr(e){var t=e.appId,n=void 0===t?"BH4D9OD16A":t,r=e.apiKey,o=e.indexName,i=e.placeholder,l=void 0===i?"Search docs":i,c=e.searchParameters,a=e.onClose,s=void 0===a?lr:a,u=e.transformItems,f=void 0===u?ir:u,p=e.hitComponent,d=void 0===p?Wt:p,h=e.resultsFooterComponent,m=void 0===h?function(){return null}:h,v=e.navigator,y=e.initialScrollY,_=void 0===y?0:y,g=e.transformSearchClient,b=void 0===g?ir:g,O=e.disableUserPersonalization,w=void 0!==O&&O,S=e.initialQuery,E=void 0===S?"":S,j=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,o=!1,i=void 0;try{for(var l,c=e[Symbol.iterator]();!(r=(l=c.next()).done)&&(n.push(l.value),2!==n.length);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return n}}(e)||function(e,t){if(e){if("string"==typeof e)return fr(e,2);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?fr(e,2):void 0}}(e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(Je.useState({query:"",collections:[],completion:null,context:{},isOpen:!1,activeItemId:null,status:"idle"})),P=j[0],k=j[1],C=Je.useRef(null),I=Je.useRef(null),x=Je.useRef(null),A=Je.useRef(null),D=Je.useRef(null),N=Je.useRef(10),T=Je.useRef("undefined"!=typeof window?window.getSelection().toString().slice(0,64):"").current,R=Je.useRef(E||T).current,L=function(e,t,n){return Je.useMemo((function(){var r=rr(e,t);return r.addAlgoliaAgent("docsearch","3.0.0-alpha.34"),!1===/docsearch.js \(.*\)/.test(r.transporter.userAgent.value)&&r.addAlgoliaAgent("docsearch-react","3.0.0-alpha.34"),n(r)}),[e,t,n])}(n,r,b),M=Je.useRef(kn({key:"__DOCSEARCH_FAVORITE_SEARCHES__".concat(o),limit:10})).current,F=Je.useRef(kn({key:"__DOCSEARCH_RECENT_SEARCHES__".concat(o),limit:0===M.getAll().length?7:4})).current,H=Je.useCallback((function(e){if(!w){var t="content"===e.type?e.__docsearch_parent:e;t&&-1===M.getAll().findIndex((function(e){return e.objectID===t.objectID}))&&F.add(t)}}),[M,F,w]),U=Je.useMemo((function(){return Ft({id:"docsearch",defaultActiveItemId:0,placeholder:l,openOnFocus:!0,initialState:{query:R,context:{searchSuggestions:[]}},navigator:v,onStateChange:function(e){var t=e.state;k(t)},getSources:function(e){var t=e.query,n=e.state,r=e.setContext,i=e.setStatus;return t?function(e){return function(e){var t=e.searchClient,n=e.queries,r=e.userAgents,o=void 0===r?[]:r;return"function"==typeof t.addAlgoliaAgent&&[{segment:"autocomplete-core",version:Ht}].concat(function(e){return function(e){if(Array.isArray(e))return $t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return $t(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?$t(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(o)).forEach((function(e){var n=e.segment,r=e.version;t.addAlgoliaAgent(n,r)})),t.search(n.map((function(e){return{indexName:e.indexName,query:e.query,params:zt({hitsPerPage:5,highlightPreTag:"__aa-highlight__",highlightPostTag:"__/aa-highlight__"},e.params)}})))}({searchClient:e.searchClient,queries:e.queries,userAgents:e.userAgents}).then((function(e){return e.results}))}({searchClient:L,queries:[{indexName:o,query:t,params:sr({attributesToRetrieve:["hierarchy.lvl0","hierarchy.lvl1","hierarchy.lvl2","hierarchy.lvl3","hierarchy.lvl4","hierarchy.lvl5","hierarchy.lvl6","content","type","url"],attributesToSnippet:["hierarchy.lvl1:".concat(N.current),"hierarchy.lvl2:".concat(N.current),"hierarchy.lvl3:".concat(N.current),"hierarchy.lvl4:".concat(N.current),"hierarchy.lvl5:".concat(N.current),"hierarchy.lvl6:".concat(N.current),"content:".concat(N.current)],snippetEllipsisText:"…",highlightPreTag:"<mark>",highlightPostTag:"</mark>",hitsPerPage:20},c)}]}).catch((function(e){throw"RetryError"===e.name&&i("error"),e})).then((function(e){var t=e[0].hits,o=e[0].nbHits,i=or(t,(function(e){return e.hierarchy.lvl0}));return n.context.searchSuggestions.length<Object.keys(i).length&&r({searchSuggestions:Object.keys(i)}),r({nbHits:o}),Object.values(i).map((function(e,t){return{sourceId:"hits".concat(t),onSelect:function(e){var t=e.item,n=e.event;H(t),n.shiftKey||n.ctrlKey||n.metaKey||s()},getItemUrl:function(e){return e.item.url},getItems:function(){return Object.values(or(e,(function(e){return e.hierarchy.lvl1}))).map(f).map((function(e){return e.map((function(t){return sr(sr({},t),{},{__docsearch_parent:"lvl1"!==t.type&&e.find((function(e){return"lvl1"===e.type&&e.hierarchy.lvl1===t.hierarchy.lvl1}))})}))})).flat()}}}))})):w?[]:[{sourceId:"recentSearches",onSelect:function(e){var t=e.item,n=e.event;H(t),n.shiftKey||n.ctrlKey||n.metaKey||s()},getItemUrl:function(e){return e.item.url},getItems:function(){return F.getAll()}},{sourceId:"favoriteSearches",onSelect:function(e){var t=e.item,n=e.event;H(t),n.shiftKey||n.ctrlKey||n.metaKey||s()},getItemUrl:function(e){return e.item.url},getItems:function(){return M.getAll()}}]}})}),[o,c,L,s,F,M,H,R,l,v,f,w]),z=U.getEnvironmentProps,q=U.getRootProps,$=U.refresh;return function(e){var t=e.getEnvironmentProps,n=e.panelElement,r=e.formElement,o=e.inputElement;Je.useEffect((function(){if(n&&r&&o){var e=t({panelElement:n,formElement:r,inputElement:o}),i=e.onTouchStart,l=e.onTouchMove;return window.addEventListener("touchstart",i),window.addEventListener("touchmove",l),function(){window.removeEventListener("touchstart",i),window.removeEventListener("touchmove",l)}}}),[t,n,r,o])}({getEnvironmentProps:z,panelElement:A.current,formElement:x.current,inputElement:D.current}),function(e){var t=e.container;Je.useEffect((function(){if(t){var e=t.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), input:not([disabled])"),n=e[0],r=e[e.length-1];return t.addEventListener("keydown",o),function(){t.removeEventListener("keydown",o)}}function o(e){"Tab"===e.key&&(e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus()))}}),[t])}({container:C.current}),Je.useEffect((function(){return document.body.classList.add("DocSearch--active"),function(){var e,t;document.body.classList.remove("DocSearch--active"),null===(e=(t=window).scrollTo)||void 0===e||e.call(t,0,_)}}),[]),Je.useEffect((function(){window.matchMedia("(max-width: 750px)").matches&&(N.current=5)}),[]),Je.useEffect((function(){A.current&&(A.current.scrollTop=0)}),[P.query]),Je.useEffect((function(){R.length>0&&($(),D.current&&D.current.focus())}),[R,$]),Je.useEffect((function(){function e(){if(I.current){var e=.01*window.innerHeight;I.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),Je.createElement("div",cr({ref:C},q({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===P.status&&"DocSearch-Container--Stalled","error"===P.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),onMouseDown:function(e){e.target===e.currentTarget&&s()}}),Je.createElement("div",{className:"DocSearch-Modal",ref:I},Je.createElement("header",{className:"DocSearch-SearchBar",ref:x},Je.createElement(Pn,cr({},U,{state:P,autoFocus:0===R.length,onClose:s,inputRef:D,isFromSelection:Boolean(R)&&R===T}))),Je.createElement("div",{className:"DocSearch-Dropdown",ref:A},Je.createElement(En,cr({},U,{indexName:o,state:P,hitComponent:d,resultsFooterComponent:m,disableUserPersonalization:w,recentSearches:F,favoriteSearches:M,onItemClick:function(e){H(e),s()},inputRef:D}))),Je.createElement("footer",{className:"DocSearch-Footer"},Je.createElement(Vt,null))))}function dr(){return(dr=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function hr(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,o=!1,i=void 0;try{for(var l,c=e[Symbol.iterator]();!(r=(l=c.next()).done)&&(n.push(l.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return n}}(e,t)||function(e,t){if(e){if("string"==typeof e)return mr(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?mr(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function mr(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function vr(e){var t=Je.useRef(null),n=hr(Je.useState(!1),2),r=n[0],o=n[1],i=hr(Je.useState(void 0),2),l=i[0],c=i[1],a=Je.useCallback((function(){o(!0)}),[o]),s=Je.useCallback((function(){o(!1)}),[o]);return function(e){var t=e.isOpen,n=e.onOpen,r=e.onClose,o=e.onInput,i=e.searchButtonRef;Je.useEffect((function(){function e(e){(27===e.keyCode&&t||"k"===e.key&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?r():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),i&&i.current===document.activeElement&&o&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&o(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,r,o,i])}({isOpen:r,onOpen:a,onClose:s,onInput:Je.useCallback((function(e){o(!0),c(e.key)}),[o,c]),searchButtonRef:t}),Je.createElement(Je.Fragment,null,Je.createElement(Ze,{onClick:a,ref:t}),r&&Ae(Je.createElement(pr,dr({},e,{initialScrollY:window.scrollY,initialQuery:l,onClose:s})),document.body))}rr.version="4.8.5";var yr,_r,gr,br,Or,wr,Sr,Er=n(7788),jr={},Pr=[],kr=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function Cr(e,t){for(var n in t)e[n]=t[n];return e}function Ir(e){var t=e.parentNode;t&&t.removeChild(e)}function xr(e,t,n,r,o){var i={type:e,props:t,key:n,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==o?++gr:o};return null==o&&null!=_r.vnode&&_r.vnode(i),i}function Ar(e){return e.children}function Dr(e,t){this.props=e,this.context=t}function Nr(e,t){if(null==t)return e.__?Nr(e.__,e.__.__k.indexOf(e)+1):null;for(var n;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e)return n.__e;return"function"==typeof e.type?Nr(e):null}function Tr(e){var t,n;if(null!=(e=e.__)&&null!=e.__c){for(e.__e=e.__c.base=null,t=0;t<e.__k.length;t++)if(null!=(n=e.__k[t])&&null!=n.__e){e.__e=e.__c.base=n.__e;break}return Tr(e)}}function Rr(e){(!e.__d&&(e.__d=!0)&&br.push(e)&&!Lr.__r++||Or!==_r.debounceRendering)&&((Or=_r.debounceRendering)||wr)(Lr)}function Lr(){var e,t,n,r,o,i,l,c;for(br.sort(Sr);e=br.shift();)e.__d&&(t=br.length,r=void 0,o=void 0,l=(i=(n=e).__v).__e,(c=n.__P)&&(r=[],(o=Cr({},i)).__v=i.__v+1,Vr(c,i,o,n.__n,void 0!==c.ownerSVGElement,null!=i.__h?[l]:null,r,null==l?Nr(i):l,i.__h),Jr(r,i),i.__e!=l&&Tr(i)),br.length>t&&br.sort(Sr));Lr.__r=0}function Mr(e,t,n,r,o,i,l,c,a,s){var u,f,p,d,h,m,v,y=r&&r.__k||Pr,_=y.length;for(n.__k=[],u=0;u<t.length;u++)if(null!=(d=n.__k[u]=null==(d=t[u])||"boolean"==typeof d||"function"==typeof d?null:"string"==typeof d||"number"==typeof d||"bigint"==typeof d?xr(null,d,null,null,d):Array.isArray(d)?xr(Ar,{children:d},null,null,null):d.__b>0?xr(d.type,d.props,d.key,d.ref?d.ref:null,d.__v):d)){if(d.__=n,d.__b=n.__b+1,null===(p=y[u])||p&&d.key==p.key&&d.type===p.type)y[u]=void 0;else for(f=0;f<_;f++){if((p=y[f])&&d.key==p.key&&d.type===p.type){y[f]=void 0;break}p=null}Vr(e,d,p=p||jr,o,i,l,c,a,s),h=d.__e,(f=d.ref)&&p.ref!=f&&(v||(v=[]),p.ref&&v.push(p.ref,null,d),v.push(f,d.__c||h,d)),null!=h?(null==m&&(m=h),"function"==typeof d.type&&d.__k===p.__k?d.__d=a=Fr(d,a,e):a=Hr(e,d,p,y,h,a),"function"==typeof n.type&&(n.__d=a)):a&&p.__e==a&&a.parentNode!=e&&(a=Nr(p))}for(n.__e=m,u=_;u--;)null!=y[u]&&("function"==typeof n.type&&null!=y[u].__e&&y[u].__e==n.__d&&(n.__d=Ur(r).nextSibling),Kr(y[u],y[u]));if(v)for(u=0;u<v.length;u++)Wr(v[u],v[++u],v[++u])}function Fr(e,t,n){for(var r,o=e.__k,i=0;o&&i<o.length;i++)(r=o[i])&&(r.__=e,t="function"==typeof r.type?Fr(r,t,n):Hr(n,r,r,o,r.__e,t));return t}function Hr(e,t,n,r,o,i){var l,c,a;if(void 0!==t.__d)l=t.__d,t.__d=void 0;else if(null==n||o!=i||null==o.parentNode)e:if(null==i||i.parentNode!==e)e.appendChild(o),l=null;else{for(c=i,a=0;(c=c.nextSibling)&&a<r.length;a+=1)if(c==o)break e;e.insertBefore(o,i),l=i}return void 0!==l?l:o.nextSibling}function Ur(e){var t,n,r;if(null==e.type||"string"==typeof e.type)return e.__e;if(e.__k)for(t=e.__k.length-1;t>=0;t--)if((n=e.__k[t])&&(r=Ur(n)))return r;return null}function zr(e,t,n){"-"===t[0]?e.setProperty(t,null==n?"":n):e[t]=null==n?"":"number"!=typeof n||kr.test(t)?n:n+"px"}function qr(e,t,n,r,o){var i;e:if("style"===t)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof r&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||zr(e.style,t,"");if(n)for(t in n)r&&n[t]===r[t]||zr(e.style,t,n[t])}else if("o"===t[0]&&"n"===t[1])i=t!==(t=t.replace(/Capture$/,"")),t=t.toLowerCase()in e?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.l[t+i]=n,n?r||e.addEventListener(t,i?Br:$r,i):e.removeEventListener(t,i?Br:$r,i);else if("dangerouslySetInnerHTML"!==t){if(o)t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!==t&&"height"!==t&&"href"!==t&&"list"!==t&&"form"!==t&&"tabIndex"!==t&&"download"!==t&&t in e)try{e[t]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null==n||!1===n&&"-"!==t[4]?e.removeAttribute(t):e.setAttribute(t,n))}}function $r(e){return this.l[e.type+!1](_r.event?_r.event(e):e)}function Br(e){return this.l[e.type+!0](_r.event?_r.event(e):e)}function Vr(e,t,n,r,o,i,l,c,a){var s,u,f,p,d,h,m,v,y,_,g,b,O,w,S,E=t.type;if(void 0!==t.constructor)return null;null!=n.__h&&(a=n.__h,c=t.__e=n.__e,t.__h=null,i=[c]),(s=_r.__b)&&s(t);try{e:if("function"==typeof E){if(v=t.props,y=(s=E.contextType)&&r[s.__c],_=s?y?y.props.value:s.__:r,n.__c?m=(u=t.__c=n.__c).__=u.__E:("prototype"in E&&E.prototype.render?t.__c=u=new E(v,_):(t.__c=u=new Dr(v,_),u.constructor=E,u.render=Gr),y&&y.sub(u),u.props=v,u.state||(u.state={}),u.context=_,u.__n=r,f=u.__d=!0,u.__h=[],u._sb=[]),null==u.__s&&(u.__s=u.state),null!=E.getDerivedStateFromProps&&(u.__s==u.state&&(u.__s=Cr({},u.__s)),Cr(u.__s,E.getDerivedStateFromProps(v,u.__s))),p=u.props,d=u.state,u.__v=t,f)null==E.getDerivedStateFromProps&&null!=u.componentWillMount&&u.componentWillMount(),null!=u.componentDidMount&&u.__h.push(u.componentDidMount);else{if(null==E.getDerivedStateFromProps&&v!==p&&null!=u.componentWillReceiveProps&&u.componentWillReceiveProps(v,_),!u.__e&&null!=u.shouldComponentUpdate&&!1===u.shouldComponentUpdate(v,u.__s,_)||t.__v===n.__v){for(t.__v!==n.__v&&(u.props=v,u.state=u.__s,u.__d=!1),u.__e=!1,t.__e=n.__e,t.__k=n.__k,t.__k.forEach((function(e){e&&(e.__=t)})),g=0;g<u._sb.length;g++)u.__h.push(u._sb[g]);u._sb=[],u.__h.length&&l.push(u);break e}null!=u.componentWillUpdate&&u.componentWillUpdate(v,u.__s,_),null!=u.componentDidUpdate&&u.__h.push((function(){u.componentDidUpdate(p,d,h)}))}if(u.context=_,u.props=v,u.__P=e,b=_r.__r,O=0,"prototype"in E&&E.prototype.render){for(u.state=u.__s,u.__d=!1,b&&b(t),s=u.render(u.props,u.state,u.context),w=0;w<u._sb.length;w++)u.__h.push(u._sb[w]);u._sb=[]}else do{u.__d=!1,b&&b(t),s=u.render(u.props,u.state,u.context),u.state=u.__s}while(u.__d&&++O<25);u.state=u.__s,null!=u.getChildContext&&(r=Cr(Cr({},r),u.getChildContext())),f||null==u.getSnapshotBeforeUpdate||(h=u.getSnapshotBeforeUpdate(p,d)),S=null!=s&&s.type===Ar&&null==s.key?s.props.children:s,Mr(e,Array.isArray(S)?S:[S],t,n,r,o,i,l,c,a),u.base=t.__e,t.__h=null,u.__h.length&&l.push(u),m&&(u.__E=u.__=null),u.__e=!1}else null==i&&t.__v===n.__v?(t.__k=n.__k,t.__e=n.__e):t.__e=function(e,t,n,r,o,i,l,c){var a,s,u,f=n.props,p=t.props,d=t.type,h=0;if("svg"===d&&(o=!0),null!=i)for(;h<i.length;h++)if((a=i[h])&&"setAttribute"in a==!!d&&(d?a.localName===d:3===a.nodeType)){e=a,i[h]=null;break}if(null==e){if(null===d)return document.createTextNode(p);e=o?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),i=null,c=!1}if(null===d)f===p||c&&e.data===p||(e.data=p);else{if(i=i&&yr.call(e.childNodes),s=(f=n.props||jr).dangerouslySetInnerHTML,u=p.dangerouslySetInnerHTML,!c){if(null!=i)for(f={},h=0;h<e.attributes.length;h++)f[e.attributes[h].name]=e.attributes[h].value;(u||s)&&(u&&(s&&u.__html==s.__html||u.__html===e.innerHTML)||(e.innerHTML=u&&u.__html||""))}if(function(e,t,n,r,o){var i;for(i in n)"children"===i||"key"===i||i in t||qr(e,i,null,n[i],r);for(i in t)o&&"function"!=typeof t[i]||"children"===i||"key"===i||"value"===i||"checked"===i||n[i]===t[i]||qr(e,i,t[i],n[i],r)}(e,p,f,o,c),u)t.__k=[];else if(h=t.props.children,Mr(e,Array.isArray(h)?h:[h],t,n,r,o&&"foreignObject"!==d,i,l,i?i[0]:n.__k&&Nr(n,0),c),null!=i)for(h=i.length;h--;)null!=i[h]&&Ir(i[h]);c||("value"in p&&void 0!==(h=p.value)&&(h!==e.value||"progress"===d&&!h||"option"===d&&h!==f.value)&&qr(e,"value",h,f.value,!1),"checked"in p&&void 0!==(h=p.checked)&&h!==e.checked&&qr(e,"checked",h,f.checked,!1))}return e}(n.__e,t,n,r,o,i,l,a);(s=_r.diffed)&&s(t)}catch(e){t.__v=null,(a||null!=i)&&(t.__e=c,t.__h=!!a,i[i.indexOf(c)]=null),_r.__e(e,t,n)}}function Jr(e,t){_r.__c&&_r.__c(t,e),e.some((function(t){try{e=t.__h,t.__h=[],e.some((function(e){e.call(t)}))}catch(e){_r.__e(e,t.__v)}}))}function Wr(e,t,n){try{"function"==typeof e?e(t):e.current=t}catch(e){_r.__e(e,n)}}function Kr(e,t,n){var r,o;if(_r.unmount&&_r.unmount(e),(r=e.ref)&&(r.current&&r.current!==e.__e||Wr(r,null,t)),null!=(r=e.__c)){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(e){_r.__e(e,t)}r.base=r.__P=null,e.__c=void 0}if(r=e.__k)for(o=0;o<r.length;o++)r[o]&&Kr(r[o],t,n||"function"!=typeof e.type);n||null==e.__e||Ir(e.__e),e.__=e.__e=e.__d=void 0}function Gr(e,t,n){return this.constructor(e,n)}yr=Pr.slice,_r={__e:function(e,t,n,r){for(var o,i,l;t=t.__;)if((o=t.__c)&&!o.__)try{if((i=o.constructor)&&null!=i.getDerivedStateFromError&&(o.setState(i.getDerivedStateFromError(e)),l=o.__d),null!=o.componentDidCatch&&(o.componentDidCatch(e,r||{}),l=o.__d),l)return o.__E=o}catch(t){e=t}throw e}},gr=0,Dr.prototype.setState=function(e,t){var n;n=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=Cr({},this.state),"function"==typeof e&&(e=e(Cr({},n),this.props)),e&&Cr(n,e),null!=e&&this.__v&&(t&&this._sb.push(t),Rr(this))},Dr.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),Rr(this))},Dr.prototype.render=Ar,br=[],wr="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,Sr=function(e,t){return e.__v.__b-t.__v.__b},Lr.__r=0;var Yr=n(2201);const Zr=(0,o.aZ)({name:"Docsearch",props:{options:{type:Object,required:!0}},setup(e){const t=(0,r.I)(),n=(0,r.Ym)(),i=(()=>{const e=(0,Yr.tv)(),t=(0,r.WF)();return{transformItems:e=>e.map((e=>({...e,url:(0,Er.rl)(e.url,t.value.base)}))),hitComponent:({hit:t,children:n})=>function(e,t,n){var r,o,i,l={};for(i in t)"key"==i?r=t[i]:"ref"==i?o=t[i]:l[i]=t[i];if(arguments.length>2&&(l.children=arguments.length>3?yr.call(arguments,2):n),"function"==typeof e&&null!=e.defaultProps)for(i in e.defaultProps)void 0===l[i]&&(l[i]=e.defaultProps[i]);return xr(e,l,r,o,null)}("a",{href:t.url,onClick:n=>{(e=>1===e.button||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey)(n)||(n.preventDefault(),e.push(t.url))}},n),navigator:{navigate:({itemUrl:t})=>{e.push(t)}}}})(),l=(0,o.Fl)((()=>{var n;return{...e.options,...null===(n=e.options.locales)||void 0===n?void 0:n[t.value]}})),a=[],s=()=>{var e,t;a.splice(0,a.length,`lang:${n.value}`,...null!==(t=null===(e=l.value.searchParameters)||void 0===e?void 0:e.facetFilters)&&void 0!==t?t:[]),function(e){Re(Je.createElement(vr,c({},e,{transformSearchClient:function(t){return t.addAlgoliaAgent("docsearch.js","3.0.0-alpha.34"),e.transformSearchClient?e.transformSearchClient(t):t}})),function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof e?t.document.querySelector(e):e}(e.container,e.environment))}({...i,...l.value,container:"#docsearch-container",searchParameters:{...l.value.searchParameters,facetFilters:a}})};return(0,o.bv)((()=>{s(),(0,o.YP)([t,l],(([e,t],[n,r])=>{e!==n&&JSON.stringify(t)!==JSON.stringify(r)&&s()})),(0,o.YP)(n,((e,t)=>{if(e!==t){const n=a.findIndex((e=>e===`lang:${t}`));n>-1&&a.splice(n,1,`lang:${e}`)}}))})),()=>(0,o.h)("div",{id:"docsearch-container"})}}),Xr={appId:"4ZF3BCJTP5",apiKey:"09ff75bbe16bc6e166e103ffb57e10ea",indexName:"fesjs",locales:{"/":{placeholder:"搜索文档"}}},Qr=(0,r.vW)((({app:e})=>{e.component("Docsearch",(()=>(0,o.h)(Zr,{options:Xr})))}))},6971:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d});var r=n(7621),o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i=function(e){return"IMG"===e.tagName},l=function(e){return e&&1===e.nodeType},c=function(e){return".svg"===(e.currentSrc||e.src).substr(-4).toLowerCase()},a=function(e){try{return Array.isArray(e)?e.filter(i):function(e){return NodeList.prototype.isPrototypeOf(e)}(e)?[].slice.call(e).filter(i):l(e)?[e].filter(i):"string"==typeof e?[].slice.call(document.querySelectorAll(e)).filter(i):[]}catch(e){throw new TypeError("The provided selector is invalid.\nExpects a CSS selector, a Node element, a NodeList or an array.\nSee: https://github.com/francoischalifour/medium-zoom")}},s=function(e,t){var n=o({bubbles:!1,cancelable:!1,detail:void 0},t);if("function"==typeof window.CustomEvent)return new CustomEvent(e,n);var r=document.createEvent("CustomEvent");return r.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),r};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}");const u=function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=window.Promise||function(e){function t(){}e(t,t)},i=function(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];var r=t.reduce((function(e,t){return[].concat(e,a(t))}),[]);return r.filter((function(e){return-1===d.indexOf(e)})).forEach((function(e){d.push(e),e.classList.add("medium-zoom-image")})),h.forEach((function(e){var t=e.type,n=e.listener,o=e.options;r.forEach((function(e){e.addEventListener(t,n,o)}))})),b},u=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).target,t=function(){var e={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,right:0,bottom:0},t=void 0,n=void 0;if(y.container)if(y.container instanceof Object)t=(e=o({},e,y.container)).width-e.left-e.right-2*y.margin,n=e.height-e.top-e.bottom-2*y.margin;else{var r=(l(y.container)?y.container:document.querySelector(y.container)).getBoundingClientRect(),i=r.width,a=r.height,s=r.left,u=r.top;e=o({},e,{width:i,height:a,left:s,top:u})}t=t||e.width-2*y.margin,n=n||e.height-2*y.margin;var f=_.zoomedHd||_.original,p=c(f)?t:f.naturalWidth||t,d=c(f)?n:f.naturalHeight||n,h=f.getBoundingClientRect(),m=h.top,v=h.left,g=h.width,b=h.height,O=Math.min(Math.max(g,p),t)/g,w=Math.min(Math.max(b,d),n)/b,S=Math.min(O,w),E="scale("+S+") translate3d("+((t-g)/2-v+y.margin+e.left)/S+"px, "+((n-b)/2-m+y.margin+e.top)/S+"px, 0)";_.zoomed.style.transform=E,_.zoomedHd&&(_.zoomedHd.style.transform=E)};return new r((function(n){if(e&&-1===d.indexOf(e))n(b);else if(_.zoomed)n(b);else{if(e)_.original=e;else{if(!(d.length>0))return void n(b);var r=d;_.original=r[0]}if(_.original.dispatchEvent(s("medium-zoom:open",{detail:{zoom:b}})),v=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,m=!0,_.zoomed=function(e){var t=e.getBoundingClientRect(),n=t.top,r=t.left,o=t.width,i=t.height,l=e.cloneNode(),c=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,a=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;return l.removeAttribute("id"),l.style.position="absolute",l.style.top=n+c+"px",l.style.left=r+a+"px",l.style.width=o+"px",l.style.height=i+"px",l.style.transform="",l}(_.original),document.body.appendChild(g),y.template){var o=l(y.template)?y.template:document.querySelector(y.template);_.template=document.createElement("div"),_.template.appendChild(o.content.cloneNode(!0)),document.body.appendChild(_.template)}if(_.original.parentElement&&"PICTURE"===_.original.parentElement.tagName&&_.original.currentSrc&&(_.zoomed.src=_.original.currentSrc),document.body.appendChild(_.zoomed),window.requestAnimationFrame((function(){document.body.classList.add("medium-zoom--opened")})),_.original.classList.add("medium-zoom-image--hidden"),_.zoomed.classList.add("medium-zoom-image--opened"),_.zoomed.addEventListener("click",f),_.zoomed.addEventListener("transitionend",(function e(){m=!1,_.zoomed.removeEventListener("transitionend",e),_.original.dispatchEvent(s("medium-zoom:opened",{detail:{zoom:b}})),n(b)})),_.original.getAttribute("data-zoom-src")){_.zoomedHd=_.zoomed.cloneNode(),_.zoomedHd.removeAttribute("srcset"),_.zoomedHd.removeAttribute("sizes"),_.zoomedHd.removeAttribute("loading"),_.zoomedHd.src=_.zoomed.getAttribute("data-zoom-src"),_.zoomedHd.onerror=function(){clearInterval(i),console.warn("Unable to reach the zoom image target "+_.zoomedHd.src),_.zoomedHd=null,t()};var i=setInterval((function(){_.zoomedHd.complete&&(clearInterval(i),_.zoomedHd.classList.add("medium-zoom-image--opened"),_.zoomedHd.addEventListener("click",f),document.body.appendChild(_.zoomedHd),t())}),10)}else if(_.original.hasAttribute("srcset")){_.zoomedHd=_.zoomed.cloneNode(),_.zoomedHd.removeAttribute("sizes"),_.zoomedHd.removeAttribute("loading");var c=_.zoomedHd.addEventListener("load",(function(){_.zoomedHd.removeEventListener("load",c),_.zoomedHd.classList.add("medium-zoom-image--opened"),_.zoomedHd.addEventListener("click",f),document.body.appendChild(_.zoomedHd),t()}))}else t()}}))},f=function(){return new r((function(e){!m&&_.original?(m=!0,document.body.classList.remove("medium-zoom--opened"),_.zoomed.style.transform="",_.zoomedHd&&(_.zoomedHd.style.transform=""),_.template&&(_.template.style.transition="opacity 150ms",_.template.style.opacity=0),_.original.dispatchEvent(s("medium-zoom:close",{detail:{zoom:b}})),_.zoomed.addEventListener("transitionend",(function t(){_.original.classList.remove("medium-zoom-image--hidden"),document.body.removeChild(_.zoomed),_.zoomedHd&&document.body.removeChild(_.zoomedHd),document.body.removeChild(g),_.zoomed.classList.remove("medium-zoom-image--opened"),_.template&&document.body.removeChild(_.template),m=!1,_.zoomed.removeEventListener("transitionend",t),_.original.dispatchEvent(s("medium-zoom:closed",{detail:{zoom:b}})),_.original=null,_.zoomed=null,_.zoomedHd=null,_.template=null,e(b)}))):e(b)}))},p=function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).target;return _.original?f():u({target:e})},d=[],h=[],m=!1,v=0,y=n,_={original:null,zoomed:null,zoomedHd:null,template:null};"[object Object]"===Object.prototype.toString.call(t)?y=t:(t||"string"==typeof t)&&i(t);var g=function(e){var t=document.createElement("div");return t.classList.add("medium-zoom-overlay"),t.style.background=e,t}((y=o({margin:0,background:"#fff",scrollOffset:40,container:null,template:null},y)).background);document.addEventListener("click",(function(e){var t=e.target;t!==g?-1!==d.indexOf(t)&&p({target:t}):f()})),document.addEventListener("keyup",(function(e){var t=e.key||e.keyCode;"Escape"!==t&&"Esc"!==t&&27!==t||f()})),document.addEventListener("scroll",(function(){if(!m&&_.original){var e=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;Math.abs(v-e)>y.scrollOffset&&setTimeout(f,150)}})),window.addEventListener("resize",f);var b={open:u,close:f,toggle:p,update:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e;if(e.background&&(g.style.background=e.background),e.container&&e.container instanceof Object&&(t.container=o({},y.container,e.container)),e.template){var n=l(e.template)?e.template:document.querySelector(e.template);t.template=n}return y=o({},y,t),d.forEach((function(e){e.dispatchEvent(s("medium-zoom:update",{detail:{zoom:b}}))})),b},clone:function(){return e(o({},y,arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}))},attach:i,detach:function(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];_.zoomed&&f();var r=t.length>0?t.reduce((function(e,t){return[].concat(e,a(t))}),[]):d;return r.forEach((function(e){e.classList.remove("medium-zoom-image"),e.dispatchEvent(s("medium-zoom:detach",{detail:{zoom:b}}))})),d=d.filter((function(e){return-1===r.indexOf(e)})),b},on:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return d.forEach((function(r){r.addEventListener("medium-zoom:"+e,t,n)})),h.push({type:"medium-zoom:"+e,listener:t,options:n}),b},off:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return d.forEach((function(r){r.removeEventListener("medium-zoom:"+e,t,n)})),h=h.filter((function(n){return!(n.type==="medium-zoom:"+e&&n.listener.toString()===t.toString())})),b},getOptions:function(){return y},getImages:function(){return d},getZoomedImage:function(){return _.original}};return b},f=Symbol("mediumZoom"),p={},d=(0,r.vW)((({app:e,router:t})=>{const n=u(p);n.refresh=(e=".theme-default-content > img, .theme-default-content :not(a) > img")=>{n.detach(),n.attach(e)},e.provide(f,n),t.afterEach((()=>{setTimeout((()=>n.refresh()),400)}))}))},6243:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c});var r=n(7621),o=n(4865),i=n(6252),l=n(2201);const c=(0,r.F2)((()=>{(0,i.bv)((()=>{const e=(0,l.tv)(),t=new Set;t.add(e.currentRoute.value.path),o.configure({showSpinner:!1}),e.beforeEach((e=>{t.has(e.path)||o.start()})),e.afterEach((e=>{t.add(e.path),o.done()}))}))}))},8341:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var r=n(6252),o=n(7621),i=n(743),l=n(2262),c=n(9963);const a=(0,r.aZ)({name:"PwaPopup",props:{locales:{type:Object,required:!1,default:()=>({})}},setup(e){const t=(0,i.f$)(),n=(0,o.I)(),a=(0,r.Fl)((()=>{var t;return null!==(t=e.locales[n.value])&&void 0!==t?t:{message:"New content is available.",buttonText:"Refresh"}})),s=(0,l.iH)(!1),u=(0,l.iH)(null),f=()=>{s.value=!1,u.value&&((0,i.NY)(u.value),location.reload(!0))};return t.on("updated",(e=>{e&&(u.value=e,s.value=!0)})),()=>(0,r.h)(c.uT,{name:"pwa-popup"},{default:()=>s.value?(0,r.h)("div",{class:"pwa-popup"},[a.value.message,(0,r.h)("br"),(0,r.h)("button",{onClick:f},a.value.buttonText)]):null})}}),s={"/":{message:"发现新内容可用",buttonText:"刷新"}},u=()=>(0,r.h)(a,{locales:s});u.displayName="PwaPopupWrapper";const f=u},4862:(e,t,n)=>{"use strict";n.d(t,{Z:()=>l});var r=n(7621),o=n(6252),i=n(743);const l=(0,r.F2)((()=>{const e=(...e)=>console.log("[@vuepress/plugin-pwa]",...e),t={all:l=l||new Map,on:function(e,t){var n=l.get(e);n?n.push(t):l.set(e,[t])},off:function(e,t){var n=l.get(e);n&&(t?n.splice(n.indexOf(t)>>>0,1):l.set(e,[]))},emit:function(e,t){var n=l.get(e);n&&n.slice().map((function(e){e(t)})),(n=l.get("*"))&&n.slice().map((function(n){n(e,t)}))}};var l;(0,o.JJ)(i.Lg,t),(0,o.bv)((async()=>{const{register:o}=await n.e(205).then(n.bind(n,5205));o((0,r.pJ)("service-worker.js"),{ready(n){e("Service worker is active."),t.emit("ready",n)},registered(n){e("Service worker has been registered."),t.emit("registered",n)},cached(n){e("Content has been cached for offline use."),t.emit("cached",n)},updatefound(n){e("New content is downloading."),t.emit("updatefound",n)},updated(n){e("New content is available, please refresh."),t.emit("updated",n)},offline(){e("No internet connection found. App is running in offline mode."),t.emit("offline")},error(n){e("Error during service worker registration:",n),t.emit("error",n)}})}))}))},743:(e,t,n)=>{"use strict";n.d(t,{Lg:()=>o,f$:()=>i,NY:()=>l});var r=n(6252);const o=Symbol("pwaEvent"),i=()=>{const e=(0,r.f3)(o);if(!e)throw new Error("usePwaEvent() is called without provider.");return e},l=e=>{const t=e.waiting;if(!t)return;const n=new MessageChannel;t.postMessage({type:"SKIP_WAITING"},[n.port2])}},1598:(e,t,n)=>{"use strict";n.d(t,{Z:()=>l});var r=n(7621),o=n(6252),i=n(3197);const l=(0,r.vW)((({app:e})=>{const t=(0,i.BV)(),n=e._context.provides[r.C3],l=(0,o.Fl)((()=>(0,i.g$)(t.value,n.value)));e.provide(i.ZS,l),Object.defineProperties(e.config.globalProperties,{$theme:{get:()=>t.value},$themeLocale:{get:()=>l.value}})}))},3197:(e,t,n)=>{"use strict";n.d(t,{g$:()=>s,ZS:()=>c,BV:()=>i,X6:()=>a});var r=n(2232);const o=(0,n(2262).iH)(r.f),i=()=>o;var l=n(6252);const c=Symbol(""),a=()=>{const e=(0,l.f3)(c);if(!e)throw new Error("useThemeLocaleData() is called without provider.");return e},s=(e,t)=>{var n;return{...e,...null===(n=e.locales)||void 0===n?void 0:n[t]}}},7788:(e,t,n)=>{"use strict";n.d(t,{H7:()=>o,kJ:()=>r.kJ,mf:()=>r.mf,ak:()=>i,B2:()=>l,R5:()=>c,PO:()=>a,HD:()=>r.HD,U1:()=>s,FY:()=>u,gb:()=>f,rl:()=>p});var r=n(3577);const o=e=>{const t=new Set,n=[];return e.forEach((e=>{const r=(([e,t,n])=>"meta"===e&&t.name?`${e}.${t.name}`:["title","base"].includes(e)?e:"template"===e&&t.id?`${e}.${t.id}`:JSON.stringify([e,t,n]))(e);t.has(r)||(t.add(r),n.push(e))})),n},i=e=>/^(https?:)?\/\//.test(e),l=e=>/^mailto:/.test(e),c=e=>/^tel:/.test(e),a=e=>"[object Object]"===Object.prototype.toString.call(e),s=e=>e.replace(/\/$/,""),u=e=>e.replace(/^\//,""),f=(e,t)=>{const n=Object.keys(e).sort(((e,t)=>{const n=t.split("/").length-e.split("/").length;return 0!==n?n:t.length-e.length}));for(const e of n)if(t.startsWith(e))return e;return"/"},p=(e,t="/")=>e.replace(/^(https?:)?\/\/[^/]*/,"").replace(new RegExp(`^${t}`),"/")},2009:(e,t,n)=>{"use strict";n.d(t,{Z:()=>m});var r=n(7621),o=n(6252),i=n(3577);const l=(0,o.aZ)({__name:"Badge",props:{type:{type:String,required:!1,default:"tip"},text:{type:String,required:!1,default:""},vertical:{type:String,required:!1,default:void 0}},setup:e=>(t,n)=>((0,o.wg)(),(0,o.iD)("span",{class:(0,i.C_)(["badge",e.type]),style:(0,i.j5)({verticalAlign:e.vertical})},[(0,o.WI)(t.$slots,"default",{},(()=>[(0,o.Uk)((0,i.zw)(e.text),1)]))],6))});var c=n(2262);const a=(0,o.aZ)({name:"CodeGroup",setup(e,{slots:t}){const n=(0,c.iH)(-1),r=(0,c.iH)([]);return()=>{var e;const i=((null===(e=t.default)||void 0===e?void 0:e.call(t))||[]).filter((e=>"CodeGroupItem"===e.type.name)).map((e=>(null===e.props&&(e.props={}),e)));return 0===i.length?null:(n.value<0||n.value>i.length-1?(n.value=i.findIndex((e=>""===e.props.active||!0===e.props.active)),-1===n.value&&(n.value=0)):i.forEach(((e,t)=>{e.props.active=t===n.value})),(0,o.h)("div",{class:"code-group"},[(0,o.h)("div",{class:"code-group__nav"},(0,o.h)("ul",{class:"code-group__ul"},i.map(((e,t)=>{const i=t===n.value;return(0,o.h)("li",{class:"code-group__li"},(0,o.h)("button",{ref:e=>{e&&(r.value[t]=e)},class:{"code-group__nav-tab":!0,"code-group__nav-tab-active":i},ariaPressed:i,ariaExpanded:i,onClick:()=>n.value=t,onKeydown:e=>((e,t)=>{" "===e.key||"Enter"===e.key?(e.preventDefault(),n.value=t):"ArrowRight"===e.key?(e.preventDefault(),((e=n.value)=>{e<r.value.length-1?n.value=e+1:n.value=0,r.value[n.value].focus()})(t)):"ArrowLeft"===e.key&&(e.preventDefault(),((e=n.value)=>{n.value=e>0?e-1:r.value.length-1,r.value[n.value].focus()})(t))})(e,t)},e.props.title))})))),i]))}}}),s=["aria-selected"],u=(0,o.aZ)({name:"CodeGroupItem"}),f=(0,o.aZ)({...u,props:{title:{type:String,required:!0},active:{type:Boolean,required:!1,default:!1}},setup:e=>(t,n)=>((0,o.wg)(),(0,o.iD)("div",{class:(0,i.C_)(["code-group-item",{"code-group-item__active":e.active}]),"aria-selected":e.active},[(0,o.WI)(t.$slots,"default")],10,s))});var p=n(5885);const d={class:"sr-only"},h=(0,o.aZ)({__name:"OutboundLink",setup(e){const t=(0,p.X6)();return(e,n)=>((0,o.wg)(),(0,o.j4)((0,c.SU)(r.MS),null,{default:(0,o.w5)((()=>[(0,o._)("span",d,(0,i.zw)((0,c.SU)(t).openInNewWindow),1)])),_:1}))}}),m=(0,r.vW)((({app:e,router:t})=>{e.component("Badge",l),e.component("CodeGroup",a),e.component("CodeGroupItem",f),delete e._context.components.OutboundLink,e.component("OutboundLink",h),e.component("NavbarSearch",(()=>{const t=e.component("Docsearch")||e.component("SearchBox");return t?(0,o.h)(t):null}));const n=t.options.scrollBehavior;t.options.scrollBehavior=async(...e)=>(await(0,p.P$)().wait(),n(...e))}))},8866:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var r=n(7621),o=n(5885);const i=(0,r.F2)((()=>{(0,o.OX)(),(0,o.fR)()}))},5885:(e,t,n)=>{"use strict";n.d(t,{OX:()=>x,fR:()=>$,vs:()=>I,sC:()=>R,P$:()=>H,VU:()=>q,X6:()=>Y});var r=n(2262),o=n(6252);function i(e){return!!(0,r.nZ)()&&((0,r.EB)(e),!0)}const l="undefined"!=typeof window,c=(Object.prototype.toString,e=>"string"==typeof e),a=()=>{};const s=e=>e();var u=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,d=(e,t)=>{var n={};for(var r in e)f.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&u)for(var r of u(e))t.indexOf(r)<0&&p.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable;const h=l?window:void 0;l&&window.document,l&&window.navigator,l&&window.location,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable;const m="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},v="__vueuse_ssr_handlers__";m[v]=m[v]||{};const y=m[v];const _={boolean:{read:e=>"true"===e,write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))}};function g(e,t,n,l={}){var u;const{flush:f="pre",deep:p=!0,listenToStorageChanges:m=!0,writeDefaults:v=!0,shallow:g,window:b=h,eventFilter:O,onError:w=(e=>{console.error(e)})}=l,S=(0,r.SU)(t),E=function(e){return null==e?"any":e instanceof Set?"set":e instanceof Map?"map":"boolean"==typeof e?"boolean":"string"==typeof e?"string":"object"==typeof e||Array.isArray(e)?"object":Number.isNaN(e)?"any":"number"}(S),j=(g?r.XI:r.iH)(t),P=null!=(u=l.serializer)?u:_[E];if(!n)try{n=function(e,t){return y[e]||t}("getDefaultStorage",(()=>{var e;return null==(e=h)?void 0:e.localStorage}))()}catch(e){w(e)}function k(t){if(n&&(!t||t.key===e))try{const r=t?t.newValue:n.getItem(e);null==r?(j.value=S,v&&null!==S&&n.setItem(e,P.write(S))):j.value="string"!=typeof r?r:P.read(r)}catch(e){w(e)}}return k(),b&&m&&function(...e){let t,n,l,s;if(c(e[0])?([n,l,s]=e,t=h):[t,n,l,s]=e,!t)return a;let u=a;const f=(0,o.YP)((()=>(0,r.SU)(t)),(e=>{u(),e&&(e.addEventListener(n,l,s),u=()=>{e.removeEventListener(n,l,s),u=a})}),{immediate:!0,flush:"post"}),p=()=>{f(),u()};i(p)}(b,"storage",(e=>setTimeout((()=>k(e)),0))),n&&function(e,t,n={}){const r=n,{eventFilter:i=s}=r,l=d(r,["eventFilter"]);return(0,o.YP)(e,(c=i,a=t,function(...e){c((()=>a.apply(this,e)),{fn:a,thisArg:this,args:e})}),l);var c,a}(j,(()=>{try{null==j.value?n.removeItem(e):n.setItem(e,P.write(j.value))}catch(e){w(e)}}),{flush:f,deep:p,eventFilter:O}),j}function b(e){return function(e,t={}){const{window:n=h}=t;let l;const c=(0,r.iH)(!1),a=()=>{n&&(l||(l=n.matchMedia(e)),c.value=l.matches)};return function(e,t=!0){(0,o.FN)()?(0,o.bv)(e):t?e():(0,o.Y3)(e)}((()=>{a(),l&&("addEventListener"in l?l.addEventListener("change",a):l.addListener(a),i((()=>{"removeEventListener"in a?l.removeEventListener("change",a):l.removeListener(a)})))})),c}("(prefers-color-scheme: dark)",e)}var O,w;Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,l&&(null==window?void 0:window.navigator)&&(null==(O=null==window?void 0:window.navigator)?void 0:O.platform)&&/iP(ad|hone|od)/.test(null==(w=null==window?void 0:window.navigator)?void 0:w.platform),Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable;var S=Object.defineProperty,E=(Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols),j=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable,k=(e,t,n)=>t in e?S(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;((e,t)=>{for(var n in t||(t={}))j.call(t,n)&&k(e,n,t[n]);if(E)for(var n of E(t))P.call(t,n)&&k(e,n,t[n])})({text:""},{top:0,left:0,bottom:0,right:0,height:0,width:0}),Object.defineProperty,Object.defineProperties,Object.getOwnPropertyDescriptors,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable,Object.defineProperty,Object.getOwnPropertySymbols,Object.prototype.hasOwnProperty,Object.prototype.propertyIsEnumerable;const C=Symbol(""),I=()=>{const e=(0,o.f3)(C);if(!e)throw new Error("useDarkMode() is called without provider.");return e},x=()=>{const e=Y(),t=b(),n=g("vuepress-color-scheme","auto"),r=(0,o.Fl)({get:()=>!!e.value.darkMode&&("auto"===n.value?t.value:"dark"===n.value),set(e){e===t.value?n.value="auto":n.value=e?"dark":"light"}});(0,o.JJ)(C,r),A(r)},A=e=>{const t=(t=e.value)=>{const n=null===window||void 0===window?void 0:window.document.querySelector("html");null==n||n.classList.toggle("dark",t)};(0,o.bv)((()=>{(0,o.YP)(e,t,{immediate:!0})})),(0,o.Ah)((()=>t()))};var D=n(7788),N=n(2201);const T=(...e)=>{const t=(0,N.tv)().resolve(...e),n=t.matched[t.matched.length-1];if(!(null==n?void 0:n.redirect))return t;const{redirect:r}=n,o=(0,D.mf)(r)?r(t):r,i=(0,D.HD)(o)?{path:o}:o;return T({hash:t.hash,query:t.query,params:t.params,...i})},R=e=>{const t=T(e);return{text:t.meta.title||e,link:"404"===t.name?e:t.fullPath}};let L=null,M=null;const F={wait:()=>L,pending:()=>{L=new Promise((e=>M=e))},resolve:()=>{null==M||M(),L=null,M=null}},H=()=>F;var U=n(7621);const z=Symbol("sidebarItems"),q=()=>{const e=(0,o.f3)(z);if(!e)throw new Error("useSidebarItems() is called without provider.");return e},$=()=>{const e=Y(),t=(0,U.I2)(),n=(0,o.Fl)((()=>B(t.value,e.value)));(0,o.JJ)(z,n)},B=(e,t)=>{var n,r,o,i;const l=null!==(r=null!==(n=e.sidebar)&&void 0!==n?n:t.sidebar)&&void 0!==r?r:"auto",c=null!==(i=null!==(o=e.sidebarDepth)&&void 0!==o?o:t.sidebarDepth)&&void 0!==i?i:2;return e.home||!1===l?[]:"auto"===l?J(c):(0,D.kJ)(l)?W(l,c):(0,D.PO)(l)?K(l,c):[]},V=(e,t)=>t>0?e.map((e=>((e,t)=>({text:e.title,link:`#${e.slug}`,children:V(e.children,t)}))(e,t-1))):[],J=e=>{const t=(0,U.Vi)();return[{text:t.value.title,children:V(t.value.headers,e)}]},W=(e,t)=>{const n=(0,N.yj)(),r=(0,U.Vi)(),o=e=>{var i;let l;if(l=(0,D.HD)(e)?R(e):e,l.children)return{...l,children:l.children.map((e=>o(e)))};if(l.link===n.path){const e=1===(null===(i=r.value.headers[0])||void 0===i?void 0:i.level)?r.value.headers[0].children:r.value.headers;return{...l,children:V(e,t)}}return l};return e.map((e=>o(e)))},K=(e,t)=>{var n;const r=(0,N.yj)(),o=null!==(n=e[(0,D.gb)(e,r.path)])&&void 0!==n?n:[];return W(o,t)};var G=n(3197);const Y=()=>(0,G.X6)()},4865:function(e,t,n){var r,o;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function o(e,t,n){return e<t?t:e>n?n:e}function i(e){return 100*(-1+e)}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=o(e,r.minimum,1),n.status=1===e?null:e;var a=n.render(!t),s=a.querySelector(r.barSelector),u=r.speed,f=r.easing;return a.offsetWidth,l((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),c(s,function(e,t,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+i(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+i(e)+"%,0)"}:{"margin-left":i(e)+"%"}).transition="all "+t+"ms "+n,o}(e,u,f)),1===e?(c(a,{transition:"none",opacity:1}),a.offsetWidth,setTimeout((function(){c(a,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*o(Math.random()*t,.1,.95)),t=o(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");s(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var o,l=t.querySelector(r.barSelector),a=e?"-100":i(n.status||0),u=document.querySelector(r.parent);return c(l,{transition:"all 0 linear",transform:"translate3d("+a+"%,0,0)"}),r.showSpinner||(o=t.querySelector(r.spinnerSelector))&&p(o),u!=document.body&&s(u,"nprogress-custom-parent"),u.appendChild(t),t},n.remove=function(){u(document.documentElement,"nprogress-busy"),u(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&p(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var l=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),c=function(){var e=["Webkit","O","Moz","ms"],t={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()})),t[n]||(t[n]=function(t){var n=document.body.style;if(t in n)return t;for(var r,o=e.length,i=t.charAt(0).toUpperCase()+t.slice(1);o--;)if((r=e[o]+i)in n)return r;return t}(n))}function r(e,t,r){t=n(t),e.style[t]=r}return function(e,t){var n,o,i=arguments;if(2==i.length)for(n in t)void 0!==(o=t[n])&&t.hasOwnProperty(n)&&r(e,n,o);else r(e,i[1],i[2])}}();function a(e,t){return("string"==typeof e?e:f(e)).indexOf(" "+t+" ")>=0}function s(e,t){var n=f(e),r=n+t;a(n,t)||(e.className=r.substring(1))}function u(e,t){var n,r=f(e);a(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function f(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function p(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(o=r.call(t,n,t,e))||(e.exports=o)},2938:(e,t,n)=>{"use strict";function r(e,t,n){var r,o,i;void 0===t&&(t=50),void 0===n&&(n={});var l=null!=(r=n.isImmediate)&&r,c=null!=(o=n.callback)&&o,a=n.maxWait,s=Date.now(),u=[];function f(){if(void 0!==a){var e=Date.now()-s;if(e+t>=a)return a-e}return t}var p=function(){var t=[].slice.call(arguments),n=this;return new Promise((function(r,o){var a=l&&void 0===i;if(void 0!==i&&clearTimeout(i),i=setTimeout((function(){if(i=void 0,s=Date.now(),!l){var r=e.apply(n,t);c&&c(r),u.forEach((function(e){return(0,e.resolve)(r)})),u=[]}}),f()),a){var p=e.apply(n,t);return c&&c(p),r(p)}u.push({resolve:r,reject:o})}))};return p.cancel=function(e){void 0!==i&&clearTimeout(i),u.forEach((function(t){return(0,t.reject)(e)})),u=[]},p}n.d(t,{D:()=>r})},2201:(e,t,n)=>{"use strict";n.d(t,{AJ:()=>x,MA:()=>xe,PO:()=>C,p7:()=>Ae,tv:()=>Ne,yj:()=>Te});var r=n(6252),o=n(2262);const i="undefined"!=typeof window;const l=Object.assign;function c(e,t){const n={};for(const r in t){const o=t[r];n[r]=s(o)?o.map(e):e(o)}return n}const a=()=>{},s=Array.isArray,u=/\/$/,f=e=>e.replace(u,"");function p(e,t,n="/"){let r,o={},i="",l="";const c=t.indexOf("#");let a=t.indexOf("?");return c<a&&c>=0&&(a=-1),a>-1&&(r=t.slice(0,a),i=t.slice(a+1,c>-1?c:t.length),o=e(i)),c>-1&&(r=r||t.slice(0,c),l=t.slice(c,t.length)),r=function(e,t){if(e.startsWith("/"))return e;if(!e)return t;const n=t.split("/"),r=e.split("/");let o,i,l=n.length-1;for(o=0;o<r.length;o++)if(i=r[o],"."!==i){if(".."!==i)break;l>1&&l--}return n.slice(0,l).join("/")+"/"+r.slice(o-(o===r.length?1:0)).join("/")}(null!=r?r:t,n),{fullPath:r+(i&&"?")+i+l,path:r,query:o,hash:l}}function d(e,t){return t&&e.toLowerCase().startsWith(t.toLowerCase())?e.slice(t.length)||"/":e}function h(e,t){return(e.aliasOf||e)===(t.aliasOf||t)}function m(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(!v(e[n],t[n]))return!1;return!0}function v(e,t){return s(e)?y(e,t):s(t)?y(t,e):e===t}function y(e,t){return s(t)?e.length===t.length&&e.every(((e,n)=>e===t[n])):1===e.length&&e[0]===t}var _,g;!function(e){e.pop="pop",e.push="push"}(_||(_={})),function(e){e.back="back",e.forward="forward",e.unknown=""}(g||(g={}));const b=/^[^#]+#/;function O(e,t){return e.replace(b,"#")+t}const w=()=>({left:window.pageXOffset,top:window.pageYOffset});function S(e,t){return(history.state?history.state.position-t:-1)+e}const E=new Map;let j=()=>location.protocol+"//"+location.host;function P(e,t){const{pathname:n,search:r,hash:o}=t,i=e.indexOf("#");if(i>-1){let t=o.includes(e.slice(i))?e.slice(i).length:1,n=o.slice(t);return"/"!==n[0]&&(n="/"+n),d(n,"")}return d(n,e)+r+o}function k(e,t,n,r=!1,o=!1){return{back:e,current:t,forward:n,replaced:r,position:window.history.length,scroll:o?w():null}}function C(e){const t=function(e){const{history:t,location:n}=window,r={value:P(e,n)},o={value:t.state};function i(r,i,l){const c=e.indexOf("#"),a=c>-1?(n.host&&document.querySelector("base")?e:e.slice(c))+r:j()+e+r;try{t[l?"replaceState":"pushState"](i,"",a),o.value=i}catch(e){console.error(e),n[l?"replace":"assign"](a)}}return o.value||i(r.value,{back:null,current:r.value,forward:null,position:t.length-1,replaced:!0,scroll:null},!0),{location:r,state:o,push:function(e,n){const c=l({},o.value,t.state,{forward:e,scroll:w()});i(c.current,c,!0),i(e,l({},k(r.value,e,null),{position:c.position+1},n),!1),r.value=e},replace:function(e,n){i(e,l({},t.state,k(o.value.back,e,o.value.forward,!0),n,{position:o.value.position}),!0),r.value=e}}}(e=function(e){if(!e)if(i){const t=document.querySelector("base");e=(e=t&&t.getAttribute("href")||"/").replace(/^\w+:\/\/[^\/]+/,"")}else e="/";return"/"!==e[0]&&"#"!==e[0]&&(e="/"+e),f(e)}(e)),n=function(e,t,n,r){let o=[],i=[],c=null;const a=({state:i})=>{const l=P(e,location),a=n.value,s=t.value;let u=0;if(i){if(n.value=l,t.value=i,c&&c===a)return void(c=null);u=s?i.position-s.position:0}else r(l);o.forEach((e=>{e(n.value,a,{delta:u,type:_.pop,direction:u?u>0?g.forward:g.back:g.unknown})}))};function s(){const{history:e}=window;e.state&&e.replaceState(l({},e.state,{scroll:w()}),"")}return window.addEventListener("popstate",a),window.addEventListener("beforeunload",s),{pauseListeners:function(){c=n.value},listen:function(e){o.push(e);const t=()=>{const t=o.indexOf(e);t>-1&&o.splice(t,1)};return i.push(t),t},destroy:function(){for(const e of i)e();i=[],window.removeEventListener("popstate",a),window.removeEventListener("beforeunload",s)}}}(e,t.state,t.location,t.replace),r=l({location:"",base:e,go:function(e,t=!0){t||n.pauseListeners(),history.go(e)},createHref:O.bind(null,e)},t,n);return Object.defineProperty(r,"location",{enumerable:!0,get:()=>t.location.value}),Object.defineProperty(r,"state",{enumerable:!0,get:()=>t.state.value}),r}function I(e){return"string"==typeof e||"symbol"==typeof e}const x={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},A=Symbol("");var D;function N(e,t){return l(new Error,{type:e,[A]:!0},t)}function T(e,t){return e instanceof Error&&A in e&&(null==t||!!(e.type&t))}!function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"}(D||(D={}));const R="[^/]+?",L={sensitive:!1,strict:!1,start:!0,end:!0},M=/[.+*?^${}()[\]/\\]/g;function F(e,t){let n=0;for(;n<e.length&&n<t.length;){const r=t[n]-e[n];if(r)return r;n++}return e.length<t.length?1===e.length&&80===e[0]?-1:1:e.length>t.length?1===t.length&&80===t[0]?1:-1:0}function H(e,t){let n=0;const r=e.score,o=t.score;for(;n<r.length&&n<o.length;){const e=F(r[n],o[n]);if(e)return e;n++}if(1===Math.abs(o.length-r.length)){if(U(r))return 1;if(U(o))return-1}return o.length-r.length}function U(e){const t=e[e.length-1];return e.length>0&&t[t.length-1]<0}const z={type:0,value:""},q=/[a-zA-Z0-9_]/;function $(e,t,n){const r=function(e,t){const n=l({},L,t),r=[];let o=n.start?"^":"";const i=[];for(const t of e){const e=t.length?[]:[90];n.strict&&!t.length&&(o+="/");for(let r=0;r<t.length;r++){const l=t[r];let c=40+(n.sensitive?.25:0);if(0===l.type)r||(o+="/"),o+=l.value.replace(M,"\\$&"),c+=40;else if(1===l.type){const{value:e,repeatable:n,optional:a,regexp:s}=l;i.push({name:e,repeatable:n,optional:a});const u=s||R;if(u!==R){c+=10;try{new RegExp(`(${u})`)}catch(t){throw new Error(`Invalid custom RegExp for param "${e}" (${u}): `+t.message)}}let f=n?`((?:${u})(?:/(?:${u}))*)`:`(${u})`;r||(f=a&&t.length<2?`(?:/${f})`:"/"+f),a&&(f+="?"),o+=f,c+=20,a&&(c+=-8),n&&(c+=-20),".*"===u&&(c+=-50)}e.push(c)}r.push(e)}if(n.strict&&n.end){const e=r.length-1;r[e][r[e].length-1]+=.7000000000000001}n.strict||(o+="/?"),n.end?o+="$":n.strict&&(o+="(?:/|$)");const c=new RegExp(o,n.sensitive?"":"i");return{re:c,score:r,keys:i,parse:function(e){const t=e.match(c),n={};if(!t)return null;for(let e=1;e<t.length;e++){const r=t[e]||"",o=i[e-1];n[o.name]=r&&o.repeatable?r.split("/"):r}return n},stringify:function(t){let n="",r=!1;for(const o of e){r&&n.endsWith("/")||(n+="/"),r=!1;for(const e of o)if(0===e.type)n+=e.value;else if(1===e.type){const{value:i,repeatable:l,optional:c}=e,a=i in t?t[i]:"";if(s(a)&&!l)throw new Error(`Provided param "${i}" is an array but it is not repeatable (* or + modifiers)`);const u=s(a)?a.join("/"):a;if(!u){if(!c)throw new Error(`Missing required param "${i}"`);o.length<2&&(n.endsWith("/")?n=n.slice(0,-1):r=!0)}n+=u}}return n||"/"}}}(function(e){if(!e)return[[]];if("/"===e)return[[z]];if(!e.startsWith("/"))throw new Error(`Invalid path "${e}"`);function t(e){throw new Error(`ERR (${n})/"${s}": ${e}`)}let n=0,r=n;const o=[];let i;function l(){i&&o.push(i),i=[]}let c,a=0,s="",u="";function f(){s&&(0===n?i.push({type:0,value:s}):1===n||2===n||3===n?(i.length>1&&("*"===c||"+"===c)&&t(`A repeatable param (${s}) must be alone in its segment. eg: '/:ids+.`),i.push({type:1,value:s,regexp:u,repeatable:"*"===c||"+"===c,optional:"*"===c||"?"===c})):t("Invalid state to consume buffer"),s="")}function p(){s+=c}for(;a<e.length;)if(c=e[a++],"\\"!==c||2===n)switch(n){case 0:"/"===c?(s&&f(),l()):":"===c?(f(),n=1):p();break;case 4:p(),n=r;break;case 1:"("===c?n=2:q.test(c)?p():(f(),n=0,"*"!==c&&"?"!==c&&"+"!==c&&a--);break;case 2:")"===c?"\\"==u[u.length-1]?u=u.slice(0,-1)+c:n=3:u+=c;break;case 3:f(),n=0,"*"!==c&&"?"!==c&&"+"!==c&&a--,u="";break;default:t("Unknown state")}else r=n,n=4;return 2===n&&t(`Unfinished custom RegExp for param "${s}"`),f(),l(),o}(e.path),n),o=l(r,{record:e,parent:t,children:[],alias:[]});return t&&!o.record.aliasOf==!t.record.aliasOf&&t.children.push(o),o}function B(e,t){const n={};for(const r of t)r in e&&(n[r]=e[r]);return n}function V(e){const t={},n=e.props||!1;if("component"in e)t.default=n;else for(const r in e.components)t[r]="boolean"==typeof n?n:n[r];return t}function J(e){for(;e;){if(e.record.aliasOf)return!0;e=e.parent}return!1}function W(e){return e.reduce(((e,t)=>l(e,t.meta)),{})}function K(e,t){const n={};for(const r in e)n[r]=r in t?t[r]:e[r];return n}function G(e,t){return t.children.some((t=>t===e||G(e,t)))}const Y=/#/g,Z=/&/g,X=/\//g,Q=/=/g,ee=/\?/g,te=/\+/g,ne=/%5B/g,re=/%5D/g,oe=/%5E/g,ie=/%60/g,le=/%7B/g,ce=/%7C/g,ae=/%7D/g,se=/%20/g;function ue(e){return encodeURI(""+e).replace(ce,"|").replace(ne,"[").replace(re,"]")}function fe(e){return ue(e).replace(te,"%2B").replace(se,"+").replace(Y,"%23").replace(Z,"%26").replace(ie,"`").replace(le,"{").replace(ae,"}").replace(oe,"^")}function pe(e){return null==e?"":function(e){return ue(e).replace(Y,"%23").replace(ee,"%3F")}(e).replace(X,"%2F")}function de(e){try{return decodeURIComponent(""+e)}catch(e){}return""+e}function he(e){const t={};if(""===e||"?"===e)return t;const n=("?"===e[0]?e.slice(1):e).split("&");for(let e=0;e<n.length;++e){const r=n[e].replace(te," "),o=r.indexOf("="),i=de(o<0?r:r.slice(0,o)),l=o<0?null:de(r.slice(o+1));if(i in t){let e=t[i];s(e)||(e=t[i]=[e]),e.push(l)}else t[i]=l}return t}function me(e){let t="";for(let n in e){const r=e[n];(n=fe(n).replace(Q,"%3D"),null!=r)?(s(r)?r.map((e=>e&&fe(e))):[r&&fe(r)]).forEach((e=>{void 0!==e&&(t+=(t.length?"&":"")+n,null!=e&&(t+="="+e))})):void 0!==r&&(t+=(t.length?"&":"")+n)}return t}function ve(e){const t={};for(const n in e){const r=e[n];void 0!==r&&(t[n]=s(r)?r.map((e=>null==e?null:""+e)):null==r?r:""+r)}return t}const ye=Symbol(""),_e=Symbol(""),ge=Symbol(""),be=Symbol(""),Oe=Symbol("");function we(){let e=[];return{add:function(t){return e.push(t),()=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)}},list:()=>e,reset:function(){e=[]}}}function Se(e,t,n,r,o){const i=r&&(r.enterCallbacks[o]=r.enterCallbacks[o]||[]);return()=>new Promise(((l,c)=>{const a=e=>{var a;!1===e?c(N(4,{from:n,to:t})):e instanceof Error?c(e):"string"==typeof(a=e)||a&&"object"==typeof a?c(N(2,{from:t,to:e})):(i&&r.enterCallbacks[o]===i&&"function"==typeof e&&i.push(e),l())},s=e.call(r&&r.instances[o],t,n,a);let u=Promise.resolve(s);e.length<3&&(u=u.then(a)),u.catch((e=>c(e)))}))}function Ee(e,t,n,r){const o=[];for(const l of e)for(const e in l.components){let c=l.components[e];if("beforeRouteEnter"===t||l.instances[e])if("object"==typeof(i=c)||"displayName"in i||"props"in i||"__vccOpts"in i){const i=(c.__vccOpts||c)[t];i&&o.push(Se(i,n,r,l,e))}else{let i=c();o.push((()=>i.then((o=>{if(!o)return Promise.reject(new Error(`Couldn't resolve component "${e}" at "${l.path}"`));const i=(c=o).__esModule||"Module"===c[Symbol.toStringTag]?o.default:o;var c;l.components[e]=i;const a=(i.__vccOpts||i)[t];return a&&Se(a,n,r,l,e)()}))))}}var i;return o}function je(e){const t=(0,r.f3)(ge),n=(0,r.f3)(be),i=(0,r.Fl)((()=>t.resolve((0,o.SU)(e.to)))),l=(0,r.Fl)((()=>{const{matched:e}=i.value,{length:t}=e,r=e[t-1],o=n.matched;if(!r||!o.length)return-1;const l=o.findIndex(h.bind(null,r));if(l>-1)return l;const c=ke(e[t-2]);return t>1&&ke(r)===c&&o[o.length-1].path!==c?o.findIndex(h.bind(null,e[t-2])):l})),c=(0,r.Fl)((()=>l.value>-1&&function(e,t){for(const n in t){const r=t[n],o=e[n];if("string"==typeof r){if(r!==o)return!1}else if(!s(o)||o.length!==r.length||r.some(((e,t)=>e!==o[t])))return!1}return!0}(n.params,i.value.params))),u=(0,r.Fl)((()=>l.value>-1&&l.value===n.matched.length-1&&m(n.params,i.value.params)));return{route:i,href:(0,r.Fl)((()=>i.value.href)),isActive:c,isExactActive:u,navigate:function(n={}){return function(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey||e.defaultPrevented||void 0!==e.button&&0!==e.button)){if(e.currentTarget&&e.currentTarget.getAttribute){const t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}(n)?t[(0,o.SU)(e.replace)?"replace":"push"]((0,o.SU)(e.to)).catch(a):Promise.resolve()}}}const Pe=(0,r.aZ)({name:"RouterLink",compatConfig:{MODE:3},props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},useLink:je,setup(e,{slots:t}){const n=(0,o.qj)(je(e)),{options:i}=(0,r.f3)(ge),l=(0,r.Fl)((()=>({[Ce(e.activeClass,i.linkActiveClass,"router-link-active")]:n.isActive,[Ce(e.exactActiveClass,i.linkExactActiveClass,"router-link-exact-active")]:n.isExactActive})));return()=>{const o=t.default&&t.default(n);return e.custom?o:(0,r.h)("a",{"aria-current":n.isExactActive?e.ariaCurrentValue:null,href:n.href,onClick:n.navigate,class:l.value},o)}}});function ke(e){return e?e.aliasOf?e.aliasOf.path:e.path:""}const Ce=(e,t,n)=>null!=e?e:null!=t?t:n;function Ie(e,t){if(!e)return null;const n=e(t);return 1===n.length?n[0]:n}const xe=(0,r.aZ)({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},compatConfig:{MODE:3},setup(e,{attrs:t,slots:n}){const i=(0,r.f3)(Oe),c=(0,r.Fl)((()=>e.route||i.value)),a=(0,r.f3)(_e,0),s=(0,r.Fl)((()=>{let e=(0,o.SU)(a);const{matched:t}=c.value;let n;for(;(n=t[e])&&!n.components;)e++;return e})),u=(0,r.Fl)((()=>c.value.matched[s.value]));(0,r.JJ)(_e,(0,r.Fl)((()=>s.value+1))),(0,r.JJ)(ye,u),(0,r.JJ)(Oe,c);const f=(0,o.iH)();return(0,r.YP)((()=>[f.value,u.value,e.name]),(([e,t,n],[r,o,i])=>{t&&(t.instances[n]=e,o&&o!==t&&e&&e===r&&(t.leaveGuards.size||(t.leaveGuards=o.leaveGuards),t.updateGuards.size||(t.updateGuards=o.updateGuards))),!e||!t||o&&h(t,o)&&r||(t.enterCallbacks[n]||[]).forEach((t=>t(e)))}),{flush:"post"}),()=>{const o=c.value,i=e.name,a=u.value,s=a&&a.components[i];if(!s)return Ie(n.default,{Component:s,route:o});const p=a.props[i],d=p?!0===p?o.params:"function"==typeof p?p(o):p:null,h=(0,r.h)(s,l({},d,t,{onVnodeUnmounted:e=>{e.component.isUnmounted&&(a.instances[i]=null)},ref:f}));return Ie(n.default,{Component:h,route:o})||h}}});function Ae(e){const t=function(e,t){const n=[],r=new Map;function o(e,n,r){const s=!r,u=function(e){return{path:e.path,redirect:e.redirect,name:e.name,meta:e.meta||{},aliasOf:void 0,beforeEnter:e.beforeEnter,props:V(e),children:e.children||[],instances:{},leaveGuards:new Set,updateGuards:new Set,enterCallbacks:{},components:"components"in e?e.components||null:e.component&&{default:e.component}}}(e);u.aliasOf=r&&r.record;const f=K(t,e),p=[u];if("alias"in e){const t="string"==typeof e.alias?[e.alias]:e.alias;for(const e of t)p.push(l({},u,{components:r?r.record.components:u.components,path:e,aliasOf:r?r.record:u}))}let d,h;for(const t of p){const{path:l}=t;if(n&&"/"!==l[0]){const e=n.record.path,r="/"===e[e.length-1]?"":"/";t.path=n.record.path+(l&&r+l)}if(d=$(t,n,f),r?r.alias.push(d):(h=h||d,h!==d&&h.alias.push(d),s&&e.name&&!J(d)&&i(e.name)),u.children){const e=u.children;for(let t=0;t<e.length;t++)o(e[t],d,r&&r.children[t])}r=r||d,(d.record.components&&Object.keys(d.record.components).length||d.record.name||d.record.redirect)&&c(d)}return h?()=>{i(h)}:a}function i(e){if(I(e)){const t=r.get(e);t&&(r.delete(e),n.splice(n.indexOf(t),1),t.children.forEach(i),t.alias.forEach(i))}else{const t=n.indexOf(e);t>-1&&(n.splice(t,1),e.record.name&&r.delete(e.record.name),e.children.forEach(i),e.alias.forEach(i))}}function c(e){let t=0;for(;t<n.length&&H(e,n[t])>=0&&(e.record.path!==n[t].record.path||!G(e,n[t]));)t++;n.splice(t,0,e),e.record.name&&!J(e)&&r.set(e.record.name,e)}return t=K({strict:!1,end:!0,sensitive:!1},t),e.forEach((e=>o(e))),{addRoute:o,resolve:function(e,t){let o,i,c,a={};if("name"in e&&e.name){if(o=r.get(e.name),!o)throw N(1,{location:e});c=o.record.name,a=l(B(t.params,o.keys.filter((e=>!e.optional)).map((e=>e.name))),e.params&&B(e.params,o.keys.map((e=>e.name)))),i=o.stringify(a)}else if("path"in e)i=e.path,o=n.find((e=>e.re.test(i))),o&&(a=o.parse(i),c=o.record.name);else{if(o=t.name?r.get(t.name):n.find((e=>e.re.test(t.path))),!o)throw N(1,{location:e,currentLocation:t});c=o.record.name,a=l({},t.params,e.params),i=o.stringify(a)}const s=[];let u=o;for(;u;)s.unshift(u.record),u=u.parent;return{name:c,path:i,params:a,matched:s,meta:W(s)}},removeRoute:i,getRoutes:function(){return n},getRecordMatcher:function(e){return r.get(e)}}}(e.routes,e),n=e.parseQuery||he,u=e.stringifyQuery||me,f=e.history,d=we(),v=we(),y=we(),g=(0,o.XI)(x);let b=x;i&&e.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const O=c.bind(null,(e=>""+e)),j=c.bind(null,pe),P=c.bind(null,de);function k(e,r){if(r=l({},r||g.value),"string"==typeof e){const o=p(n,e,r.path),i=t.resolve({path:o.path},r),c=f.createHref(o.fullPath);return l(o,i,{params:P(i.params),hash:de(o.hash),redirectedFrom:void 0,href:c})}let o;if("path"in e)o=l({},e,{path:p(n,e.path,r.path).path});else{const t=l({},e.params);for(const e in t)null==t[e]&&delete t[e];o=l({},e,{params:j(e.params)}),r.params=j(r.params)}const i=t.resolve(o,r),c=e.hash||"";i.params=O(P(i.params));const a=function(e,t){const n=t.query?e(t.query):"";return t.path+(n&&"?")+n+(t.hash||"")}(u,l({},e,{hash:(s=c,ue(s).replace(le,"{").replace(ae,"}").replace(oe,"^")),path:i.path}));var s;const d=f.createHref(a);return l({fullPath:a,hash:c,query:u===me?ve(e.query):e.query||{}},i,{redirectedFrom:void 0,href:d})}function C(e){return"string"==typeof e?p(n,e,g.value.path):l({},e)}function A(e,t){if(b!==e)return N(8,{from:t,to:e})}function D(e){return L(e)}function R(e){const t=e.matched[e.matched.length-1];if(t&&t.redirect){const{redirect:n}=t;let r="function"==typeof n?n(e):n;return"string"==typeof r&&(r=r.includes("?")||r.includes("#")?r=C(r):{path:r},r.params={}),l({query:e.query,hash:e.hash,params:"path"in r?{}:e.params},r)}}function L(e,t){const n=b=k(e),r=g.value,o=e.state,i=e.force,c=!0===e.replace,a=R(n);if(a)return L(l(C(a),{state:"object"==typeof a?l({},o,a.state):o,force:i,replace:c}),t||n);const s=n;let f;return s.redirectedFrom=t,!i&&function(e,t,n){const r=t.matched.length-1,o=n.matched.length-1;return r>-1&&r===o&&h(t.matched[r],n.matched[o])&&m(t.params,n.params)&&e(t.query)===e(n.query)&&t.hash===n.hash}(u,r,n)&&(f=N(16,{to:s,from:r}),te(r,r,!0,!1)),(f?Promise.resolve(f):F(s,r)).catch((e=>T(e)?T(e,2)?e:ee(e):Q(e,s,r))).then((e=>{if(e){if(T(e,2))return L(l({replace:c},C(e.to),{state:"object"==typeof e.to?l({},o,e.to.state):o,force:i}),t||s)}else e=z(s,r,!0,c,o);return U(s,r,e),e}))}function M(e,t){const n=A(e,t);return n?Promise.reject(n):Promise.resolve()}function F(e,t){let n;const[r,o,i]=function(e,t){const n=[],r=[],o=[],i=Math.max(t.matched.length,e.matched.length);for(let l=0;l<i;l++){const i=t.matched[l];i&&(e.matched.find((e=>h(e,i)))?r.push(i):n.push(i));const c=e.matched[l];c&&(t.matched.find((e=>h(e,c)))||o.push(c))}return[n,r,o]}(e,t);n=Ee(r.reverse(),"beforeRouteLeave",e,t);for(const o of r)o.leaveGuards.forEach((r=>{n.push(Se(r,e,t))}));const l=M.bind(null,e,t);return n.push(l),De(n).then((()=>{n=[];for(const r of d.list())n.push(Se(r,e,t));return n.push(l),De(n)})).then((()=>{n=Ee(o,"beforeRouteUpdate",e,t);for(const r of o)r.updateGuards.forEach((r=>{n.push(Se(r,e,t))}));return n.push(l),De(n)})).then((()=>{n=[];for(const r of e.matched)if(r.beforeEnter&&!t.matched.includes(r))if(s(r.beforeEnter))for(const o of r.beforeEnter)n.push(Se(o,e,t));else n.push(Se(r.beforeEnter,e,t));return n.push(l),De(n)})).then((()=>(e.matched.forEach((e=>e.enterCallbacks={})),n=Ee(i,"beforeRouteEnter",e,t),n.push(l),De(n)))).then((()=>{n=[];for(const r of v.list())n.push(Se(r,e,t));return n.push(l),De(n)})).catch((e=>T(e,8)?e:Promise.reject(e)))}function U(e,t,n){for(const r of y.list())r(e,t,n)}function z(e,t,n,r,o){const c=A(e,t);if(c)return c;const a=t===x,s=i?history.state:{};n&&(r||a?f.replace(e.fullPath,l({scroll:a&&s&&s.scroll},o)):f.push(e.fullPath,o)),g.value=e,te(e,t,n,a),ee()}let q;let Y,Z=we(),X=we();function Q(e,t,n){ee(e);const r=X.list();return r.length?r.forEach((r=>r(e,t,n))):console.error(e),Promise.reject(e)}function ee(e){return Y||(Y=!e,q||(q=f.listen(((e,t,n)=>{if(!ce.listening)return;const r=k(e),o=R(r);if(o)return void L(l(o,{replace:!0}),r).catch(a);b=r;const c=g.value;var s,u;i&&(s=S(c.fullPath,n.delta),u=w(),E.set(s,u)),F(r,c).catch((e=>T(e,12)?e:T(e,2)?(L(e.to,r).then((e=>{T(e,20)&&!n.delta&&n.type===_.pop&&f.go(-1,!1)})).catch(a),Promise.reject()):(n.delta&&f.go(-n.delta,!1),Q(e,r,c)))).then((e=>{(e=e||z(r,c,!1))&&(n.delta&&!T(e,8)?f.go(-n.delta,!1):n.type===_.pop&&T(e,20)&&f.go(-1,!1)),U(r,c,e)})).catch(a)}))),Z.list().forEach((([t,n])=>e?n(e):t())),Z.reset()),e}function te(t,n,o,l){const{scrollBehavior:c}=e;if(!i||!c)return Promise.resolve();const a=!o&&function(e){const t=E.get(e);return E.delete(e),t}(S(t.fullPath,0))||(l||!o)&&history.state&&history.state.scroll||null;return(0,r.Y3)().then((()=>c(t,n,a))).then((e=>e&&function(e){let t;if("el"in e){const n=e.el,r="string"==typeof n&&n.startsWith("#"),o="string"==typeof n?r?document.getElementById(n.slice(1)):document.querySelector(n):n;if(!o)return;t=function(e,t){const n=document.documentElement.getBoundingClientRect(),r=e.getBoundingClientRect();return{behavior:t.behavior,left:r.left-n.left-(t.left||0),top:r.top-n.top-(t.top||0)}}(o,e)}else t=e;"scrollBehavior"in document.documentElement.style?window.scrollTo(t):window.scrollTo(null!=t.left?t.left:window.pageXOffset,null!=t.top?t.top:window.pageYOffset)}(e))).catch((e=>Q(e,t,n)))}const ne=e=>f.go(e);let re;const ie=new Set,ce={currentRoute:g,listening:!0,addRoute:function(e,n){let r,o;return I(e)?(r=t.getRecordMatcher(e),o=n):o=e,t.addRoute(o,r)},removeRoute:function(e){const n=t.getRecordMatcher(e);n&&t.removeRoute(n)},hasRoute:function(e){return!!t.getRecordMatcher(e)},getRoutes:function(){return t.getRoutes().map((e=>e.record))},resolve:k,options:e,push:D,replace:function(e){return D(l(C(e),{replace:!0}))},go:ne,back:()=>ne(-1),forward:()=>ne(1),beforeEach:d.add,beforeResolve:v.add,afterEach:y.add,onError:X.add,isReady:function(){return Y&&g.value!==x?Promise.resolve():new Promise(((e,t)=>{Z.add([e,t])}))},install(e){e.component("RouterLink",Pe),e.component("RouterView",xe),e.config.globalProperties.$router=this,Object.defineProperty(e.config.globalProperties,"$route",{enumerable:!0,get:()=>(0,o.SU)(g)}),i&&!re&&g.value===x&&(re=!0,D(f.location).catch((e=>{})));const t={};for(const e in x)t[e]=(0,r.Fl)((()=>g.value[e]));e.provide(ge,this),e.provide(be,(0,o.qj)(t)),e.provide(Oe,g);const n=e.unmount;ie.add(e),e.unmount=function(){ie.delete(e),ie.size<1&&(b=x,q&&q(),q=null,g.value=x,re=!1,Y=!1),n()}}};return ce}function De(e){return e.reduce(((e,t)=>e.then((()=>t()))),Promise.resolve())}function Ne(){return(0,r.f3)(ge)}function Te(){return(0,r.f3)(be)}}}]); \ No newline at end of file diff --git a/assets/js/399.ae8be0a6.js.LICENSE.txt b/assets/js/399.ae8be0a6.js.LICENSE.txt deleted file mode 100644 index 7b058ed8..00000000 --- a/assets/js/399.ae8be0a6.js.LICENSE.txt +++ /dev/null @@ -1,10 +0,0 @@ -/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress - * @license MIT */ - -/*! - * vue-router v4.1.6 - * (c) 2022 Eduardo San Martin Morote - * @license MIT - */ - -/*! @docsearch/js 3.0.0-alpha.34 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ diff --git a/assets/js/491.d264dc1d.js b/assets/js/491.d264dc1d.js deleted file mode 100644 index d92ecc64..00000000 --- a/assets/js/491.d264dc1d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[491],{8491:(e,t,l)=>{l.r(t),l.d(t,{default:()=>d});var u=l(6252),n=l(3577),o=l(2262),a=l(7621),s=l(5885);const c={class:"theme-container"},r={class:"theme-default-content"},h=(0,u._)("h1",null,"404",-1),d=(0,u.aZ)({__name:"404",setup(e){var t,l,d;const k=(0,a.I)(),f=(0,s.X6)(),m=null!=(t=f.value.notFound)?t:["Not Found"],v=null!=(l=f.value.home)?l:k.value,_=null!=(d=f.value.backToHome)?d:"Back to home";return(e,t)=>{const l=(0,u.up)("RouterLink");return(0,u.wg)(),(0,u.iD)("div",c,[(0,u._)("div",r,[h,(0,u._)("blockquote",null,(0,n.zw)(m[Math.floor(Math.random()*m.length)]),1),(0,u.Wm)(l,{to:(0,o.SU)(v)},{default:(0,u.w5)((()=>[(0,u.Uk)((0,n.zw)((0,o.SU)(_)),1)])),_:1},8,["to"])])])}}})}}]); \ No newline at end of file diff --git a/assets/js/app.d5bb65a0.js b/assets/js/app.d5bb65a0.js deleted file mode 100644 index 1c7249f0..00000000 --- a/assets/js/app.d5bb65a0.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,8104)))),"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,5938)))),"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,3125)))),"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,2204)))),"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,1933)))),"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,6761)))),"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,2754)))),"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,9339)))),"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,914)))),"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,4919)))),"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,2434)))),"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:"v2.0",children:[{text:"v3.0",link:"https://fesjs.mumblefe.cn"},{text:"v1.0",link:"https://fesjs.mumblefe.cn/1.0"}]},{text:"了解更多",children:[{text:"更新日志",link:"https://github.com/WeBankFinTech/fes.js/blob/2.0/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,[296,399],(()=>(5698,e(e.s=5698)))),e.O()}]); \ No newline at end of file diff --git a/assets/js/runtime~app.67702f4f.js b/assets/js/runtime~app.67702f4f.js deleted file mode 100644 index d2210106..00000000 --- a/assets/js/runtime~app.67702f4f.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(i=0;i<e.length;i++){for(var[r,t,f]=e[i],o=!0,v=0;v<r.length;v++)(!1&f||d>=f)&&Object.keys(c.O).every((e=>c.O[e](r[v])))?r.splice(v--,1):(o=!1,f<d&&(d=f));if(o){e.splice(i--,1);var n=t();void 0!==n&&(a=n)}}return a}f=f||0;for(var i=e.length;i>0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[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:"9550ef17",88:"6d045efa",132:"004fc897",170:"f066a234",172:"9810a63f",205:"d4ef4058",229:"36a95eba",230:"778122f9",256:"1f1fb9d5",276:"01694dac",278:"033eb852",287:"c7e42791",293:"f5289c13",312:"37f99a72",445:"3f03d054",448:"9f07a8e3",463:"734741c7",475:"f2dde2a4",476:"270a37ed",484:"a15f3d55",491:"d264dc1d",496:"eb0a832d",507:"f6b678f3",509:"97e78117",600:"49408d07",617:"eec494da",626:"594d5357",658:"0a028df5",673:"71cde0f0",754:"1bc881cc",783:"315b2b24",802:"67937c7d",807:"7aa72175",835:"fe469da8",861:"3219979d",872:"0f619206",919:"18d5dcb0",925:"b813ace2",938:"741c8475",943:"5aa9c148",960:"7edc12ad",972:"e0560471",977:"7a6ef2c7"}[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,v;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i<n.length;i++){var s=n[i];if(s.getAttribute("src")==e||s.getAttribute("data-webpack")==r+f){o=s;break}}o||(v=!0,(o=document.createElement("script")).charset="utf-8",o.timeout=120,c.nc&&o.setAttribute("nonce",c.nc),o.setAttribute("data-webpack",r+f),o.src=e),a[e]=[t];var b=(r,t)=>{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(b.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=b.bind(null,o.onerror),o.onload=b.bind(null,o.onload),v&&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,296: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(/^(296|523)$/.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,v]=r,n=0;if(d.some((a=>0!==e[a]))){for(t in o)c.o(o,t)&&(c.m[t]=o[t]);if(v)var i=v(c)}for(a&&a(r);n<d.length;n++)f=d[n],c.o(e,f)&&e[f]&&e[f][0](),e[f]=0;return c.O(i)},r=self.webpackChunkfes_js=self.webpackChunkfes_js||[];r.forEach(a.bind(null,0)),r.push=a.bind(null,r.push.bind(r))})()})(); \ No newline at end of file diff --git a/assets/js/v-00cf7e23.1bc881cc.js b/assets/js/v-00cf7e23.1bc881cc.js deleted file mode 100644 index 67fc0b89..00000000 --- a/assets/js/v-00cf7e23.1bc881cc.js +++ /dev/null @@ -1 +0,0 @@ -"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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5808:(n,s,a)=>{a.r(s),a.d(s,{default:()=>r});var p=a(6252);const t=(0,p.uE)('<h1 id="mock-数据" tabindex="-1"><a class="header-anchor" href="#mock-数据" aria-hidden="true">#</a> Mock 数据</h1><p>Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。</p><h2 id="约定式-mock-文件" tabindex="-1"><a class="header-anchor" href="#约定式-mock-文件" aria-hidden="true">#</a> 约定式 Mock 文件</h2><p>Fes.js 约定 <code>./mock.js</code> 为 mock 文件。</p><p>比如:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>.\n├── mock.js\n└── src\n └── pages\n └── index.vue\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="编写-mock-文件" tabindex="-1"><a class="header-anchor" href="#编写-mock-文件" aria-hidden="true">#</a> 编写 Mock 文件</h2><p>可以参考如下 🌰:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cgiMock<span class="token punctuation">,</span> mockjs<span class="token punctuation">,</span> utils <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> Random <span class="token punctuation">}</span> <span class="token operator">=</span> mockjs<span class="token punctuation">;</span>\n\n <span class="token comment">// 测试 proxy 与 mock 用例集合</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/movie/in_theaters_mock'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>\n <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'movie: movie/in_theaters_mock ~~~~~'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/movie/test_mock'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>\n <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'mock: movie/test_mock'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 测试用例: mock.js change,重现请求,需要能拉最新的数据</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/watchtest'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>\n <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'通过 register 测试 mock watch: 初始状态'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 返回一个数字</span>\n <span class="token comment">// cgiMock('/number', 666);</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/number'</span><span class="token punctuation">,</span> <span class="token number">999</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 返回一个json</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/json'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'400101'</span><span class="token punctuation">,</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">"不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String"</span><span class="token punctuation">,</span> <span class="token literal-property property">transactionTime</span><span class="token operator">:</span> <span class="token string">'20170309171146'</span><span class="token punctuation">,</span> <span class="token literal-property property">success</span><span class="token operator">:</span> <span class="token boolean">false</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 利用 mock.js 产生随机文本</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/text'</span><span class="token punctuation">,</span> Random<span class="token punctuation">.</span><span class="token function">cparagraph</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 返回一个字符串 利用 mock.js 产生随机字符</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/random'</span><span class="token punctuation">,</span> mockjs<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token string-property property">'string|1-10'</span><span class="token operator">:</span> <span class="token string">'★'</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 正则匹配url, 返回一个字符串</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\/abc|\\/xyz</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">'regexp test!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\/function$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'function test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 返回文本 readFileSync</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/file'</span><span class="token punctuation">,</span> utils<span class="token punctuation">.</span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string">'./package.json'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 更复杂的规则配置</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\/who</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span>\n <span class="token function">result</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span>req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'kwan'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">kwan</span><span class="token operator">:</span> <span class="token string">'孤独患者'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'Nooooooooooo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'text/plain'</span><span class="token punctuation">,</span>\n <span class="token string-property property">'Content-Length'</span><span class="token operator">:</span> <span class="token string">'123'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">ETag</span><span class="token operator">:</span> <span class="token string">'12345'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">cookies</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'myname'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'kwan'</span><span class="token punctuation">,</span> <span class="token literal-property property">maxAge</span><span class="token operator">:</span> <span class="token number">900000</span><span class="token punctuation">,</span> <span class="token literal-property property">httpOnly</span><span class="token operator">:</span> <span class="token boolean">true</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 携带参数的请求</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/v2/audit/list'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span>\n currentPage<span class="token punctuation">,</span> pageSize<span class="token punctuation">,</span> isAudited\n <span class="token punctuation">}</span> <span class="token operator">=</span> req<span class="token punctuation">.</span>body<span class="token punctuation">;</span>\n res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>\n <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n currentPage<span class="token punctuation">,</span>\n pageSize<span class="token punctuation">,</span>\n <span class="token literal-property property">totalPage</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token literal-property property">totalCount</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span>\n <span class="token literal-property property">pageData</span><span class="token operator">:</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">length</span><span class="token operator">:</span> pageSize <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">authorName</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">cname</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">authorId</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">createTime</span><span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">updateTime</span><span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">readCount</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">favoriteCount</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">postId</span><span class="token operator">:</span> <span class="token string">'12323'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">serviceTag</span><span class="token operator">:</span> <span class="token string">'业务类型'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">productTag</span><span class="token operator">:</span> <span class="token string">'产品类型'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">requestTag</span><span class="token operator">:</span> <span class="token string">'需求类型'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">handleTag</span><span class="token operator">:</span> <span class="token string">'已采纳'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">postType</span><span class="token operator">:</span> <span class="token string">'voice'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">postStatus</span><span class="token operator">:</span> isAudited <span class="token operator">?</span> <span class="token string">'pass'</span> <span class="token operator">:</span> <span class="token string">'auditing'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">auditStatus</span><span class="token operator">:</span> <span class="token string">'audit1'</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// multipart/form-data 类型</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/v2/upload'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'文件上传成功'</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br></div></div><h3 id="cgimock-参数" tabindex="-1"><a class="header-anchor" href="#cgimock-参数" aria-hidden="true">#</a> cgiMock \b参数</h3><p>创建一个 mock 接口,参数非常灵活,参考上面的 demo 即可。</p><h3 id="mockjs-参数" tabindex="-1"><a class="header-anchor" href="#mockjs-参数" aria-hidden="true">#</a> mockjs 参数</h3>',12),e={href:"http://mockjs.com/",target:"_blank",rel:"noopener noreferrer"},o=(0,p.uE)('<p>比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cgiMock<span class="token punctuation">,</span> mockjs<span class="token punctuation">,</span> utils <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/random'</span><span class="token punctuation">,</span> mockjs<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token string-property property">'string|1-10'</span><span class="token operator">:</span> <span class="token string">'★'</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="utils-参数" tabindex="-1"><a class="header-anchor" href="#utils-参数" aria-hidden="true">#</a> utils 参数</h3><p>工具函数:</p><ul><li>utils.file(path),从项目根目录根据path寻找文件,返回文件流。</li></ul><h2 id="配置-mock" tabindex="-1"><a class="header-anchor" href="#配置-mock" aria-hidden="true">#</a> 配置 Mock</h2>',6),c=(0,p.uE)('<h2 id="关闭-mock" tabindex="-1"><a class="header-anchor" href="#关闭-mock" aria-hidden="true">#</a> 关闭 Mock</h2><p>可以通过配置关闭。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>',3),l={},r=(0,a(3744).Z)(l,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),l=(0,p.up)("RouterLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[(0,p._)("a",e,[(0,p.Uk)("Mock.js"),(0,p.Wm)(a)]),(0,p.Uk)(" 是常用的辅助生成模拟数据的三方库,借助他可以提升我们的 mock 数据能力。")]),o,(0,p._)("p",null,[(0,p.Uk)("详见配置 "),(0,p.Wm)(l,{to:"/reference/config/#mock"},{default:(0,p.w5)((()=>[(0,p.Uk)("mock")])),_:1}),(0,p.Uk)("。")]),c],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.1f1fb9d5.js b/assets/js/v-040800dc.1f1fb9d5.js deleted file mode 100644 index b58dcdef..00000000 --- a/assets/js/v-040800dc.1f1fb9d5.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},1842:(s,n,a)=>{a.r(n),a.d(n,{default:()=>l});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._)("code",null,"约定优于配置",-1),o=(0,e.uE)('<div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>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</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="package-json" tabindex="-1"><a class="header-anchor" href="#package-json" aria-hidden="true">#</a> package.json</h3><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"@fesjs/template"</span><span class="token punctuation">,</span>\n <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"fes项目模版"</span><span class="token punctuation">,</span>\n <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"fes build"</span><span class="token punctuation">,</span>\n <span class="token property">"prod"</span><span class="token operator">:</span> <span class="token string">"FES_ENV=prod fes build"</span><span class="token punctuation">,</span>\n <span class="token property">"analyze"</span><span class="token operator">:</span> <span class="token string">"ANALYZE=1 fes build"</span><span class="token punctuation">,</span>\n <span class="token property">"dev"</span><span class="token operator">:</span> <span class="token string">"fes dev"</span><span class="token punctuation">,</span>\n <span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"fes test"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"keywords"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"管理端"</span><span class="token punctuation">,</span> <span class="token string">"fes"</span><span class="token punctuation">,</span> <span class="token string">"fast"</span><span class="token punctuation">,</span> <span class="token string">"easy"</span><span class="token punctuation">,</span> <span class="token string">"strong"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token property">"files"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token string">".eslintrc.js"</span><span class="token punctuation">,</span>\n <span class="token string">".gitignore"</span><span class="token punctuation">,</span>\n <span class="token string">".fes.js"</span><span class="token punctuation">,</span>\n <span class="token string">".fes.prod.js"</span><span class="token punctuation">,</span>\n <span class="token string">"mock.js"</span><span class="token punctuation">,</span>\n <span class="token string">"package.json"</span><span class="token punctuation">,</span>\n <span class="token string">"README.md"</span><span class="token punctuation">,</span>\n <span class="token string">"tsconfig.json"</span><span class="token punctuation">,</span>\n <span class="token string">"/src"</span><span class="token punctuation">,</span>\n <span class="token string">"/config"</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token property">"repository"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"git"</span><span class="token punctuation">,</span>\n <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"git+https://github.com/WeBankFinTech/fes.js.git"</span><span class="token punctuation">,</span>\n <span class="token property">"directory"</span><span class="token operator">:</span> <span class="token string">"packages/fes-template"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"author"</span><span class="token operator">:</span> <span class="token string">"harrywan"</span><span class="token punctuation">,</span>\n <span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"MIT"</span><span class="token punctuation">,</span>\n <span class="token property">"bugs"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://github.com/WeBankFinTech/fes.js/issues"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"homepage"</span><span class="token operator">:</span> <span class="token string">"https://github.com/WeBankFinTech/fes.js#readme"</span><span class="token punctuation">,</span>\n <span class="token property">"publishConfig"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"access"</span><span class="token operator">:</span> <span class="token string">"public"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@webank/eslint-config-webank"</span><span class="token operator">:</span> <span class="token string">"0.3.1"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-access"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-layout"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-locale"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-enums"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-jest"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-vuex"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-qiankun"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-sass"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-monaco-editor"</span><span class="token operator">:</span> <span class="token string">"^2.0.0-beta.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-windicss"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/fes-design"</span><span class="token operator">:</span> <span class="token string">"^0.5.0"</span><span class="token punctuation">,</span>\n <span class="token property">"vue"</span><span class="token operator">:</span> <span class="token string">"^3.0.5"</span><span class="token punctuation">,</span>\n <span class="token property">"vuex"</span><span class="token operator">:</span> <span class="token string">"^4.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token property">"private"</span><span class="token operator">:</span> <span class="token boolean">true</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br></div></div><p>其中<code>@fesjs/fes</code>是 Fes.js 核心依赖,另外以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被自动注册为插件或插件集。</p><h3 id="tsconfig-json" tabindex="-1"><a class="header-anchor" href="#tsconfig-json" aria-hidden="true">#</a> tsconfig.json</h3><p>解决 <code>@fesjs/fes</code> 和使用 <code>@</code> 的 API 提示</p><h3 id="fes-js" tabindex="-1"><a class="header-anchor" href="#fes-js" aria-hidden="true">#</a> .fes.js</h3><p>配置文件,包含 Fes.js 内置功能和安装的其他插件配置。</p><h3 id="mock-js" tabindex="-1"><a class="header-anchor" href="#mock-js" aria-hidden="true">#</a> mock.js</h3><p><code>mock</code> 数据的配置文件。</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> .env</h3><p>定义环境变量。</p><p>比如 <code>.env</code> 文件内容如下:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>PORT=8888\nFES_ENV=prod\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>等同于 node 端运行时,设置如下:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>process.env.PORT = '8888';\nprocess.env.FES_ENV = 'prod';\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="dist-目录" tabindex="-1"><a class="header-anchor" href="#dist-目录" aria-hidden="true">#</a> dist 目录</h3><p>执行 <code>fes build</code> 后,产物默认会存放在这里。</p><h2 id="public-目录" tabindex="-1"><a class="header-anchor" href="#public-目录" aria-hidden="true">#</a> public 目录</h2><p>此目录下所有文件为静态资源,会被复制到输出路径。</p><h3 id="index-html" tabindex="-1"><a class="header-anchor" href="#index-html" aria-hidden="true">#</a> index.html</h3><p>默认的 <code>html</code> 模板文件,如果删除此 <code>html</code> 则会使用内置的 <code>html</code> 模板文件。</p><h2 id="src-目录" tabindex="-1"><a class="header-anchor" href="#src-目录" aria-hidden="true">#</a> src 目录</h2><h3 id="fes-目录" tabindex="-1"><a class="header-anchor" href="#fes-目录" aria-hidden="true">#</a> .fes 目录</h3><p>临时文件目录,比如入口文件、路由等,都会被临时生成到这里。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>不要提交 <code>.fes</code> 目录到 <code>git</code> 仓库,他们会在 <code>fes dev</code> 和 <code>fes build</code> 时被删除并重新生成。</p></div><h3 id="pages-目录" tabindex="-1"><a class="header-anchor" href="#pages-目录" aria-hidden="true">#</a> pages 目录</h3><p>所有路由组件文件存放在这里。</p><h3 id="app-js" tabindex="-1"><a class="header-anchor" href="#app-js" aria-hidden="true">#</a> app.js</h3><p>运行时配置文件,可以在这里扩展运行时的能力,比如修改路由等。</p>',30),r={},l=(0,a(3744).Z)(r,[["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,[(0,e.Uk)("在"),(0,e.Wm)(a,{to:"/guide/getting-started.html"},{default:(0,e.w5)((()=>[(0,e.Uk)("快速上手")])),_:1}),(0,e.Uk)("中,大家对框架应该有初步的印象,接下来我们了解下目录结构。Fes.js 遵循 "),t,(0,e.Uk)(" 的原则,一个基础的 Fes.js 项目大致是这样的:")]),o],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.37f99a72.js b/assets/js/v-0a0e491c.37f99a72.js deleted file mode 100644 index 76b1cfb8..00000000 --- a/assets/js/v-0a0e491c.37f99a72.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},8645:(e,n,t)=>{t.r(n),t.d(n,{default:()=>l});const s=(0,t(6252).uE)('<h1 id="fesjs-plugin-icon" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-icon" aria-hidden="true">#</a> @fesjs/plugin-icon</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>提供以 <code>component</code> 的方式,直接使用 svg icon 的能力。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-icon"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><p>新建 <code>src/icons</code> 目录,将 svg 文件放入其中,在 <code>component</code> 中引用:</p><div class="language-jsx ext-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fes-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconName<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h3><table><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">说明</th><th style="text-align:left;">类型</th></tr></thead><tbody><tr><td style="text-align:left;">type</td><td style="text-align:left;">svg 文件名</td><td style="text-align:left;"><code>string</code></td></tr><tr><td style="text-align:left;">spin</td><td style="text-align:left;">是否无限旋转</td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;">rotate</td><td style="text-align:left;">旋转角度</td><td style="text-align:left;"><code>number</code></td></tr></tbody></table>',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.fe469da8.js b/assets/js/v-1c0edac3.fe469da8.js deleted file mode 100644 index d69fe808..00000000 --- a/assets/js/v-1c0edac3.fe469da8.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5243:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const e=(0,a(6252).uE)('<h1 id="fesjs-plugin-watermark" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-watermark" aria-hidden="true">#</a> @fesjs/plugin-watermark</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>给页面添加水印效果</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-watermark"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">watermark</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">false</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="disabled" tabindex="-1"><a class="header-anchor" href="#disabled" aria-hidden="true">#</a> disabled</h3><p>是否禁用水印,默认是<code>false</code>。</p><p>可以在开发环境关闭水印:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">watermark</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="createwatermark" tabindex="-1"><a class="header-anchor" href="#createwatermark" aria-hidden="true">#</a> createWatermark</h3><p>创建水印功能,通过 <code>@fesjs/fes</code> 导入 API:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createWatermark<span class="token punctuation">,</span> destroyWatermark <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token function">createWatermark</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'我是水印'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 生成水印</span>\n<span class="token function">destroyWatermark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 销毁水印</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>默认参数是:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span>\n content <span class="token operator">=</span> <span class="token string">'请勿外传'</span><span class="token punctuation">,</span>\n container <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">,</span>\n width <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">,</span>\n height <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">,</span>\n textAlign <span class="token operator">=</span> <span class="token string">'center'</span><span class="token punctuation">,</span>\n textBaseline <span class="token operator">=</span> <span class="token string">'middle'</span><span class="token punctuation">,</span>\n fontSize <span class="token operator">=</span> <span class="token string">'14px'</span><span class="token punctuation">,</span>\n fontFamily <span class="token operator">=</span> <span class="token string">'Microsoft Yahei'</span><span class="token punctuation">,</span>\n fillStyle <span class="token operator">=</span> <span class="token string">'rgba(184, 184, 184, 0.3)'</span><span class="token punctuation">,</span>\n rotate <span class="token operator">=</span> <span class="token number">25</span><span class="token punctuation">,</span>\n zIndex <span class="token operator">=</span> <span class="token number">99999</span><span class="token punctuation">,</span>\n timestamp <span class="token operator">=</span> <span class="token string">'YYYY-MM-DD HH:mm'</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>如果不需要时间戳,则可以设置<code>timestamp</code>为<code>false</code>。</p>',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.f6b678f3.js b/assets/js/v-1d14d5cc.f6b678f3.js deleted file mode 100644 index b49b963f..00000000 --- a/assets/js/v-1d14d5cc.f6b678f3.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},9959:(s,e,n)=>{n.r(e),n.d(e,{default:()=>o});const a=(0,n(6252).uE)('<h1 id="插件" tabindex="-1"><a class="header-anchor" href="#插件" aria-hidden="true">#</a> 插件</h1><h2 id="插件的-id-和-key" tabindex="-1"><a class="header-anchor" href="#插件的-id-和-key" aria-hidden="true">#</a> 插件的 id 和 key</h2><p>每个插件都会对应一个 <code>id</code> 和一个 <code>key</code>,<strong><code>id</code> 是路径的简写,<code>key</code> 是进一步简化后用于配置的唯一值</strong>。</p><p>比如插件 <code>/node_modules/@fesjs/plugin-foo/index.js</code>,通常来说,其 <code>id</code> 为 <code>@fesjs/plugin-foo</code>,<code>key</code> 为 <code>foo</code>。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>id 一般用不上,对于普通开发者 key 用来配置插件,而插件开发者可以使用 key 判断是否安装某个插件。</p></div><h2 id="启动插件" tabindex="-1"><a class="header-anchor" href="#启动插件" aria-hidden="true">#</a> 启动插件</h2><p>有多种方式引入插件</p><h3 id="package-json-依赖" tabindex="-1"><a class="header-anchor" href="#package-json-依赖" aria-hidden="true">#</a> package.json 依赖</h3><p>Fes.js 会自动检测 <code>dependencies</code> 和 <code>devDependencies</code> 里的 fes 插件,比如:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>那么 <code>@fesjs/plugin-request</code> 会自动被注册,无需在配置里重复声明。</p><h3 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>在配置里可通过 <code>presets</code> 和 <code>plugins</code> 配置插件,比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'./preset'</span><span class="token punctuation">,</span> <span class="token string">'foo/presets'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'./plugin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>通常用于几种情况:</p><ol><li>项目相对路径的插件</li><li>非 npm 包入口文件的插件</li></ol><div class="custom-container warning"><p class="custom-container-title">注意</p><p>请不要配置 npm 包的插件,否则会报重复注册的错误</p></div><h3 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量" aria-hidden="true">#</a> 环境变量</h3><p>还可通过环境变量 <code>FES_PRESETS</code> 和 <code>FES_PLUGINS</code> 注册额外插件。</p><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token assign-left variable">FES_PRESETS</span><span class="token operator">=</span>/a/b/preset.js fes dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="禁用插件" tabindex="-1"><a class="header-anchor" href="#禁用插件" aria-hidden="true">#</a> 禁用插件</h2><p>通过配置插件的 <code>key</code> 为 <code>false</code>,比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Mock 插件的 <code>key</code> 是 <code>mock</code>,我们在配置文件中配置 <code>mock</code> 为 <code>false</code>,则会禁用 Mock 插件及其功能。</p><h2 id="配置插件" tabindex="-1"><a class="header-anchor" href="#配置插件" aria-hidden="true">#</a> 配置插件</h2><p>通过插件的 <code>key</code> 来配置插件,比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span> \n <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/v2'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>这里的 <code>mock</code> 是 Mock插件 的 key。</p>',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.7edc12ad.js b/assets/js/v-2c05b6e0.7edc12ad.js deleted file mode 100644 index 0362ace8..00000000 --- a/assets/js/v-2c05b6e0.7edc12ad.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},502:(n,s,a)=>{a.r(s),a.d(s,{default:()=>an});var e=a(6252);const p=(0,e.uE)('<h1 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h1><p>以下配置项通过字母排序。</p><h2 id="alias" tabindex="-1"><a class="header-anchor" href="#alias" aria-hidden="true">#</a> alias</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置别名,对引用路径进行映射。</p></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">'src/assets/styles/main'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>然后 <code>import('main')</code>,实际上是 <code>import('src/assets/styles/main')</code>。</p><h2 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> analyze</h2><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span>\n <span class="token literal-property property">analyzerMode</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_MODE</span> <span class="token operator">||</span> <span class="token string">'server'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">analyzerPort</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_PORT</span> <span class="token operator">||</span> <span class="token number">8888</span><span class="token punctuation">,</span>\n <span class="token literal-property property">openAnalyzer</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_OPEN</span> <span class="token operator">!==</span> <span class="token string">'none'</span><span class="token punctuation">,</span>\n <span class="token comment">// generate stats file while ANALYZE_DUMP exist</span>\n <span class="token literal-property property">generateStatsFile</span><span class="token operator">:</span> <span class="token operator">!</span><span class="token operator">!</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span><span class="token punctuation">,</span>\n <span class="token literal-property property">statsFilename</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span> <span class="token operator">||</span> <span class="token string">'stats.json'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">logLevel</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_LOG_LEVEL</span> <span class="token operator">||</span> <span class="token string">'info'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">defaultSizes</span><span class="token operator">:</span> <span class="token string">'parsed'</span> <span class="token comment">// stat // gzip</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li><p>详情:</p><p>构建结果分析,当配置 <code>process.env.ANALYZE</code> 时开启,例如执行<code>ANALYZE=1 fes build</code></p></li></ul><h2 id="autoprefixer" tabindex="-1"><a class="header-anchor" href="#autoprefixer" aria-hidden="true">#</a> autoprefixer</h2><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span>\n <span class="token literal-property property">flexbox</span><span class="token operator">:</span> <span class="token string">'no-2009'</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>',13),l=(0,e._)("p",null,"详情:",-1),t={href:"https://github.com/postcss/autoprefixer#options",target:"_blank",rel:"noopener noreferrer"},o=(0,e.uE)('<h2 id="base" tabindex="-1"><a class="header-anchor" href="#base" aria-hidden="true">#</a> base</h2><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>''</code></p></li><li><p>详情:</p><p>设置路由前缀,通常用于部署到非根目录。比如你有路由 <code>/pageA</code>、<code>/pageB</code>,然后设置了 <code>base</code> 为 <code>/manage/</code>,那么就可以通过 <code>/manage/pageA</code>、<code>/manage/pageB</code> 访问到它们。</p></li></ul><h2 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h2>',3),r=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型:"),(0,e._)("code",null,"function")])],-1),c=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值:"),(0,e._)("code",null,"null")])],-1),i=(0,e._)("p",null,"详情:",-1),u={href:"https://github.com/neutrinojs/webpack-chain",target:"_blank",rel:"noopener noreferrer"},d=(0,e.uE)('<p>示例:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">memo<span class="token punctuation">,</span> <span class="token punctuation">{</span> env<span class="token punctuation">,</span> webpack <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 删除 fes 内置插件</span>\n memo<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="cssloader" tabindex="-1"><a class="header-anchor" href="#cssloader" aria-hidden="true">#</a> cssLoader</h2>',3),k=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型: "),(0,e._)("code",null,"object")])],-1),b=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值: "),(0,e._)("code",null,"''")])],-1),h=(0,e._)("p",null,"详情:",-1),m={href:"https://github.com/webpack-contrib/css-loader#options",target:"_blank",rel:"noopener noreferrer"},g=(0,e.uE)('<h2 id="copy" tabindex="-1"><a class="header-anchor" href="#copy" aria-hidden="true">#</a> copy</h2><ul><li><p>类型: <code>Array(string) || Array(object)</code></p></li><li><p>默认值: <code>[]</code></p></li><li><p>详情:</p><p>设置要复制到输出目录的文件、文件夹。</p><p>配置约定 <code>from-to</code> 规则, 其中 <code>from</code> 是相对于 <code>cwd</code> 的路径,<code>to</code> 是相对于输出路径的路径。</p></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">copy</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">from</span><span class="token operator">:</span> <span class="token string">'/src/assets/images'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">to</span><span class="token operator">:</span> <span class="token string">'assets/images'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面示例中,实现了将 <code>cwd</code> 路径中的 <code>/src/assets/images</code> 文件夹,在编译完成后,<code>copy</code> 到输出路径下的 <code>assets/images</code> 文件夹。</p><h2 id="define" tabindex="-1"><a class="header-anchor" href="#define" aria-hidden="true">#</a> define</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>用于提供给代码中可用的变量。</p></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">define</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">__DEV__</span><span class="token operator">:</span> <span class="token string">'development'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>然后你代码里写 <code>console.log(__DEV__)</code>,会被编译成 <code>console.log('development')</code>。</p><h2 id="devserver" tabindex="-1"><a class="header-anchor" href="#devserver" aria-hidden="true">#</a> devServer</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置开发服务器。支持以下子配置项:</p><ul><li>port,端口号,默认 <code>8000</code></li><li>host,默认 <code>localhost</code></li><li>https,是否启用 https server,同时也会开启 HTTP/2</li></ul><p>启用 port 和 host 也可以通过环境变量 <code>PORT</code> 和 <code>HOST</code> 临时指定。</p></li></ul><h2 id="devtool" tabindex="-1"><a class="header-anchor" href="#devtool" aria-hidden="true">#</a> devtool</h2>',11),v=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型: "),(0,e._)("code",null,"string")])],-1),y=(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),_=(0,e._)("p",null,"详情:",-1),f={href:"https://webpack.js.org/configuration/devtool/#devtool",target:"_blank",rel:"noopener noreferrer"},x=(0,e.uE)('<h2 id="dynamicimport" tabindex="-1"><a class="header-anchor" href="#dynamicimport" aria-hidden="true">#</a> dynamicImport</h2><ul><li><p>类型: <code>boolean</code></p></li><li><p>默认值: false</p></li><li><p>详情:</p><p>路由是否按需加载</p></li></ul><h2 id="exportstatic" tabindex="-1"><a class="header-anchor" href="#exportstatic" aria-hidden="true">#</a> exportStatic</h2><ul><li>类型: <code>object</code></li><li>默认值: <code>{}</code></li><li>详情:</li></ul><p>配置 <code>html</code> 的输出形式,默认只输出 <code>index.html</code>。</p><p>如果开启 <code>exportStatic</code>,则会针对每个路由输出 <code>html</code> 文件。</p><p>比如以下路由,</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>/\n/users\n/list\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>不开启 <code>exportStatic</code> 时,输出,</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>- index.html\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>设置 <code>exportStatic: {}</code> 后,输出,</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>- index.html\n- users.html\n- list.html\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="externals" tabindex="-1"><a class="header-anchor" href="#externals" aria-hidden="true">#</a> externals</h2><ul><li><p>类型:<code>object</code></p></li><li><p>默认值:<code>{}</code></p></li><li><p>详情:</p><p>设置哪些模块可以不被打包,通过 <code><script></code> 或其他方式引入。</p></li></ul><p>示例:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">vue</span><span class="token operator">:</span> <span class="token string">'window.Vue'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="extrababelplugins" tabindex="-1"><a class="header-anchor" href="#extrababelplugins" aria-hidden="true">#</a> extraBabelPlugins</h2><ul><li>类型: <code>array</code></li><li>默认值: <code>[]</code></li><li>详情:</li></ul><p>配置额外的 <code>babel</code> 插件。</p><ul><li>示例:</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">extraBabelPlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">libraryName</span><span class="token operator">:</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">,</span> <span class="token literal-property property">libraryDirectory</span><span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">'css'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="extrababelpresets" tabindex="-1"><a class="header-anchor" href="#extrababelpresets" aria-hidden="true">#</a> extraBabelPresets</h2><ul><li>类型: <code>array</code></li><li>默认值: <code>[]</code></li><li>详情:</li></ul><p>配置额外的 <code>babel</code> 插件集。</p><h2 id="extrapostcssplugins" tabindex="-1"><a class="header-anchor" href="#extrapostcssplugins" aria-hidden="true">#</a> extraPostCSSPlugins</h2>',25),j=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型: "),(0,e._)("code",null,"array")])],-1),U=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值: "),(0,e._)("code",null,"[]")])],-1),w=(0,e._)("p",null,"详情:",-1),E={href:"https://github.com/postcss/postcss/blob/master/docs/plugins.md",target:"_blank",rel:"noopener noreferrer"},A=(0,e._)("h2",{id:"html",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#html","aria-hidden":"true"},"#"),(0,e.Uk)(" html")],-1),L=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型: "),(0,e._)("code",null,"object")])],-1),P=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值: "),(0,e._)("code",null,"{}")])],-1),N=(0,e._)("p",null,"详情:",-1),S={href:"https://github.com/jantimon/html-webpack-plugin#options",target:"_blank",rel:"noopener noreferrer"},W=(0,e.uE)('<h2 id="inlinelimit" tabindex="-1"><a class="header-anchor" href="#inlinelimit" aria-hidden="true">#</a> inlineLimit</h2><ul><li><p>类型: <code>number</code></p></li><li><p>默认值: <code>8192</code>(8k)</p></li><li><p>详情:</p><p>配置图片文件是否走 base64 编译的阈值。默认是 <code>8192</code> 字节,小于它会被编译为 base64 编码,否则会生成单独的文件。</p></li></ul><h2 id="lessloader" tabindex="-1"><a class="header-anchor" href="#lessloader" aria-hidden="true">#</a> lessLoader</h2>',3),z=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型: "),(0,e._)("code",null,"object")])],-1),O=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值: "),(0,e._)("code",null,"{}")])],-1),D=(0,e._)("p",null,"详情:",-1),Z={href:"https://github.com/webpack-contrib/less-loader",target:"_blank",rel:"noopener noreferrer"},T=(0,e.uE)('<h2 id="mock" tabindex="-1"><a class="header-anchor" href="#mock" aria-hidden="true">#</a> mock</h2><ul><li><p>类型: <code>object || boolean</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置 mock 属性。</p><ul><li>当 mock 为 <code>boolean</code> 类型时,<code>true</code> 表示打开 mock,<code>false</code> 表示关闭 mock。</li><li>当 mock 为 <code>object</code> 类型时,默认打开 mock。也可以通过子属性 <code>prefix</code> 添加过滤条件,满足条件的走 mock 文件。</li></ul></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/api/auth'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>然后所有以 <code>/api/users</code> 开始的请求,就能进入 mock.js 文件处理。</p><h2 id="mountelementid" tabindex="-1"><a class="header-anchor" href="#mountelementid" aria-hidden="true">#</a> mountElementId</h2><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>app</code></p></li><li><p>详情:</p><p>指定渲染到的 HTML 元素 id。</p></li></ul><h2 id="nodemodulestransform" tabindex="-1"><a class="header-anchor" href="#nodemodulestransform" aria-hidden="true">#</a> nodeModulesTransform</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{ exclude: [] }</code></p></li><li><p>详情:</p><p>默认编译所有 <code>node_modules</code> 下的包,可以通过配置 <code>exclude</code> 来跳过某些包,以提高编译速度。</p></li></ul><h2 id="outputpath" tabindex="-1"><a class="header-anchor" href="#outputpath" aria-hidden="true">#</a> outputPath</h2><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>dist</code></p></li><li><p>详情:</p><p>指定输出路径。</p></li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不允许设定为 <code>src</code>、<code>public</code>、<code>pages</code> 等约定目录。</p></div><h2 id="plugins" tabindex="-1"><a class="header-anchor" href="#plugins" aria-hidden="true">#</a> plugins</h2><ul><li><p>类型: <code>Array(string)</code></p></li><li><p>默认值: <code>[]</code></p></li><li><p>详情:</p><p>配置额外的 <code>fes</code> 插件。 数组项为指向插件的路径,可以是 npm 依赖、相对路径或绝对路径。如果是相对路径,则会从项目根目录开始找。</p></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token comment">// npm 依赖</span>\n <span class="token string">'fes-plugin-hello'</span><span class="token punctuation">,</span>\n <span class="token comment">// 相对路径</span>\n <span class="token string">'./plugin'</span><span class="token punctuation">,</span>\n <span class="token comment">// 绝对路径</span>\n <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>__dirname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/plugin.js</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="postcssloader" tabindex="-1"><a class="header-anchor" href="#postcssloader" aria-hidden="true">#</a> postcssLoader</h2>',15),Y=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型: "),(0,e._)("code",null,"object")])],-1),M=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值: "),(0,e._)("code",null,"{}")])],-1),B=(0,e._)("p",null,"详情:",-1),C={href:"https://github.com/postcss/postcss-loader#options",target:"_blank",rel:"noopener noreferrer"},I=(0,e.uE)('<h2 id="proxy" tabindex="-1"><a class="header-anchor" href="#proxy" aria-hidden="true">#</a> proxy</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置代理能力。</p></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">'/v2'</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">'target'</span><span class="token operator">:</span> <span class="token string">'https://api.douban.com/'</span><span class="token punctuation">,</span>\n <span class="token string-property property">'changeOrigin'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> \n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div>',3),V=(0,e._)("code",null,"/v2/movie/in_theaters_proxy",-1),q={href:"http://api.douban.com/v2/movie/in_theaters_proxy",target:"_blank",rel:"noopener noreferrer"},H=(0,e.uE)('<h2 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h2><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>/</code></p></li><li><p>详情:</p><p>配置 webpack 的 publicPath。当打包的时候,webpack 会在静态文件路径前面添加 <code>publicPath</code> 的值,当你需要修改静态文件地址时,比如使用 CDN 部署,把 <code>publicPath</code> 的值设为 CDN 的值就可以。</p></li></ul><h2 id="router" tabindex="-1"><a class="header-anchor" href="#router" aria-hidden="true">#</a> router</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{ mode: 'hash' }</code></p></li><li><p>详情:</p><p>配置路由,具体请查看指南中关于路由的介绍</p></li></ul><h2 id="singular" tabindex="-1"><a class="header-anchor" href="#singular" aria-hidden="true">#</a> singular</h2><ul><li><p>类型: <code>boolean</code></p></li><li><p>默认值: <code>false</code></p></li><li><p>详情:</p><p>配置是否启用单数模式的目录。 比如 <code>src/pages</code> 的约定在开启后为 <code>src/page</code> 目录,@fesjs/fes-plugins 插件也遵照此配置的约定。</p></li></ul><h2 id="targets" tabindex="-1"><a class="header-anchor" href="#targets" aria-hidden="true">#</a> targets</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置需要兼容的浏览器最低版本,会自动引入 polyfill 和做语法转换。</p></li></ul><h2 id="terseroptions" tabindex="-1"><a class="header-anchor" href="#terseroptions" aria-hidden="true">#</a> terserOptions</h2><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> defaultTerserOptions <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">compress</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// turn off flags with small gains to speed up minification</span>\n <span class="token literal-property property">arrows</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">collapse_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 0.3kb</span>\n <span class="token literal-property property">comparisons</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">computed_props</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">hoist_funs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">hoist_props</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">hoist_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">inline</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">loops</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">negate_iife</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">reduce_funcs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">reduce_vars</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">switches</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">toplevel</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">typeofs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n\n <span class="token comment">// a few flags with noticeable gains/speed ratio</span>\n <span class="token comment">// numbers based on out of the box vendor bundle</span>\n <span class="token literal-property property">booleans</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.7kb</span>\n <span class="token literal-property property">if_return</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.4kb</span>\n <span class="token literal-property property">sequences</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 0.7kb</span>\n <span class="token literal-property property">unused</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 2.3kb</span>\n\n <span class="token comment">// required features to drop conditional branches</span>\n <span class="token literal-property property">conditionals</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">dead_code</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">evaluate</span><span class="token operator">:</span> <span class="token boolean">true</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">mangle</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">safari10</span><span class="token operator">:</span> <span class="token boolean">true</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div>',11),R=(0,e._)("p",null,"详情:",-1),F={href:"https://github.com/terser/terser#minify-options",target:"_blank",rel:"noopener noreferrer"},G=(0,e._)("h2",{id:"vueloader",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#vueloader","aria-hidden":"true"},"#"),(0,e.Uk)(" vueLoader")],-1),$=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("类型: "),(0,e._)("code",null,"object")])],-1),J=(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("默认值:"),(0,e._)("code",null,"{}")])],-1),K=(0,e._)("p",null,"详情:",-1),Q={href:"https://vue-loader.vuejs.org/zh/options.html",target:"_blank",rel:"noopener noreferrer"},X=(0,e._)("h2",{id:"更多配置项",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#更多配置项","aria-hidden":"true"},"#"),(0,e.Uk)(" 更多配置项")],-1),nn=(0,e._)("p",null,"Fes.js 允许插件注册配置,如果你使用插件,肯定会在插件里找到更多配置项。",-1),sn={},an=(0,a(3744).Z)(sn,[["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,[(0,e.Uk)("postcss autoprefixer 插件"),(0,e.Wm)(a)]),(0,e.Uk)(" 配置。")])])]),o,(0,e._)("ul",null,[r,c,(0,e._)("li",null,[i,(0,e._)("p",null,[(0,e.Uk)("通过 "),(0,e._)("a",u,[(0,e.Uk)("webpack-chain"),(0,e.Wm)(a)]),(0,e.Uk)(" 的 API 修改 webpack 配置。")])])]),d,(0,e._)("ul",null,[k,b,(0,e._)("li",null,[h,(0,e._)("p",null,[(0,e.Uk)("设置 "),(0,e._)("a",m,[(0,e.Uk)("css-loader 配置项"),(0,e.Wm)(a)]),(0,e.Uk)("。")])])]),g,(0,e._)("ul",null,[v,y,(0,e._)("li",null,[_,(0,e._)("p",null,[(0,e.Uk)("用户配置 sourcemap 类型。详见 "),(0,e._)("a",f,[(0,e.Uk)(" webpack#devtool 配置"),(0,e.Wm)(a)]),(0,e.Uk)("。")])])]),x,(0,e._)("ul",null,[j,U,(0,e._)("li",null,[w,(0,e._)("p",null,[(0,e.Uk)("设置额外的 "),(0,e._)("a",E,[(0,e.Uk)("postcss 插件"),(0,e.Wm)(a)]),(0,e.Uk)("。")])])]),A,(0,e._)("ul",null,[L,P,(0,e._)("li",null,[N,(0,e._)("p",null,[(0,e.Uk)("设置"),(0,e._)("a",S,[(0,e.Uk)("html-webpack-plugin"),(0,e.Wm)(a)]),(0,e.Uk)("。")])])]),W,(0,e._)("ul",null,[z,O,(0,e._)("li",null,[D,(0,e._)("p",null,[(0,e.Uk)("设置 "),(0,e._)("a",Z,[(0,e.Uk)("less-loader 配置项"),(0,e.Wm)(a)]),(0,e.Uk)("。")])])]),T,(0,e._)("ul",null,[Y,M,(0,e._)("li",null,[B,(0,e._)("p",null,[(0,e.Uk)("设置 "),(0,e._)("a",C,[(0,e.Uk)("postcss-loader 配置项"),(0,e.Wm)(a)]),(0,e.Uk)("。")])])]),I,(0,e._)("p",null,[(0,e.Uk)("然后访问 "),V,(0,e.Uk)(" 就能访问到 "),(0,e._)("a",q,[(0,e.Uk)("http://api.douban.com/v2/movie/in_theaters_proxy"),(0,e.Wm)(a)]),(0,e.Uk)(" 的数据。")]),H,(0,e._)("ul",null,[(0,e._)("li",null,[R,(0,e._)("p",null,[(0,e.Uk)("配置 "),(0,e._)("a",F,[(0,e.Uk)("压缩器 terser 的配置项"),(0,e.Wm)(a)])])])]),G,(0,e._)("ul",null,[$,J,(0,e._)("li",null,[K,(0,e._)("p",null,[(0,e.Uk)("配置 "),(0,e._)("a",Q,[(0,e.Uk)("Vue Loader"),(0,e.Wm)(a)])])])]),X,nn],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.a15f3d55.js b/assets/js/v-2fe128e7.a15f3d55.js deleted file mode 100644 index d4e7d976..00000000 --- a/assets/js/v-2fe128e7.a15f3d55.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5364:(s,n,a)=>{a.r(n),a.d(n,{default:()=>y});var p=a(6252);const e=(0,p.uE)('<h1 id="fesjs-plugin-access" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-access" aria-hidden="true">#</a> @fesjs/plugin-access</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>对于前端应用来说,权限就是页面、页面元素是否可见。</p><h3 id="资源" tabindex="-1"><a class="header-anchor" href="#资源" aria-hidden="true">#</a> 资源</h3><p>Fes.js 把页面、页面元素统一叫做资源,用资源 ID 来识别区分他们:</p><ul><li><p>页面的资源 ID 默认是页面的路由 <code>path</code> 。比如页面 <code>pages/a.vue</code> 的路由 <code>path</code> 是 <code>/a</code>。当页面访问 <code>/a</code> 时会渲染当前页面,<code>/a</code> 也就是页面的 <code>accessId</code>。</p></li><li><p>页面元素的资源 ID 没有默认值,需要自定义。</p></li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>access</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess1 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>access</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-access</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="匹配规则" tabindex="-1"><a class="header-anchor" href="#匹配规则" aria-hidden="true">#</a> 匹配规则</h3><h4 id="全等匹配" tabindex="-1"><a class="header-anchor" href="#全等匹配" aria-hidden="true">#</a> 全等匹配</h4><p>资源的匹配规则默认是使用全等匹配,比如页面 <code>pages/a.vue</code> 对应路由 <code>path</code> 是 <code>/a</code>,则 <code>/a</code> 就是页面的资源ID。如果我们设置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>access<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/a'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>由于权限列表中包含<code>/a</code>,则表示拥有此页面权限。</p><h4 id="模糊匹配" tabindex="-1"><a class="header-anchor" href="#模糊匹配" aria-hidden="true">#</a> 模糊匹配</h4><p>页面<code>@id.vue</code>会映射为动态路由<code>/:id</code>,想匹配此页面有两种办法:</p><ul><li><strong>access.setAccess(['/:id'])</strong></li><li><strong>access.setAccess(['/*'])</strong></li></ul><p>第二种是模糊匹配,<code>*</code>表示任意路径。比如角色<code>admin</code>需要全部权限,则可以:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">access</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">roles</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">admin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"*"</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="角色" tabindex="-1"><a class="header-anchor" href="#角色" aria-hidden="true">#</a> 角色</h3><p>通常我们会用角色来控制权限,相应的Fes.js 用角色定义一组资源。当访问 Fes.js 应用时,使用插件提供的 API 设置用户的角色,角色对应的资源才可见,非角色对应的资源不可见。</p><p>当然有时候业务比较复杂,角色对应的权限是动态的。不要怕!插件提供粒度更细的 API 来设置当前用户能访问的资源。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-access"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">access</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">roles</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">admin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"/"</span><span class="token punctuation">,</span> <span class="token string">"/onepiece"</span><span class="token punctuation">,</span> <span class="token string">'/store'</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="roles" tabindex="-1"><a class="header-anchor" href="#roles" aria-hidden="true">#</a> roles</h3><ul><li><p><strong>类型</strong>:对象</p></li><li><p><strong>默认值</strong>:<code>{}</code></p></li><li><p><strong>详情</strong>:</p><p>角色预定义列表。<code>key</code> 是角色 Id ,<code>value</code>是角色 Id 对应的资源列表。</p></li></ul><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><p>在 <code>app.js</code> 中配置</p><h3 id="unaccesshandler" tabindex="-1"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3>',31),t=(0,p.uE)("<li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 <code>unAccessHandler</code> 函数。</p></li>",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={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"},r=(0,p.uE)('<p>比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> to<span class="token punctuation">,</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/404'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/403'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3>',3),k=(0,p.uE)("<li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不存在,则会调用 <code>noFoundHandler</code> 函数。</p></li>",3),d=(0,p._)("p",null,[(0,p._)("strong",null,"参数")],-1),g=(0,p._)("li",null,"router:createRouter 创建的路由实例",-1),b=(0,p._)("li",null,"to: 准备进入的路由",-1),m=(0,p._)("li",null,"from:离开的路由",-1),h={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"},v=(0,p.uE)('<p>比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="access" tabindex="-1"><a class="header-anchor" href="#access" aria-hidden="true">#</a> access</h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h4 id="access-hasaccess" tabindex="-1"><a class="header-anchor" href="#access-hasaccess" aria-hidden="true">#</a> access.hasAccess</h4><ul><li><p><strong>类型</strong>:( accessId: string | number ) => Promise<boolean></p></li><li><p><strong>详情</strong>: 判断某个资源是否可见。</p></li><li><p><strong>参数</strong>:</p><ul><li>accessId,资源Id</li></ul></li><li><p><strong>返回值</strong>:是否有权限</p></li></ul><h4 id="access-isdataready" tabindex="-1"><a class="header-anchor" href="#access-isdataready" aria-hidden="true">#</a> access.isDataReady</h4><ul><li><p><strong>类型</strong>:() => boolean</p></li><li><p><strong>详情</strong>:可以用异步数据来设置权限,<code>isDataReady</code> 用来判断异步数据是否已经加载完毕。</p></li><li><p><strong>参数</strong>:null</p></li><li><p><strong>返回值</strong>:Boolean</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>access<span class="token punctuation">.</span><span class="token function">isDataReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="access-setrole" tabindex="-1"><a class="header-anchor" href="#access-setrole" aria-hidden="true">#</a> access.setRole</h4><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>:设置当前的角色。</p></li><li><p><strong>参数</strong>:</p><ul><li>roleId,角色Id,有两种类型: <ul><li>String,对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li><li>Promise,Promise resolve 的结果应对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li></ul></li></ul></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\naccess<span class="token punctuation">.</span><span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="access-setaccess" tabindex="-1"><a class="header-anchor" href="#access-setaccess" aria-hidden="true">#</a> access.setAccess</h4><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>:设置当前的角色。</p></li><li><p><strong>参数</strong>:</p><ul><li>accessIds,资源Id数组,有两种类型: <ul><li>Array,数组项对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li><li>Promise,Promise resolve 的结果应该是<code>Array<accessId></code>。</li></ul></li></ul></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\naccess<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/a'</span><span class="token punctuation">,</span> <span class="token string">'/b'</span><span class="token punctuation">,</span> <span class="token string">'/c'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="access-getaccess" tabindex="-1"><a class="header-anchor" href="#access-getaccess" aria-hidden="true">#</a> access.getAccess</h4><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>:返回当前可见的资源列表。</p></li><li><p><strong>参数</strong>:null</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\naccess<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="useaccess" tabindex="-1"><a class="header-anchor" href="#useaccess" aria-hidden="true">#</a> useAccess</h3><ul><li><p><strong>类型</strong>:<a href="(https://v3.cn.vuejs.org/guide/composition-api-introduction.html)">composition</a> 函数</p></li><li><p><strong>详情</strong>:判断某个资源是否可见。</p></li><li><p><strong>参数</strong>:</p><ul><li>accessId,资源Id</li></ul></li><li><p><strong>返回值</strong>:<code>ref</code></p></li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessOnepicess<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>accessOnepicess<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> useAccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> accessOnepicess <span class="token operator">=</span> <span class="token function">useAccess</span><span class="token punctuation">(</span><span class="token string">'/onepiece1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n accessOnepicess\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="v-access" tabindex="-1"><a class="header-anchor" href="#v-access" aria-hidden="true">#</a> v-access</h3><p>在指令 <code>v-access</code> 中传入 <code>accessId</code>,则当 <code>accessId</code> 拥有权限时显示DOM,当没有权限时隐藏此DOM。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-access</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="组件-access" tabindex="-1"><a class="header-anchor" href="#组件-access" aria-hidden="true">#</a> 组件 Access</h3><p>组件 <code>Access</code> 中传入 <code>accessId</code>,则当 <code>accessId</code> 拥有权限时渲染此组件,当没有权限时隐藏此组件。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>access</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>access</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div>',29),f={},y=(0,a(3744).Z)(f,[["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,[(0,p.Uk)("next: "),(0,p._)("a",i,[(0,p.Uk)("next函数"),(0,p.Wm)(a)])])])])]),r,(0,p._)("ul",null,[k,(0,p._)("li",null,[d,(0,p._)("ul",null,[g,b,m,(0,p._)("li",null,[(0,p.Uk)("next: "),(0,p._)("a",h,[(0,p.Uk)("next函数"),(0,p.Wm)(a)])])])])]),v],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.778122f9.js b/assets/js/v-323bda7e.778122f9.js deleted file mode 100644 index 5c2fdea3..00000000 --- a/assets/js/v-323bda7e.778122f9.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5846:(n,s,a)=>{a.r(s),a.d(s,{default:()=>w});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._)("code",null,"json",-1),l=(0,t._)("code",null,"javascript",-1),r=(0,t._)("code",null,"python",-1),c={href:"https://github.com/Microsoft/monaco-editor",target:"_blank",rel:"noopener noreferrer"},i=(0,t._)("code",null,"Monaco Editor",-1),u=(0,t._)("code",null,"Monaco Editor",-1),d=(0,t._)("code",null,"1.9.1",-1),k=(0,t.uE)('<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-monaco-editor"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'typescript'</span><span class="token punctuation">,</span> <span class="token string">'html'</span><span class="token punctuation">,</span> <span class="token string">'json'</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div>',6),b=(0,t._)("code",null,"monaco-editor-webpack-plugin",-1),h=(0,t._)("code",null,"Monaco Editor",-1),m=(0,t._)("code",null,"ESM",-1),g=(0,t._)("code",null,"monaco-editor-webpack-plugin",-1),f={href:"https://github.com/Microsoft/monaco-editor-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},y=(0,t.uE)('<h3 id="filename" tabindex="-1"><a class="header-anchor" href="#filename" aria-hidden="true">#</a> filename</h3><ul><li><p><strong>类型</strong>:自定义worker脚本名称</p></li><li><p><strong>默认值</strong>:<code>'[name].worker.js'</code></p></li></ul><h3 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h3><ul><li><p><strong>类型</strong>:自定义worker脚本的路径</p></li><li><p><strong>默认值</strong>:<code>''</code></p></li></ul><h3 id="languages" tabindex="-1"><a class="header-anchor" href="#languages" aria-hidden="true">#</a> languages</h3><ul><li><p><strong>类型</strong>:需要支持的语言类型</p></li><li><p><strong>默认值</strong>:<code>['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']</code></p></li><li><p><strong>详情</strong>:默认是全部,但是编译后包体积会非常大,建议用到什么语言则配置什么语言。特别某些语言依赖其他语言,例如<code>javascript</code>依赖<code>typescript</code>,需要使用<code>javascript</code>时需要配置为:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'typescript'</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="monaco" tabindex="-1"><a class="header-anchor" href="#monaco" aria-hidden="true">#</a> monaco</h3>',9),v={href:"https://microsoft.github.io/monaco-editor/",target:"_blank",rel:"noopener noreferrer"},j=(0,t.uE)('<div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> monaco <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\nmonaco<span class="token punctuation">.</span>editor<span class="token punctuation">.</span><span class="token function">defineTheme</span><span class="token punctuation">(</span><span class="token string">'myCoolTheme'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n\t<span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'vs'</span><span class="token punctuation">,</span>\n\t<span class="token literal-property property">inherit</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n\t<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n\t\t<span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-info'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'808080'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n\t\t<span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-error'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'ff0000'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontStyle</span><span class="token operator">:</span> <span class="token string">'bold'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n\t\t<span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-notice'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'FFA500'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n\t\t<span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-date'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'008800'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n\t<span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="组件-monacoeditor" tabindex="-1"><a class="header-anchor" href="#组件-monacoeditor" aria-hidden="true">#</a> 组件 MonacoEditor</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MonacoEditor</span> \n <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span>\n <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span>\n <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400px<span class="token punctuation">"</span></span>\n <span class="token attr-name">check</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MonacoEditor</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> MonacoEditor <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n MonacoEditor\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> json <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n json\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h4 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> props</h4><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>theme</td><td>编辑器的主题,使用其他主题需要先使用<code>monaco.editor.defineTheme</code>定义主题</td><td>string</td><td><code>defaultTheme</code></td></tr><tr><td>language</td><td>编辑器的语言</td><td>string</td><td>-</td></tr><tr><td>height</td><td>编辑器的高度</td><td>string</td><td><code>100%</code></td></tr><tr><td>width</td><td>编辑器的宽度</td><td>string</td><td><code>100%</code></td></tr><tr><td>modelValue(v-model)</td><td>编辑器的代码</td><td>string</td><td>-</td></tr><tr><td>readOnly</td><td>是否只读</td><td>boolean</td><td><code>false</code></td></tr><tr><td>options</td><td>编辑器的配置对象</td><td>object</td><td><code>{}</code></td></tr><tr><td>check</td><td>是否检查代码,如果检查不通过则不更新数据,目前只支持<code>json</code></td><td>boolean</td><td><code>false</code></td></tr></tbody></table><h4 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> events</h4><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>onload</td><td>编辑器初始化后触发</td><td>({monaco, editor, editorModel}) => void</td></tr><tr><td>scrollChange</td><td>滚动时触发</td><td>(e) => void</td></tr></tbody></table>',7),q={},w=(0,a(3744).Z)(q,[["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,[(0,t.Uk)("我们会遇到需要编辑代码的场景,比如编辑"),o,(0,t.Uk)("、"),l,(0,t.Uk)("、"),r,(0,t.Uk)("等等,"),(0,t._)("a",c,[(0,t.Uk)("Monaco Editor"),(0,t.Wm)(a)]),(0,t.Uk)(" 是\b一个好用而且强大的的代码编辑器库,引入"),i,(0,t.Uk)("有一定的成本,插件实现了胶水代码,提供轻松引入的能力。目前内置的 "),u,(0,t.Uk)(" 版本是 "),d,(0,t.Uk)("。")]),k,(0,t._)("p",null,[(0,t.Uk)("我们通过 "),b,(0,t.Uk)(" 集成 "),h,(0,t.Uk)(" 的 "),m,(0,t.Uk)("版本,所以编辑时其实就是 "),g,(0,t.Uk)(" 的配置,具体配置项参考"),(0,t._)("a",f,[(0,t.Uk)("文档"),(0,t.Wm)(a)]),(0,t.Uk)("。")]),y,(0,t._)("p",null,[(0,t.Uk)("编辑器的全局对象,提供扩展语言,自定义主题等等API,具体用法请查看"),(0,t._)("a",v,[(0,t.Uk)("monaco"),(0,t.Wm)(a)]),(0,t.Uk)("官方文档。")]),j],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.f2dde2a4.js b/assets/js/v-355ee23e.f2dde2a4.js deleted file mode 100644 index 3429f9b8..00000000 --- a/assets/js/v-355ee23e.f2dde2a4.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},2891:(n,s,a)=>{a.r(s),a.d(s,{default:()=>Q});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)("<li><p>侧边栏菜单数据根据路由中的配置自动生成。</p></li><li><p>布局,提供 <code>side</code>、 <code>top</code>、<code>mixin</code> 三种布局。</p></li><li><p>主题,提供 <code>light</code>、<code>dark</code> 两种主题。</p></li><li><p>默认实现对路由的 404、403 处理。</p></li>",4),c=(0,e._)("li",null,[(0,e._)("p",null,"支持自定义头部区域。")],-1),r=(0,e._)("li",null,[(0,e._)("p",null,"菜单支持配置icon")],-1),i=(0,e._)("li",null,[(0,e._)("p",null,"菜单标题支持国际化")],-1),u=(0,e._)("li",null,[(0,e._)("p",null,"可配置页面是否需要 layout。")],-1),d=(0,e.uE)('<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-layout"</span><span class="token operator">:</span> <span class="token string">"^4.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="布局类型" tabindex="-1"><a class="header-anchor" href="#布局类型" aria-hidden="true">#</a> 布局类型</h2><p>配置参数是 <code>navigation</code>, 布局有三种类型 <code>side</code>、<code>mixin</code> 和 <code>top</code>, 默认是 <code>side</code>:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">navigation</span><span class="token operator">:</span> <span class="token string">'side'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="side" tabindex="-1"><a class="header-anchor" href="#side" aria-hidden="true">#</a> side</h3>',7),k=["src"],g=(0,e._)("h3",{id:"top",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#top","aria-hidden":"true"},"#"),(0,e.Uk)(" top")],-1),b=["src"],m=(0,e._)("h3",{id:"mixin",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#mixin","aria-hidden":"true"},"#"),(0,e.Uk)(" mixin")],-1),h=["src"],f=(0,e.uE)('<h3 id="页面禁用布局" tabindex="-1"><a class="header-anchor" href="#页面禁用布局" aria-hidden="true">#</a> 页面禁用布局</h3><p>布局是默认开启的,但是可能某些页面不需要展示布局样式,比如登录页面。我们只需要在页面的<code>.vue</code>中添加如下配置:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n{\n "layout": false\n}\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>config</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>如果只是不想展示<code>sidebar</code>,则:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code><config lang="json">\n{\n "layout": {\n "sidebar": false\n }\n}\n</config>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><code>layout</code>的可选配置有:</p><ul><li><p><strong>sidebar</strong>: 左侧区域,从v4.0.0开始,之前名称叫<code>side</code></p></li><li><p><strong>header</strong>: 头部区域,从v4.0.0开始,之前名称叫<code>top</code></p></li><li><p><strong>logo</strong>:logo和标题区域。</p></li></ul><h2 id="keep-alive" tabindex="-1"><a class="header-anchor" href="#keep-alive" aria-hidden="true">#</a> keep-alive</h2><p>从 4.0.7 开始支持配置路由页面缓存:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code><config lang="json">\n{\n "keep-alive": true\n}\n</config>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// 标题</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Fes.js"</span><span class="token punctuation">,</span>\n <span class="token comment">// 底部文字</span>\n <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token string">'Created by MumbleFE'</span><span class="token punctuation">,</span>\n <span class="token comment">// 主题light</span>\n <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token string">'dark'</span>\n <span class="token comment">// 是否开启 tabs</span>\n <span class="token literal-property property">multiTabs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token comment">// 布局类型</span>\n <span class="token literal-property property">navigation</span><span class="token operator">:</span> <span class="token string">'side'</span><span class="token punctuation">,</span>\n <span class="token comment">// 是否固定头部</span>\n <span class="token literal-property property">fixedHeader</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token comment">// 是否固定sidebar</span>\n <span class="token literal-property property">fixedSideBar</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token comment">// sidebar的宽度</span>\n <span class="token literal-property property">sideWidth</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>\n <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'simpleList'</span>\n <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">menuConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">defaultExpandAll</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">expandedKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">accordion</span><span class="token operator">:</span> <span class="token boolean">false</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h3 id="footer" tabindex="-1"><a class="header-anchor" href="#footer" aria-hidden="true">#</a> footer</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:页面底部的文字。</p></li></ul><h3 id="theme" tabindex="-1"><a class="header-anchor" href="#theme" aria-hidden="true">#</a> theme</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>dark</code></p></li><li><p><strong>详情</strong>:主题,可选有 <code>dark</code>、<code>light</code></p></li></ul><h3 id="navigation" tabindex="-1"><a class="header-anchor" href="#navigation" aria-hidden="true">#</a> navigation</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>side</code></p></li><li><p><strong>详情</strong>:页面布局类型,可选有 <code>side</code>、 <code>top</code>、 <code>mixin</code></p></li></ul><h3 id="fixedheader" tabindex="-1"><a class="header-anchor" href="#fixedheader" aria-hidden="true">#</a> fixedHeader</h3><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:是否固定头部,不跟随页面滚动。</p></li></ul><h3 id="fixedsidebar" tabindex="-1"><a class="header-anchor" href="#fixedsidebar" aria-hidden="true">#</a> fixedSideBar</h3><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:是否固定sidebar,不跟随页面滚动。</p></li></ul><h3 id="title" tabindex="-1"><a class="header-anchor" href="#title" aria-hidden="true">#</a> title</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>name</code> in package.json</p></li><li><p><strong>详情</strong>:产品名,会显示在 Logo 旁边。</p></li></ul><h3 id="logo" tabindex="-1"><a class="header-anchor" href="#logo" aria-hidden="true">#</a> logo</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:默认提供 fes.js 的 Logo</p></li><li><p><strong>详情</strong>:Logo的链接</p></li></ul><h3 id="multitabs" tabindex="-1"><a class="header-anchor" href="#multitabs" aria-hidden="true">#</a> multiTabs</h3><ul><li><p><strong>类型</strong>:<code>boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:是否开启多页。</p></li></ul><h3 id="menus" tabindex="-1"><a class="header-anchor" href="#menus" aria-hidden="true">#</a> menus</h3>',30),v=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"类型"),(0,e.Uk)(":"),(0,e._)("code",null,"Array")])],-1),y=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"默认值"),(0,e.Uk)(":"),(0,e._)("code",null,"[]")])],-1),x=(0,e._)("p",null,[(0,e._)("strong",null,"详情"),(0,e.Uk)(":菜单配置,子项具体配置如下:")],-1),_=(0,e._)("strong",null,"name",-1),j=(0,e._)("code",null,"name",-1),U=(0,e._)("code",null,"name",-1),w=(0,e._)("code",null,"title",-1),E=(0,e._)("code",null,"path",-1),A=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"path"),(0,e.Uk)(":菜单的路径,可配置第三方地址。")])],-1),q=(0,e._)("li",null,[(0,e._)("p",null,[(0,e._)("strong",null,"match"),(0,e.Uk)(":额外匹配的路径,当前路由命中匹配规则时,此菜单高亮。 (v4.0.0+)")])],-1),C=(0,e.uE)('<div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>{\n path: '/product',\n match: ['/product/*', '/product/create']\n}\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div>',1),B=(0,e._)("strong",null,"title",-1),F=(0,e._)("code",null,"title",-1),H=(0,e._)("code",null,"$",-1),S=(0,e._)("code",null,"$",-1),R=(0,e._)("p",null,[(0,e._)("strong",null,"icon"),(0,e.Uk)(": 菜单的图标,只有一级标题展示图标。")],-1),L={href:"https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html",target:"_blank",rel:"noopener noreferrer"},W=(0,e.uE)('<div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span>\n <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">"AppstoreOutlined"</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><pre><code>- 图标使用本地或者远程svg图片。\n</code></pre><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span>\n <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">"/wine-outline.svg"</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li><strong>children</strong>:子菜单配置。</li></ul><h3 id="menusconfig" tabindex="-1"><a class="header-anchor" href="#menusconfig" aria-hidden="true">#</a> menusConfig</h3><ul><li><p><strong>类型</strong>:<code>Object</code></p></li><li><p><strong>默认值</strong>:<code>{}</code></p></li><li><p><strong>详情</strong>:菜单的配置:</p><ul><li><p><strong>defaultExpandAll</strong>:是否默认展开全部菜单。</p></li><li><p><strong>expandedKeys</strong>:配置默认展开的菜单,需要传子项是菜单路径的数组。</p></li><li><p><strong>accordion</strong>:是否只保持一个子菜单的展开。</p></li></ul></li></ul><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><p>在 <code>app.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> UserCenter <span class="token keyword">from</span> <span class="token string">'@/components/UserCenter'</span><span class="token punctuation">;</span>\n<span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">customHeader</span><span class="token operator">:</span> <span class="token operator"><</span>UserCenter <span class="token operator">/</span><span class="token operator">></span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="menus-1" tabindex="-1"><a class="header-anchor" href="#menus-1" aria-hidden="true">#</a> menus</h3><ul><li><p><strong>类型</strong>:<code>(defaultMenus: [] )=> Ref | []</code></p></li><li><p><strong>详情</strong>:运行时修改菜单,入参是默认菜单配置(.fes.js中的menu配置),需要返回一个<code>Ref</code>或者数组。</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ClusterOutlined <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes-design/icon'</span>\n<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">layout</span> <span class="token operator">=</span> <span class="token parameter">layoutConfig</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token operator">...</span>layoutConfig<span class="token punctuation">,</span>\n <span class="token literal-property property">customHeader</span><span class="token operator">:</span> <span class="token operator"><</span>UserCenter <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>\n <span class="token function-variable function">menus</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">defaultMenuData</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> menusRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span>defaultMenuData<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> layoutConfig<span class="token punctuation">.</span>initialState<span class="token punctuation">.</span>userName<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n menusRef<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token operator"><</span>ClusterOutlined <span class="token operator">/</span><span class="token operator">></span>\n <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> menusRef<span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><code>layoutConfig.initialState</code> 是 <code>beforeRender.action</code>执行后创建的应用初始状态数据。</p><p>如果菜单需要根据某些状态动态改变,则返回<code>Ref</code>,否则只需要返回数组。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在运行时配置菜单中的icon,需要传组件本身,而不是组件的名称。</p></div><h3 id="header" tabindex="-1"><a class="header-anchor" href="#header" aria-hidden="true">#</a> header</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:是否显示 header 区域。</p></li></ul><h3 id="sidebar" tabindex="-1"><a class="header-anchor" href="#sidebar" aria-hidden="true">#</a> sidebar</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:是否显示 sidebar 区域。</p></li></ul><h3 id="logo-1" tabindex="-1"><a class="header-anchor" href="#logo-1" aria-hidden="true">#</a> logo</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:是否显示 logo 区域。</p></li></ul><h3 id="customheader" tabindex="-1"><a class="header-anchor" href="#customheader" aria-hidden="true">#</a> customHeader</h3><ul><li><p><strong>类型</strong>:Vue Component</p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:top的区域部分位置提供组件自定义功能。</p></li></ul><h3 id="unaccesshandler" tabindex="-1"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3>',24),I=(0,e.uE)("<li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 <code>unAccessHandler</code> 函数。</p></li>",3),O=(0,e._)("p",null,[(0,e._)("strong",null,"参数")],-1),$=(0,e._)("li",null,"router:createRouter 创建的路由实例",-1),z=(0,e._)("li",null,"to: 准备进入的路由",-1),M=(0,e._)("li",null,"from:离开的路由",-1),T={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"},D=(0,e.uE)('<p>比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> to<span class="token punctuation">,</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/404'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/403'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3>',3),K=(0,e.uE)("<li><p><strong>类型</strong>:函数</p></li><li><p><strong>默认值</strong>:null</p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不存在,则会调用 <code>noFoundHandler</code> 函数。</p></li>",3),N=(0,e._)("p",null,[(0,e._)("strong",null,"参数")],-1),Z=(0,e._)("li",null,"router:createRouter 创建的路由实例",-1),P=(0,e._)("li",null,"to: 准备进入的路由",-1),V=(0,e._)("li",null,"from:离开的路由",-1),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"},G=(0,e.uE)('<p>比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="logourl" tabindex="-1"><a class="header-anchor" href="#logourl" aria-hidden="true">#</a> logoUrl</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:默认提供 fes.js 的 Logo</p></li><li><p><strong>详情</strong>:Logo的链接。</p></li></ul><h3 id="其他运行时配置-4-1-0" tabindex="-1"><a class="header-anchor" href="#其他运行时配置-4-1-0" aria-hidden="true">#</a> 其他运行时配置 (> 4.1.0)</h3><p>编译时配置的内容同样支持在运行时配置,但是<code>logo</code>除外,用<code>logoUrl</code>替代。</p>',6),J={},Q=(0,a(3744).Z)(J,[["render",function(n,s){const a=(0,e.up)("RouterLink"),J=(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,[(0,e.Uk)("搭配 "),(0,e.Wm)(a,{to:"/reference/plugin/plugins/access.html"},{default:(0,e.w5)((()=>[(0,e.Uk)("@fesjs/plugin-access")])),_:1}),(0,e.Uk)(" 插件使用,可以完成对路由的权限控制。")])]),(0,e._)("li",null,[(0,e._)("p",null,[(0,e.Uk)("搭配 "),(0,e.Wm)(a,{to:"/reference/plugin/plugins/locale.html"},{default:(0,e.w5)((()=>[(0,e.Uk)("@fesjs/plugin-locale")])),_:1}),(0,e.Uk)(" 插件使用,提供切换语言的能力。")])]),c,r,i,u]),d,(0,e._)("img",{src:n.$withBase("side.png"),alt:"side"},null,8,k),g,(0,e._)("img",{src:n.$withBase("top.png"),alt:"top"},null,8,b),m,(0,e._)("img",{src:n.$withBase("mixin.png"),alt:"mixin"},null,8,h),f,(0,e._)("ul",null,[v,y,(0,e._)("li",null,[x,(0,e._)("ul",null,[(0,e._)("li",null,[(0,e._)("p",null,[_,(0,e.Uk)(":菜单的名称。通过匹配 "),j,(0,e.Uk)(" 和路由元信息 "),(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)((()=>[(0,e.Uk)("meta")])),_:1}),(0,e.Uk)(" 中的 "),U,(0,e.Uk)(",把菜单和路由关联起来,\b然后使用路由元信息补充菜单配置,比如 "),w,(0,e.Uk)("、"),E,(0,e.Uk)(" \b等。")])]),A,q])])]),C,(0,e._)("ul",null,[(0,e._)("li",null,[(0,e._)("p",null,[B,(0,e.Uk)(":菜单的标题,如果同时使用"),(0,e.Wm)(a,{to:"/reference/plugin/plugins/locale.html"},{default:(0,e.w5)((()=>[(0,e.Uk)("国际化插件")])),_:1}),(0,e.Uk)(",而且"),F,(0,e.Uk)("的值以"),H,(0,e.Uk)("开头,则使用"),S,(0,e.Uk)("后面的内容去匹配语言设置。")])]),(0,e._)("li",null,[R,(0,e._)("ul",null,[(0,e._)("li",null,[(0,e.Uk)("图标使用"),(0,e._)("a",L,[(0,e.Uk)("fes-design icon"),(0,e.Wm)(J)]),(0,e.Uk)(",在这里使用组件名称。")])])])]),W,(0,e._)("ul",null,[I,(0,e._)("li",null,[O,(0,e._)("ul",null,[$,z,M,(0,e._)("li",null,[(0,e.Uk)("next: "),(0,e._)("a",T,[(0,e.Uk)("next函数"),(0,e.Wm)(J)])])])])]),D,(0,e._)("ul",null,[K,(0,e._)("li",null,[N,(0,e._)("ul",null,[Z,P,V,(0,e._)("li",null,[(0,e.Uk)("next: "),(0,e._)("a",Y,[(0,e.Uk)("next函数"),(0,e.Wm)(J)])])])])]),G],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-3706649a.6d045efa.js b/assets/js/v-3706649a.6d045efa.js deleted file mode 100644 index 69d20bca..00000000 --- a/assets/js/v-3706649a.6d045efa.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[88],{1801:(t,e,s)=>{s.r(e),s.d(e,{data:()=>n});const n={key:"v-3706649a",path:"/404.html",title:"",lang:"zh-CN",frontmatter:{layout:"404"},excerpt:"",headers:[]}},8109:(t,e,s)=>{s.r(e),s.d(e,{default:()=>r});const n={},r=(0,s(3744).Z)(n,[["render",function(t,e){return null}]])},3744:(t,e)=>{e.Z=(t,e)=>{const s=t.__vccOpts||t;for(const[t,n]of e)s[t]=n;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-37e1c06f.49408d07.js b/assets/js/v-37e1c06f.49408d07.js deleted file mode 100644 index d93acf6e..00000000 --- a/assets/js/v-37e1c06f.49408d07.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},4708:(e,t,a)=>{a.r(t),a.d(t,{default:()=>i});var r=a(6252);const n={id:"常见问题",tabindex:"-1"},s=(0,r._)("a",{class:"header-anchor",href:"#常见问题","aria-hidden":"true"},"#",-1),c={},i=(0,a(3744).Z)(c,[["render",function(e,t){return(0,r.wg)(),(0,r.iD)("h1",n,[s,(0,r.Uk)(" 常见问题")])}]])},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.67937c7d.js b/assets/js/v-392e58ee.67937c7d.js deleted file mode 100644 index 27a1fb62..00000000 --- a/assets/js/v-392e58ee.67937c7d.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},9673:(n,s,a)=>{a.r(s),a.d(s,{default:()=>c});var e=a(6252);const p=(0,e.uE)('<h1 id="fesjs-plugin-windicss" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-windicss" aria-hidden="true">#</a> @fesjs/plugin-windicss</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p><code>windicss</code> 支持</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/plugin-windicss"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2>',7),t=(0,e._)("code",null,".fes.js",-1),r={href:"https://windicss.org/integrations/webpack.html",target:"_blank",rel:"noopener noreferrer"},l=(0,e.uE)('<div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">windicss</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'./'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div>',1),i={},c=(0,a(3744).Z)(i,[["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,[(0,e.Uk)("在 "),t,(0,e.Uk)(" 配置文件中添加自定义配置,详细配置"),(0,e._)("a",r,[(0,e.Uk)("请看"),(0,e.Wm)(a)]),(0,e.Uk)(":")]),l],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.b813ace2.js b/assets/js/v-3c4e521e.b813ace2.js deleted file mode 100644 index a06e4487..00000000 --- a/assets/js/v-3c4e521e.b813ace2.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},7746:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('<h1 id="fesjs-plugin-model" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-model" aria-hidden="true">#</a> @fesjs/plugin-model</h1><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 package.json 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新,提供 <code>reactive</code> 、 <code>ref</code> 等API把数据变成响应式的。我们使用<code>Provide / Inject</code>特性,在应用实例中共享响应式数据。</p><p>我们约定<code>src/models</code> 目录下的文件为项目定义的 <code>model</code> 文件。每个文件需要默认导出一个 <code>function</code>。</p><p>文件名则对应最终 <code>model</code> 的 <code>name</code>,你可以通过插件提供的 <code>API</code> 来消费 <code>model</code> 中的数据。</p><h3 id="model-文件" tabindex="-1"><a class="header-anchor" href="#model-文件" aria-hidden="true">#</a> Model 文件</h3><p><strong>src/models/useAuthModel.js</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useAuthModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> <span class="token function-variable function">signin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>\n <span class="token comment">// todo</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">const</span> <span class="token function-variable function">signout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>\n <span class="token comment">// todo</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n user<span class="token punctuation">,</span>\n signin<span class="token punctuation">,</span>\n signout\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="在组件中使用-model" tabindex="-1"><a class="header-anchor" href="#在组件中使用-model" aria-hidden="true">#</a> 在组件中使用 Model</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> useModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> user<span class="token punctuation">,</span> signin<span class="token punctuation">,</span> signout <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">"useAuthModel"</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="initialstate" tabindex="-1"><a class="header-anchor" href="#initialstate" aria-hidden="true">#</a> @@initialState</h3><p>在<code>beforeRender</code>的返回的内容会写入<code>@@initialState</code></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> beforeRender <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token operator"><</span>PageLoading <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>\n <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> setRole <span class="token punctuation">}</span> <span class="token operator">=</span> access<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token comment">// 初始化应用的全局状态,可以通过 useModel('@@initialState') 获取,具体用法看@/components/UserCenter 文件</span>\n <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'harrywan'</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>然后我们可以在其他组件中使用:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{initialState.userName}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> useModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> initialState <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">'@@initialState'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n initialState\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scope</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="usemodel" tabindex="-1"><a class="header-anchor" href="#usemodel" aria-hidden="true">#</a> useModel</h3><p><strong>useModel(name)</strong></p><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>: 获取 Model 数据,\b也就是 Model 文件默认导出函数执行的结果。</p></li><li><p><strong>参数</strong>:</p><ul><li>name,传入 Model 文件名</li></ul></li></ul>',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.7a6ef2c7.js b/assets/js/v-3cd5a4ef.7a6ef2c7.js deleted file mode 100644 index 247a1aa7..00000000 --- a/assets/js/v-3cd5a4ef.7a6ef2c7.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},914:(n,s,e)=>{e.r(s),e.d(s,{default:()=>u});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={href:"https://www.jestjs.cn/",target:"_blank",rel:"noopener noreferrer"},l=(0,a.uE)('<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-jest"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="约定" tabindex="-1"><a class="header-anchor" href="#约定" aria-hidden="true">#</a> 约定</h2><ul><li>项目根目录下 <code>tests</code> 和 <code>__tests__</code> 文件夹中的 <code>js</code> 或者 <code>jsx</code> 文件为测试文件。</li><li>需要覆盖测试的文件范围是<code>src/index.{js,jsx,ts,tsx,vue}</code></li></ul><p>例如测试文件 <code>add.js</code>:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>fes-template\n├── __tests__\n│ └── add.js\n└── src\n ├── .fes\n └── utils\n └── sum.js\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>内容如下:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">'@/utils/sum'</span><span class="token punctuation">;</span>\n<span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'adds 1 + 2 to equal 3'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">expect</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="命令" tabindex="-1"><a class="header-anchor" href="#命令" aria-hidden="true">#</a> 命令</h2><p>在 <code>fes</code> 上注册 <code>test</code> 命令:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>$ fes <span class="token builtin class-name">test</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2>',13),i={href:"https://www.jestjs.cn/docs/configuration#reference",target:"_blank",rel:"noopener noreferrer"},p=(0,a._)("code",null,"-h",-1),o=(0,a.uE)('<h3 id="args-变量" tabindex="-1"><a class="header-anchor" href="#args-变量" aria-hidden="true">#</a> args 变量</h3><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>$ fes <span class="token builtin class-name">test</span> <span class="token parameter variable">-h</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>打印配置帮助信息:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>$ 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</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br><span class="line-number">197</span><br><span class="line-number">198</span><br><span class="line-number">199</span><br><span class="line-number">200</span><br><span class="line-number">201</span><br><span class="line-number">202</span><br><span class="line-number">203</span><br><span class="line-number">204</span><br><span class="line-number">205</span><br><span class="line-number">206</span><br><span class="line-number">207</span><br><span class="line-number">208</span><br><span class="line-number">209</span><br><span class="line-number">210</span><br><span class="line-number">211</span><br><span class="line-number">212</span><br><span class="line-number">213</span><br><span class="line-number">214</span><br><span class="line-number">215</span><br><span class="line-number">216</span><br><span class="line-number">217</span><br><span class="line-number">218</span><br><span class="line-number">219</span><br><span class="line-number">220</span><br><span class="line-number">221</span><br><span class="line-number">222</span><br><span class="line-number">223</span><br><span class="line-number">224</span><br><span class="line-number">225</span><br><span class="line-number">226</span><br><span class="line-number">227</span><br><span class="line-number">228</span><br><span class="line-number">229</span><br><span class="line-number">230</span><br><span class="line-number">231</span><br><span class="line-number">232</span><br><span class="line-number">233</span><br><span class="line-number">234</span><br><span class="line-number">235</span><br><span class="line-number">236</span><br><span class="line-number">237</span><br><span class="line-number">238</span><br><span class="line-number">239</span><br><span class="line-number">240</span><br><span class="line-number">241</span><br><span class="line-number">242</span><br><span class="line-number">243</span><br><span class="line-number">244</span><br><span class="line-number">245</span><br><span class="line-number">246</span><br><span class="line-number">247</span><br><span class="line-number">248</span><br><span class="line-number">249</span><br><span class="line-number">250</span><br><span class="line-number">251</span><br><span class="line-number">252</span><br><span class="line-number">253</span><br><span class="line-number">254</span><br><span class="line-number">255</span><br><span class="line-number">256</span><br><span class="line-number">257</span><br><span class="line-number">258</span><br><span class="line-number">259</span><br><span class="line-number">260</span><br><span class="line-number">261</span><br><span class="line-number">262</span><br><span class="line-number">263</span><br><span class="line-number">264</span><br><span class="line-number">265</span><br><span class="line-number">266</span><br><span class="line-number">267</span><br><span class="line-number">268</span><br><span class="line-number">269</span><br><span class="line-number">270</span><br><span class="line-number">271</span><br><span class="line-number">272</span><br><span class="line-number">273</span><br><span class="line-number">274</span><br><span class="line-number">275</span><br><span class="line-number">276</span><br><span class="line-number">277</span><br><span class="line-number">278</span><br><span class="line-number">279</span><br><span class="line-number">280</span><br><span class="line-number">281</span><br><span class="line-number">282</span><br><span class="line-number">283</span><br><span class="line-number">284</span><br><span class="line-number">285</span><br><span class="line-number">286</span><br></div></div><p>比如覆盖测试:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>fes test --coverage\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="配置文件" tabindex="-1"><a class="header-anchor" href="#配置文件" aria-hidden="true">#</a> 配置文件</h3><p>除了插件内置的默认配置之外,插件遵循 <code>Jest</code>的配置文件规范,约定项目根目录下的 <code>jest.config.js</code> 为用户配置文件,约定 <code>packages.json</code> 的 <code>jest</code> 属性内容也是配置。</p><h3 id="优先级" tabindex="-1"><a class="header-anchor" href="#优先级" aria-hidden="true">#</a> 优先级</h3><p><code>args</code> 配置 > <code>package.json</code>中的 <code>jest</code> > <code>jest.config.js</code> > 默认配置</p>',10),c={},u=(0,e(3744).Z)(c,[["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,[(0,a.Uk)("集成 "),(0,a._)("a",t,[(0,a.Uk)("Jest"),(0,a.Wm)(e)]),(0,a.Uk)(" 测试框架,目前只支持单元测试和覆盖测试。")]),l,(0,a._)("p",null,[(0,a.Uk)("插件实现 Jest 的全部配置,具体请查看 "),(0,a._)("a",i,[(0,a.Uk)("文档-configuration"),(0,a.Wm)(e)]),(0,a.Uk)("。 也可以使用 "),p,(0,a.Uk)(" 打印配置帮助信息:")]),o],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.9f07a8e3.js b/assets/js/v-3dba8814.9f07a8e3.js deleted file mode 100644 index 510531c1..00000000 --- a/assets/js/v-3dba8814.9f07a8e3.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},74:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('<h1 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h1><p>Fes.js 约定 <code>src/app.js</code> 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端,因此我们可以在这里写函数、引入浏览器端依赖项等等,注意不要引入 node 端依赖项。</p><h2 id="运行时为啥需要配置" tabindex="-1"><a class="header-anchor" href="#运行时为啥需要配置" aria-hidden="true">#</a> 运行时为啥需要配置?</h2><p>Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件,而 Fes.js 中 entry 文件由框架生成,用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。</p><p>例如:</p><p>plugin-acess插件定义运行时配置项:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePluginKey</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'access'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>plugin-acess插件读取配置项:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> runtimeConfig <span class="token operator">=</span> plugin<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'access'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">type</span><span class="token operator">:</span> ApplyPluginsType<span class="token punctuation">.</span>modify<span class="token punctuation">,</span>\n <span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>而用户则只需要配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// app.js</span>\n<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">access</span> <span class="token operator">=</span> <span class="token parameter">memo</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token operator">...</span>memo\n <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>\n router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next\n <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 处理逻辑</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>\n router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next\n <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 处理逻辑</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="配置项" tabindex="-1"><a class="header-anchor" href="#配置项" aria-hidden="true">#</a> 配置项</h2><h3 id="beforerender" tabindex="-1"><a class="header-anchor" href="#beforerender" aria-hidden="true">#</a> beforeRender</h3><p>beforeRender(lastOpts)</p><p>在渲染之前执行,执行<code>action</code>过程中显示 <code>loading</code> 配置的组件,执行结果作为参数 <code>initialState</code> 传给 <code>modifyClientRenderOpts</code>。</p><p>示例:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// app.js</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> PageLoading <span class="token keyword">from</span> <span class="token string">'@/components/PageLoading'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> UserCenter <span class="token keyword">from</span> <span class="token string">'@/components/UserCenter'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">beforeRender</span><span class="token punctuation">(</span><span class="token parameter">lastOpts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token operator">...</span>lastOpts<span class="token punctuation">,</span>\n <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token operator"><</span>PageLoading <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>\n <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> setRole <span class="token punctuation">}</span> <span class="token operator">=</span> access<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'harrywan'</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="patchroutes" tabindex="-1"><a class="header-anchor" href="#patchroutes" aria-hidden="true">#</a> patchRoutes</h3><p>patchRoutes({routes })</p><p>修改路由。</p><p>比如在最前面添加一个 /foo 路由:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>export function patchRoutes({ routes }) {\n routes.unshift({\n path: '/foo',\n component: require('@/extraRoutes/foo').default,\n });\n}\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>直接修改 <code>routes</code>, 不需要返回</p></div><h3 id="modifyclientrenderopts" tabindex="-1"><a class="header-anchor" href="#modifyclientrenderopts" aria-hidden="true">#</a> modifyClientRenderOpts</h3><p>modifyClientRenderOpts(lastOpts)</p><p>修改 <code>clientRender</code> 参数。参数是一个对象:</p><ul><li>routes,路由配置信息</li><li>rootElement, 渲染的根节点,默认是 <code>#app</code>,可通过配置 <code>mountElementId</code> 修改。</li><li>initialState, 初始化数据,<code>beforeRender</code> 运行得到的数据。</li></ul><p>比如在微前端里动态修改渲染根节点:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">let</span> isSubApp <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">modifyClientRenderOpts</span><span class="token punctuation">(</span><span class="token parameter">lastOpts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token operator">...</span>lastOpts<span class="token punctuation">,</span>\n <span class="token literal-property property">rootElement</span><span class="token operator">:</span> isSubApp <span class="token operator">?</span> <span class="token string">'sub-root'</span> <span class="token operator">:</span> lastOpts<span class="token punctuation">.</span>rootElement<span class="token punctuation">,</span> \n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="rootcontainer" tabindex="-1"><a class="header-anchor" href="#rootcontainer" aria-hidden="true">#</a> rootContainer</h3><p>rootContainer(LastRootContainer, args)</p><p>修改交给 Vue 渲染时的根组件,默认是 <code><RouterView></RouterView></code>。</p><ul><li>LastRootContainer,上一个插件修改后的结果。</li><li>args,包含: <ul><li>routes,全量路由配置</li><li>plugin,运行时插件机制</li></ul></li></ul><p>比如在可以包一层DIV:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">rootContainer</span><span class="token punctuation">(</span><span class="token parameter">container</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token operator"><</span>div<span class="token operator">></span>\n <span class="token operator"><</span>RouterView<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>RouterView<span class="token operator">></span>\n <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>\n <span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="onappcreated" tabindex="-1"><a class="header-anchor" href="#onappcreated" aria-hidden="true">#</a> onAppCreated</h3><p>onAppCreated({app})</p><p>创建 app 实例后触发。</p><p>比如用于安装 Vue 插件:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue-router"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">onAppCreated</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> app <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="render" tabindex="-1"><a class="header-anchor" href="#render" aria-hidden="true">#</a> render</h3><p>render(oldRender: Function)</p><p>覆写 render。</p><p>比如用于渲染之前做权限校验。</p><h3 id="onroutercreated" tabindex="-1"><a class="header-anchor" href="#onroutercreated" aria-hidden="true">#</a> onRouterCreated</h3><p>onRouterCreated({router})</p><p>生成router时触发。</p><p>比如用于收集切换路由的记录:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">onRouterCreated</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> router <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="更多配置项" tabindex="-1"><a class="header-anchor" href="#更多配置项" aria-hidden="true">#</a> 更多配置项</h2><p>Fes.js 允许插件注册运行时配置,如果你使用插件,肯定会在插件里找到更多运行时的配置项。</p>',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.eb0a832d.js b/assets/js/v-411c0c9e.eb0a832d.js deleted file mode 100644 index b61c7ebb..00000000 --- a/assets/js/v-411c0c9e.eb0a832d.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},4919:(n,s,a)=>{a.r(s),a.d(s,{default:()=>f});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={href:"https://github.com/intlify/vue-i18n-next",target:"_blank",rel:"noopener noreferrer"},o=(0,e.uE)('<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-locale"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="约定式配置" tabindex="-1"><a class="header-anchor" href="#约定式配置" aria-hidden="true">#</a> 约定式配置</h3><p>Fes.js 约定如下目录,项目就拥有了 <code>zh-CN</code> 与 <code>en-US</code> 国际化语言切换:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>src\n ├── locales\n │ ├── zh-CN.js\n │ └── en-US.js\n └── pages\n │ └── index.vue\n └── app.js\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>多语言文件的命名规范:<code><lang>-<COUNTRY>.js</code></p><p>多语言文件的内容规范:键值组成的字面量,如下:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// src/locales/zh-CN.js</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">menu</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">'接口'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">overview</span><span class="token operator">:</span> <span class="token string">'概述'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">internationalization</span><span class="token operator">:</span> <span class="token string">'国际化,基于'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">achieve</span><span class="token operator">:</span> <span class="token string">'实现。'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token string">'UI组件'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// src/locales/en-US.js</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">menu</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">'interface'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">overview</span><span class="token operator">:</span> <span class="token string">'Overview'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">internationalization</span><span class="token operator">:</span> <span class="token string">'internationalization,base on'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">achieve</span><span class="token operator">:</span> <span class="token string">'to achieve.'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token string">'UI components'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div>',11),c={href:"https://vue-i18n.intlify.dev/guide/essentials/syntax.html",target:"_blank",rel:"noopener noreferrer"},r=(0,e.uE)('<h3 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h3><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>默认配置为:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'zh-CN'</span><span class="token punctuation">,</span> <span class="token comment">// default locale</span>\n <span class="token literal-property property">fallbackLocale</span><span class="token operator">:</span> <span class="token string">'zh-CN'</span><span class="token punctuation">,</span> <span class="token comment">// set fallback locale</span>\n <span class="token literal-property property">baseNavigator</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启浏览器语言检测</span>\n <span class="token literal-property property">legacy</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 用户是否需要 Legacy API 模式</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span> \n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>所有配置项如下:</p><h4 id="locale" tabindex="-1"><a class="header-anchor" href="#locale" aria-hidden="true">#</a> locale</h4><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>zh-CN</code></p></li><li><p><strong>详情</strong>:当前的语言。</p></li></ul><h4 id="fallbacklocale" tabindex="-1"><a class="header-anchor" href="#fallbacklocale" aria-hidden="true">#</a> fallbackLocale</h4><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>zh-CN</code></p></li><li><p><strong>详情</strong>:兜底的语言,如果当前语言找不到配置,则使用默认语言,需要保证默认语言配置文件存在。</p></li></ul><h4 id="basenavigator" tabindex="-1"><a class="header-anchor" href="#basenavigator" aria-hidden="true">#</a> baseNavigator</h4><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:开启浏览器语言检测。</p></li></ul><p>默认情况下,当前语言环境的识别按照:<code>localStorage</code> 中 <code>fes_locale</code> 值 > 浏览器检测 > <code>default</code> 设置的默认语言 > <code>zh-CN</code> 中文。</p><h4 id="legacy" tabindex="-1"><a class="header-anchor" href="#legacy" aria-hidden="true">#</a> legacy</h4><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:用户是否需要 Legacy API 模式</p></li></ul><h3 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h3><p>暂无。</p><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="locale-1" tabindex="-1"><a class="header-anchor" href="#locale-1" aria-hidden="true">#</a> locale</h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h4 id="locale-messages" tabindex="-1"><a class="header-anchor" href="#locale-messages" aria-hidden="true">#</a> locale.messages</h4><ul><li><p><strong>类型</strong>:<code>Object</code></p></li><li><p><strong>详情</strong>:当前的配置的语言信息。</p></li></ul><h4 id="locale-setlocale" tabindex="-1"><a class="header-anchor" href="#locale-setlocale" aria-hidden="true">#</a> locale.setLocale</h4><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>详情</strong>:设置当前的语言。</p></li><li><p><strong>参数</strong>:</p><ul><li>locale,语言的名称,应该是符合 <code><lang>-<COUNTRY></code> 规范的名称。</li></ul></li><li><p><strong>返回值</strong>:<code>null</code></p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\nlocale<span class="token punctuation">.</span><span class="token function">setLocale</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="locale-addlocale" tabindex="-1"><a class="header-anchor" href="#locale-addlocale" aria-hidden="true">#</a> locale.addLocale</h4><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>详情</strong>:手动添加语言配置。</p></li><li><p><strong>参数</strong>:</p><ul><li>locale,语言的名称,符合 <code><lang>-<COUNTRY></code> 规范的名称。</li><li>messages, 语言信息。</li></ul></li><li><p><strong>返回值</strong>:<code>null</code></p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span>\nlocale<span class="token punctuation">.</span><span class="token function">addLocale</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'ja-JP'</span><span class="token punctuation">,</span> <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token string">'テスト'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="locale-getalllocales" tabindex="-1"><a class="header-anchor" href="#locale-getalllocales" aria-hidden="true">#</a> locale.getAllLocales</h4><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>详情</strong>:获取当前获得所有国际化文件的列表,默认会在 locales 文件夹下寻找类似 <code>en-US.js</code> 文件。</p></li><li><p><strong>参数</strong>:null</p></li><li><p><strong>返回值</strong>:<code>Array</code></p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>locale<span class="token punctuation">.</span><span class="token function">getAllLocales</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token comment">// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="usei18n" tabindex="-1"><a class="header-anchor" href="#usei18n" aria-hidden="true">#</a> useI18n</h3>',33),i=(0,e._)("code",null,"setup",-1),u={href:"https://vue-i18n.intlify.dev/api/composition.html#usei18n",target:"_blank",rel:"noopener noreferrer"},k=(0,e.uE)('<div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>{{ t('language') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>message: {{ t('hello') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n <span class="token comment">// Something to do ...</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span><span class="token punctuation">,</span> t <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div>',1),d=(0,e._)("code",null,"useI18n()",-1),b={href:"https://vue-i18n.intlify.dev/api/composition.html#composer",target:"_blank",rel:"noopener noreferrer"},g=(0,e._)("code",null,"t",-1),m=(0,e._)("code",null,"n",-1),h=(0,e._)("code",null,"d",-1),v={},f=(0,a(3744).Z)(v,[["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,[(0,e.Uk)("国际化插件,基于 "),(0,e._)("a",l,[(0,e.Uk)("Vue I18n"),(0,e.Wm)(a)]),(0,e.Uk)(",用于解决 i18n 问题。")]),o,(0,e._)("p",null,[(0,e.Uk)("想了解更多语言信息配置、匹配规则,请参考 "),(0,e._)("a",c,[(0,e.Uk)("Vue I18n"),(0,e.Wm)(a)]),(0,e.Uk)(" 文档。")]),r,(0,e._)("p",null,[(0,e.Uk)("Composition API, 只能在 "),i,(0,e.Uk)(" 函数中使用,更多细节参考 "),(0,e._)("a",u,[(0,e.Uk)("Vue I18n"),(0,e.Wm)(a)]),(0,e.Uk)("。 \b举个 🌰:")]),k,(0,e._)("p",null,[d,(0,e.Uk)("返回结果是 "),(0,e._)("a",b,[(0,e.Uk)("Composer"),(0,e.Wm)(a)]),(0,e.Uk)(",提供类似 "),g,(0,e.Uk)("、"),m,(0,e.Uk)("、"),h,(0,e.Uk)(" 等转换函数,在模板中使用。")])],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.18d5dcb0.js b/assets/js/v-41dee210.18d5dcb0.js deleted file mode 100644 index 93844631..00000000 --- a/assets/js/v-41dee210.18d5dcb0.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:3,title:"配置拦截器",slug:"配置拦截器",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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},2434:(n,s,a)=>{a.r(s),a.d(s,{default:()=>k});var p=a(6252);const e=(0,p.uE)('<h1 id="fesjs-plugin-request" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-request" aria-hidden="true">#</a> @fesjs/plugin-request</h1><p>基于 axios 封装的 request,内置防止重复请求、请求节流、错误处理等功能。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="构建时配置" tabindex="-1"><a class="header-anchor" href="#构建时配置" aria-hidden="true">#</a> 构建时配置</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">request</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">dataField</span><span class="token operator">:</span> <span class="token string">'result'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="datafield" tabindex="-1"><a class="header-anchor" href="#datafield" aria-hidden="true">#</a> dataField</h4><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>''</code></p></li><li><p>详情:</p><p><code>dataField</code> 对应接口统一格式中的数据字段,比如接口如果统一的规范是 <code>{ success: boolean, result: any}</code> ,那么就不需要配置,这样你通过 <code>useRequest</code> 消费的时候会生成一个默认的 <code>formatResult</code>,直接返回 <code>result</code> 中的数据,方便使用。如果你的后端接口不符合这个规范,可以自行配置 <code>dataField</code>。配置为 <code>''</code>(空字符串)的时候不做处理。</p></li></ul><h4 id="base-即将废弃" tabindex="-1"><a class="header-anchor" href="#base-即将废弃" aria-hidden="true">#</a> base(即将废弃)</h4><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>''</code></p></li><li><p>详情:</p><p><code>base</code> 接口前缀。</p></li></ul>',12),t={class:"custom-container warning"},o=(0,p._)("p",{class:"custom-container-title"},"即将废弃",-1),c={href:"https://github.com/axios/axios",target:"_blank",rel:"noopener noreferrer"},l=(0,p.uE)('<h3 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h3><p>在 <code>app.js</code> 中进行运行时配置。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// 格式化 response.data (只有 response.data 类型为 object 才会调用)</span>\n <span class="token function-variable function">responseDataAdaptor</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n data<span class="token punctuation">.</span>code <span class="token operator">=</span> data<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">'200'</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">:</span> data<span class="token punctuation">.</span>code<span class="token punctuation">;</span>\n <span class="token keyword">return</span> data<span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token comment">// 关闭 response data 校验(只判断 xhr status)</span>\n <span class="token literal-property property">closeResDataCheck</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token comment">// 请求拦截器 http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8</span>\n <span class="token literal-property property">requestInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token comment">// 响应拦截器</span>\n <span class="token literal-property property">responseInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token comment">// 错误处理</span>\n <span class="token comment">// 内部以 reponse.data.code === '0' 判断请求是否成功</span>\n <span class="token comment">// 若使用其他字段判断,可以使用 responseDataAdaptor 对响应数据进行格式</span>\n <span class="token literal-property property">errorHandler</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token number">11199</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 特殊 code 处理逻辑</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token number">404</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token keyword">default</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 异常统一处理</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token comment">// 其他 axios 配置</span>\n <span class="token operator">...</span>otherConfigs\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h4 id="skiperrorhandler" tabindex="-1"><a class="header-anchor" href="#skiperrorhandler" aria-hidden="true">#</a> skipErrorHandler</h4><ul><li><p>类型: <code>boolean | string | number | array<string | number></code></p></li><li><p>默认值: ``</p></li><li><p>详情:</p><p>指定当前请求的某些错误状态不走 <code>errorHandler</code>,单独进行处理。如果设置为 <code>true</code>,当前请求的错误处理都不走 <code>errorHandler</code>。</p></li><li><p>示列:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token function">request</span><span class="token punctuation">(</span><span class="token string">'/api/login'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">skipErrorHandler</span><span class="token operator">:</span> <span class="token string">'110'</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// do something</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// \b这里处理 code 为 110 的异常</span>\n <span class="token comment">// 此时 errorHandler[110] 函数不会生效,也不会执行 errorHandler.default</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><h3 id="发起一个普通-post-请求" tabindex="-1"><a class="header-anchor" href="#发起一个普通-post-请求" aria-hidden="true">#</a> 发起一个普通 post 请求</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token function">request</span><span class="token punctuation">(</span><span class="token string">'/api/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// do something</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// 处理异常</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="merge-重复请求" tabindex="-1"><a class="header-anchor" href="#merge-重复请求" aria-hidden="true">#</a> merge 重复请求</h3><p>连续发送多个请求,会被合并成一个请求,不会报 <code>REPEAT</code> 接口错误。</p><p>当发生 <code>REPEAT</code> 请求异常,并且确保自身代码合理的情况下,可以使用该配置。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token function">request</span><span class="token punctuation">(</span>\n <span class="token string">'/api/login'</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">mergeRequest</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 在一个请求没有回来前,重复发送的请求会合并成一个请求</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// do something</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// 处理异常</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="请求节流-即将废弃" tabindex="-1"><a class="header-anchor" href="#请求节流-即将废弃" aria-hidden="true">#</a> 请求节流(即将废弃)</h3><div class="custom-container warning"><p class="custom-container-title">即将废弃</p><p>因为 request 的请求总会有一个 promise 结果,要么成功,要么失败,和防抖、节流的语义不一致,防抖、节流只是函数的不执行</p></div><h3 id="请求缓存" tabindex="-1"><a class="header-anchor" href="#请求缓存" aria-hidden="true">#</a> 请求缓存</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token function">request</span><span class="token punctuation">(</span>\n <span class="token string">'/api/login'</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">cacheType</span><span class="token operator">:</span> <span class="token string">'ram'</span><span class="token punctuation">,</span> <span class="token comment">// ram: 内存,session: sessionStorage,local:localStorage</span>\n <span class="token literal-property property">cacheTime</span><span class="token operator">:</span> <span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">3</span> <span class="token comment">// 缓存时间:默认3min</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// do something</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// 处理异常</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>若 <code>cache</code> 传 <code>true</code>,则默认使用 <code>ram</code> 缓存类型,缓存时间 3min。</p><h3 id="结合-use-使用" tabindex="-1"><a class="header-anchor" href="#结合-use-使用" aria-hidden="true">#</a> 结合 use 使用</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRequest <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> loading<span class="token punctuation">,</span> data<span class="token punctuation">,</span> error <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useRequest</span><span class="token punctuation">(</span><span class="token string">'/api/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n loading<span class="token punctuation">,</span>\n data<span class="token punctuation">,</span>\n error\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="配置拦截器" tabindex="-1"><a class="header-anchor" href="#配置拦截器" aria-hidden="true">#</a> 配置拦截器</h3>',21),r={href:"http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8",target:"_blank",rel:"noopener noreferrer"},u=(0,p.uE)('<div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">requestInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 在发送请求之前做些什么</span>\n <span class="token keyword">return</span> config<span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>\n <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 在发送请求之前做些什么</span>\n <span class="token keyword">return</span> config<span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 对请求错误做些什么</span>\n <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token comment">// 响应拦截器</span>\n <span class="token literal-property property">responseInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 对响应数据做点什么</span>\n <span class="token keyword">return</span> response<span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>\n <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 对响应数据做点什么</span>\n <span class="token keyword">return</span> response<span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 对响应错误做点什么</span>\n <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="request" tabindex="-1"><a class="header-anchor" href="#request" aria-hidden="true">#</a> request</h3><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>:请求后端接口</p></li><li><p><strong>参数</strong>:</p><ul><li>url: 后端接口 url</li><li>data: 参数</li><li>options: \b 配置( 支持 axios 所有配置)</li></ul></li><li><p><strong>返回值</strong>: Promise</p></li></ul><h3 id="userequest" tabindex="-1"><a class="header-anchor" href="#userequest" aria-hidden="true">#</a> useRequest</h3><p>request 的封装,返回响应式 <code>loading</code>、<code>error</code>、 <code>data</code></p>',6),i={},k=(0,a(3744).Z)(i,[["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,[(0,p.Uk)("这个字段将在下个版本废弃,推荐使用 "),(0,p._)("a",c,[(0,p.Uk)("axios baseURL"),(0,p.Wm)(a)]),(0,p.Uk)("。")])]),l,(0,p._)("p",null,[(0,p.Uk)("函数的参数格式:"),(0,p._)("a",r,[(0,p.Uk)("传送门"),(0,p.Wm)(a)]),(0,p.Uk)(";")]),u],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.3219979d.js b/assets/js/v-494b840e.3219979d.js deleted file mode 100644 index aa8ef019..00000000 --- a/assets/js/v-494b840e.3219979d.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},2754:(a,n,s)=>{s.r(n),s.d(n,{default:()=>c});const e=(0,s(6252).uE)('<h1 id="插件介绍" tabindex="-1"><a class="header-anchor" href="#插件介绍" aria-hidden="true">#</a> 插件介绍</h1><h2 id="开始" tabindex="-1"><a class="header-anchor" href="#开始" aria-hidden="true">#</a> 开始</h2><p>一个插件是一个 <code>npm</code> 包,它能够为 Fes.js 创建的项目添加额外的功能,这些功能包括:</p><ul><li>项目的 webpack 配置。</li><li>修改项目的 babel 配置。</li><li>添加新的 fes 命令 - 例如 <code>@fes/plugin-jest</code> 添加了 <code>fes test</code> 命令,允许开发者运行单元测试。</li><li>集成 Vue 的插件。</li><li>修改路由配置</li><li>提供运行时 API</li><li>...</li></ul><p>插件的入口是一个函数,函数会以 API 对象作为第一个参数:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">api</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>\n api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'esbuild'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token function">schema</span><span class="token punctuation">(</span><span class="token parameter">joi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> joi<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">enableBy</span><span class="token operator">:</span> api<span class="token punctuation">.</span>EnableBy<span class="token punctuation">.</span>config<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>API 对象是构建流程管理 Service 类的实例,api 提供一些有用的方法帮助你开发插件。</p><p><code>api.describe</code>用来描述插件:</p><ul><li><strong>key</strong>, 插件的 <code>key</code>,可以理解为插件的名称,在 <code>.fes.js</code> 中用 <code>key</code> 配置此插件。</li><li><strong>config</strong>,插件的配置信息: <ul><li>schema,定义配置的类型</li><li>default,默认配置</li></ul></li><li><strong>enableBy</strong>, 是否开启插件,可配置某些场景下禁用插件。</li></ul><h2 id="创建插件" tabindex="-1"><a class="header-anchor" href="#创建插件" aria-hidden="true">#</a> 创建插件</h2><h5 id="第一步-安装create-fes-app" tabindex="-1"><a class="header-anchor" href="#第一步-安装create-fes-app" aria-hidden="true">#</a> 第一步:安装<code>create-fes-app</code></h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @fesjs/create-fes-app\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h5 id="第二步-创建插件项目" tabindex="-1"><a class="header-anchor" href="#第二步-创建插件项目" aria-hidden="true">#</a> 第二步:创建插件项目</h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>create-fes-app pluginName\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>在询问<code>Pick an template</code>时选择<code>Plugin</code>!</p><h5 id="第三步-进入插件目录-安装依赖" tabindex="-1"><a class="header-anchor" href="#第三步-进入插件目录-安装依赖" aria-hidden="true">#</a> 第三步:进入插件目录 & 安装依赖</h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> pluginName <span class="token operator">&</span> <span class="token function">yarn</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h5 id="第四步-启动编译" tabindex="-1"><a class="header-anchor" href="#第四步-启动编译" aria-hidden="true">#</a> 第四步:启动编译</h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">yarn</span> dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h5 id="第五步-使用插件api完成你的插件-可以参考其他插件理解api用法和场景" tabindex="-1"><a class="header-anchor" href="#第五步-使用插件api完成你的插件-可以参考其他插件理解api用法和场景" aria-hidden="true">#</a> 第五步:使用插件API完成你的插件!(可以参考其他插件理解api用法和场景)</h5><h2 id="发布到-npm" tabindex="-1"><a class="header-anchor" href="#发布到-npm" aria-hidden="true">#</a> 发布到 npm</h2><p>以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被 Fes.js 自动注册为插件或插件集。</p><p>所以编写好的插件想发布到 npm 供其他人使用,包名必须是 <code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头。</p>',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.e0560471.js b/assets/js/v-528b8b6c.e0560471.js deleted file mode 100644 index 3edd0b1a..00000000 --- a/assets/js/v-528b8b6c.e0560471.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[972],{2296:(n,a,s)=>{s.r(a),s.d(a,{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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},2682:(n,a,s)=>{s.r(a),s.d(a,{default:()=>p});const e=(0,s(6252).uE)('<h1 id="使用图片" tabindex="-1"><a class="header-anchor" href="#使用图片" aria-hidden="true">#</a> 使用图片</h1><h2 id="使用图片-1" tabindex="-1"><a class="header-anchor" href="#使用图片-1" aria-hidden="true">#</a> 使用图片</h2><p>假设在 <code>src/images</code> 目录下有 <code>logo.png</code>。</p><h3 id="vue-里使用图片" tabindex="-1"><a class="header-anchor" href="#vue-里使用图片" aria-hidden="true">#</a> Vue 里使用图片</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@/images/logo.png`<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="js-里使用图片" tabindex="-1"><a class="header-anchor" href="#js-里使用图片" aria-hidden="true">#</a> JS 里使用图片</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> imageUrl <span class="token keyword">from</span> <span class="token string">'@/images/logo.png`'</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="css-里使用图片" tabindex="-1"><a class="header-anchor" href="#css-里使用图片" aria-hidden="true">#</a> CSS 里使用图片</h3><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.logo</span> <span class="token punctuation">{</span>\n <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'@/images/logo.png'</span><span class="token punctuation">)</span></span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注意:</p><ol><li>这是 <code>webpack</code> 的规则,如果切到其他打包工具,可能会有变化</li><li><code>less</code> 中同样适用</li></ol><h2 id="public-文件夹" tabindex="-1"><a class="header-anchor" href="#public-文件夹" aria-hidden="true">#</a> <code>public</code> 文件夹</h2><p>有些内容不需要经过 <code>webpack</code> 模块化处理,则可以将这些内容放在 <code>public</code> 文件夹,构建后会直接复制到 <code>dist</code> 目录,所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在html模板中使用" tabindex="-1"><a class="header-anchor" href="#在html模板中使用" aria-hidden="true">#</a> 在HTML模板中使用</h3><p>在 <code>public/index.html</code> 中需要设置:</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="在-vue-文件中使用" tabindex="-1"><a class="header-anchor" href="#在-vue-文件中使用" aria-hidden="true">#</a> 在.vue 文件中使用</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`${publicPath}my-image.png`<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">publicPath</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div>',18),t={},p=(0,s(3744).Z)(t,[["render",function(n,a){return e}]])},3744:(n,a)=>{a.Z=(n,a)=>{const s=n.__vccOpts||n;for(const[n,e]of a)s[n]=e;return s}}}]); \ No newline at end of file diff --git a/assets/js/v-5bf80046.734741c7.js b/assets/js/v-5bf80046.734741c7.js deleted file mode 100644 index d75e4cd8..00000000 --- a/assets/js/v-5bf80046.734741c7.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5310:(s,a,n)=>{n.r(a),n.d(a,{default:()=>l});const e=(0,n(6252).uE)('<h1 id="fesjs-plugin-sass" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-sass" aria-hidden="true">#</a> @fesjs/plugin-sass</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>Fes.js 默认只支持 <code>less</code>,通过此插件扩展支持 <code>sass</code></p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-sass"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="global-css" tabindex="-1"><a class="header-anchor" href="#global-css" aria-hidden="true">#</a> global css</h2><p>添加 <code>src/global.scss</code> 和 <code>src/global.sass</code> 为全局CSS入口,添加一些通用样式内容。</p><h2 id="vue-单文件组件" tabindex="-1"><a class="header-anchor" href="#vue-单文件组件" aria-hidden="true">#</a> Vue 单文件组件</h2><p>Vue 单文件组件的 <code><style></style></code> 添加 <code>lang='scss'</code>,例如:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scss<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div>',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.004fc897.js b/assets/js/v-5f4c684e.004fc897.js deleted file mode 100644 index 9e6d6990..00000000 --- a/assets/js/v-5f4c684e.004fc897.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},4565:(n,s,a)=>{a.r(s),a.d(s,{default:()=>l});var p=a(6252);const t=(0,p.uE)('<h1 id="fesjs-plugin-vuex" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-vuex" aria-hidden="true">#</a> @fesjs/plugin-vuex</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>集成vuex插件</p><p>增强vuex,导出所有的<code>mutations</code>、<code>actions</code>和<code>getter</code>的事件类型,编辑器提示</p><p>约定模式,module和plugin定义放在stores目录下,文件名包含plugin被解析为插件,无需额外配置,定义即可用。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>└── 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</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>为了防止<code>fesjs</code>与<code>vuex</code>的export冲突,fesjs不提供导出vuex的任何api。你可以直接使用vuex的api</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-vuex"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">vuex</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">strict</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 开启严格模式</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="场景使用" tabindex="-1"><a class="header-anchor" href="#场景使用" aria-hidden="true">#</a> 场景使用</h2><p>先定义在stores下定义user模块,包含嵌套模块</p><p>stores/user.js</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">namespaced</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'aring'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token function">login</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">reslove</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">reslove</span><span class="token punctuation">(</span><span class="token string">'OK'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">province</span><span class="token operator">:</span> <span class="token string">'广东省'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">'深圳市'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">zone</span><span class="token operator">:</span> <span class="token string">'南山区'</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token function">address</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> state<span class="token punctuation">.</span>province <span class="token operator">+</span> state<span class="token punctuation">.</span>city <span class="token operator">+</span> state<span class="token punctuation">.</span>zone<span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><p>stores/foo/bar.js</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">namespaced</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token function">increment</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n state<span class="token punctuation">.</span>count<span class="token operator">++</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token function">doubleCount</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token function">asyncIncrement</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>导出的<code>mutations</code>、<code>actions</code>和<code>getter</code>的事件类型,将会按文件命名;</p><p>如<code>ACTION_TYPES.user.login</code>指向user模块中actions的login方法</p><p>如<code>GETTER_TYPES.user.address</code>指向user模块中嵌套的address getter</p><p>如<code>MUTATION_TYPES.fooBar.increment</code>指向foo/bar模块中mutations的increment方法</p></div><p>在vue文件中使用store</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Vuex<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>login<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>async login<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fooBarIncrement<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>foo/bar:{{fooBarDoubleCount}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{address}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span><span class="token punctuation">></span></span>\n{\n "name": "store",\n "title": "vuex测试"\n}\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>config</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> computed<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span><span class="token punctuation">;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">MUTATION_TYPES</span><span class="token punctuation">,</span> <span class="token constant">GETTER_TYPES</span><span class="token punctuation">,</span> <span class="token constant">ACTION_TYPES</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'store==>'</span><span class="token punctuation">,</span> store<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> disabled <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token comment">// 可以利用导出的事件类型,不再通过字符传入(store.getters['user/address'])</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token constant">GETTER_TYPES</span><span class="token punctuation">.</span>user<span class="token punctuation">.</span>address<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n disabled<span class="token punctuation">,</span>\n <span class="token function-variable function">login</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n disabled<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\n store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token constant">ACTION_TYPES</span><span class="token punctuation">.</span>user<span class="token punctuation">.</span>login<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>\n disabled<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token function-variable function">fooBarIncrement</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token constant">MUTATION_TYPES</span><span class="token punctuation">.</span>fooBar<span class="token punctuation">.</span>increment<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// foo/bar目录会解析成驼峰fooBar</span>\n <span class="token literal-property property">fooBarDoubleCount</span><span class="token operator">:</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token constant">GETTER_TYPES</span><span class="token punctuation">.</span>fooBar<span class="token punctuation">.</span>doubleCount<span class="token punctuation">]</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>由于该插件注册在onAppCreated中,如果在onAppCreated及之前使用useStore时,获取不到vuex实例</p><p><code>fesjs</code>导出了vuex实例<code>store</code>,如在app.js文件中</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> store<span class="token punctuation">,</span> <span class="token constant">GETTER_TYPES</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token constant">GETTER_TYPES</span><span class="token punctuation">.</span>user<span class="token punctuation">.</span>address<span class="token punctuation">]</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div><h2 id="vuex插件" tabindex="-1"><a class="header-anchor" href="#vuex插件" aria-hidden="true">#</a> vuex插件</h2>',24),e={href:"https://next.vuex.vuejs.org/guide/plugins.html",target:"_blank",rel:"noopener noreferrer"},o=(0,p.uE)('<h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="store" tabindex="-1"><a class="header-anchor" href="#store" aria-hidden="true">#</a> store</h3><ul><li>类型 <code>Object</code></li><li>vuex实例</li></ul><h3 id="mutation-types" tabindex="-1"><a class="header-anchor" href="#mutation-types" aria-hidden="true">#</a> MUTATION_TYPES</h3><ul><li>类型 <code>Object</code></li><li>mutation的所有事件类型</li></ul><h3 id="getter-types" tabindex="-1"><a class="header-anchor" href="#getter-types" aria-hidden="true">#</a> GETTER_TYPES</h3><ul><li>类型 <code>Object</code></li><li>getter的所有方法名</li></ul><h3 id="action-types" tabindex="-1"><a class="header-anchor" href="#action-types" aria-hidden="true">#</a> ACTION_TYPES</h3><ul><li>类型 <code>Object</code></li><li>action的所有事件类型</li></ul>',9),c={},l=(0,a(3744).Z)(c,[["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,[(0,p.Uk)("stores文件夹下的文件名包含plugin被解析为插件,vuex插件写法参考"),(0,p._)("a",e,[(0,p.Uk)("官方文档"),(0,p.Wm)(a)])]),o],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.594d5357.js b/assets/js/v-6320961c.594d5357.js deleted file mode 100644 index 55f11b2d..00000000 --- a/assets/js/v-6320961c.594d5357.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},7570:(n,s,a)=>{a.r(s),a.d(s,{default:()=>F});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._)("code",null,"Vue Router",-1),o={href:"https://next.router.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},r=(0,p.uE)('<h2 id="路由配置" tabindex="-1"><a class="header-anchor" href="#路由配置" aria-hidden="true">#</a> 路由配置</h2><p>在配置文件 <code>.fes.js</code>中通过 <code>router</code> 进行配置。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'hash'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="routes" tabindex="-1"><a class="header-anchor" href="#routes" aria-hidden="true">#</a> routes</h3>',4),l=(0,p._)("code",null,"routes",-1),c={href:"https://next.router.vuejs.org/zh/guide/",target:"_blank",rel:"noopener noreferrer"},u=(0,p._)("h3",{id:"mode",tabindex:"-1"},[(0,p._)("a",{class:"header-anchor",href:"#mode","aria-hidden":"true"},"#"),(0,p.Uk)(" mode")],-1),i=(0,p._)("p",null,"创建历史记录的类型:",-1),k=(0,p._)("strong",null,"history",-1),b={href:"https://next.router.vuejs.org/zh/api/#createwebhistory",target:"_blank",rel:"noopener noreferrer"},m=(0,p._)("strong",null,"hash",-1),d={href:"https://next.router.vuejs.org/zh/api/#createWebHashHistory",target:"_blank",rel:"noopener noreferrer"},g=(0,p._)("strong",null,"memory",-1),h={href:"https://next.router.vuejs.org/zh/api/#createWebHashHistory",target:"_blank",rel:"noopener noreferrer"},y=(0,p.uE)('<p>默认是<code>hash</code>模式。</p><h2 id="约定式路由" tabindex="-1"><a class="header-anchor" href="#约定式路由" aria-hidden="true">#</a> 约定式路由</h2><p>约定式路由也叫文件路由,就是不需要手写配置,文件系统即路由,通过目录和文件及其命名分析出路由配置。</p><h3 id="约定规范" tabindex="-1"><a class="header-anchor" href="#约定规范" aria-hidden="true">#</a> 约定规范</h3><p>比如以下文件结构:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>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</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>编译后会得到以下路由配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/layout'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>\n <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\n <span class="token string-property property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/a"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"a"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">7</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/b"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/b/layout'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>\n <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span>\n <span class="token string-property property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/b/c"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/b/c'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"b_c"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">14</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/b/:id"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/b/@id'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"b__id"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">13</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/b"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/b/index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"b_index"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">7</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"index"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">5</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/:pathMatch(.*)"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/*'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"FUZZYMATCH"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">3</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">]</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br></div></div><p><strong>需要注意的是,满足以下任意规则的文件不会被注册为路由</strong>:</p><ul><li>不是 <code>.vue .jsx</code> 文件</li><li><code>components</code> 目录中的文件</li></ul><h3 id="动态路由" tabindex="-1"><a class="header-anchor" href="#动态路由" aria-hidden="true">#</a> 动态路由</h3><p>Fes.js 里约定以 <code>@</code> 开头的文件或文件夹映射为动态路由。 比如:</p><ul><li><code>src/pages/users/@id.vue</code> 会成为 <code>/users/:id</code></li><li><code>src/pages/users/@id/settings.vue</code> 会成为 <code>/users/:id/settings</code></li></ul><h3 id="嵌套路由" tabindex="-1"><a class="header-anchor" href="#嵌套路由" aria-hidden="true">#</a> 嵌套路由</h3><p>Fes.js 里约定目录下有 <code>layout.vue</code> 时会生成嵌套路由,以 <code>layout.vue</code> 为该目录的公共父组件,<code>layout.vue</code> 中必须实现 <code>RouterView</code></p><p>比如以下目录结构:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>pages\n└── users\n ├── layout.vue\n ├── index.vue\n └── list.vue\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>会生成路由:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span>\n <span class="token punctuation">{</span> \n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/users/layout'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/users/index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/users/list'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/users/list'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">]</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="模糊匹配" tabindex="-1"><a class="header-anchor" href="#模糊匹配" aria-hidden="true">#</a> 模糊匹配</h3>',20),_=(0,p._)("code",null,"*",-1),v={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"},q=(0,p.uE)('<p>比如以下目录结构:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>pages\n├── index.vue # 根路由页面 路径为 /\n└── *.vue # 模糊匹配 路径为 *\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>会生成路由:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span>\n <span class="token punctuation">{</span> \n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">5</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/:pathMatch(.*)'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/**'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">3</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">]</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>这样,如果访问 <code>/foo</code>,<code>/</code> 不能匹配,会 fallback 到 <code>*</code> 路由,通过 <code>src/pages/*.vue</code> 进行渲染。</p><h3 id="扩展路由元信息" tabindex="-1"><a class="header-anchor" href="#扩展路由元信息" aria-hidden="true">#</a> 扩展路由元信息</h3><p>我们在定义路由时可以配置<code>meta</code>字段,用来记录一些跟路由相关的信息:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/foo'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">component</span><span class="token operator">:</span> Foo<span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">component</span><span class="token operator">:</span> Bar<span class="token punctuation">,</span>\n <span class="token comment">// a meta field</span>\n <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">requiresAuth</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>接下来我们来配置 <code>meta</code>:</p>',9),f=(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)("config")]),(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),x=(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),U=(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),j=(0,p.uE)('<p>则编译后的路由配置为:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span>\n <span class="token punctuation">{</span> \n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/a'</span><span class="token punctuation">,</span> \n <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> \n <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"store"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"title"</span><span class="token operator">:</span> <span class="token string">"vuex测试"</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span>\n</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="智能路由" tabindex="-1"><a class="header-anchor" href="#智能路由" aria-hidden="true">#</a> 智能路由</h3><p>可以看到,编译后路由都会有 <code>count</code> 属性,这是我们根据精准匹配优先算法原则设计出路由排名算法,对匹配到的路由打分:</p><ul><li>路由的路径每个子项得到4分</li><li>子项为静态细分(<code>/list</code>)再加3分</li><li>子项为动态细分(<code>/:orderId</code>)再加2分</li><li>根段(<code>/</code>)再1分</li><li>通配符(<code>*</code>)匹配到的减去1分</li></ul><p>当我们跳转路由时,如果 URL 匹配到多个路由,则选择分数最高的路由。</p><h2 id="路由跳转" tabindex="-1"><a class="header-anchor" href="#路由跳转" aria-hidden="true">#</a> 路由跳转</h2>',7),w={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"},E=(0,p.uE)('<h3 id="声明式" tabindex="-1"><a class="header-anchor" href="#声明式" aria-hidden="true">#</a> 声明式</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/home<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="命令式" tabindex="-1"><a class="header-anchor" href="#命令式" aria-hidden="true">#</a> 命令式</h3>',3),R=(0,p._)("code",null,"router",-1),W={href:"https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},B=(0,p.uE)('<div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token comment">// 这三种形式是等价的</span>\n router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/users/posva#bio'</span><span class="token punctuation">)</span>\n router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/users/posva'</span><span class="token punctuation">,</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">'#bio'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>\n router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'users'</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'posva'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">'#bio'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token comment">// 只改变 hash</span>\n router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">'#bio'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token comment">// 只改变 query</span>\n router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token string">'2'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token comment">// 只改变 param</span>\n router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'jolyne'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>\n\n <span class="token comment">// 跳转到上一个路由</span>\n router<span class="token punctuation">.</span><span class="token function">goBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// \b跳转到前一个历史记录</span>\n router<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 替换历史堆栈中的记录</span>\n router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'/new'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div>',1),H={},F=(0,a(3744).Z)(H,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),H=(0,p.up)("CodeGroupItem"),F=(0,p.up)("CodeGroup");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[(0,p.Uk)("像 Vue 、React 这类框架是用组件化搭建页面,路由解决的是路径到组件的匹配问题。Fes.js 基于 "),e,(0,p.Uk)(" 实现的路由,想了解更多的同学可以看看"),(0,p._)("a",o,[(0,p.Uk)("官方文档"),(0,p.Wm)(a)]),(0,p.Uk)("。")]),r,(0,p._)("p",null,[l,(0,p.Uk)(" 是配置添加到路由的初始路由列表,格式为路由信息的数组。具体使用参考 "),(0,p._)("a",c,[(0,p.Uk)("Vue Router 文档"),(0,p.Wm)(a)]),(0,p.Uk)(" 中关于路由配置、路由匹配相关内容。")]),u,i,(0,p._)("ul",null,[(0,p._)("li",null,[k,(0,p.Uk)(",对应 "),(0,p._)("a",b,[(0,p.Uk)("createWebHistory"),(0,p.Wm)(a)])]),(0,p._)("li",null,[m,(0,p.Uk)(",对应 "),(0,p._)("a",d,[(0,p.Uk)("createWebHashHistory"),(0,p.Wm)(a)])]),(0,p._)("li",null,[g,(0,p.Uk)(",对应 "),(0,p._)("a",h,[(0,p.Uk)("createMemoryHistory"),(0,p.Wm)(a)])])]),y,(0,p._)("p",null,[(0,p.Uk)("Fes.js 下约定文件名为 "),_,(0,p.Uk)(" 的路由是模糊匹配路由,可以用此特性实现 "),(0,p._)("a",v,[(0,p.Uk)("404 路由"),(0,p.Wm)(a)]),(0,p.Uk)("。")]),q,(0,p.Wm)(F,null,{default:(0,p.w5)((()=>[(0,p.Wm)(H,{title:"vue",active:""},{default:(0,p.w5)((()=>[f])),_:1}),(0,p.Wm)(H,{title:"jsx"},{default:(0,p.w5)((()=>[x])),_:1}),(0,p.Wm)(H,{title:"tsx"},{default:(0,p.w5)((()=>[U])),_:1})])),_:1}),j,(0,p._)("p",null,[(0,p.Uk)("想学习更多,可以查看 "),(0,p._)("a",w,[(0,p.Uk)("Vue Router 官方文档"),(0,p.Wm)(a)]),(0,p.Uk)("。")]),E,(0,p._)("p",null,[(0,p.Uk)("页面跳转 API 由 "),R,(0,p.Uk)(" 实例提供,查看 "),(0,p._)("a",W,[(0,p.Uk)("Vue Rouer 文档"),(0,p.Wm)(a)]),(0,p.Uk)("了解更多。")]),B],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.0a028df5.js b/assets/js/v-6f2f6a5a.0a028df5.js deleted file mode 100644 index 09abb3f6..00000000 --- a/assets/js/v-6f2f6a5a.0a028df5.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},1437:(n,s,a)=>{a.r(s),a.d(s,{default:()=>r});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={href:"https://pinia.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},c=(0,e.uE)('<p>为了防止 <code>Fes.js</code> 与 <code>pinia</code> 提供的 API 冲突,<code>Fes.js</code>不提供任何 <code>pinia</code> 的API,相关API直接从 <code>pinia</code> 导出:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>约定 <code>plugin</code> 定义放在 <code>stores</code> 目录下,文件名包含plugin被解析为插件,无需额外配置,定义即可用。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>└── src\n ├── pages\n │ └── index.vue\n └── stores \n │ ├── plugin-logger.js \n │ ├── user.js\n └── app.js\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-pinia"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"pinia"</span><span class="token operator">:</span> <span class="token string">"^2.0.11"</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="pinia" tabindex="-1"><a class="header-anchor" href="#pinia" aria-hidden="true">#</a> pinia</h3><p><code>createPinia</code>执行后创建的实例。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> pinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><h3 id="定义-store" tabindex="-1"><a class="header-anchor" href="#定义-store" aria-hidden="true">#</a> 定义 store</h3><p>我们在 <code>src/store/main.js</code>中:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span>\n\n<span class="token comment">// useStore could be anything like useUser, useCart</span>\n<span class="token comment">// the first argument is a unique id of the store across your application</span>\n<span class="token keyword">export</span> <span class="token keyword">const</span> useStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token comment">// other options...</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="setup" tabindex="-1"><a class="header-anchor" href="#setup" aria-hidden="true">#</a> setup</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/store/main'</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="非setup" tabindex="-1"><a class="header-anchor" href="#非setup" aria-hidden="true">#</a> 非setup</h3><p>比如在app.js中:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> pinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span>\n\n<span class="token keyword">export</span> <span class="token keyword">const</span> beforeRender <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token operator"><</span>PageLoading <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>\n <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> setRole <span class="token punctuation">}</span> <span class="token operator">=</span> accessApi<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span><span class="token punctuation">;</span>\n store<span class="token punctuation">.</span><span class="token function">$patch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'李雷'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">'admin'</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div>',20),l={},r=(0,a(3744).Z)(l,[["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,[(0,e.Uk)("集成 "),(0,e._)("a",o,[(0,e.Uk)("pinia"),(0,e.Wm)(a)]),(0,e.Uk)(" ,提供状态管理的能力,封装一些胶水代码,可以直接定义store 使用。")]),c],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.0f619206.js b/assets/js/v-76cb52e8.0f619206.js deleted file mode 100644 index 51edde86..00000000 --- a/assets/js/v-76cb52e8.0f619206.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},6761:(e,n,s)=>{s.r(n),s.d(n,{default:()=>d});var a=s(6252);const l=(0,a.uE)('<h1 id="命令行工具" tabindex="-1"><a class="header-anchor" href="#命令行工具" aria-hidden="true">#</a> 命令行工具</h1><h2 id="create-fes-app" tabindex="-1"><a class="header-anchor" href="#create-fes-app" aria-hidden="true">#</a> create-fes-app</h2><p>通过 <code>create-fes-app</code> 命令创建项目模板,输入<code>create-fes-app -h</code>则可以看到如下信息:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>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</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>可以在本机安装后使用:</p>',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 "),(0,a._)("span",{class:"token parameter variable"},"-g"),(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),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)('<h2 id="fes" tabindex="-1"><a class="header-anchor" href="#fes" aria-hidden="true">#</a> fes</h2><p>需要在项目根目录执行 <code>fes</code> 命令,输入<code>fes -h</code>则可以看到如下信息:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>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</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="fes-dev" tabindex="-1"><a class="header-anchor" href="#fes-dev" aria-hidden="true">#</a> fes dev</h3><p>启动本地开发服务器进行项目的开发调试。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>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</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes dev <span class="token parameter variable">--port</span><span class="token operator">=</span><span class="token number">8080</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="fes-build" tabindex="-1"><a class="header-anchor" href="#fes-build" aria-hidden="true">#</a> fes build</h3><p>编译构建 web 产物。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Usage: fes build [options]\n\nbuild application for production\n\nOptions:\n -h, --help display help for command\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>比如:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>fes build\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="fes-help" tabindex="-1"><a class="header-anchor" href="#fes-help" aria-hidden="true">#</a> fes help</h3><p>打印帮助文档。 比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes <span class="token builtin class-name">help</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="fes-info" tabindex="-1"><a class="header-anchor" href="#fes-info" aria-hidden="true">#</a> fes info</h3><p>打印当前项目的有用的环境信息,用来帮助定位问题。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Usage: fes info [options]\n\nprint debugging information about your environment\n\nOptions:\n -h, --help display help for command\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes info\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="fes-webpack" tabindex="-1"><a class="header-anchor" href="#fes-webpack" aria-hidden="true">#</a> fes webpack</h3><p>查看项目使用的 webpack 配置。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>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</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes webpack\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div>',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.270a37ed.js b/assets/js/v-76cd065c.270a37ed.js deleted file mode 100644 index dae21a9c..00000000 --- a/assets/js/v-76cd065c.270a37ed.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5930:(n,s,a)=>{a.r(s),a.d(s,{default:()=>f});var e=a(6252);const p=(0,e.uE)('<h1 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h1><p>Fes.js 统一了API的出口,所有运行时API(包含Fes.js内置API和插件提供的API)全部通过<code>@fesjs/fes</code>导出。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> someApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="基础api" tabindex="-1"><a class="header-anchor" href="#基础api" aria-hidden="true">#</a> 基础API</h2><h3 id="plugin" tabindex="-1"><a class="header-anchor" href="#plugin" aria-hidden="true">#</a> plugin</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>主要在插件里面使用,项目代码中一般用不到。</p></div><p>运行时插件接口,是 Fes.js 内置的跑在浏览器里的一套插件体系。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> plugin<span class="token punctuation">,</span> ApplyPluginsType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 注册插件</span>\nplugin<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">apply</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dva</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\nplugin<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">apply</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dva</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 执行插件</span>\n<span class="token comment">// 得到 { foo: 1, bar: 1 }</span>\nplugin<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'dva'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">type</span><span class="token operator">:</span> ApplyPluginsType<span class="token punctuation">.</span>modify<span class="token punctuation">,</span>\n <span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">args</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">async</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h4 id="plugin-register-参数包含" tabindex="-1"><a class="header-anchor" href="#plugin-register-参数包含" aria-hidden="true">#</a> <strong>plugin.register</strong> 参数包含:</h4><ul><li>apply 插件文件导出的内容</li><li>path 插件文件路径</li></ul><h4 id="plugin-applyplugins-参数包含" tabindex="-1"><a class="header-anchor" href="#plugin-applyplugins-参数包含" aria-hidden="true">#</a> <strong>plugin.applyPlugins</strong> 参数包含:</h4><ul><li>key,坑位的 key</li><li>type,执行方式类型,详见 <a href="#applypluginstype">ApplyPluginsType</a></li><li>initialValue,初始值</li><li>args,参数</li><li>async,是否异步执行且返回 Promise</li></ul><h3 id="applypluginstype" tabindex="-1"><a class="header-anchor" href="#applypluginstype" aria-hidden="true">#</a> ApplyPluginsType</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>主要在插件里面使用,项目代码中一般用不到。</p></div><p>运行时插件执行类型,enum 类型,包含三个属性:</p><ul><li>compose,用于合并执行多个函数,函数可决定前序函数的执行时机</li><li>modify,用于修改值</li><li>event,用于执行事件,前面没有依赖关系</li></ul><h2 id="路由api" tabindex="-1"><a class="header-anchor" href="#路由api" aria-hidden="true">#</a> 路由API</h2>',17),t={href:"https://next.router.vuejs.org/introduction.html",target:"_blank",rel:"noopener noreferrer"},o=(0,e.uE)('<h3 id="getrouter" tabindex="-1"><a class="header-anchor" href="#getrouter" aria-hidden="true">#</a> getRouter</h3><p>返回当前 <code>router</code> 实例。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">getRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\nrouter<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="useroute" tabindex="-1"><a class="header-anchor" href="#useroute" aria-hidden="true">#</a> useRoute</h3><p>返回当前 <code>route</code> 实例,相当于在模板内使用 <code>$route</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token function">useRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="userouter" tabindex="-1"><a class="header-anchor" href="#userouter" aria-hidden="true">#</a> useRouter</h3><p>返回 <code>router</code> 实例,相当于在模板语法中使用 <code>$router</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="onbeforerouteupdate" tabindex="-1"><a class="header-anchor" href="#onbeforerouteupdate" aria-hidden="true">#</a> onBeforeRouteUpdate</h3><p>添加导航守卫,在当前路由即将更新时触发。类似于之前的<code>beforeRouteUpdate</code>,但是可用于任何组件。卸载组件时,将移除守卫。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onBeforeRouteUpdate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token function">onBeforeRouteUpdate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="onbeforerouteleave" tabindex="-1"><a class="header-anchor" href="#onbeforerouteleave" aria-hidden="true">#</a> onBeforeRouteLeave</h3><p>添加导航守卫,在当前路由即将离开时触发。类似于之前的<code>beforeRouteLeave</code>,但可用于任何组件。卸载组件时,将移除守卫。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onBeforeRouteLeave <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token function">onBeforeRouteLeave</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="createwebhashhistory" tabindex="-1"><a class="header-anchor" href="#createwebhashhistory" aria-hidden="true">#</a> createWebHashHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://),或当配置服务器不能处理任意URL时这非常有用。注意:如果 SEO 对你很重要,你应该使用 <code>createWebHistory</code>。</p><h3 id="createwebhistory" tabindex="-1"><a class="header-anchor" href="#createwebhistory" aria-hidden="true">#</a> createWebHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。</p><h3 id="creatememoryhistory" tabindex="-1"><a class="header-anchor" href="#creatememoryhistory" aria-hidden="true">#</a> createMemoryHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始,这个位置无处不在。如果用户不在浏览器上下文中,它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。</p><h3 id="createrouter" tabindex="-1"><a class="header-anchor" href="#createrouter" aria-hidden="true">#</a> createRouter</h3>',25),r={href:"https://next.router.vuejs.org/api/#routeroptions",target:"_blank",rel:"noopener noreferrer"},l=(0,e.uE)('<h3 id="routerlink" tabindex="-1"><a class="header-anchor" href="#routerlink" aria-hidden="true">#</a> RouterLink</h3><p>使用自定义组件路由器链接来创建链接,而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div>',3),c={href:"https://next.router.vuejs.org/api/#router-link-props",target:"_blank",rel:"noopener noreferrer"},u={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},i=(0,e._)("h3",{id:"uselink",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#uselink","aria-hidden":"true"},"#"),(0,e.Uk)(" useLink")],-1),k={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},d=(0,e.uE)('<div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> RouterLink<span class="token punctuation">,</span> useLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'AppLink'</span><span class="token punctuation">,</span>\n\n <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// add @ts-ignore if using TypeScript</span>\n <span class="token operator">...</span>RouterLink<span class="token punctuation">.</span>props<span class="token punctuation">,</span>\n <span class="token literal-property property">inactiveClass</span><span class="token operator">:</span> String<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// `props` contains `to` and any other prop that can be passed to <router-link></span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> navigate<span class="token punctuation">,</span> href<span class="token punctuation">,</span> route<span class="token punctuation">,</span> isActive<span class="token punctuation">,</span> isExactActive <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useLink</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>\n\n <span class="token comment">// profit!</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">{</span> isExternalLink <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h3 id="routerview" tabindex="-1"><a class="header-anchor" href="#routerview" aria-hidden="true">#</a> RouterView</h3><p>router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方,以适应你的布局。</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ Component, route }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Component<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div>',4),b={href:"https://next.router.vuejs.org/api/#router-view-props",target:"_blank",rel:"noopener noreferrer"},h={href:"https://next.router.vuejs.org/api/#router-view-s-v-slot",target:"_blank",rel:"noopener noreferrer"},m=(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),g={href:"https://next.router.vuejs.org/api/#router-methods",target:"_blank",rel:"noopener noreferrer"},v={},f=(0,a(3744).Z)(v,[["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,[(0,e.Uk)("Fes.js 路由基于 "),(0,e._)("a",t,[(0,e.Uk)("Vue Router 4.0"),(0,e.Wm)(a)]),(0,e.Uk)(",想了解更多的同学可以看看官方文档。")]),o,(0,e._)("p",null,[(0,e.Uk)("创建一个路由器实例,该实例可用于 Vue 应用程序。查看"),(0,e._)("a",r,[(0,e.Uk)("路由器选项"),(0,e.Wm)(a)]),(0,e.Uk)(",了解可以传递的所有属性的列表。")]),l,(0,e._)("p",null,[(0,e.Uk)("可以查看"),(0,e._)("a",c,[(0,e.Uk)("官方文档"),(0,e.Wm)(a)]),(0,e.Uk)("了解更多 RouterLink 的 Porps。查看"),(0,e._)("a",u,[(0,e.Uk)("官方文档"),(0,e.Wm)(a)]),(0,e.Uk)("了解 RouterLink 的作用域插槽。")]),i,(0,e._)("p",null,[(0,e.Uk)("返回的结果跟 RouterLink 的作用域插槽的属性一致,查看"),(0,e._)("a",k,[(0,e.Uk)("官方API"),(0,e.Wm)(a)]),(0,e.Uk)("了解更多。")]),d,(0,e._)("p",null,[(0,e.Uk)("可以查看"),(0,e._)("a",b,[(0,e.Uk)("官方文档"),(0,e.Wm)(a)]),(0,e.Uk)("了解更多 RouterView 的 Porps。查看"),(0,e._)("a",h,[(0,e.Uk)("官方文档"),(0,e.Wm)(a)]),(0,e.Uk)("了解 RouterView 的作用域插槽。")]),m,(0,e._)("p",null,[(0,e.Uk)("查看"),(0,e._)("a",g,[(0,e.Uk)("官方文档"),(0,e.Wm)(a)]),(0,e.Uk)("了解更多")])],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.741c8475.js b/assets/js/v-7b48519a.741c8475.js deleted file mode 100644 index c72f1b8c..00000000 --- a/assets/js/v-7b48519a.741c8475.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5213:(n,a,s)=>{s.r(a),s.d(a,{default:()=>d});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={href:"https://github.com/jantimon/html-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},l=(0,t.uE)('<div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width,initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><%= htmlWebpackPlugin.options.title %><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="自定义模板" tabindex="-1"><a class="header-anchor" href="#自定义模板" aria-hidden="true">#</a> 自定义模板</h2><p>在 <code>src/public</code> 文件夹中创建<code>index.html</code>,Fes.js 约定如果这个文件存在,则会替换默认模板。</p><h2 id="模板配置" tabindex="-1"><a class="header-anchor" href="#模板配置" aria-hidden="true">#</a> 模板配置</h2>',4),o=(0,t._)("code",null,".fes.js",-1),c=(0,t._)("code",null,"html",-1),u={href:"https://github.com/jantimon/html-webpack-plugin#options",target:"_blank",rel:"noopener noreferrer"},i=(0,t._)("code",null,"html-webpack-plugin",-1),r=(0,t.uE)('<p>举个 🌰 :</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">html</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'海贼王'</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>页面的标题会设置成'海贼王'。</p><h2 id="模板变量" tabindex="-1"><a class="header-anchor" href="#模板变量" aria-hidden="true">#</a> 模板变量</h2><p>当然我们也可以手动编写模板,在模板中添加<code>link</code>、<code>link</code>、<code>meta</code>等标签。在我们手动配置模板时,有时候需要用到一些环境变量,模板里可以获取到的变量如下:</p><ul><li><strong>htmlWebpackPlugin</strong>,特定于此插件的数据</li><li><strong>webpackConfig</strong>,用于此编译的webpack配置。例如,它可用于获取publicPath(webpackConfig.output.publicPath)。</li><li><strong>compilation</strong>,webpack编译对象。例如,可以使用它来获取已处理资产的内容,并将其直接内联到页面中compilation.assets[...].source()</li></ul><p>举个 🌰 :</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/x-icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= webpackConfig.output.publicPath %>favicon.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>除上述 <code>html-webpack-plugin</code> 插件提供的变量外,Fes.js 还把 <code>process.env</code> 中的环境变量添加到模板作用域内:</p><ul><li><code>NODE_ENV</code></li><li><code>FES_ENV</code></li><li><code>.env</code> 文件中以 <code>FES_APP_</code> 开头的变量</li></ul><p>举个 🌰 :</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div>',12),k={},d=(0,s(3744).Z)(k,[["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,[(0,t.Uk)("Fes.js 基于 "),(0,t._)("a",e,[(0,t.Uk)("html-webpack-plugin"),(0,t.Wm)(s)]),(0,t.Uk)(" 实现的模板功能,默认模板内容是:")]),l,(0,t._)("p",null,[(0,t.Uk)("在配置文件("),o,(0,t.Uk)(")中配置 "),c,(0,t.Uk)(",把"),(0,t._)("a",u,[(0,t.Uk)("配置"),(0,t.Wm)(s)]),(0,t.Uk)("的对象作为参数传入 "),i,(0,t.Uk)(" 实例。")]),r],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.033eb852.js b/assets/js/v-7b96e3a4.033eb852.js deleted file mode 100644 index 2c0fe076..00000000 --- a/assets/js/v-7b96e3a4.033eb852.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},6430:(n,a,s)=>{s.r(a),s.d(a,{default:()=>p});const t=(0,s(6252).uE)('<h1 id="静态资源" tabindex="-1"><a class="header-anchor" href="#静态资源" aria-hidden="true">#</a> 静态资源</h1><p>有些内容不需要经过 <code>webpack</code> 模块化处理,则可以将这些内容放在 <code>public</code> 文件夹,构建后会直接复制到 <code>dist</code> 目录,所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在html模板中使用" tabindex="-1"><a class="header-anchor" href="#在html模板中使用" aria-hidden="true">#</a> 在HTML模板中使用</h3><p>在 <code>public/index.html</code> 中需要设置:</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="在-vue-和-js-文件中使用" tabindex="-1"><a class="header-anchor" href="#在-vue-和-js-文件中使用" aria-hidden="true">#</a> 在.vue 和 js 文件中使用</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`${publicPath}my-image.png`<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">publicPath</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div>',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.3f03d054.js b/assets/js/v-85fa9b2a.3f03d054.js deleted file mode 100644 index 99a72dd9..00000000 --- a/assets/js/v-85fa9b2a.3f03d054.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5942:(s,n,a)=>{a.r(n),a.d(n,{default:()=>t});const p=(0,a(6252).uE)('<h1 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h1><p>Fes.js 约定 <code>.fes.js</code> 文件为项目编译需要配置文件,可以引入 node 端依赖项,不要引入浏览器端依赖项。</p><p>一份常见的配置示例如下:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'/foo/'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/v2'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">'/v2'</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">'target'</span><span class="token operator">:</span> <span class="token string">'https://api.douban.com/'</span><span class="token punctuation">,</span>\n <span class="token string-property property">'changeOrigin'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> \n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Fes.js"</span><span class="token punctuation">,</span>\n <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token string">'Created by MumbelFe'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">multiTabs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'simpleList'</span>\n <span class="token punctuation">}</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h2 id="本地临时配置文件" tabindex="-1"><a class="header-anchor" href="#本地临时配置文件" aria-hidden="true">#</a> 本地临时配置文件</h2><p>可以新建 <code>.fes.local.js</code> 作为本地临时配置文件。这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配置。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token comment">// .fes.local.js</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> \n <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>最终的配置是:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span> \n <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="custom-container warning"><p class="custom-container-title">注意</p><p><code>.fes.local.js</code> 是本地验证使用的临时配置,仅在 <code>fes dev</code> 时有效,请将其添加到 <code>.gitignore</code>,务必不要提交到 <code>git</code> 仓库中。</p></div><h2 id="多环境多份配置" tabindex="-1"><a class="header-anchor" href="#多环境多份配置" aria-hidden="true">#</a> 多环境多份配置</h2><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境,来指定当前环境的配置文件,这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配。</p><p>比如配置如下:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token comment">// .fes.uat.js</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> \n <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>当我们运行:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token assign-left variable">FES_ENV</span><span class="token operator">=</span>uat fes dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>这时候会命中 <code>.fes.uat.js</code> 这份环境配置,最终配置是:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span> \n <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="优先级" tabindex="-1"><a class="header-anchor" href="#优先级" aria-hidden="true">#</a> 优先级</h2><p>本地临时配置 > 环境配置 > 基础配置</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果多份配置中存在相同的配置项,<strong>则优先级高的会覆盖优先级低的</strong>。</p></div>',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.36a95eba.js b/assets/js/v-884fd4bc.36a95eba.js deleted file mode 100644 index 2e718b4b..00000000 --- a/assets/js/v-884fd4bc.36a95eba.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},8568:(s,n,a)=>{a.r(n),a.d(n,{default:()=>r});var e=a(6252);const c=(0,e.uE)('<h1 id="使用-css" tabindex="-1"><a class="header-anchor" href="#使用-css" aria-hidden="true">#</a> 使用 css</h1><div class="custom-container tip"><p class="custom-container-title">提示</p><p>本文档以 css 为示例,把后缀换成 <code>.less</code> 同样适用。</p></div><h2 id="全局样式" tabindex="-1"><a class="header-anchor" href="#全局样式" aria-hidden="true">#</a> 全局样式</h2><p>Fes.js 中约定 <code>src/global.css</code> 为全局样式,如果存在此文件,会被自动引入到入口文件最前面。</p><p>比如用于覆盖样式,</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.layout-content</span> <span class="token punctuation">{</span>\n <span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="组件内样式" tabindex="-1"><a class="header-anchor" href="#组件内样式" aria-hidden="true">#</a> 组件内样式</h2><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">\n<span class="token selector">.layout-content</span> <span class="token punctuation">{</span>\n <span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="引入第三方样式" tabindex="-1"><a class="header-anchor" href="#引入第三方样式" aria-hidden="true">#</a> 引入第三方样式</h2><p>可以直接通过 <code>import</code> 引入第三方组件,当然最好在入口文件<code>app.js</code>中引入</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// src/app.js</span>\n<span class="token keyword">import</span> <span class="token string">'bootstrap/dist/css/bootstrap.css'</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="css-modules" tabindex="-1"><a class="header-anchor" href="#css-modules" aria-hidden="true">#</a> CSS Modules</h2>',12),t=(0,e._)("code",null,"Vue",-1),l={href:"https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},p=(0,e.uE)('<div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">module</span><span class="token punctuation">></span></span>\n.layout-content {\n max-width: 1000px;\n}\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>如果想直接引入CSS文件的话,则CSS文件名需要包含<code>.module</code>,比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> style <span class="token keyword">from</span> <span class="token string">'@/styles/index.module.css'</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>style<span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="css-预处理器" tabindex="-1"><a class="header-anchor" href="#css-预处理器" aria-hidden="true">#</a> CSS 预处理器</h2><p>Fes.js 内置支持 <code>less</code>,不支持 <code>sass</code> 和 <code>stylus</code>,但如果有需求,可以通过 <code>chainWebpack</code> 配置或者 <code>fes-plugin</code> 插件的形式支持。</p>',5),o={},r=(0,a(3744).Z)(o,[["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,[(0,e.Uk)("支持 "),t,(0,e.Uk)(" 的 "),(0,e._)("a",l,[(0,e.Uk)("CSS Modules"),(0,e.Wm)(a)]),(0,e.Uk)(" 用法,可以直接使用:")]),p],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.97e78117.js b/assets/js/v-8daa1a0e.97e78117.js deleted file mode 100644 index ddcaa234..00000000 --- a/assets/js/v-8daa1a0e.97e78117.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},8104:(e,n,s)=>{s.r(n),s.d(n,{default:()=>p});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),c=(0,a._)("thead",null,[(0,a._)("tr",null,[(0,a._)("th",null,"Github Issue"),(0,a._)("th",null,"Fes.js开源运营小助手")])],-1),u={href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noopener noreferrer"},_=(0,a._)("td",null,[(0,a._)("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})],-1),o={},p=(0,s(3744).Z)(o,[["render",function(e,n){const s=(0,a.up)("CodeGroupItem"),o=(0,a.up)("CodeGroup"),p=(0,a.up)("OutboundLink");return(0,a.wg)(),(0,a.iD)(a.HY,null,[l,(0,a.Wm)(o,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,[c,(0,a._)("tbody",null,[(0,a._)("tr",null,[(0,a._)("td",null,[(0,a._)("a",u,[(0,a.Uk)("@fesjs/fes.js/issues"),(0,a.Wm)(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.5aa9c148.js b/assets/js/v-a1a49808.5aa9c148.js deleted file mode 100644 index d0b5bfb8..00000000 --- a/assets/js/v-a1a49808.5aa9c148.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},3364:(e,a,t)=>{t.r(a),t.d(a,{default:()=>s});var r=t(6252);const n={id:"api",tabindex:"-1"},c=(0,r._)("a",{class:"header-anchor",href:"#api","aria-hidden":"true"},"#",-1),i={},s=(0,t(3744).Z)(i,[["render",function(e,a){return(0,r.wg)(),(0,r.iD)("h1",n,[c,(0,r.Uk)(" API")])}]])},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.9550ef17.js b/assets/js/v-a951be94.9550ef17.js deleted file mode 100644 index 50874fe7..00000000 --- a/assets/js/v-a951be94.9550ef17.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[65],{8007:(a,s,n)=>{n.r(s),n.d(s,{data:()=>e});const e={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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},1933:(a,s,n)=>{n.r(s),n.d(s,{default:()=>i});var e=n(6252);const p=(0,e._)("h1",{id:"命令行接口",tabindex:"-1"},[(0,e._)("a",{class:"header-anchor",href:"#命令行接口","aria-hidden":"true"},"#"),(0,e.Uk)(" 命令行接口")],-1),r={href:"https://www.npmjs.com/package/@vuepress/cli",target:"_blank",rel:"noopener noreferrer"},l={href:"https://www.npmjs.com/package/vuepress",target:"_blank",rel:"noopener noreferrer"},t=(0,e.uE)('<p>执行 <code>vuepress --help</code> 来获取下列帮助信息:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>Usage:\n $ vuepress <span class="token operator"><</span>command<span class="token operator">></span> <span class="token punctuation">[</span>options<span class="token punctuation">]</span>\n\nCommands:\n dev <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span> Start development server\n build <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span> Build to static site\n info Display environment information\n\nFor <span class="token function">more</span> info, run any <span class="token builtin class-name">command</span> with the <span class="token variable"><span class="token variable">`</span><span class="token parameter variable">--help</span><span class="token variable">`</span></span> flag:\n $ vuepress dev <span class="token parameter variable">--help</span>\n $ vuepress build <span class="token parameter variable">--help</span>\n $ vuepress info <span class="token parameter variable">--help</span>\n\nOptions:\n -v, <span class="token parameter variable">--version</span> Display version number \n -h, <span class="token parameter variable">--help</span> Display this message \n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="dev" tabindex="-1"><a class="header-anchor" href="#dev" aria-hidden="true">#</a> dev</h2><p>启动一个开发服务器,在本地开发你的 VuePress 站点。</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>Usage:\n $ vuepress dev <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span>\n\nOptions:\n -c, <span class="token parameter variable">--config</span> <span class="token operator"><</span>config<span class="token operator">></span> Set path to config <span class="token function">file</span> \n -p, <span class="token parameter variable">--port</span> <span class="token operator"><</span>port<span class="token operator">></span> Use specified port <span class="token punctuation">(</span>default: <span class="token number">8080</span><span class="token punctuation">)</span> \n -t, <span class="token parameter variable">--temp</span> <span class="token operator"><</span>temp<span class="token operator">></span> Set the directory of the temporary files \n <span class="token parameter variable">--host</span> <span class="token operator"><</span>host<span class="token operator">></span> Use specified <span class="token function">host</span> <span class="token punctuation">(</span>default: <span class="token number">0.0</span>.0.0<span class="token punctuation">)</span> \n <span class="token parameter variable">--cache</span> <span class="token operator"><</span>cache<span class="token operator">></span> 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 <span class="token parameter variable">--open</span> Open browser when ready \n <span class="token parameter variable">--debug</span> Enable debug mode \n --no-watch Disable watching page and config files <span class="token punctuation">(</span>default: <span class="token boolean">true</span><span class="token punctuation">)</span>\n -v, <span class="token parameter variable">--version</span> Display version number \n -h, <span class="token parameter variable">--help</span> Display this message\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>通过命令行设置的配置项,会覆盖你配置文件中的同名配置项。</p></div><h2 id="build" tabindex="-1"><a class="header-anchor" href="#build" aria-hidden="true">#</a> build</h2>',7),c=(0,e.uE)('<div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>Usage:\n $ vuepress build <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span>\n\nOptions:\n -c, <span class="token parameter variable">--config</span> <span class="token operator"><</span>config<span class="token operator">></span> Set path to config <span class="token function">file</span> \n -d, <span class="token parameter variable">--dest</span> <span class="token operator"><</span>dest<span class="token operator">></span> Set the directory build output <span class="token punctuation">(</span>default: .vuepress/dist<span class="token punctuation">)</span> \n -t, <span class="token parameter variable">--temp</span> <span class="token operator"><</span>temp<span class="token operator">></span> Set the directory of the temporary files \n <span class="token parameter variable">--cache</span> <span class="token operator"><</span>cache<span class="token operator">></span> 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 <span class="token parameter variable">--debug</span> Enable debug mode \n -v, <span class="token parameter variable">--version</span> Display version number \n -h, <span class="token parameter variable">--help</span> Display this message\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>通过命令行设置的配置项,会覆盖你配置文件中的同名配置项。</p></div><h2 id="info" tabindex="-1"><a class="header-anchor" href="#info" aria-hidden="true">#</a> info</h2><p>输出当前系统和依赖相关的信息。</p><p>在你想要检查你的环境,或者提交 Issue 时候,可以使用该命令。</p>',5),o={},i=(0,n(3744).Z)(o,[["render",function(a,s){const n=(0,e.up)("OutboundLink"),o=(0,e.up)("RouterLink");return(0,e.wg)(),(0,e.iD)(e.HY,null,[p,(0,e._)("p",null,[(0,e.Uk)("VuePress 命令行接口是由 "),(0,e._)("a",r,[(0,e.Uk)("@vuepress/cli"),(0,e.Wm)(n)]),(0,e.Uk)(" 包提供的。它是 "),(0,e._)("a",l,[(0,e.Uk)("vuepress"),(0,e.Wm)(n)]),(0,e.Uk)(" 包的依赖之一,当然你也可以单独安装它。")]),t,(0,e._)("p",null,[(0,e.Uk)("将你的 VuePress 站点构建成静态文件,以便你进行后续"),(0,e.Wm)(o,{to:"/guide/deployment.html"},{default:(0,e.w5)((()=>[(0,e.Uk)("部署")])),_:1}),(0,e.Uk)("。")]),c],64)}]])},3744:(a,s)=>{s.Z=(a,s)=>{const n=a.__vccOpts||a;for(const[a,e]of s)n[a]=e;return n}}}]); \ No newline at end of file diff --git a/assets/js/v-b15becb0.9810a63f.js b/assets/js/v-b15becb0.9810a63f.js deleted file mode 100644 index 9d6b7107..00000000 --- a/assets/js/v-b15becb0.9810a63f.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5574:(n,s,a)=>{a.r(s),a.d(s,{default:()=>k});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={href:"https://qiankun.umijs.org/",target:"_blank",rel:"noopener noreferrer"},o={href:"https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp",target:"_blank",rel:"noopener noreferrer"},c=(0,p.uE)('<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-qiankun"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>有一种痛叫接手老项目,技术栈老旧,内容多,还要继续维护~</p><p>可能目前迁移、升级老项目最好的解决方案就是微前端。<code>plugin-qiankun</code> 是基于 <code>qiankun</code> 实现的 Fes.js 微前端解决方案。</p><h2 id="主应用配置" tabindex="-1"><a class="header-anchor" href="#主应用配置" aria-hidden="true">#</a> 主应用配置</h2><h3 id="第一步-注册子应用" tabindex="-1"><a class="header-anchor" href="#第一步-注册子应用" aria-hidden="true">#</a> 第一步:注册子应用</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// 注册子应用信息</span>\n <span class="token literal-property property">apps</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'app1'</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span>\n <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'//localhost:8001'</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span>\n <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">// 传递给子应用的数据</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'app2'</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span>\n <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'//localhost:8002'</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="第二步-装载子应用" tabindex="-1"><a class="header-anchor" href="#第二步-装载子应用" aria-hidden="true">#</a> 第二步:装载子应用</h3><h4 id="使用路由绑定的方式" tabindex="-1"><a class="header-anchor" href="#使用路由绑定的方式" aria-hidden="true">#</a> 使用路由绑定的方式</h4><div class="custom-container warning"><p class="custom-container-title">注意</p><p>主应用和子应用需要自行适配路由路径!!!待完善...</p></div><p>假设我们的系统之前有这样的一些路由:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/src/.fes/plugin-layout/index.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token string-property property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/onepiece"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/onepiece'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"title"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>我们现在想在 <code>/son</code> 加载子应用 <code>app1</code>,只需要增加这样一些配置即可:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/src/.fes/plugin-layout/index.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token string-property property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/onepiece"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/onepiece'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"title"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/son"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"son"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"title"</span><span class="token operator">:</span> <span class="token string">"子应用"</span><span class="token punctuation">,</span>\n <span class="token string-property property">"microApp"</span><span class="token operator">:</span> <span class="token string">"app1"</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><p>当前我们依然提倡约定路由的方式,在<code>src/pages</code> 目录新建 <code>son.vue</code>:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span><span class="token punctuation">></span></span>\n{\n "name": "son",\n "title": "子应用",\n "microApp": "app1"\n}\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>config</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="使用-microapp-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microapp-组件的方式" aria-hidden="true">#</a> 使用 <code><MicroApp /></code> 组件的方式</h4><div class="custom-container tip"><p class="custom-container-title">提示</p><p>建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上,否则很容易出现子应用加载了,但是页面没有渲染出来的情况。</p></div><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">"app1"</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n name\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h4 id="使用-microappwithmemohistory-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microappwithmemohistory-组件的方式" aria-hidden="true">#</a> 使用 <code><MicroAppWithMemoHistory /></code> 组件的方式</h4><p>如果我们的路由使用 <code>history</code> 模式,那么在使用乾坤时还算方便,主应用和子应用的路由根据base可以很方便的匹配起来,而且不存在冲突。但是当我们使用 <code>hash</code> 模式时,就问题很大,主应用和子应用的路由必须一样才可以匹配上,用起来贼不方便。而且不能在一个页面上同时加载多个子应用,路由存在冲突!这时候,<code><MicroAppWithMemoHistory /></code> 出现了,完美解决上面的问题。</p><p><code><MicroAppWithMemoHistory /></code> 相比 <code><MicroApp /></code> ,需要多传入 <code>url</code> 参数,用于指定加载子应用什么路由页面。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">"app1"</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n name\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="子应用配置" tabindex="-1"><a class="header-anchor" href="#子应用配置" aria-hidden="true">#</a> 子应用配置</h2><h3 id="第一步-插件注册" tabindex="-1"><a class="header-anchor" href="#第一步-插件注册" aria-hidden="true">#</a> 第一步:插件注册</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">micro</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="第二步-配置运行时生命周期钩子-可选" tabindex="-1"><a class="header-anchor" href="#第二步-配置运行时生命周期钩子-可选" aria-hidden="true">#</a> 第二步:配置运行时生命周期钩子(可选)</h3><p>插件会自动为你创建好 <code>qiankun</code> 子应用需要的生命周期钩子,但是如果你想在生命周期期间加一些自定义逻辑,可以在子应用的 <code>src/app.js</code> 里导出 <code>qiankun</code> 对象,并实现每一个生命周期钩子,其中钩子函数的入参 <code>props</code> 由主应用自动注入。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> qiankun <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// 应用加载之前</span>\n <span class="token keyword">async</span> <span class="token function">bootstrap</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 bootstrap'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token comment">// 应用 render 之前触发</span>\n <span class="token keyword">async</span> <span class="token function">mount</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 mount'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token comment">// 当 props 更新时触发</span>\n <span class="token keyword">async</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 update'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token comment">// 应用卸载之后触发</span>\n <span class="token keyword">async</span> <span class="token function">unmount</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 unmount'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="父子应用通讯" tabindex="-1"><a class="header-anchor" href="#父子应用通讯" aria-hidden="true">#</a> 父子应用通讯</h2><p>有两种方式实现</p>',33),l={id:"配合-usemodel-使用",tabindex:"-1"},r=(0,p._)("a",{class:"header-anchor",href:"#配合-usemodel-使用","aria-hidden":"true"},"#",-1),u=(0,p.uE)('<p>确保已经安装了 <code>@fesjs/plugin-model</code>:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="主应用传递-props" tabindex="-1"><a class="header-anchor" href="#主应用传递-props" aria-hidden="true">#</a> 主应用传递 props</h4><ul><li>如果使用 <code>MicroApp</code> 组件模式消费子应用,直接通过 props 传递即可:</li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">:user</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">"app1"</span>\n <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n name<span class="token punctuation">,</span>\n user\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><ul><li>如果使用路由绑定式消费子应用,那么约定<code>src/models/qiankunStateForMicro.js</code> 的模型数据将作为 <code>props</code> 船体给子应用,如:</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n state\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h4 id="子应用消费-props" tabindex="-1"><a class="header-anchor" href="#子应用消费-props" aria-hidden="true">#</a> 子应用消费 props</h4><p>子应用中会自动生成一个全局名为 <code>qiankunStateFromMain</code> 的 <code>model</code>, 可以在任意组件中获取主应用透传的 <code>props</code> 的值。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> mainState <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">'qiankunStateFromMain'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n mainState\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="基于-props-传递" tabindex="-1"><a class="header-anchor" href="#基于-props-传递" aria-hidden="true">#</a> 基于 props 传递</h3><ul><li>主应用使用 props 的模式传递数据(参考主应用装载子应用配置一节)</li><li>子应用在生命周期钩子中获取 props 消费数据(参考子应用运行时配置一节)</li></ul><h3 id="microapp" tabindex="-1"><a class="header-anchor" href="#microapp" aria-hidden="true">#</a> MicroApp</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称,传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称,配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr></tbody></table><h3 id="microappwithmemohistory" tabindex="-1"><a class="header-anchor" href="#microappwithmemohistory" aria-hidden="true">#</a> MicroAppWithMemoHistory</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称,传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称,配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr><tr><td>url</td><td>子应用的路由地址</td><td>String</td><td>-</td></tr></tbody></table>',16),i={},k=(0,a(3744).Z)(i,[["render",function(n,s){const a=(0,p.up)("OutboundLink"),i=(0,p.up)("RouterLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[t,(0,p._)("p",null,[(0,p.Uk)("Fes.js plugin for "),(0,p._)("a",e,[(0,p.Uk)("qiankun"),(0,p.Wm)(a)]),(0,p.Uk)(",参考"),(0,p._)("a",o,[(0,p.Uk)("@umijs/plugin-qiankun"),(0,p.Wm)(a)]),(0,p.Uk)(" 实现,喜欢 React 的同学推荐直接用 Umi。")]),c,(0,p._)("h3",l,[r,(0,p.Uk)(" 配合 "),(0,p.Wm)(i,{to:"/reference/plugin/plugins/model.html"},{default:(0,p.w5)((()=>[(0,p.Uk)("useModel")])),_:1}),(0,p.Uk)(" 使用")]),u],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.71cde0f0.js b/assets/js/v-c253c956.71cde0f0.js deleted file mode 100644 index 598c77f5..00000000 --- a/assets/js/v-c253c956.71cde0f0.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},9339:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('<h1 id="fesjs-plugin-enums" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-enums" aria-hidden="true">#</a> @fesjs/plugin-enums</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>日常业务开发中,有很多场景会使用到枚举值,比如select-options、table-column。</p><p>该插件提供统一的枚举存取及丰富的函数来处理枚举。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>\n <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span>\n <span class="token property">"@fesjs/plugin-enums"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="静态配置" tabindex="-1"><a class="header-anchor" href="#静态配置" aria-hidden="true">#</a> 静态配置</h3><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 配置格式:[[key, value], ...]</span>\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">enums</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'无效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'有效的'</span><span class="token punctuation">]</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="动态配置" tabindex="-1"><a class="header-anchor" href="#动态配置" aria-hidden="true">#</a> 动态配置</h3><p>在业务代码中</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> enums <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n<span class="token comment">// 动态添加</span>\nenums<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'无效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'有效的'</span><span class="token punctuation">]</span><span class="token punctuation">]</span>\nenums<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span> <span class="token comment">// 有效的</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="场景使用" tabindex="-1"><a class="header-anchor" href="#场景使用" aria-hidden="true">#</a> 场景使用</h2><ul><li><p>动态添加的枚举项支持数组和对象</p></li><li><p>枚举项为对象时,可以指定keyName和valueName属性名</p></li><li><p>导出枚举值,可指定取值的路径</p></li><li><p>导出枚举可扩展属性</p></li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token comment"><!-- 遍历枚举status --></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in enumsGet('status')<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n {{item.value}}:{{item.key}}\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token comment"><!-- 遍历枚举扩展后的roles --></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in roles<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n {{item.name}}:{{item.disabled}}\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token comment"><!-- 获取枚举roles为2的英文名 --></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{enumsGet('roles', '2', { dir: 'eName' })}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> enums <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// 动态添加枚举,枚举项是对象,并指定key的属性名为id</span>\n enums<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'roles'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'系统管理员'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'System'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">,</span> <span class="token string">'3'</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'业务管理员'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'Business'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'普通用户'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'User'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">keyName</span><span class="token operator">:</span> <span class="token string">'id'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token comment">// 导出定制格式的roles,扩展枚举项新的属性name、disabled</span>\n <span class="token keyword">const</span> roles <span class="token operator">=</span> enums<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'roles'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'cName'</span> <span class="token comment">// 指定取值路径,取属性cName的值</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span>\n <span class="token comment">// 传入函数,获取结果值</span>\n <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>value<span class="token punctuation">.</span>perm<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">i</span> <span class="token operator">=></span> i <span class="token operator">>=</span> <span class="token number">2</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token comment">// [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">enumsGet</span><span class="token operator">:</span> enums<span class="token punctuation">.</span>get<span class="token punctuation">,</span>\n roles\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="get" tabindex="-1"><a class="header-anchor" href="#get" aria-hidden="true">#</a> get</h3><ul><li><p><code>get(name: string)</code> 获取指定名字的枚举</p></li><li><p><code>get(name: string, key: string)</code> 获取指定名字及键枚举默认值</p></li><li><p><code>get(name: string, opt: {extend: Array<Object>})</code> 获取指定名字的自定义格式枚举,<a href="#extend%E9%85%8D%E7%BD%AE">查看extend配置</a></p></li><li><p><code>get(name: string, key: string, opt: {dir: string})</code> 获取指定名字及键枚举<a href="#dir%E8%A7%84%E5%88%99">dir规则</a>的值</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">)</span>\n<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span>\n<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span>\n <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token parameter">item</span> <span class="token operator">=></span> item <span class="token operator">===</span> <span class="token string">'0'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="push" tabindex="-1"><a class="header-anchor" href="#push" aria-hidden="true">#</a> push</h3><p>动态添加枚举,重复添加会覆盖</p><ul><li><code>push(name: string, _enum: Array<Array>)</code></li><li><code>push(name: string, _enum: Array<Object>, opt?: Object)</code><ul><li>opt.keyName 指定key的取值属性,默认是key</li><li>opt.valueName 指定value的取值属性</li></ul></li></ul><p>枚举项为数组,枚举项的[0]解析为key,枚举项的[1]解析为value</p><p>枚举项为对象时,根据opt配置keyName、valueName取枚举项属性值分别作为key和value,<code>如果valueName未设置则value就是枚举项</code></p><h3 id="remove" tabindex="-1"><a class="header-anchor" href="#remove" aria-hidden="true">#</a> remove</h3><ul><li>remove(name: string)</li></ul><p>移除指定的枚举</p><h3 id="concat" tabindex="-1"><a class="header-anchor" href="#concat" aria-hidden="true">#</a> concat</h3><p>基于现有的枚举,连接上新的枚举后返回新的枚举</p><ul><li><code>concat(name: string, _enum: Array<Array|Object>, opt?: Object))</code><ul><li>opt.keyName 指定key的取值属性,默认是key</li><li>opt.valueName 指定value的取值属性</li><li>opt.before 是否添加在现有的之前,默认是false</li><li>opt.extend:返回的枚举<a href="#extend%E9%85%8D%E7%BD%AE">extend配置</a></li></ul></li></ul><h3 id="convert" tabindex="-1"><a class="header-anchor" href="#convert" aria-hidden="true">#</a> convert</h3><p>将传入的枚举格式转换为{key, value}的形式</p><ul><li><code>convert(name: string, _enum: Array<Array|Object>, opt?: Object))</code><ul><li>opt.keyName 指定key的取值属性,默认是key</li><li>opt.valueName 指定value的取值属性</li></ul></li></ul><h3 id="extend配置" tabindex="-1"><a class="header-anchor" href="#extend配置" aria-hidden="true">#</a> extend配置</h3><p>扩展枚举项属性的配置</p><ul><li><code>extend: Array<Object></code><ul><li><code>key</code> 指定扩展的属性名</li><li><code>dir</code> 指定该属性的取值路径</li><li><code>transfer(item: {key: any, value: any})</code> 转换函数,参数未枚举项,返回就是该属性的值</li></ul></li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>同时设置<a href="#dir%E8%A7%84%E5%88%99">dir</a>和transfer,transfer优先</p></div><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span>\n <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">'0'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="dir规则" tabindex="-1"><a class="header-anchor" href="#dir规则" aria-hidden="true">#</a> dir规则</h3><p>dir是指定枚举项value的取值方式,规则如下:</p><ul><li>对象属性 <code>A</code>、<code>A.B</code></li><li>数组 <code>[0]</code>、<code>[0][1]</code></li><li>混合 <code>A[0]</code>、<code>[0].A</code>、<code>A[0].B</code></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 假如枚举项value的结构如下</span>\n<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'aring'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'管理员'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'业务操作员'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span>\n<span class="token comment">// 那么规则解析是:</span>\ndir value\n<span class="token string">'age'</span> <span class="token operator">=></span> <span class="token number">18</span>\n<span class="token string">'role[0]'</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'管理员'</span><span class="token punctuation">}</span>\n<span class="token string">'role[1].id'</span> <span class="token operator">=></span> <span class="token number">2</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>枚举项value如果是基本类型,则规则不生效,value就是当前值</p></div>',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.c7e42791.js b/assets/js/v-c5618810.c7e42791.js deleted file mode 100644 index 11894cce..00000000 --- a/assets/js/v-c5618810.c7e42791.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},3221:(n,s,a)=>{a.r(s),a.d(s,{default:()=>y});var p=a(6252);const e=(0,p.uE)('<h1 id="插件-api" tabindex="-1"><a class="header-anchor" href="#插件-api" aria-hidden="true">#</a> 插件 API</h1><h2 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h2><h3 id="api-paths" tabindex="-1"><a class="header-anchor" href="#api-paths" aria-hidden="true">#</a> api.paths</h3><p>一些关键的路径:</p><ul><li>cwd,执行命令的绝对路径</li><li>absNodeModulesPath,nodeModule的绝对路径</li><li>absOutputPath,输出 <code>build</code> 产物的绝对路径</li><li>absSrcPath,<code>src</code> 目录的绝对路径</li><li>absPagesPath,<code>pages</code>目录的绝对路径</li><li>absTmpPath,<code>.fes</code>临时文件目录的绝对路径</li></ul><h3 id="api-cwd" tabindex="-1"><a class="header-anchor" href="#api-cwd" aria-hidden="true">#</a> api.cwd</h3><p>执行命令的绝对路径</p><h3 id="api-pkg" tabindex="-1"><a class="header-anchor" href="#api-pkg" aria-hidden="true">#</a> api.pkg</h3><p><code>package.json</code>的内容</p><h3 id="api-configinstance" tabindex="-1"><a class="header-anchor" href="#api-configinstance" aria-hidden="true">#</a> api.configInstance</h3><p><code>config</code>实例</p><h3 id="userconfig" tabindex="-1"><a class="header-anchor" href="#userconfig" aria-hidden="true">#</a> userConfig</h3><p>用户配置</p><h3 id="config" tabindex="-1"><a class="header-anchor" href="#config" aria-hidden="true">#</a> config</h3><p>插件配置可被修改,此为最终的配置</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> env</h3><p>process.env</p><h3 id="args" tabindex="-1"><a class="header-anchor" href="#args" aria-hidden="true">#</a> args</h3><p>环境变量</p><h2 id="核心方法" tabindex="-1"><a class="header-anchor" href="#核心方法" aria-hidden="true">#</a> 核心方法</h2><h3 id="describe" tabindex="-1"><a class="header-anchor" href="#describe" aria-hidden="true">#</a> describe</h3><p>注册阶段执行,用于描述插件或插件集的 id、key、配置信息、启用方式等。</p><p>用法:<strong>describe({ id?: string, key?: string, config?: { default, schema, onChange } }, enableBy?)</strong></p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code> api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'esbuild'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span>\n <span class="token function">schema</span><span class="token punctuation">(</span><span class="token parameter">joi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> joi<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token literal-property property">enableBy</span><span class="token operator">:</span> api<span class="token punctuation">.</span>EnableBy<span class="token punctuation">.</span>config<span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>注:</p>',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={href:"https://hapi.dev/module/joi",target:"_blank",rel:"noopener noreferrer"},l=(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),i=(0,p._)("li",null,[(0,p._)("code",null,"enableBy"),(0,p.Uk)(" 为启用方式,默认是注册启用,可更改为 "),(0,p._)("code",null,"api.EnableBy.config"),(0,p.Uk)(",还可以用自定义函数的方式决定其启用时机(动态生效)")],-1),r=(0,p.uE)('<h3 id="register" tabindex="-1"><a class="header-anchor" href="#register" aria-hidden="true">#</a> register</h3><p>为 api.applyPlugins 注册可供其使用的 hook。</p><p>用法:<strong>register({ key: string, fn: Function, pluginId?: string, before?: string, stage?: number })</strong></p><p>参数:</p><ul><li>key:唯一id</li><li>fn:hook函数,当执行<code>api.applyPlugins</code>时,此函数被执行。</li><li>pluginId:插件id,如果配置了插件id,则只有此插件未被禁用时,才会执行。</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 可同步</span>\napi<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>\n <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token string">'a'</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">// 可异步</span>\napi<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>\n <span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">await</span> <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token string">'b'</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>注意:</p><ul><li>fn 支持同步和异步,异步通过 Promise,返回值为 Promise 即为异步</li><li>fn 里的内容需结合 <code>api.appyPlugins</code> 的 <code>type</code> 参数来看,如果是 <code>api.ApplyPluginsType.add</code>,需有返回值,这些返回值最终会被合成一个数组。如果是 <code>api.ApplyPluginsType.modify</code>,需对第一个参数做修改,并返回它,它会作为下个hook的参数。 如果是 <code>api.ApplyPluginsType.event</code>,无需返回值</li><li>stage 和 before 都是用于调整执行顺序的,参考 tapable</li><li>stage 默认是 0,设为 -1 或更少会提前执行,设为 1 或更多会后置执行</li></ul><h3 id="applyplugins" tabindex="-1"><a class="header-anchor" href="#applyplugins" aria-hidden="true">#</a> applyPlugins</h3><p>取得 register 注册的 hooks 执行后的数据。</p><p>用法:<strong>applyPlugins({ key: string, type: api.ApplyPluginsType, initialValue?: any, args?: any })</strong></p><p>参数:</p><ul><li>key:唯一id</li><li>type:hook的类型。</li><li>initialValue:初始值。</li><li>args:参数,hook函数执行时,args会作为参数传入。</li></ul><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token keyword">await</span> api<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">type</span><span class="token operator">:</span> api<span class="token punctuation">.</span>ApplyPluginsType<span class="token punctuation">.</span>add<span class="token punctuation">,</span>\n <span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['a', 'b']</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="api-applypluginstype" tabindex="-1"><a class="header-anchor" href="#api-applypluginstype" aria-hidden="true">#</a> api.ApplyPluginsType</h4><p>编译时插件hook执行类型,enum 类型,包含三个属性:</p><ul><li>compose,用于合并执行多个函数,函数可决定前序函数的执行时机</li><li>modify,用于修改值</li><li>event,用于执行事件,前面没有依赖关系</li></ul><h3 id="registermethod" tabindex="-1"><a class="header-anchor" href="#registermethod" aria-hidden="true">#</a> registerMethod</h3><p>往 <code>api</code> 上注册方法。如果有提供 <code>fn</code>,则执行 <code>fn</code> 定义的函数。</p><p>用法:<strong>registerMethod({ name: string, fn?: Function, exitsError?: boolean })</strong></p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code> api<span class="token punctuation">.</span><span class="token function">registerMethod</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'writeTmpFile'</span><span class="token punctuation">,</span>\n <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>\n path<span class="token punctuation">,</span>\n content\n <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token function">assert</span><span class="token punctuation">(</span>\n api<span class="token punctuation">.</span>stage <span class="token operator">>=</span> api<span class="token punctuation">.</span>ServiceStage<span class="token punctuation">.</span>pluginReady<span class="token punctuation">,</span>\n <span class="token string">'api.writeTmpFile() should not execute in register stage.'</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> absPath <span class="token operator">=</span> <span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath<span class="token punctuation">,</span> path<span class="token punctuation">)</span><span class="token punctuation">;</span>\n api<span class="token punctuation">.</span>utils<span class="token punctuation">.</span>mkdirp<span class="token punctuation">.</span><span class="token function">sync</span><span class="token punctuation">(</span><span class="token function">dirname</span><span class="token punctuation">(</span>absPath<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">existsSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token function">readFileSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span> <span class="token operator">!==</span> content<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token function">writeFileSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">,</span> content<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>然后在插件中可以使用:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="registercommand" tabindex="-1"><a class="header-anchor" href="#registercommand" aria-hidden="true">#</a> registerCommand</h3>',26),u={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},d=(0,p._)("p",null,[(0,p.Uk)("用法:"),(0,p._)("strong",null,"registerCommand({ command: string, description: string, fn: Function, options?: Object })")],-1),k=(0,p._)("p",null,"参数:",-1),b=(0,p._)("li",null,"command",-1),m=(0,p._)("li",null,[(0,p.Uk)("description,描述文字,输入 "),(0,p._)("code",null,"--help"),(0,p.Uk)(" 会打印")],-1),g=(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),h={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},f=(0,p.uE)('<p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'webpack'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect webpack configurations'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rule <ruleName>'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific module rule'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugin <pluginName>'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific plugin'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rules'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all module rule names'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugins'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all plugin names'</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--verbose'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'show full function definitions in output'</span>\n <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> rawArgv<span class="token punctuation">,</span> args<span class="token punctuation">,</span> options<span class="token punctuation">,</span> program<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p>当项目引入此插件后,使用:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes webpack\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="registerpresets" tabindex="-1"><a class="header-anchor" href="#registerpresets" aria-hidden="true">#</a> registerPresets</h3><p>注册插件集,参数为路径数组。</p><p>用法:<strong>registerPresets(presets: string[])</strong></p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPresets</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="registerplugins" tabindex="-1"><a class="header-anchor" href="#registerplugins" aria-hidden="true">#</a> registerPlugins</h3><p>注册插件,参数为路径数组。</p><p>用法:<strong>registerPlugins(plugins: string[])</strong></p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="hasplugins" tabindex="-1"><a class="header-anchor" href="#hasplugins" aria-hidden="true">#</a> hasPlugins</h3><p>判断是否有注册某个插件,插件的 id 规则:</p><ul><li>id 默认为包名</li><li>内置插件以 <code>@@</code> 为前缀,比如 <code>@@/registerMethod</code></li></ul><p>用法:<strong>hasPlugins(pluginIds: string[])</strong></p><p>例如</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册 @fesjs/plugin-locale</span>\napi<span class="token punctuation">.</span><span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/plugin-locale'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用,只能判断在他之前是否有注册某个插件。</p></div><h3 id="haspresets" tabindex="-1"><a class="header-anchor" href="#haspresets" aria-hidden="true">#</a> hasPresets</h3><p>判断是否有注册某个插件集。</p><p>用法:<strong>hasPresets(presetIds: string[])</strong></p><p>例如</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册</span>\napi<span class="token punctuation">.</span><span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/preset-xxx'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用,只能判断在他之前是否有注册某个插件集。</p></div><h3 id="skipplugins" tabindex="-1"><a class="header-anchor" href="#skipplugins" aria-hidden="true">#</a> skipPlugins</h3><p>声明哪些插件需要被禁用,参数为插件 id 的数组。</p><p>用法:<strong>hasPresets(presetIds: string[])</strong></p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 禁用 plugin-model 插件</span>\napi<span class="token punctuation">.</span><span class="token function">skipPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/plugin-model'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="扩展方法" tabindex="-1"><a class="header-anchor" href="#扩展方法" aria-hidden="true">#</a> 扩展方法</h2><p>通过 api.registerMethod() 扩展的方法。</p><h3 id="addpluginexports" tabindex="-1"><a class="header-anchor" href="#addpluginexports" aria-hidden="true">#</a> addPluginExports</h3><p>把插件需要导出的运行时 API 写入<code>@fesjs/fes</code>。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addPluginExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">specifiers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'access'</span><span class="token punctuation">,</span> <span class="token string">'useAccess'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">source</span><span class="token operator">:</span> absoluteFilePath\n <span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>这样用户使用时:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access<span class="token punctuation">,</span> useAccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="addcoreexports" tabindex="-1"><a class="header-anchor" href="#addcoreexports" aria-hidden="true">#</a> addCoreExports</h3><p>提供给其他插件运行时需要的 API。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addCoreExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">specifiers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'getRoutes'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">source</span><span class="token operator">:</span> absCoreFilePath\n <span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>使用:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getHistory<span class="token punctuation">,</span> destroyRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@@/core/coreExports'</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="addruntimeplugin" tabindex="-1"><a class="header-anchor" href="#addruntimeplugin" aria-hidden="true">#</a> addRuntimePlugin</h3><p>添加运行时插件,返回值格式为表示文件路径的字符串。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePlugin</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./runtime'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="addruntimepluginkey" tabindex="-1"><a class="header-anchor" href="#addruntimepluginkey" aria-hidden="true">#</a> addRuntimePluginKey</h3><p>添加插件提供的运行时配置的 key,返回值格式为字符串。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePluginKey</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'some'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>则用户可以:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// app.js</span>\n<span class="token keyword">const</span> <span class="token function-variable function">some</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="addentryimportsahead" tabindex="-1"><a class="header-anchor" href="#addentryimportsahead" aria-hidden="true">#</a> addEntryImportsAhead</h3><p>在入口文件现有 import 的前面添加 import。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImportsAhead</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'anypackage'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="addentryimports" tabindex="-1"><a class="header-anchor" href="#addentryimports" aria-hidden="true">#</a> addEntryImports</h3><p>在入口文件现有 import 的后面添加 import。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImport</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'/modulePath/xxx.js'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">specifier</span><span class="token operator">:</span> <span class="token string">'moduleName'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="addentrycodeahead" tabindex="-1"><a class="header-anchor" href="#addentrycodeahead" aria-hidden="true">#</a> addEntryCodeAhead</h3><p>在入口文件最前面(import 之后)添加代码。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCodeAhead</span><span class="token punctuation">(</span>\n <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>globalCSSFile\n <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">file</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">require('</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">winPath</span><span class="token punctuation">(</span><span class="token function">relative</span><span class="token punctuation">(</span>absTmpPath<span class="token punctuation">,</span> file<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">');</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="addentrycode" tabindex="-1"><a class="header-anchor" href="#addentrycode" aria-hidden="true">#</a> addEntryCode</h3><p>在入口文件最后添加代码。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCode</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">console.log('works!')</span><span class="token template-punctuation string">`</span></span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="addhtmlheadscripts" tabindex="-1"><a class="header-anchor" href="#addhtmlheadscripts" aria-hidden="true">#</a> addHTMLHeadScripts</h3><p>在 HTML 头部添加脚本。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addHTMLHeadScripts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>\n <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>\n <span class="token comment">// ...attrs</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="addbeforemiddlewares" tabindex="-1"><a class="header-anchor" href="#addbeforemiddlewares" aria-hidden="true">#</a> addBeforeMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之前的中间件,返回值格式为 <code>express</code> 中间件。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addBeforeMiddlewares</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'end'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\n <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="addmiddlewares" tabindex="-1"><a class="header-anchor" href="#addmiddlewares" aria-hidden="true">#</a> addMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之后的中间件,返回值格式为 <code>express</code> 中间件。</p><h3 id="addtmpgeneratewatcherpaths" tabindex="-1"><a class="header-anchor" href="#addtmpgeneratewatcherpaths" aria-hidden="true">#</a> addTmpGenerateWatcherPaths</h3><p>添加重新生成临时文件的监听路径。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addTmpGenerateWatcherPaths</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>\n <span class="token string">'./app.js'</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h3><p>通过 [webpack-chain] 的方式修改 webpack 配置。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n memo<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'vue-i18n'</span><span class="token punctuation">,</span> <span class="token string">'vue-i18n/dist/vue-i18n.esm-bundler.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="copytmpfiles" tabindex="-1"><a class="header-anchor" href="#copytmpfiles" aria-hidden="true">#</a> copyTmpFiles</h3><p>批量写临时文件。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code> api<span class="token punctuation">.</span><span class="token function">copyTmpFiles</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n namespace<span class="token punctuation">,</span>\n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">ignore</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'.tpl'</span><span class="token punctuation">]</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>参数:</p><ul><li>namespace:复制到临时文件夹下的目标目录</li><li>path:需要复制的文件目录</li><li>ignore:需要排除的文件</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用,通常放在 api.onGenerateFiles() 里,这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理,如果内容一致,不会做写的操作,以减少触发 <code>webpack</code> 的重新编译</p></div><h3 id="getport" tabindex="-1"><a class="header-anchor" href="#getport" aria-hidden="true">#</a> getPort</h3><p>获取端口号,dev 时有效。</p><h3 id="gethostname" tabindex="-1"><a class="header-anchor" href="#gethostname" aria-hidden="true">#</a> getHostname</h3><p>获取 hostname,dev 时有效。</p><h3 id="getserver" tabindex="-1"><a class="header-anchor" href="#getserver" aria-hidden="true">#</a> getServer</h3><p>获取 devServer,dev 时有效。</p><h3 id="getroutes" tabindex="-1"><a class="header-anchor" href="#getroutes" aria-hidden="true">#</a> getRoutes</h3><p>获取 <code>api.modifyRoutes</code> 修改过后的路由信息。</p><h3 id="getroutesjson" tabindex="-1"><a class="header-anchor" href="#getroutesjson" aria-hidden="true">#</a> getRoutesJSON</h3><p>获取格式化后的路由信息</p><h3 id="modifyroutes" tabindex="-1"><a class="header-anchor" href="#modifyroutes" aria-hidden="true">#</a> modifyRoutes</h3><p>修改路由。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 把BaseLayout插入到路由配置中,作为根路由</span>\napi<span class="token punctuation">.</span><span class="token function">modifyRoutes</span><span class="token punctuation">(</span><span class="token parameter">routes</span> <span class="token operator">=></span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">winPath</span><span class="token punctuation">(</span>\n <span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">,</span> absFilePath<span class="token punctuation">)</span>\n <span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> routes\n <span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="modifybundleconfigopts" tabindex="-1"><a class="header-anchor" href="#modifybundleconfigopts" aria-hidden="true">#</a> modifyBundleConfigOpts</h3><p>修改获取 bundleConfig 的函数参数。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfigOpts</span><span class="token punctuation">(</span><span class="token parameter">memo</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n memo<span class="token punctuation">.</span>miniCSSExtractPluginPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n memo<span class="token punctuation">.</span>miniCSSExtractPluginLoaderPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>\n <span class="token string">'mini-css-extract-plugin/dist/loader'</span><span class="token punctuation">,</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> memo<span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="modifybundleconfig" tabindex="-1"><a class="header-anchor" href="#modifybundleconfig" aria-hidden="true">#</a> modifyBundleConfig</h3><p>修改 bundle 配置。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">bundleConfig</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// do something</span>\n <span class="token keyword">return</span> bundleConfig<span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="modifybabelopts" tabindex="-1"><a class="header-anchor" href="#modifybabelopts" aria-hidden="true">#</a> modifyBabelOpts</h3><p>修改 babel 配置项。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">babelOpts</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span>api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>babelPluginImport<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>babelPluginImport<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n babelOpts<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> config<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token keyword">return</span> babelOpts<span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="modifybabelpresetopts" tabindex="-1"><a class="header-anchor" href="#modifybabelpresetopts" aria-hidden="true">#</a> modifyBabelPresetOpts</h3><p>修改 babel 插件的配置。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelPresetOpts</span><span class="token punctuation">(</span><span class="token parameter">opts</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token operator">...</span>opts<span class="token punctuation">,</span>\n <span class="token keyword">import</span><span class="token operator">:</span> <span class="token punctuation">(</span>opts<span class="token punctuation">.</span>import <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">libraryName</span><span class="token operator">:</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">,</span> <span class="token literal-property property">libraryDirectory</span><span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="modifypaths" tabindex="-1"><a class="header-anchor" href="#modifypaths" aria-hidden="true">#</a> modifyPaths</h3><p>修改 paths 对象。</p><h3 id="modifydefaultconfig" tabindex="-1"><a class="header-anchor" href="#modifydefaultconfig" aria-hidden="true">#</a> modifyDefaultConfig</h3><p>修改默认配置。 例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyDefaultConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token operator">...</span>memo<span class="token punctuation">,</span>\n <span class="token operator">...</span>defaultOptions<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="modifyconfig" tabindex="-1"><a class="header-anchor" href="#modifyconfig" aria-hidden="true">#</a> modifyConfig</h3><p>修改最终配置。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token operator">...</span>memo<span class="token punctuation">,</span>\n <span class="token operator">...</span>defaultOptions<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="modifypublicpathstr" tabindex="-1"><a class="header-anchor" href="#modifypublicpathstr" aria-hidden="true">#</a> modifyPublicPathStr</h3><p>修改 publicPath 字符串。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyPublicPathStr</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>publicPath <span class="token operator">||</span> <span class="token string">'/'</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="onpluginready" tabindex="-1"><a class="header-anchor" href="#onpluginready" aria-hidden="true">#</a> onPluginReady</h3><p>在插件初始化完成触发。在 onStart 之前,此时还没有 config 和 paths,他们尚未解析好。</p><h3 id="onstart" tabindex="-1"><a class="header-anchor" href="#onstart" aria-hidden="true">#</a> onStart</h3><p>在命令注册函数执行前触发。可以使用 config 和 paths。</p><h3 id="onexit" tabindex="-1"><a class="header-anchor" href="#onexit" aria-hidden="true">#</a> onExit</h3><p>dev 退出时触发。</p><h3 id="ongeneratefiles" tabindex="-1"><a class="header-anchor" href="#ongeneratefiles" aria-hidden="true">#</a> onGenerateFiles</h3><p>生成临时文件,触发时机在 webpack 编译之前。</p><h3 id="restartserver" tabindex="-1"><a class="header-anchor" href="#restartserver" aria-hidden="true">#</a> restartServer</h3><p>重启 devServer,dev 时有效。</p><h3 id="writetmpfile" tabindex="-1"><a class="header-anchor" href="#writetmpfile" aria-hidden="true">#</a> writeTmpFile</h3><p>写临时文件。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">path</span><span class="token operator">:</span> absoluteFilePath<span class="token punctuation">,</span>\n <span class="token literal-property property">content</span><span class="token operator">:</span> Mustache<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime/core.tpl'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token constant">REPLACE_ROLES</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">)</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>参数:</p><ul><li>path:相对于临时文件夹的路径</li><li>content:文件内容</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用,通常放在 api.onGenerateFiles() 里,这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理,如果内容一致,不会做写的操作,以减少触发 webpack 的重新编译</p></div>',154),v={},y=(0,a(3744).Z)(v,[["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,(0,p.Uk)(" 用于声明配置的类型,基于 "),(0,p._)("a",c,[(0,p.Uk)("joi"),(0,p.Wm)(a)]),(0,p.Uk)(",如果你希望用户进行配置,这个是必须的,否则用户的配置无效")]),l,i]),r,(0,p._)("p",null,[(0,p.Uk)("注册命令,基于 "),(0,p._)("a",u,[(0,p.Uk)("commander"),(0,p.Wm)(a)]),(0,p.Uk)(" 实现的机制。")]),d,k,(0,p._)("ul",null,[b,m,g,(0,p._)("li",null,[(0,p.Uk)("options,参数配置,基于 "),(0,p._)("a",h,[(0,p.Uk)("commander"),(0,p.Wm)(a)]),(0,p.Uk)(" 。")])]),f],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.315b2b24.js b/assets/js/v-d61a9282.315b2b24.js deleted file mode 100644 index dbf0c902..00000000 --- a/assets/js/v-d61a9282.315b2b24.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},671:(l,e,n)=>{n.r(e),n.d(e,{default:()=>x});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),r=(0,u._)("thead",null,[(0,u._)("tr",null,[(0,u._)("th",null,"插件"),(0,u._)("th",null,"介绍")])],-1),i=(0,u._)("td",null,"提供对页面资源的权限控制能力",-1),d=(0,u._)("td",null,"提供统一的枚举存取及丰富的函数来处理枚举",-1),_=(0,u._)("td",null,"svg 文件自动注册为组件",-1),a=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Jest"),(0,u.Uk)(",提供单元测试、覆盖测试能力")],-1),c=(0,u._)("td",null,"简单的配置即可拥有布局,包括导航以及侧边栏",-1),f=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Vue I18n"),(0,u.Uk)(",提供国际化能力")],-1),p=(0,u._)("td",null,"简易的数据管理方案",-1),o=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Axios"),(0,u.Uk)(" 封装的 request,内置防止重复请求、请求节流、错误处理等功能")],-1),g=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"Vuex"),(0,u.Uk)(", 提供状态管理能力")],-1),m=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"qiankun"),(0,u.Uk)(",提供微服务能力")],-1),k=(0,u._)("td",null,"样式支持sass",-1),h=(0,u._)("td",null,[(0,u.Uk)("提供代码编辑器能力, 基于"),(0,u._)("code",null,"monaco-editor"),(0,u.Uk)("(VS Code使用的代码编辑器)")],-1),U=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"windicss"),(0,u.Uk)(",提供原子化 CSS 能力")],-1),w=(0,u._)("td",null,[(0,u.Uk)("基于 "),(0,u._)("code",null,"pinia"),(0,u.Uk)(",提供状态管理")],-1),j=(0,u._)("td",null,"水印",-1),W=(0,u._)("h2",{id:"架构",tabindex:"-1"},[(0,u._)("a",{class:"header-anchor",href:"#架构","aria-hidden":"true"},"#"),(0,u.Uk)(" 架构")],-1),v=["src"],b=(0,u._)("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),q={},x=(0,n(3744).Z)(q,[["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,[r,(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)((()=>[(0,u.Uk)("@fesjs/plugin-access")])),_:1})]),i]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/enums.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-enums")])),_:1})]),d]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/icon.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-icon")])),_:1})]),_]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/jest.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-jest")])),_:1})]),a]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/layout.html"},{default:(0,u.w5)((()=>[(0,u.Uk)(" @fesjs/plugin-layout")])),_:1})]),c]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/locale.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-locale")])),_:1})]),f]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/model.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-model")])),_:1})]),p]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/request.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-request")])),_:1})]),o]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/vuex.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-vuex")])),_:1})]),g]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/qiankun.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-qiankun")])),_:1})]),m]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/sass.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-sass")])),_:1})]),k]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/editor.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-monaco-editor")])),_:1})]),h]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/windicss.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-windicss")])),_:1})]),U]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/pinia.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-pinia")])),_:1})]),w]),(0,u._)("tr",null,[(0,u._)("td",null,[(0,u.Wm)(n,{to:"/reference/plugin/plugins/watermark.html"},{default:(0,u.w5)((()=>[(0,u.Uk)("@fesjs/plugin-watermark")])),_:1})]),j])])]),W,(0,u._)("img",{src:l.$withBase("framework.png"),alt:"架构"},null,8,v),b],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.eec494da.js b/assets/js/v-d7fa887a.eec494da.js deleted file mode 100644 index 162530f6..00000000 --- a/assets/js/v-d7fa887a.eec494da.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5938:(e,a,s)=>{s.r(a),s.d(a,{default:()=>j});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),c={href:"https://classic.yarnpkg.com/zh-Hans/docs/workspaces",target:"_blank",rel:"noopener noreferrer"},o={href:"https://en.wikipedia.org/wiki/Monorepo",target:"_blank",rel:"noopener noreferrer"},i=(0,n._)("code",null,"packages",-1),t=(0,n.uE)('<ul><li><p><code>@fesjs/create-fes-app</code>: 创建项目模板模块。提供<code>create-fes-app</code>命令,提供创建多种类型项目模板的能力。</p></li><li><p><code>@fesjs/compiler</code>: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。</p></li><li><p><code>@fesjs/runtime</code>: 运行时插件模块。集成了vue-router,定义运行时插件生命周期、插件通讯机制。</p></li><li><p><code>@fesjs/preset-build-in</code>: 内置插件集。包含<code>dev</code>、<code>build</code>等命令,集成webpack5+babel,提供方便编写插件的API,入口文件处理,路由处理等能力。</p></li><li><p><code>@fesjs/fes-template</code>: 适用于PC类型的模板项目。</p></li><li><p><code>@fesjs/fes-template-h5</code>: 适用于H5类型的模板项目。</p></li><li><p><code>@fesjs/plugin-${name}</code>: 官方插件。</p></li><li><p><code>@fesjs/fes</code>: 入口模块。提供<code>fes</code>命令和 API 入口,封装<code>@fesjs/compiler</code> + <code>@fesjs/runtime</code> + <code>@fesjs/preset-build-in</code>,用户只需要安装此依赖和其他插件。</p></li></ul><h2 id="开发准备" tabindex="-1"><a class="header-anchor" href="#开发准备" aria-hidden="true">#</a> 开发准备</h2><p>开发要求:</p>',3),d={href:"http://nodejs.org",target:"_blank",rel:"noopener noreferrer"},p={href:"https://classic.yarnpkg.com/zh-Hans/docs/install",target:"_blank",rel:"noopener noreferrer"},u=(0,n._)("p",null,"本项目开发使用的一些主要工具:",-1),h={href:"https://jestjs.io/",target:"_blank",rel:"noopener noreferrer"},b={href:"https://eslint.org/",target:"_blank",rel:"noopener noreferrer"},f={href:"https://prettier.io/",target:"_blank",rel:"noopener noreferrer"},m=(0,n.uE)('<p>克隆仓库:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">git</span> clone https://github.com/WeBankFinTech/fes.js.git\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>进入<code>fes.js</code>目录,安装依赖:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">yarn</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="贡献文档" tabindex="-1"><a class="header-anchor" href="#贡献文档" aria-hidden="true">#</a> 贡献文档</h2>',5),g=(0,n._)("code",null,"docs",-1),k={href:"https://v2.vuepress.vuejs.org/zh/",target:"_blank",rel:"noopener noreferrer"},v=(0,n.uE)('<h4 id="第一步-启动服务" tabindex="-1"><a class="header-anchor" href="#第一步-启动服务" aria-hidden="true">#</a> 第一步:启动服务</h4><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">yarn</span> docs:dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h4 id="第二步-修改md文件" tabindex="-1"><a class="header-anchor" href="#第二步-修改md文件" aria-hidden="true">#</a> 第二步:修改md文件</h4><p>菜单配置在<code>/docs/.vuepress/configs/sidebar/zh.ts</code>中,可以通过此配置找到对应想修改的文档。</p><p>如果想添加图片,则可以先把图片添加至<code>/docs/.vuepress/public</code>,在代码中使用:</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>$withBase('framework.png')<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>架构<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h4 id="第三步-查看更新" tabindex="-1"><a class="header-anchor" href="#第三步-查看更新" aria-hidden="true">#</a> 第三步:查看更新</h4><p>当md文档保存后,文档会自动更新,在<code>http://localhost:8080/</code>查看。</p><h2 id="贡献源码" tabindex="-1"><a class="header-anchor" href="#贡献源码" aria-hidden="true">#</a> 贡献源码</h2><p><code>Fes.js</code>统一使用<code>ES Module</code>规范编写源码,代码会在 node 端和浏览器端执行,所以源码需要编译后才能发布成包,再被执行。</p><h4 id="启动编译服务" tabindex="-1"><a class="header-anchor" href="#启动编译服务" aria-hidden="true">#</a> 启动编译服务</h4><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">yarn</span> dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>当我们修改<code>build.config.js</code>中配置的包代码时,会把<code>src</code>目录的源码编译后到<code>lib</code>目录。</p><h4 id="修改源码" tabindex="-1"><a class="header-anchor" href="#修改源码" aria-hidden="true">#</a> 修改源码</h4><p>在了解<code>Fes.js</code>设计前提下,修改核心代码或者插件代码。</p><h4 id="验证修改内容" tabindex="-1"><a class="header-anchor" href="#验证修改内容" aria-hidden="true">#</a> 验证修改内容</h4><p>根据需求选择模板项目来验证修改内容,比如选择<code>fes-template</code>:</p><ol><li>查看需待验证包是否已经添加到模板项目的依赖中,如果没有则在模板项目的 package.json 中添加包依赖,添加后在根目录执行<code>yarn</code>关联依赖</li><li>启动模板项目的开发服务</li></ol><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> packages/fes-template\n<span class="token function">yarn</span> dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li>在项目模板中添加代码验证修改内容</li><li>打开<code>localhost:8000</code>查看结果</li></ol><h4 id="快速调试技巧" tabindex="-1"><a class="header-anchor" href="#快速调试技巧" aria-hidden="true">#</a> 快速调试技巧</h4><p>每次修改插件或者核心代码后,等待自动编译完,需要在模板目录重新执行<code>fes dev</code>,比较费时费力。</p><p>可以先在模板的 <code>.fes</code> 目录中找到对应临时代码,更改逻辑,验证完后再将变更逻辑保存到正式文件中。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>直接修改临时文件切莫重新执行<code>fes dev</code>,修改会被覆盖。</p></div><h2 id="提交pr" tabindex="-1"><a class="header-anchor" href="#提交pr" aria-hidden="true">#</a> 提交PR</h2><ol><li>fork项目!</li><li>创建你的功能分支: git checkout -b my-new-feature</li><li>本地提交新代码: git commit -am 'Add some feature'</li><li>推送本地到服务器分支: git push origin my-new-feature</li><li>创建一个PR</li></ol>',26),_={},j=(0,s(3744).Z)(_,[["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,[(0,n.Uk)("项目仓库借助于 "),(0,n._)("a",c,[(0,n.Uk)("Yarn 工作区"),(0,n.Wm)(s)]),(0,n.Uk)(" 来实现 "),(0,n._)("a",o,[(0,n.Uk)(" Monorepo"),(0,n.Wm)(s)]),(0,n.Uk)(" ,在 "),i,(0,n.Uk)(" 目录下存放多个互相关联的独立包。")]),t,(0,n._)("ul",null,[(0,n._)("li",null,[(0,n._)("a",d,[(0,n.Uk)("Node.js v14+"),(0,n.Wm)(s)])]),(0,n._)("li",null,[(0,n._)("a",p,[(0,n.Uk)("Yarn v1"),(0,n.Wm)(s)])])]),u,(0,n._)("ul",null,[(0,n._)("li",null,[(0,n._)("a",h,[(0,n.Uk)("Jest"),(0,n.Wm)(s)]),(0,n.Uk)(" 用于单元测试")]),(0,n._)("li",null,[(0,n._)("a",b,[(0,n.Uk)("ESLint"),(0,n.Wm)(s)]),(0,n.Uk)(" + "),(0,n._)("a",f,[(0,n.Uk)("Prettier"),(0,n.Wm)(s)]),(0,n.Uk)(" 用于代码检查和格式化")])]),m,(0,n._)("p",null,[(0,n.Uk)("文档代码在"),g,(0,n.Uk)("目录,基于 "),(0,n._)("a",k,[(0,n.Uk)("vuepress"),(0,n.Wm)(s)]),(0,n.Uk)(" 实现。")]),v],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.01694dac.js b/assets/js/v-ef8c5e10.01694dac.js deleted file mode 100644 index d5f3e211..00000000 --- a/assets/js/v-ef8c5e10.01694dac.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},3125:(e,a,s)=>{s.r(a),s.d(a,{default:()=>o});var n=s(6252);const l=(0,n.uE)('<h1 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量" aria-hidden="true">#</a> 环境变量</h1><p>在构建或者代码在端上运行中需要一些跟区分于环境的变量,用于配置构建流程或者运行时过程,这时候我们可以配置环境变量。</p><h2 id="配置环境变量" tabindex="-1"><a class="header-anchor" href="#配置环境变量" aria-hidden="true">#</a> 配置环境变量</h2><h3 id="命令行添加" tabindex="-1"><a class="header-anchor" href="#命令行添加" aria-hidden="true">#</a> 命令行添加</h3><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># OS X, Linux</span>\n<span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> fes dev\n\n<span class="token comment"># Windows (cmd.exe)</span>\n<span class="token builtin class-name">set</span> <span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> <span class="token operator">&&</span> fes dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div>',6),r={href:"https://github.com/kentcdodds/cross-env",target:"_blank",rel:"noopener noreferrer"},d=(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 "),(0,n._)("span",{class:"token parameter variable"},"--dev"),(0,n.Uk)("\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),c=(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),t=(0,n.uE)('<h3 id="env-文件配置" tabindex="-1"><a class="header-anchor" href="#env-文件配置" aria-hidden="true">#</a> <code>.env</code> 文件配置</h3><p>Fes.js 中约定根目录下以 <code>.env</code> 开头的文件为环境变量配置文件。</p><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>然后执行</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>会以 3000 端口启动 dev server。</p><h4 id="本地临时配置" tabindex="-1"><a class="header-anchor" href="#本地临时配置" aria-hidden="true">#</a> 本地临时配置</h4><p>可以新建 <code>.env.local</code>,这份配置会和 <code>.env</code> 做合并后形成最终配置。</p><h4 id="环境配置" tabindex="-1"><a class="header-anchor" href="#环境配置" aria-hidden="true">#</a> 环境配置</h4><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境来指定配置,这时候必须在执行命令前添加 <code>FES_ENV</code> 保证执行加载环境变量配置文件逻辑前 <code>FES_ENV</code> 已设置。</p><p>举个 🌰 :</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token assign-left variable">FES_ENV</span><span class="token operator">=</span>sit fes dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>如果存在 <code>.env.sit</code> 文件,则会将 <code>.env.sit</code> 的配置和 <code>.env</code> 做合并后形成最终配置。</p><h4 id="配置优先级" tabindex="-1"><a class="header-anchor" href="#配置优先级" aria-hidden="true">#</a> 配置优先级</h4><p>本地临时配置 > 环境配置 > 基础配置</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果多份配置中存在相同的配置项,<strong>则优先级高的会覆盖优先级低的</strong>。</p></div><h2 id="编译时配置列表" tabindex="-1"><a class="header-anchor" href="#编译时配置列表" aria-hidden="true">#</a> 编译时配置列表</h2><p>编译时配置是在构建过程需要的变量,开放给用户配置。</p><h3 id="fes-env" tabindex="-1"><a class="header-anchor" href="#fes-env" aria-hidden="true">#</a> FES_ENV</h3><p>指定当前的环境,不同环境各自的配置文件。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p><code>FES_ENV</code> 在会在加载<code>.env</code>前使用,所以只能用命令行方式配置。</p></div><h3 id="fes-presets" tabindex="-1"><a class="header-anchor" href="#fes-presets" aria-hidden="true">#</a> FES_PRESETS</h3><p>添加额外的插件集入口</p><h3 id="fes-plugins" tabindex="-1"><a class="header-anchor" href="#fes-plugins" aria-hidden="true">#</a> FES_PLUGINS</h3><p>添加额外的插件入口</p><h3 id="port" tabindex="-1"><a class="header-anchor" href="#port" aria-hidden="true">#</a> PORT</h3><p><code>fes dev</code> 时服务指定的端口号,默认是 <code>8080</code></p><h3 id="host" tabindex="-1"><a class="header-anchor" href="#host" aria-hidden="true">#</a> HOST</h3><p>默认是 <code>localhost</code>。</p><h3 id="https" tabindex="-1"><a class="header-anchor" href="#https" aria-hidden="true">#</a> HTTPS</h3><p>默认是 <code>false</code>。</p><h3 id="watch" tabindex="-1"><a class="header-anchor" href="#watch" aria-hidden="true">#</a> WATCH</h3><p>设为 none 时不监听文件变更。比如:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>WATCH=none fes dev\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="babel-cache" tabindex="-1"><a class="header-anchor" href="#babel-cache" aria-hidden="true">#</a> BABEL_CACHE</h3><p>默认开启 Babel 编译缓存,值为 none 时禁用缓存。</p><h3 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> ANALYZE</h3><p>用于分析 bundle 构成,默认关闭。</p><p>比如:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>ANALYZE=1 fes build\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="analyze-mode" tabindex="-1"><a class="header-anchor" href="#analyze-mode" aria-hidden="true">#</a> ANALYZE_MODE</h3><p>默认是<code>server</code></p><h3 id="analyze-port" tabindex="-1"><a class="header-anchor" href="#analyze-port" aria-hidden="true">#</a> ANALYZE_PORT</h3><p>默认是<code>8888</code></p><h3 id="clear-output" tabindex="-1"><a class="header-anchor" href="#clear-output" aria-hidden="true">#</a> CLEAR_OUTPUT</h3><p>仅仅在 <code>build</code> 时生效。如果设置为 <code>none</code>,就不会在构建前清除 <code>Output</code> 文件内容。</p><h3 id="rm-tmpdir" tabindex="-1"><a class="header-anchor" href="#rm-tmpdir" aria-hidden="true">#</a> RM_TMPDIR</h3><p>仅仅在 <code>build</code> 时生效。如果设置为 <code>none</code>,就不会在构建后清除 <code>.fes</code> 临时文件内容。</p><h2 id="process-env" tabindex="-1"><a class="header-anchor" href="#process-env" aria-hidden="true">#</a> process.env</h2><p>运行时配置需要以 <code>FES_APP_</code> 开头,比如在 <code>.env</code> 中配置:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>FES_APP_KEY=123456789\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>在代码中使用:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">FES_APP_KEY</span><span class="token punctuation">)</span>\n<span class="token comment">// 输出 123456789</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>除了用户自定义的以<code>FES_APP_</code>开头的变量,还提供如下配置:</p><ul><li><p><strong>NODE_ENV</strong>:Node 环境变量</p></li><li><p><strong>FES_ENV</strong>:Fes.js 环境变量</p></li><li><p><strong>BASE_URL</strong>:等同于 publicPath</p></li></ul>',56),i={},o=(0,s(3744).Z)(i,[["render",function(e,a){const s=(0,n.up)("OutboundLink"),i=(0,n.up)("CodeGroupItem"),o=(0,n.up)("CodeGroup");return(0,n.wg)(),(0,n.iD)(n.HY,null,[l,(0,n._)("p",null,[(0,n.Uk)("如果要同时考虑 OS X 和 Windows,可借助三方工具 "),(0,n._)("a",r,[(0,n.Uk)("cross-env"),(0,n.Wm)(s)])]),(0,n.Wm)(o,null,{default:(0,n.w5)((()=>[(0,n.Wm)(i,{title:"YARN",active:""},{default:(0,n.w5)((()=>[d])),_:1}),(0,n.Wm)(i,{title:"NPM"},{default:(0,n.w5)((()=>[c])),_:1})])),_:1}),t],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.f066a234.js b/assets/js/v-fb0f0066.f066a234.js deleted file mode 100644 index 5b95dd2b..00000000 --- a/assets/js/v-fb0f0066.f066a234.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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},2204:(n,s,e)=>{e.r(s),e.d(s,{default:()=>T});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={href:"https://nodejs.org/",target:"_blank",rel:"noopener noreferrer"},i=(0,a.uE)('<div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 打印 node 版本</span>\n<span class="token function">node</span> <span class="token parameter variable">-v</span>\nv10.13.0\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>推荐使用 yarn 管理 npm 依赖</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 全局安装 yarn</span>\n<span class="token function">npm</span> i <span class="token function">yarn</span> <span class="token parameter variable">-g</span>\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="创建项目" tabindex="-1"><a class="header-anchor" href="#创建项目" aria-hidden="true">#</a> 创建项目</h2><p>这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。</p><h5 id="步骤1-创建工作空间" tabindex="-1"><a class="header-anchor" href="#步骤1-创建工作空间" aria-hidden="true">#</a> 步骤1 创建工作空间</h5><p>如果工作空间不存在,则先创建:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 创建目录 workspace</span>\n<span class="token function">mkdir</span> workspace\n<span class="token comment"># 进入目录 workspace</span>\n<span class="token builtin class-name">cd</span> workspace\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>如果工作空间已存在,则直接进入</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 进入目录 workspace</span>\n<span class="token builtin class-name">cd</span> workspace\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h5 id="步骤2-在工作空间创建项目" tabindex="-1"><a class="header-anchor" href="#步骤2-在工作空间创建项目" aria-hidden="true">#</a> 步骤2 在工作空间创建项目</h5>',11),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)(" 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),u=(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),t=(0,a._)("p",null,[(0,a.Uk)("如果项目文件夹 "),(0,a._)("code",null,"workspace/myapp"),(0,a.Uk)(" 已经存在,会提示目录已存在:")],-1),b=["src"],_=(0,a._)("p",null,"你可以选择:",-1),d=(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),o=(0,a._)("code",null,"Overwrite",-1),m=(0,a._)("code",null,"Merge",-1),k=(0,a._)("code",null,"workspace/myapp",-1),h=(0,a._)("code",null,"template",-1),g=["src"],v=(0,a._)("p",null,[(0,a.Uk)("你可以选默认适用于中后台前端应用的 "),(0,a._)("code",null,"PC"),(0,a.Uk)(" 类型,也可以选适用于移动端的 "),(0,a._)("code",null,"H5"),(0,a.Uk)(" 类型。")],-1),f=(0,a._)("h5",{id:"步骤3-安装依赖",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#步骤3-安装依赖","aria-hidden":"true"},"#"),(0,a.Uk)(" 步骤3 安装依赖")],-1),U=(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),w=(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),x=(0,a._)("h2",{id:"启动项目",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#启动项目","aria-hidden":"true"},"#"),(0,a.Uk)(" 启动项目")],-1),y=(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),W=(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),C={href:"http://localhost:8080",target:"_blank",rel:"noopener noreferrer"},N=["src"],j=(0,a._)("h2",{id:"部署发布",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#部署发布","aria-hidden":"true"},"#"),(0,a.Uk)(" 部署发布")],-1),M=(0,a._)("h3",{id:"构建",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#构建","aria-hidden":"true"},"#"),(0,a.Uk)(" 构建")],-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 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),O=(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),P=(0,a.uE)('<p>构建产物默认生成到 ./dist 下,然后通过 tree 命令查看。</p><div class="language-base ext-base line-numbers-mode"><pre class="language-base"><code>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</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="本地验证" tabindex="-1"><a class="header-anchor" href="#本地验证" aria-hidden="true">#</a> 本地验证</h3>',3),R={href:"https://github.com/vercel/serve",target:"_blank",rel:"noopener noreferrer"},Y=(0,a._)("code",null,"fes dev",-1),$=(0,a._)("h3",{id:"部署",tabindex:"-1"},[(0,a._)("a",{class:"header-anchor",href:"#部署","aria-hidden":"true"},"#"),(0,a.Uk)(" 部署")],-1),D=(0,a._)("p",null,"本地验证完,就可以部署了。你需要把 dist 目录部署到服务器上。",-1),E={},T=(0,e(3744).Z)(E,[["render",function(n,s){const e=(0,a.up)("OutboundLink"),E=(0,a.up)("CodeGroupItem"),T=(0,a.up)("CodeGroup");return(0,a.wg)(),(0,a.iD)(a.HY,null,[l,r,(0,a._)("p",null,[(0,a.Uk)("首先得有 "),(0,a._)("a",c,[(0,a.Uk)("Node.js"),(0,a.Wm)(e)]),(0,a.Uk)(",并确保 node 版本是 10.13 或以上。")]),i,(0,a.Wm)(T,null,{default:(0,a.w5)((()=>[(0,a.Wm)(E,{title:"YARN",active:""},{default:(0,a.w5)((()=>[p])),_:1}),(0,a.Wm)(E,{title:"NPM"},{default:(0,a.w5)((()=>[u])),_:1})])),_:1}),t,(0,a._)("img",{src:n.$withBase("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,b),_,d,(0,a._)("p",null,[(0,a.Uk)("当选择 "),o,(0,a.Uk)(" 或者 "),m,(0,a.Uk)(" 或者项目目录 "),k,(0,a.Uk)(" 不存在,会提示选取一个 "),h,(0,a.Uk)(": "),(0,a._)("img",{src:n.$withBase("pickTemplate.png"),alt:"选择模板类型"},null,8,g)]),v,f,(0,a.Wm)(T,null,{default:(0,a.w5)((()=>[(0,a.Wm)(E,{title:"YARN",active:""},{default:(0,a.w5)((()=>[U])),_:1}),(0,a.Wm)(E,{title:"NPM"},{default:(0,a.w5)((()=>[w])),_:1})])),_:1}),x,(0,a.Wm)(T,null,{default:(0,a.w5)((()=>[(0,a.Wm)(E,{title:"YARN",active:""},{default:(0,a.w5)((()=>[y])),_:1}),(0,a.Wm)(E,{title:"NPM"},{default:(0,a.w5)((()=>[W])),_:1})])),_:1}),(0,a._)("p",null,[(0,a.Uk)("Fes.js 会在 "),(0,a._)("a",C,[(0,a.Uk)("http://localhost:8080"),(0,a.Wm)(e)]),(0,a.Uk)(" 启动一个热重载的开发服务器。当你修改你的 .vue 文件时,浏览器中的内容也会自动更新。")]),(0,a._)("img",{src:n.$withBase("home.png"),alt:"home"},null,8,N),j,M,(0,a.Wm)(T,null,{default:(0,a.w5)((()=>[(0,a.Wm)(E,{title:"YARN",active:""},{default:(0,a.w5)((()=>[A])),_:1}),(0,a.Wm)(E,{title:"NPM"},{default:(0,a.w5)((()=>[O])),_:1})])),_:1}),P,(0,a._)("p",null,[(0,a.Uk)("发布之前,可以通过 "),(0,a._)("a",R,[(0,a.Uk)("serve"),(0,a.Wm)(e)]),(0,a.Uk)(" 做本地验证,验证结果应该跟执行 "),Y,(0,a.Uk)(" 的结果一样。")]),$,D],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.7aa72175.js b/assets/js/v-fffb8e28.7aa72175.js deleted file mode 100644 index 200b3697..00000000 --- a/assets/js/v-fffb8e28.7aa72175.js +++ /dev/null @@ -1 +0,0 @@ -"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:1680249231e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},5195:(e,s,l)=>{l.r(s),l.d(s,{default:()=>c});var i=l(6252);const a=(0,i.uE)('<h1 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h1><h2 id="痛点" tabindex="-1"><a class="header-anchor" href="#痛点" aria-hidden="true">#</a> 痛点</h2><p>在开发一个前端项目之前,我们可能需要做如下准备工作:</p><ul><li>搭建开发环境</li><li>约定代码规范</li><li>封装API请求</li><li>配置路由</li><li>实现布局、菜单、导航</li><li>实现登录</li><li>权限管理</li><li>...</li></ul><p>除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。</p><h2 id="fes-js-是什么" tabindex="-1"><a class="header-anchor" href="#fes-js-是什么" aria-hidden="true">#</a> Fes.js 是什么?</h2><p>Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础,同时支持配置式路由和约定式路由,并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系,支持各种功能扩展和业务需求。</p><p>它主要具备以下特点:</p><ul><li><p>🚀 <strong>快速</strong> ,内置了路由、开发、构建等,并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件,可以满足大部分日常开发需求。</p></li><li><p>🧨 <strong>简单</strong> ,基于Vue.js 3.0,上手简单。贯彻“约定优于配置”思想,设计插件上尽可能用约定替代配置,同时提供统一的插件配置入口,简单简洁又不失灵活。提供一致性的API入口,一致化的体验,学习起来更轻松。</p></li><li><p>💪 <strong>健壮</strong> ,只需要关心页面内容,减少写BUG的机会!提供单元测试、覆盖测试能力保障项目质量。</p></li><li><p>📦 <strong>可扩展</strong> ,借鉴Umi实现了完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序的运行。</p></li><li><p>📡 <strong>面向未来</strong> ,在满足需求的同时,我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能,已使用webpack5提升构建性能和实现微服务,未来会探索vite等新技术。</p></li></ul><h2 id="fes-js-如何工作" tabindex="-1"><a class="header-anchor" href="#fes-js-如何工作" aria-hidden="true">#</a> Fes.js 如何工作?</h2><h3 id="架构" tabindex="-1"><a class="header-anchor" href="#架构" aria-hidden="true">#</a> 架构</h3>',11),n=["src"],r=(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)('<h3 id="fes-临时文件" tabindex="-1"><a class="header-anchor" href="#fes-临时文件" aria-hidden="true">#</a> .fes 临时文件</h3><p>.fes 临时目录是整个 Fes.js 项目的发动机,你的入口文件、路由等等都在这里,这些是由 fes 内部插件及三方插件生成的。</p><p>你通常会在 .fes 下看到以下目录</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>+ .fes\n + core # 内部插件生成\n + pluginA # 外部插件生成\n + presetB # 外部插件生成\n + fes.js # 入口文件\n</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>临时文件是 Fes.js 中非常重要的一部分,框架或插件会根据你的代码生成临时文件,这些原来需要放在项目里的脏乱差的部分都被藏在了这里。</p><p>你可以在这里调试代码,但不要在 .git 仓库里提交他,因为他的临时性,每次启动 fes 时都会被删除并重新生成。</p><h2 id="为什么不是" tabindex="-1"><a class="header-anchor" href="#为什么不是" aria-hidden="true">#</a> 为什么不是 ...?</h2><h3 id="vue-cli" tabindex="-1"><a class="header-anchor" href="#vue-cli" aria-hidden="true">#</a> Vue CLI</h3><p>Vue CLI 是基于 Vue.js 进行快速开发的完整系统,提供交互式脚手架、丰富的官方插件,并且可通过插件进行扩展,他在打包层把体验做到了极致,但是不包含路由,不是框架。所以,如果大家想基于他修改部分配置,或者希望在打包层之外也做技术收敛时,就会遇到困难。</p><h3 id="umi" tabindex="-1"><a class="header-anchor" href="#umi" aria-hidden="true">#</a> UMI</h3><p>UMI 是个很好的选择,Fes.js 很多功能是借鉴 UMI 做的。UMI 是基于 React 封装的应用级框架,贯彻着函数式编程的思维。而 Vue 有所不同,虽然 Vue 3.0 向函数式迈了一大步,但大家可能依然喜欢编写 <code>.vue</code>文件,而非 <code>.jsx</code> 文件。两种思维方式会导致部分API设计上有所差异,虽然 UMI 有 <code>plugin-vue</code> ,但不太 "vue"。推荐喜欢 React 的同学使用 UMI。</p>',11),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,n),r,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)]),(0,i.Uk)(" Fes.js 支持插件和插件集,通过这张图应该很好理解到他们的关系,通过插件集我们把插件收敛依赖然后支持不同的业务类型。 "),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/layout.html.18970df4.js b/assets/layout.html.18970df4.js new file mode 100644 index 00000000..e2029307 --- /dev/null +++ b/assets/layout.html.18970df4.js @@ -0,0 +1,113 @@ +import{_ as u,r as c,o as r,c as d,b as n,d as s,a as e,w as o,e as l,f as a}from"./app.bd9c95b7.js";const k={},v=n("h1",{id:"fesjs-plugin-layout",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#fesjs-plugin-layout","aria-hidden":"true"},"#"),s(" @fesjs/plugin-layout")],-1),g=n("h2",{id:"介绍",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),s(" 介绍")],-1),h=n("p",null,[s("为了进一步降低研发成本,我们将布局利用 "),n("code",null,"fes.js"),s(" 插件的方式内置,只需通过简单的配置即可拥有布局,包括导航以及侧边栏。从而做到用户无需关心布局。")],-1),m=a("<li>侧边栏菜单数据根据路由中的配置自动生成。</li><li>布局,提供 <code>side</code>、 <code>top</code>、<code>mixin</code>、<code>left-right</code> 四种布局。</li><li>主题,提供 <code>light</code>、<code>dark</code> 两种主题。</li><li>默认实现对路由的 404、403 处理。</li>",4),b=n("li",null,"支持自定义头部或者侧边栏区域。",-1),f=n("li",null,"菜单支持配置 icon。",-1),_=n("li",null,"菜单标题支持国际化。",-1),x=n("li",null,"可配置页面是否需要 layout。",-1),y=a(`<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-layout"</span><span class="token operator">:</span> <span class="token string">"^5.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="布局类型" tabindex="-1"><a class="header-anchor" href="#布局类型" aria-hidden="true">#</a> 布局类型</h2><p>配置参数是 <code>navigation</code>, 布局有三种类型 <code>side</code>、<code>mixin</code> 、<code>top</code> 和 <code>left-right</code>, 默认是 <code>side</code>。</p><h3 id="side" tabindex="-1"><a class="header-anchor" href="#side" aria-hidden="true">#</a> side</h3>`,6),j=["src"],w=n("h3",{id:"top",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#top","aria-hidden":"true"},"#"),s(" top")],-1),A=["src"],E=n("h3",{id:"mixin",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#mixin","aria-hidden":"true"},"#"),s(" mixin")],-1),B=["src"],F=n("h3",{id:"left-right",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#left-right","aria-hidden":"true"},"#"),s(" left-right")],-1),C=["src"],R=a(`<h3 id="页面个性化" tabindex="-1"><a class="header-anchor" href="#页面个性化" aria-hidden="true">#</a> 页面个性化</h3><p>可以为页面单独设置布局类型:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMete <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">navigation</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当设置为 <code>null</code> 时,页面不使用布局。</p><h2 id="页面缓存" tabindex="-1"><a class="header-anchor" href="#页面缓存" aria-hidden="true">#</a> 页面缓存</h2>`,5),q=a(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMete <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token string-property property">'keep-alive'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="处理嵌套路由" tabindex="-1"><a class="header-anchor" href="#处理嵌套路由" aria-hidden="true">#</a> 处理嵌套路由</h3><p>Fes.js 里约定目录下有 <code>layout.vue</code> 时会生成嵌套路由,以 <code>layout.vue</code> 为该目录的公共父组件,layout.vue 中必须实现 <code><RouterView/></code>。如果嵌套路由下的页面设置了 <code>keep-alive</code>,则需要用 <code><Page/></code> 替换 <code><RouterView/></code>,<code><Page/></code>实现了页面缓存。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Page</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Page</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> Page <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> + Page<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h4 id="编译时配置方式" tabindex="-1"><a class="header-anchor" href="#编译时配置方式" aria-hidden="true">#</a> 编译时配置方式</h4><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token comment">// 标题</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Fes.js"</span><span class="token punctuation">,</span> + <span class="token comment">// 底部文字</span> + <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token string">'Created by MumbleFE'</span><span class="token punctuation">,</span> + <span class="token comment">// 主题light</span> + <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token string">'dark'</span><span class="token punctuation">,</span> + <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'simpleList'</span> + <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + + <span class="token punctuation">}</span><span class="token punctuation">,</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="运行时配置方式" tabindex="-1"><a class="header-anchor" href="#运行时配置方式" aria-hidden="true">#</a> 运行时配置方式</h4><p>在 <code>app.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> UserCenter <span class="token keyword">from</span> <span class="token string">'@/components/UserCenter'</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token function-variable function">renderCustom</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span>UserCenter <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> + <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在<code>fes.js</code>中,运行时配置有定义对象和函数两种方式,当使用函数配置<code>layout</code>时,<code>layoutConfig</code>是编译时配置结果,<code>initialState</code>是 <code>beforeRender.action</code>执行后创建的应用初始状态数据。<br> 。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">layout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">layoutConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span> initialState <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token function-variable function">renderCustom</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span>UserCenter <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> + <span class="token function-variable function">menus</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> menusRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span>layoutConfig<span class="token punctuation">.</span>menus<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">watch</span><span class="token punctuation">(</span> + <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> initialState<span class="token punctuation">.</span>userName<span class="token punctuation">,</span> + <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + menusRef<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> menusRef<span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最终配置结果是运行时配置跟编译时配置合并的结果,运行时配置优先于编译时配置。</p><p>实际上运行配置能做的事情更多,推荐用运行时配置方式。</p><h3 id="footer" tabindex="-1"><a class="header-anchor" href="#footer" aria-hidden="true">#</a> footer</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:页面底部的文字。</p></li></ul><h3 id="theme" tabindex="-1"><a class="header-anchor" href="#theme" aria-hidden="true">#</a> theme</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>dark</code></p></li><li><p><strong>详情</strong>:主题,可选有 <code>dark</code>、<code>light</code></p></li></ul><h3 id="navigation" tabindex="-1"><a class="header-anchor" href="#navigation" aria-hidden="true">#</a> navigation</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>side</code></p></li><li><p><strong>详情</strong>:页面布局类型,可选有 <code>side</code>、 <code>top</code>、 <code>mixin</code></p></li></ul><h3 id="isfixedheader" tabindex="-1"><a class="header-anchor" href="#isfixedheader" aria-hidden="true">#</a> isFixedHeader</h3><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:是否固定头部,不跟随页面滚动。</p></li></ul><h3 id="isfixedsidebar" tabindex="-1"><a class="header-anchor" href="#isfixedsidebar" aria-hidden="true">#</a> isFixedSidebar</h3><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:是否固定 sidebar,不跟随页面滚动。</p></li></ul><h3 id="title" tabindex="-1"><a class="header-anchor" href="#title" aria-hidden="true">#</a> title</h3>`,26),S=n("li",null,[n("p",null,[n("strong",null,"类型"),s(":"),n("code",null,"String")])],-1),T=n("strong",null,"默认值",-1),H=n("li",null,[n("p",null,[n("strong",null,"详情"),s(":产品名。")])],-1),I=a('<h3 id="logo" tabindex="-1"><a class="header-anchor" href="#logo" aria-hidden="true">#</a> logo</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:默认提供 <code>fes.js</code> 的 Logo</p></li><li><p><strong>详情</strong>:Logo 的链接</p></li></ul><h3 id="multitabs" tabindex="-1"><a class="header-anchor" href="#multitabs" aria-hidden="true">#</a> multiTabs</h3><ul><li><p><strong>类型</strong>:<code>boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:是否开启多页。</p></li></ul><h3 id="menus" tabindex="-1"><a class="header-anchor" href="#menus" aria-hidden="true">#</a> menus</h3>',5),P=n("li",null,[n("p",null,[n("strong",null,"类型"),s(":"),n("code",null,"[] | () => Ref<[]> | () => []")])],-1),N=n("li",null,[n("p",null,[n("strong",null,"默认值"),s(":"),n("code",null,"[]")])],-1),V=n("p",null,[n("strong",null,"详情"),s(":菜单配置")],-1),L=n("p",null,"子项具体配置如下:",-1),$=n("strong",null,"name",-1),M=n("code",null,"name",-1),U=n("code",null,"name",-1),z=n("code",null,"title",-1),D=n("code",null,"path",-1),K=a(`<li><p><strong>path</strong>:菜单的路径,可配置第三方地址。</p></li><li><p><strong>match (v4.0.0+)</strong>:额外匹配的路径,当前路由命中匹配规则时,此菜单高亮。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>{ + path: '/product', + match: ['/product/*', '/product/create'] +} +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>`,2),O=n("p",null,[n("strong",null,"title"),s(":菜单的标题。")],-1),W=n("code",null,"title",-1),G=n("code",null,"$",-1),J=n("code",null,"$",-1),Q=n("li",null,[n("p",null,[s("title支持配置函数,对应 Fes Design 中 Menu 组件的"),n("code",null,"label"),s("插槽。仅在运行时配置中支持。")])],-1),X=n("p",null,[n("strong",null,"icon"),s(": 菜单的图标,只一级标题展示图标。")],-1),Y={href:"https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html",target:"_blank",rel:"noopener noreferrer"},Z=a(`<li><p>图标使用本地或者远程 svg 图片。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> + <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'/wine-outline.svg'</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li>`,1),nn=n("li",null,[n("p",null,[n("strong",null,"children"),s(":子菜单配置。")])],-1),sn=a('<div class="custom-container tip"><p class="custom-container-title">提示</p><p>函数类型仅在运行时可用,可以实现动态变更菜单。</p></div><h3 id="menuprops" tabindex="-1"><a class="header-anchor" href="#menuprops" aria-hidden="true">#</a> menuProps</h3><ul><li><p><strong>类型</strong>:<code>Object</code></p></li><li><p><strong>默认值</strong>:<code>{}</code></p></li><li><p><strong>详情</strong>:菜单的配置:</p><ul><li><p><strong>defaultExpandAll</strong>:是否默认展开全部菜单。</p></li><li><p><strong>expandedKeys</strong>:配置默认展开的菜单,需要传子项是菜单路径的数组。</p></li><li><p><strong>accordion</strong>:是否只保持一个子菜单的展开。</p></li></ul></li></ul><h3 id="sidewidth" tabindex="-1"><a class="header-anchor" href="#sidewidth" aria-hidden="true">#</a> sideWidth</h3><ul><li><p><strong>类型</strong>:<code>Number</code></p></li><li><p><strong>默认值</strong>:<code>200</code></p></li><li><p><strong>详情</strong>:sidebar 的宽度</p></li></ul><h3 id="rendercustom" tabindex="-1"><a class="header-anchor" href="#rendercustom" aria-hidden="true">#</a> renderCustom</h3><ul><li><p><strong>类型</strong>: <code>()=> VNodes</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>: 自定义区域内容,仅运行时。</p></li></ul><h3 id="unaccesshandler" tabindex="-1"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3>',8),an=a("<li><p><strong>类型</strong>:<code>({ to, from, next})=> void</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:仅运行时,当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 <code>unAccessHandler</code> 函数。</p></li>",3),en=n("p",null,[n("strong",null,"参数")],-1),tn=n("li",null,"router:createRouter 创建的路由实例",-1),on=n("li",null,"to: 准备进入的路由",-1),pn=n("li",null,"from:离开的路由",-1),ln={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"},cn=a(`<p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> to<span class="token punctuation">,</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/404'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/403'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3>`,3),un=a("<li><p><strong>类型</strong>:<code>({ to, from, next})=> void</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:仅运行时,当进入某个路由时,如果路由对应的页面不存在,则会调用 <code>noFoundHandler</code> 函数。</p></li>",3),rn=n("p",null,[n("strong",null,"参数")],-1),dn=n("li",null,"router:createRouter 创建的路由实例",-1),kn=n("li",null,"to: 准备进入的路由",-1),vn=n("li",null,"from:离开的路由",-1),gn={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"},hn=a(`<p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="usetabtitle" tabindex="-1"><a class="header-anchor" href="#usetabtitle" aria-hidden="true">#</a> useTabTitle</h3><p>类型定义如下:</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">useTabTitle</span><span class="token punctuation">(</span>title<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> Ref<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>当使用多页签模式时,在页面中使用 <code>useTabTitle</code> 可以自定义页面标签:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> useRoute<span class="token punctuation">,</span> useTabTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">const</span> titleRef <span class="token operator">=</span> <span class="token function">useTabTitle</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">详情-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>route<span class="token punctuation">.</span>params<span class="token operator">?.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">//如果要更新</span> +titleRef<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"changed"</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-x-升级到-5-x" tabindex="-1"><a class="header-anchor" href="#_4-x-升级到-5-x" aria-hidden="true">#</a> 4.x 升级到 5.x</h2><ol><li>个性化 layout 配置改为使用传入 navigation</li><li>customHeader 改为 renderCustom</li><li>fixedHeader 改为 isFixedHeader</li><li>menusConfig 改为 menuProps</li><li>fixedSideBar 改为 isFixedSidebar</li><li>去掉运行时 logo、header、sidebar 三个区域显示配置,请改为使用 navigation: left-right</li></ol>`,10);function mn(p,bn){const t=c("RouterLink"),i=c("ExternalLinkIcon");return r(),d("div",null,[v,g,h,n("ul",null,[m,n("li",null,[s("搭配 "),e(t,{to:"/reference/plugin/plugins/access.html"},{default:o(()=>[s("@fesjs/plugin-access")]),_:1}),s(" 插件使用,可以完成对路由的权限控制。")]),n("li",null,[s("搭配 "),e(t,{to:"/reference/plugin/plugins/locale.html"},{default:o(()=>[s("@fesjs/plugin-locale")]),_:1}),s(" 插件使用,提供切换语言的能力。")]),b,f,_,x]),y,l("  "),n("img",{src:p.$withBase("side.png"),alt:"side"},null,8,j),w,l("  "),n("img",{src:p.$withBase("top.png"),alt:"top"},null,8,A),E,l("  "),n("img",{src:p.$withBase("mixin.png"),alt:"mixin"},null,8,B),F,l("  "),n("img",{src:p.$withBase("left-right.png"),alt:"left-right"},null,8,C),R,n("p",null,[s("支持配置页面缓存,通过"),e(t,{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:o(()=>[s("定义路由元信息")]),_:1}),s("开启缓存:")]),q,n("ul",null,[S,n("li",null,[n("p",null,[T,s(":默认为 "),e(t,{to:"/reference/config/#title"},{default:o(()=>[s("编译时配置 title")]),_:1})])]),H]),I,n("ul",null,[P,N,n("li",null,[V,L,n("ul",null,[n("li",null,[n("p",null,[$,s(":菜单的名称。通过匹配 "),M,s(" 和路由元信息 "),e(t,{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:o(()=>[s("meta")]),_:1}),s(" 中的 "),U,s(",把菜单和路由关联起来,\b 然后使用路由元信息补充菜单配置,比如 "),z,s("、"),D,s(" \b 等。")])]),K,n("li",null,[O,n("ul",null,[n("li",null,[n("p",null,[s("如果同时使用"),e(t,{to:"/reference/plugin/plugins/locale.html"},{default:o(()=>[s("国际化插件")]),_:1}),s(",而且"),W,s("的值以"),G,s("开头,则使用"),J,s("后面的内容去匹配语言设置。")])]),Q])]),n("li",null,[X,n("ul",null,[n("li",null,[n("p",null,[s("图标使用"),n("a",Y,[s("fes-design icon"),e(i)]),s(",编译时配置使用组件名称,我们会自动引入组件。")])]),Z])]),nn])])]),sn,n("ul",null,[an,n("li",null,[en,n("ul",null,[tn,on,pn,n("li",null,[s("next: "),n("a",ln,[s("next 函数"),e(i)])])])])]),cn,n("ul",null,[un,n("li",null,[rn,n("ul",null,[dn,kn,vn,n("li",null,[s("next: "),n("a",gn,[s("next 函数"),e(i)])])])])]),hn])}const _n=u(k,[["render",mn],["__file","layout.html.vue"]]);export{_n as default}; diff --git a/assets/layout.html.737f0d05.js b/assets/layout.html.737f0d05.js new file mode 100644 index 00000000..03842b07 --- /dev/null +++ b/assets/layout.html.737f0d05.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-355ee23e","path":"/reference/plugin/plugins/layout.html","title":"@fesjs/plugin-layout","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"布局类型","slug":"布局类型","link":"#布局类型","children":[{"level":3,"title":"side","slug":"side","link":"#side","children":[]},{"level":3,"title":"top","slug":"top","link":"#top","children":[]},{"level":3,"title":"mixin","slug":"mixin","link":"#mixin","children":[]},{"level":3,"title":"left-right","slug":"left-right","link":"#left-right","children":[]},{"level":3,"title":"页面个性化","slug":"页面个性化","link":"#页面个性化","children":[]}]},{"level":2,"title":"页面缓存","slug":"页面缓存","link":"#页面缓存","children":[{"level":3,"title":"处理嵌套路由","slug":"处理嵌套路由","link":"#处理嵌套路由","children":[]}]},{"level":2,"title":"配置","slug":"配置","link":"#配置","children":[{"level":3,"title":"footer","slug":"footer","link":"#footer","children":[]},{"level":3,"title":"theme","slug":"theme","link":"#theme","children":[]},{"level":3,"title":"navigation","slug":"navigation","link":"#navigation","children":[]},{"level":3,"title":"isFixedHeader","slug":"isfixedheader","link":"#isfixedheader","children":[]},{"level":3,"title":"isFixedSidebar","slug":"isfixedsidebar","link":"#isfixedsidebar","children":[]},{"level":3,"title":"title","slug":"title","link":"#title","children":[]},{"level":3,"title":"logo","slug":"logo","link":"#logo","children":[]},{"level":3,"title":"multiTabs","slug":"multitabs","link":"#multitabs","children":[]},{"level":3,"title":"menus","slug":"menus","link":"#menus","children":[]},{"level":3,"title":"menuProps","slug":"menuprops","link":"#menuprops","children":[]},{"level":3,"title":"sideWidth","slug":"sidewidth","link":"#sidewidth","children":[]},{"level":3,"title":"renderCustom","slug":"rendercustom","link":"#rendercustom","children":[]},{"level":3,"title":"unAccessHandler","slug":"unaccesshandler","link":"#unaccesshandler","children":[]},{"level":3,"title":"noFoundHandler","slug":"nofoundhandler","link":"#nofoundhandler","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"useTabTitle","slug":"usetabtitle","link":"#usetabtitle","children":[]}]},{"level":2,"title":"4.x 升级到 5.x","slug":"_4-x-升级到-5-x","link":"#_4-x-升级到-5-x","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/layout.md"}');export{e as data}; diff --git a/assets/locale.html.669c5454.js b/assets/locale.html.669c5454.js new file mode 100644 index 00000000..e762ba1e --- /dev/null +++ b/assets/locale.html.669c5454.js @@ -0,0 +1,76 @@ +import{_ as o,r as p,o as l,c,b as s,d as n,a as e,f as t}from"./app.bd9c95b7.js";const i={},r=s("h1",{id:"fesjs-plugin-locale",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#fesjs-plugin-locale","aria-hidden":"true"},"#"),n(" @fesjs/plugin-locale")],-1),u=s("h2",{id:"介绍",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),n(" 介绍")],-1),d={href:"https://github.com/intlify/vue-i18n-next",target:"_blank",rel:"noopener noreferrer"},k=t(`<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-locale"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="约定式配置" tabindex="-1"><a class="header-anchor" href="#约定式配置" aria-hidden="true">#</a> 约定式配置</h3><p>Fes.js 约定如下目录,项目就拥有了 <code>zh-CN</code> 与 <code>en-US</code> 国际化语言切换:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>src + ├── locales + │ ├── zh-CN.js + │ └── en-US.js + └── pages + │ └── index.vue + └── app.js +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>多语言文件的命名规范:<code><lang>-<COUNTRY>.js</code></p><p>多语言文件的内容规范:键值组成的字面量,如下:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// src/locales/zh-CN.js</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">menu</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">'接口'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">overview</span><span class="token operator">:</span> <span class="token string">'概述'</span><span class="token punctuation">,</span> + <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">internationalization</span><span class="token operator">:</span> <span class="token string">'国际化,基于'</span><span class="token punctuation">,</span> + <span class="token literal-property property">achieve</span><span class="token operator">:</span> <span class="token string">'实现。'</span><span class="token punctuation">,</span> + <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token string">'UI组件'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// src/locales/en-US.js</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">menu</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">'interface'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">overview</span><span class="token operator">:</span> <span class="token string">'Overview'</span><span class="token punctuation">,</span> + <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">internationalization</span><span class="token operator">:</span> <span class="token string">'internationalization,base on'</span><span class="token punctuation">,</span> + <span class="token literal-property property">achieve</span><span class="token operator">:</span> <span class="token string">'to achieve.'</span><span class="token punctuation">,</span> + <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token string">'UI components'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,11),v={href:"https://vue-i18n.intlify.dev/guide/essentials/syntax.html",target:"_blank",rel:"noopener noreferrer"},g=t(`<h3 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h3><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>默认配置为:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'zh-CN'</span><span class="token punctuation">,</span> <span class="token comment">// default locale</span> + <span class="token literal-property property">fallbackLocale</span><span class="token operator">:</span> <span class="token string">'zh-CN'</span><span class="token punctuation">,</span> <span class="token comment">// set fallback locale</span> + <span class="token literal-property property">baseNavigator</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启浏览器语言检测</span> + <span class="token literal-property property">legacy</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 用户是否需要 Legacy API 模式</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>所有配置项如下:</p><h4 id="locale" tabindex="-1"><a class="header-anchor" href="#locale" aria-hidden="true">#</a> locale</h4><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>zh-CN</code></p></li><li><p><strong>详情</strong>:当前的语言。</p></li></ul><h4 id="fallbacklocale" tabindex="-1"><a class="header-anchor" href="#fallbacklocale" aria-hidden="true">#</a> fallbackLocale</h4><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>zh-CN</code></p></li><li><p><strong>详情</strong>:兜底的语言,如果当前语言找不到配置,则使用默认语言,需要保证默认语言配置文件存在。</p></li></ul><h4 id="basenavigator" tabindex="-1"><a class="header-anchor" href="#basenavigator" aria-hidden="true">#</a> baseNavigator</h4><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:开启浏览器语言检测。</p></li></ul><p>默认情况下,当前语言环境的识别按照:<code>localStorage</code> 中 <code>fes_locale</code> 值 > 浏览器检测 > <code>default</code> 设置的默认语言 > <code>zh-CN</code> 中文。</p><h4 id="legacy" tabindex="-1"><a class="header-anchor" href="#legacy" aria-hidden="true">#</a> legacy</h4><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:用户是否需要 Legacy API 模式</p></li></ul><h3 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h3><p>暂无。</p><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="locale-1" tabindex="-1"><a class="header-anchor" href="#locale-1" aria-hidden="true">#</a> locale</h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="locale-messages" tabindex="-1"><a class="header-anchor" href="#locale-messages" aria-hidden="true">#</a> locale.messages</h4><ul><li><strong>类型</strong>:<code>Object</code></li><li><strong>详情</strong>:当前的配置的语言信息。</li></ul><h4 id="locale-setlocale" tabindex="-1"><a class="header-anchor" href="#locale-setlocale" aria-hidden="true">#</a> locale.setLocale</h4><ul><li><strong>类型</strong>:<code>Function</code></li><li><strong>详情</strong>:设置当前的语言。</li><li><strong>参数</strong>: <ul><li>locale,语言的名称,应该是符合 <code><lang>-<COUNTRY></code> 规范的名称。</li></ul></li><li><strong>返回值</strong>:<code>null</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +locale<span class="token punctuation">.</span><span class="token function">setLocale</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="locale-addlocale" tabindex="-1"><a class="header-anchor" href="#locale-addlocale" aria-hidden="true">#</a> locale.addLocale</h4><ul><li><strong>类型</strong>:<code>Function</code></li><li><strong>详情</strong>:手动添加语言配置。</li><li><strong>参数</strong>: <ul><li>locale,语言的名称,符合 <code><lang>-<COUNTRY></code> 规范的名称。</li><li>messages, 语言信息。</li></ul></li><li><strong>返回值</strong>:<code>null</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +locale<span class="token punctuation">.</span><span class="token function">addLocale</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'ja-JP'</span><span class="token punctuation">,</span> <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token string">'テスト'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="locale-getalllocales" tabindex="-1"><a class="header-anchor" href="#locale-getalllocales" aria-hidden="true">#</a> locale.getAllLocales</h4><ul><li><strong>类型</strong>:<code>Function</code></li><li><strong>详情</strong>:获取当前获得所有国际化文件的列表,默认会在 locales 文件夹下寻找类似 <code>en-US.js</code> 文件。</li><li><strong>参数</strong>:null</li><li><strong>返回值</strong>:<code>Array</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>locale<span class="token punctuation">.</span><span class="token function">getAllLocales</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token comment">// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="usei18n" tabindex="-1"><a class="header-anchor" href="#usei18n" aria-hidden="true">#</a> useI18n</h3>`,33),m=s("code",null,"setup",-1),h={href:"https://vue-i18n.intlify.dev/api/composition.html#usei18n",target:"_blank",rel:"noopener noreferrer"},b=t(`<div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>{{ t('language') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>message: {{ t('hello') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span> + <span class="token comment">// Something to do ...</span> + + <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span><span class="token punctuation">,</span> t <span class="token punctuation">}</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1),f=s("code",null,"useI18n()",-1),y={href:"https://vue-i18n.intlify.dev/api/composition.html#composer",target:"_blank",rel:"noopener noreferrer"},j=s("code",null,"t",-1),_=s("code",null,"n",-1),x=s("code",null,"d",-1);function w(q,N){const a=p("ExternalLinkIcon");return l(),c("div",null,[r,u,s("p",null,[n("国际化插件,基于 "),s("a",d,[n("Vue I18n"),e(a)]),n(",用于解决 i18n 问题。")]),k,s("p",null,[n("想了解更多语言信息配置、匹配规则,请参考 "),s("a",v,[n("Vue I18n"),e(a)]),n(" 文档。")]),g,s("p",null,[n("Composition API, 只能在 "),m,n(" 函数中使用,更多细节参考 "),s("a",h,[n("Vue I18n"),e(a)]),n("。 \b 举个 🌰:")]),b,s("p",null,[f,n("返回结果是 "),s("a",y,[n("Composer"),e(a)]),n(",提供类似 "),j,n("、"),_,n("、"),x,n(" 等转换函数,在模板中使用。")])])}const C=o(i,[["render",w],["__file","locale.html.vue"]]);export{C as default}; diff --git a/assets/locale.html.a0788058.js b/assets/locale.html.a0788058.js new file mode 100644 index 00000000..124f4036 --- /dev/null +++ b/assets/locale.html.a0788058.js @@ -0,0 +1 @@ +const l=JSON.parse('{"key":"v-411c0c9e","path":"/reference/plugin/plugins/locale.html","title":"@fesjs/plugin-locale","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"配置","slug":"配置","link":"#配置","children":[{"level":3,"title":"约定式配置","slug":"约定式配置","link":"#约定式配置","children":[]},{"level":3,"title":"编译时配置","slug":"编译时配置","link":"#编译时配置","children":[]},{"level":3,"title":"运行时配置","slug":"运行时配置","link":"#运行时配置","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"locale","slug":"locale-1","link":"#locale-1","children":[]},{"level":3,"title":"useI18n","slug":"usei18n","link":"#usei18n","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/locale.md"}');export{l as data}; diff --git a/assets/login.html.3b52bc00.js b/assets/login.html.3b52bc00.js new file mode 100644 index 00000000..bff52bad --- /dev/null +++ b/assets/login.html.3b52bc00.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-56ab05de","path":"/reference/plugin/plugins/login.html","title":"@fesjs/plugin-login","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"运行时配置","slug":"运行时配置","link":"#运行时配置","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/login.md"}');export{e as data}; diff --git a/assets/login.html.5cb3e152.js b/assets/login.html.5cb3e152.js new file mode 100644 index 00000000..a49fa0c4 --- /dev/null +++ b/assets/login.html.5cb3e152.js @@ -0,0 +1,18 @@ +import{_ as n,o as s,c as a,f as e}from"./app.bd9c95b7.js";const t={},o=e(`<h1 id="fesjs-plugin-login" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-login" aria-hidden="true">#</a> @fesjs/plugin-login</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>管理自定义 login 页面,包括 login 页面权限问题,跳转登陆问题。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-login"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRuntimeConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineRuntimeConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">login</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">loginPath</span><span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token comment">// 登陆页面路径,默认 /login,也可以用路由的 name</span> + <span class="token function">hasLogin</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 进入页面前判断是否登陆的逻辑,每次跳转非登陆页面都会检测,直到为 true,支持异步</span> + <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,8),p=[o];function i(c,l){return s(),a("div",null,p)}const u=n(t,[["render",i],["__file","login.html.vue"]]);export{u as default}; diff --git a/assets/mock.html.561d68eb.js b/assets/mock.html.561d68eb.js new file mode 100644 index 00000000..e7699a7f --- /dev/null +++ b/assets/mock.html.561d68eb.js @@ -0,0 +1 @@ +const l=JSON.parse('{"key":"v-00cf7e23","path":"/guide/mock.html","title":"Mock 数据","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"约定式 Mock 文件","slug":"约定式-mock-文件","link":"#约定式-mock-文件","children":[]},{"level":2,"title":"编写 Mock 文件","slug":"编写-mock-文件","link":"#编写-mock-文件","children":[{"level":3,"title":"cgiMock 参数","slug":"cgimock-参数","link":"#cgimock-参数","children":[]},{"level":3,"title":"mockjs 参数","slug":"mockjs-参数","link":"#mockjs-参数","children":[]},{"level":3,"title":"utils 参数","slug":"utils-参数","link":"#utils-参数","children":[]}]},{"level":2,"title":"配置 Mock","slug":"配置-mock","link":"#配置-mock","children":[]},{"level":2,"title":"关闭 Mock","slug":"关闭-mock","link":"#关闭-mock","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/mock.md"}');export{l as data}; diff --git a/assets/mock.html.ab147021.js b/assets/mock.html.ab147021.js new file mode 100644 index 00000000..e6aba5a5 --- /dev/null +++ b/assets/mock.html.ab147021.js @@ -0,0 +1,160 @@ +import{_ as c,r as p,o as i,c as l,b as s,d as n,a as t,w as u,f as a}from"./app.bd9c95b7.js";const r={},k=a(`<h1 id="mock-数据" tabindex="-1"><a class="header-anchor" href="#mock-数据" aria-hidden="true">#</a> Mock 数据</h1><p>Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。</p><h2 id="约定式-mock-文件" tabindex="-1"><a class="header-anchor" href="#约定式-mock-文件" aria-hidden="true">#</a> 约定式 Mock 文件</h2><p>Fes.js 约定 <code>./mock.js</code> 为 mock 文件。</p><p>比如:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>. +├── mock.js +└── src + └── pages + └── index.vue +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编写-mock-文件" tabindex="-1"><a class="header-anchor" href="#编写-mock-文件" aria-hidden="true">#</a> 编写 Mock 文件</h2><p>可以参考如下 🌰:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cgiMock<span class="token punctuation">,</span> mockjs<span class="token punctuation">,</span> utils <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> Random <span class="token punctuation">}</span> <span class="token operator">=</span> mockjs<span class="token punctuation">;</span> + + <span class="token comment">// 测试 proxy 与 mock 用例集合</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/movie/in_theaters_mock'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span> + <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'movie: movie/in_theaters_mock ~~~~~'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/movie/test_mock'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span> + <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'mock: movie/test_mock'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// 测试用例: mock.js change,重现请求,需要能拉最新的数据</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/watchtest'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span> + <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'通过 register 测试 mock watch: 初始状态'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// 返回一个数字</span> + <span class="token comment">// cgiMock('/number', 666);</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/number'</span><span class="token punctuation">,</span> <span class="token number">999</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// 返回一个json</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/json'</span><span class="token punctuation">,</span> + <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'400101'</span><span class="token punctuation">,</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">"不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String"</span><span class="token punctuation">,</span> + <span class="token literal-property property">transactionTime</span><span class="token operator">:</span> <span class="token string">'20170309171146'</span><span class="token punctuation">,</span> + <span class="token literal-property property">success</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// 利用 mock.js 产生随机文本</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/text'</span><span class="token punctuation">,</span> Random<span class="token punctuation">.</span><span class="token function">cparagraph</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// 返回一个字符串 利用 mock.js 产生随机字符</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span> + <span class="token string">'/random'</span><span class="token punctuation">,</span> + mockjs<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token string-property property">'string|1-10'</span><span class="token operator">:</span> <span class="token string">'★'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// 正则匹配url, 返回一个字符串</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\/abc|\\/xyz</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">'regexp test!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\/function$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'function test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// 返回文本 readFileSync</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/file'</span><span class="token punctuation">,</span> utils<span class="token punctuation">.</span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string">'./package.json'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// 更复杂的规则配置</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\\/who</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> + <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span> + <span class="token function">result</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'kwan'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">kwan</span><span class="token operator">:</span> <span class="token string">'孤独患者'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'Nooooooooooo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'text/plain'</span><span class="token punctuation">,</span> + <span class="token string-property property">'Content-Length'</span><span class="token operator">:</span> <span class="token string">'123'</span><span class="token punctuation">,</span> + <span class="token literal-property property">ETag</span><span class="token operator">:</span> <span class="token string">'12345'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">cookies</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'myname'</span><span class="token punctuation">,</span> + <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'kwan'</span><span class="token punctuation">,</span> + <span class="token literal-property property">maxAge</span><span class="token operator">:</span> <span class="token number">900000</span><span class="token punctuation">,</span> + <span class="token literal-property property">httpOnly</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// 携带参数的请求</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/v2/audit/list'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> currentPage<span class="token punctuation">,</span> pageSize<span class="token punctuation">,</span> isAudited <span class="token punctuation">}</span> <span class="token operator">=</span> req<span class="token punctuation">.</span>body<span class="token punctuation">;</span> + res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> + currentPage<span class="token punctuation">,</span> + pageSize<span class="token punctuation">,</span> + <span class="token literal-property property">totalPage</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> + <span class="token literal-property property">totalCount</span><span class="token operator">:</span> <span class="token number">12</span><span class="token punctuation">,</span> + <span class="token literal-property property">pageData</span><span class="token operator">:</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">length</span><span class="token operator">:</span> pageSize <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">authorName</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">cname</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">authorId</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">createTime</span><span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">updateTime</span><span class="token operator">:</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">readCount</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">favoriteCount</span><span class="token operator">:</span> Random<span class="token punctuation">.</span><span class="token function">integer</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">postId</span><span class="token operator">:</span> <span class="token string">'12323'</span><span class="token punctuation">,</span> + <span class="token literal-property property">serviceTag</span><span class="token operator">:</span> <span class="token string">'业务类型'</span><span class="token punctuation">,</span> + <span class="token literal-property property">productTag</span><span class="token operator">:</span> <span class="token string">'产品类型'</span><span class="token punctuation">,</span> + <span class="token literal-property property">requestTag</span><span class="token operator">:</span> <span class="token string">'需求类型'</span><span class="token punctuation">,</span> + <span class="token literal-property property">handleTag</span><span class="token operator">:</span> <span class="token string">'已采纳'</span><span class="token punctuation">,</span> + <span class="token literal-property property">postType</span><span class="token operator">:</span> <span class="token string">'voice'</span><span class="token punctuation">,</span> + <span class="token literal-property property">postStatus</span><span class="token operator">:</span> isAudited <span class="token operator">?</span> <span class="token string">'pass'</span> <span class="token operator">:</span> <span class="token string">'auditing'</span><span class="token punctuation">,</span> + <span class="token literal-property property">auditStatus</span><span class="token operator">:</span> <span class="token string">'audit1'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// multipart/form-data 类型</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/v2/upload'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'文件上传成功'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="cgimock-参数" tabindex="-1"><a class="header-anchor" href="#cgimock-参数" aria-hidden="true">#</a> cgiMock 参数</h3><p>创建一个 mock 接口,参数非常灵活,参考上面的 demo 即可。</p><h3 id="mockjs-参数" tabindex="-1"><a class="header-anchor" href="#mockjs-参数" aria-hidden="true">#</a> mockjs 参数</h3>`,12),d={href:"http://mockjs.com/",target:"_blank",rel:"noopener noreferrer"},v=a(`<p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cgiMock<span class="token punctuation">,</span> mockjs<span class="token punctuation">,</span> utils <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span> + <span class="token string">'/random'</span><span class="token punctuation">,</span> + mockjs<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token string-property property">'string|1-10'</span><span class="token operator">:</span> <span class="token string">'★'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="utils-参数" tabindex="-1"><a class="header-anchor" href="#utils-参数" aria-hidden="true">#</a> utils 参数</h3><p>工具函数:</p><ul><li>utils.file(path),从项目根目录根据 path 寻找文件,返回文件流。</li></ul><h2 id="配置-mock" tabindex="-1"><a class="header-anchor" href="#配置-mock" aria-hidden="true">#</a> 配置 Mock</h2>`,6),m=a(`<h2 id="关闭-mock" tabindex="-1"><a class="header-anchor" href="#关闭-mock" aria-hidden="true">#</a> 关闭 Mock</h2><p>可以通过配置关闭。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,3);function b(g,y){const e=p("ExternalLinkIcon"),o=p("RouterLink");return i(),l("div",null,[k,s("p",null,[s("a",d,[n("Mock.js"),t(e)]),n(" 是常用的辅助生成模拟数据的三方库,借助他可以提升我们的 mock 数据能力。")]),v,s("p",null,[n("详见配置 "),t(o,{to:"/reference/config/#mock"},{default:u(()=>[n("mock")]),_:1}),n("。")]),m])}const h=c(r,[["render",b],["__file","mock.html.vue"]]);export{h as default}; diff --git a/assets/model.html.17d86d37.js b/assets/model.html.17d86d37.js new file mode 100644 index 00000000..d91a04e0 --- /dev/null +++ b/assets/model.html.17d86d37.js @@ -0,0 +1,65 @@ +import{_ as n,o as s,c as a,f as t}from"./app.bd9c95b7.js";const e={},p=t(`<h1 id="fesjs-plugin-model" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-model" aria-hidden="true">#</a> @fesjs/plugin-model</h1><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 package.json 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动 UI 更新,提供 <code>reactive</code> 、 <code>ref</code> 等 API 把数据变成响应式的。我们使用<code>Provide / Inject</code>特性,在应用实例中共享响应式数据。</p><p>我们约定<code>src/models</code> 目录下的文件为项目定义的 <code>model</code> 文件。每个文件需要默认导出一个 <code>function</code>。</p><p>文件名则对应最终 <code>model</code> 的 <code>name</code>,你可以通过插件提供的 <code>API</code> 来消费 <code>model</code> 中的数据。</p><h3 id="model-文件" tabindex="-1"><a class="header-anchor" href="#model-文件" aria-hidden="true">#</a> Model 文件</h3><p><strong>src/models/useAuthModel.js</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useAuthModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">const</span> <span class="token function-variable function">signin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// todo</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token keyword">const</span> <span class="token function-variable function">signout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// todo</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token keyword">return</span> <span class="token punctuation">{</span> + user<span class="token punctuation">,</span> + signin<span class="token punctuation">,</span> + signout<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="在组件中使用-model" tabindex="-1"><a class="header-anchor" href="#在组件中使用-model" aria-hidden="true">#</a> 在组件中使用 Model</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> useModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> user<span class="token punctuation">,</span> signin<span class="token punctuation">,</span> signout <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">'useAuthModel'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="initialstate" tabindex="-1"><a class="header-anchor" href="#initialstate" aria-hidden="true">#</a> @@initialState</h3><p>在<code>beforeRender</code>的返回的内容会写入<code>@@initialState</code></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> beforeRender <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token operator"><</span>PageLoading <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> + <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> setRole <span class="token punctuation">}</span> <span class="token operator">=</span> access<span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token comment">// 初始化应用的全局状态,可以通过 useModel('@@initialState') 获取,具体用法看@/components/UserCenter 文件</span> + <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'harrywan'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后我们可以在其他组件中使用:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ initialState.userName }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> useModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> initialState <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">'@@initialState'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + initialState<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scope</span><span class="token punctuation">></span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="usemodel" tabindex="-1"><a class="header-anchor" href="#usemodel" aria-hidden="true">#</a> useModel</h3><p><strong>useModel(name)</strong></p><ul><li><strong>类型</strong>:函数</li><li><strong>详情</strong>: 获取 Model 数据,\b 也就是 Model 文件默认导出函数执行的结果。</li><li><strong>参数</strong>: <ul><li>name,传入 Model 文件名</li></ul></li></ul>`,22),o=[p];function c(i,l){return s(),a("div",null,o)}const d=n(e,[["render",c],["__file","model.html.vue"]]);export{d as default}; diff --git a/assets/model.html.a33983f1.js b/assets/model.html.a33983f1.js new file mode 100644 index 00000000..f78e9961 --- /dev/null +++ b/assets/model.html.a33983f1.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-3c4e521e","path":"/reference/plugin/plugins/model.html","title":"@fesjs/plugin-model","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[{"level":3,"title":"Model 文件","slug":"model-文件","link":"#model-文件","children":[]},{"level":3,"title":"在组件中使用 Model","slug":"在组件中使用-model","link":"#在组件中使用-model","children":[]},{"level":3,"title":"@@initialState","slug":"initialstate","link":"#initialstate","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"useModel","slug":"usemodel","link":"#usemodel","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/model.md"}');export{e as data}; diff --git a/assets/pinia.html.ca207361.js b/assets/pinia.html.ca207361.js new file mode 100644 index 00000000..6d7bd758 --- /dev/null +++ b/assets/pinia.html.ca207361.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-6f2f6a5a","path":"/reference/plugin/plugins/pinia.html","title":"@fesjs/plugin-pinia","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"pinia","slug":"pinia","link":"#pinia","children":[]}]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[{"level":3,"title":"定义 store","slug":"定义-store","link":"#定义-store","children":[]},{"level":3,"title":"setup","slug":"setup","link":"#setup","children":[]},{"level":3,"title":"非 setup","slug":"非-setup","link":"#非-setup","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/pinia.md"}');export{e as data}; diff --git a/assets/pinia.html.eb251b6e.js b/assets/pinia.html.eb251b6e.js new file mode 100644 index 00000000..7fe5f1a9 --- /dev/null +++ b/assets/pinia.html.eb251b6e.js @@ -0,0 +1,48 @@ +import{_ as e,r as t,o as p,c as o,b as n,d as s,a as i,f as c}from"./app.bd9c95b7.js";const l={},r=n("h1",{id:"fesjs-plugin-pinia",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#fesjs-plugin-pinia","aria-hidden":"true"},"#"),s(" @fesjs/plugin-pinia")],-1),u=n("h2",{id:"介绍",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),s(" 介绍")],-1),d={href:"https://pinia.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},k=c(`<p>为了防止 <code>Fes.js</code> 与 <code>pinia</code> 提供的 API 冲突,<code>Fes.js</code>不提供任何 <code>pinia</code> 的 API,相关 API 直接从 <code>pinia</code> 导出:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>约定 <code>plugin</code> 定义放在 <code>stores</code> 目录下,文件名包含 plugin 被解析为插件,无需额外配置,定义即可用。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>└── src + ├── pages + │ └── index.vue + └── stores + │ ├── plugin-logger.js + │ ├── user.js + └── app.js +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-pinia"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"pinia"</span><span class="token operator">:</span> <span class="token string">"^2.0.11"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="pinia" tabindex="-1"><a class="header-anchor" href="#pinia" aria-hidden="true">#</a> pinia</h3><p><code>createPinia</code>执行后创建的实例。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> pinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><h3 id="定义-store" tabindex="-1"><a class="header-anchor" href="#定义-store" aria-hidden="true">#</a> 定义 store</h3><p>我们在 <code>src/store/main.js</code>中:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span> + +<span class="token comment">// useStore could be anything like useUser, useCart</span> +<span class="token comment">// the first argument is a unique id of the store across your application</span> +<span class="token keyword">export</span> <span class="token keyword">const</span> useStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token comment">// other options...</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="setup" tabindex="-1"><a class="header-anchor" href="#setup" aria-hidden="true">#</a> setup</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/store/main'</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="非-setup" tabindex="-1"><a class="header-anchor" href="#非-setup" aria-hidden="true">#</a> 非 setup</h3><p>比如在 app.js 中:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> pinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">const</span> beforeRender <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token operator"><</span>PageLoading <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> + <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> setRole <span class="token punctuation">}</span> <span class="token operator">=</span> accessApi<span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span><span class="token punctuation">;</span> + store<span class="token punctuation">.</span><span class="token function">$patch</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'李雷'</span><span class="token punctuation">,</span> + <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">'admin'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,20);function v(m,b){const a=t("ExternalLinkIcon");return p(),o("div",null,[r,u,n("p",null,[s("集成 "),n("a",d,[s("pinia"),i(a)]),s(" ,提供状态管理的能力,封装一些胶水代码,可以直接定义 store 使用。")]),k])}const g=e(l,[["render",v],["__file","pinia.html.vue"]]);export{g as default}; diff --git a/assets/plugin.html.a5e6ae94.js b/assets/plugin.html.a5e6ae94.js new file mode 100644 index 00000000..e1af2948 --- /dev/null +++ b/assets/plugin.html.a5e6ae94.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-1d14d5cc","path":"/guide/plugin.html","title":"插件","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"插件的 id 和 key","slug":"插件的-id-和-key","link":"#插件的-id-和-key","children":[]},{"level":2,"title":"启动插件","slug":"启动插件","link":"#启动插件","children":[{"level":3,"title":"package.json 依赖","slug":"package-json-依赖","link":"#package-json-依赖","children":[]},{"level":3,"title":"配置","slug":"配置","link":"#配置","children":[]},{"level":3,"title":"环境变量","slug":"环境变量","link":"#环境变量","children":[]}]},{"level":2,"title":"禁用插件","slug":"禁用插件","link":"#禁用插件","children":[]},{"level":2,"title":"配置插件","slug":"配置插件","link":"#配置插件","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/plugin.md"}');export{e as data}; diff --git a/assets/plugin.html.de4f8c7b.js b/assets/plugin.html.de4f8c7b.js new file mode 100644 index 00000000..fa130e77 --- /dev/null +++ b/assets/plugin.html.de4f8c7b.js @@ -0,0 +1,19 @@ +import{_ as s,o as a,c as e,f as n}from"./app.bd9c95b7.js";const o={},p=n(`<h1 id="插件" tabindex="-1"><a class="header-anchor" href="#插件" aria-hidden="true">#</a> 插件</h1><h2 id="插件的-id-和-key" tabindex="-1"><a class="header-anchor" href="#插件的-id-和-key" aria-hidden="true">#</a> 插件的 id 和 key</h2><p>每个插件都会对应一个 <code>id</code> 和一个 <code>key</code>,<strong><code>id</code> 是路径的简写,<code>key</code> 是进一步简化后用于配置的唯一值</strong>。</p><p>比如插件 <code>/node_modules/@fesjs/plugin-foo/index.js</code>,通常来说,其 <code>id</code> 为 <code>@fesjs/plugin-foo</code>,<code>key</code> 为 <code>foo</code>。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>id 一般用不上,对于普通开发者 key 用来配置插件,而插件开发者可以使用 key 判断是否安装某个插件。</p></div><h2 id="启动插件" tabindex="-1"><a class="header-anchor" href="#启动插件" aria-hidden="true">#</a> 启动插件</h2><p>有多种方式引入插件</p><h3 id="package-json-依赖" tabindex="-1"><a class="header-anchor" href="#package-json-依赖" aria-hidden="true">#</a> package.json 依赖</h3><p>Fes.js 会自动检测 <code>dependencies</code> 和 <code>devDependencies</code> 里的 fes 插件,比如:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>那么 <code>@fesjs/plugin-request</code> 会自动被注册,无需在配置里重复声明。</p><h3 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>在配置里可通过 <code>presets</code> 和 <code>plugins</code> 配置插件,比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'./preset'</span><span class="token punctuation">,</span> <span class="token string">'foo/presets'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'./plugin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>通常用于几种情况:</p><ol><li>项目相对路径的插件</li><li>非 npm 包入口文件的插件</li></ol><div class="custom-container warning"><p class="custom-container-title">注意</p><p>请不要配置 npm 包的插件,否则会报重复注册的错误</p></div><h3 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量" aria-hidden="true">#</a> 环境变量</h3><p>还可通过环境变量 <code>FES_PRESETS</code> 和 <code>FES_PLUGINS</code> 注册额外插件。</p><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">FES_PRESETS</span><span class="token operator">=</span>/a/b/preset.js fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="禁用插件" tabindex="-1"><a class="header-anchor" href="#禁用插件" aria-hidden="true">#</a> 禁用插件</h2><p>通过配置插件的 <code>key</code> 为 <code>false</code>,比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Mock 插件的 <code>key</code> 是 <code>mock</code>,我们在配置文件中配置 <code>mock</code> 为 <code>false</code>,则会禁用 Mock 插件及其功能。</p><h2 id="配置插件" tabindex="-1"><a class="header-anchor" href="#配置插件" aria-hidden="true">#</a> 配置插件</h2><p>通过插件的 <code>key</code> 来配置插件,比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/v2'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这里的 <code>mock</code> 是 Mock 插件 的 key。</p>`,29),c=[p];function t(i,d){return a(),e("div",null,c)}const r=s(o,[["render",t],["__file","plugin.html.vue"]]);export{r as default}; diff --git a/assets/public.html.950ba2eb.js b/assets/public.html.950ba2eb.js new file mode 100644 index 00000000..e2df03f3 --- /dev/null +++ b/assets/public.html.950ba2eb.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-7b96e3a4","path":"/guide/public.html","title":"静态资源","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":3,"title":"在 HTML 模板中使用","slug":"在-html-模板中使用","link":"#在-html-模板中使用","children":[]},{"level":3,"title":"在.vue 和 js 文件中使用","slug":"在-vue-和-js-文件中使用","link":"#在-vue-和-js-文件中使用","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/public.md"}');export{e as data}; diff --git a/assets/public.html.d51b184d.js b/assets/public.html.d51b184d.js new file mode 100644 index 00000000..5587bd77 --- /dev/null +++ b/assets/public.html.d51b184d.js @@ -0,0 +1,14 @@ +import{_ as n,o as a,c as s,f as t}from"./app.bd9c95b7.js";const e={},p=t(`<h1 id="静态资源" tabindex="-1"><a class="header-anchor" href="#静态资源" aria-hidden="true">#</a> 静态资源</h1><p>有些内容不需要经过 <code>webpack</code> 模块化处理,则可以将这些内容放在 <code>public</code> 文件夹,构建后会直接复制到 <code>dist</code> 目录,所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在-html-模板中使用" tabindex="-1"><a class="header-anchor" href="#在-html-模板中使用" aria-hidden="true">#</a> 在 HTML 模板中使用</h3><p>在 <code>index.html</code> 中需要设置:</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="在-vue-和-js-文件中使用" tabindex="-1"><a class="header-anchor" href="#在-vue-和-js-文件中使用" aria-hidden="true">#</a> 在.vue 和 js 文件中使用</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>\`\${publicPath}my-image.png\`<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token literal-property property">publicPath</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,7),c=[p];function o(l,i){return a(),s("div",null,c)}const d=n(e,[["render",o],["__file","public.html.vue"]]);export{d as default}; diff --git a/assets/qiankun.html.03151319.js b/assets/qiankun.html.03151319.js new file mode 100644 index 00000000..6e27e0e1 --- /dev/null +++ b/assets/qiankun.html.03151319.js @@ -0,0 +1,184 @@ +import{_ as c,r as p,o as i,c as l,b as s,d as n,a,w as u,f as e}from"./app.bd9c95b7.js";const r={},d=s("h1",{id:"fesjs-plugin-qiankun",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#fesjs-plugin-qiankun","aria-hidden":"true"},"#"),n(" @fesjs/plugin-qiankun")],-1),k={href:"https://qiankun.umijs.org/",target:"_blank",rel:"noopener noreferrer"},v={href:"https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp",target:"_blank",rel:"noopener noreferrer"},m=e(`<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-qiankun"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>有一种痛叫接手老项目,技术栈老旧,内容多,还要继续维护~</p><p>可能目前迁移、升级老项目最好的解决方案就是微前端。<code>plugin-qiankun</code> 是基于 <code>qiankun</code> 实现的 Fes.js 微前端解决方案。</p><h2 id="主应用配置" tabindex="-1"><a class="header-anchor" href="#主应用配置" aria-hidden="true">#</a> 主应用配置</h2><h3 id="第一步-注册子应用" tabindex="-1"><a class="header-anchor" href="#第一步-注册子应用" aria-hidden="true">#</a> 第一步:注册子应用</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token comment">// 注册子应用信息</span> + <span class="token literal-property property">apps</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'app1'</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span> + <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'//localhost:8001'</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span> + <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 传递给子应用的数据</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'app2'</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span> + <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'//localhost:8002'</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当使用 <code>vite</code> 构建时需注意,<strong>name</strong> 必须跟子应用 <code>package.json</code>的 <code>name</code>保持一致。</p><h3 id="第二步-装载子应用" tabindex="-1"><a class="header-anchor" href="#第二步-装载子应用" aria-hidden="true">#</a> 第二步:装载子应用</h3><h4 id="使用路由绑定的方式" tabindex="-1"><a class="header-anchor" href="#使用路由绑定的方式" aria-hidden="true">#</a> 使用路由绑定的方式</h4><div class="custom-container warning"><p class="custom-container-title">注意</p><p>主应用和子应用需要自行适配路由路径!!!待完善...</p></div><p>假设我们的系统之前有这样的一些路由:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> + <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/src/.fes/plugin-layout/index.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/onepiece'</span><span class="token punctuation">,</span> + <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/onepiece'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>我们现在想在 <code>/son</code> 加载子应用 <code>app1</code>,只需要增加这样一些配置即可:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> + <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/src/.fes/plugin-layout/index.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/onepiece'</span><span class="token punctuation">,</span> + <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/onepiece'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/son'</span><span class="token punctuation">,</span> + <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'son'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在<code>src/pages</code> 目录新建 <code>son.vue</code>:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span><span class="token punctuation">></span></span> +{ + "name": "son", + "title": "子应用", + "microApp": "app1" +} +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>config</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="使用-microapp-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microapp-组件的方式" aria-hidden="true">#</a> 使用 <code><MicroApp /></code> 组件的方式</h4><div class="custom-container tip"><p class="custom-container-title">提示</p><p>建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上,否则很容易出现子应用加载了,但是页面没有渲染出来的情况。</p></div><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'app1'</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + name<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="使用-microappwithmemohistory-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microappwithmemohistory-组件的方式" aria-hidden="true">#</a> 使用 <code><MicroAppWithMemoHistory /></code> 组件的方式</h4><p>如果我们的路由使用 <code>history</code> 模式,那么在使用乾坤时还算方便,主应用和子应用的路由根据 base 可以很方便的匹配起来,而且不存在冲突。但是当我们使用 <code>hash</code> 模式时,就问题很大,主应用和子应用的路由必须一样才可以匹配上,用起来贼不方便。而且不能在一个页面上同时加载多个子应用,路由存在冲突!这时候,<code><MicroAppWithMemoHistory /></code> 出现了,完美解决上面的问题。</p><p><code><MicroAppWithMemoHistory /></code> 相比 <code><MicroApp /></code> ,需要多传入 <code>url</code> 参数,用于指定加载子应用什么路由页面。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'app1'</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + name<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="子应用配置" tabindex="-1"><a class="header-anchor" href="#子应用配置" aria-hidden="true">#</a> 子应用配置</h2><h3 id="第一步-插件注册" tabindex="-1"><a class="header-anchor" href="#第一步-插件注册" aria-hidden="true">#</a> 第一步:插件注册</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">micro</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果使用 <code>vite</code> 构建,当执行 <code>dev</code> 时需要额外配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">micro</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">useDevMode</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="第二步-配置运行时生命周期钩子-可选" tabindex="-1"><a class="header-anchor" href="#第二步-配置运行时生命周期钩子-可选" aria-hidden="true">#</a> 第二步:配置运行时生命周期钩子(可选)</h3><p>插件会自动为你创建好 <code>qiankun</code> 子应用需要的生命周期钩子,但是如果你想在生命周期期间加一些自定义逻辑,可以在子应用的 <code>src/app.js</code> 里导出 <code>qiankun</code> 对象,并实现每一个生命周期钩子,其中钩子函数的入参 <code>props</code> 由主应用自动注入。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> qiankun <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token comment">// 应用加载之前</span> + <span class="token keyword">async</span> <span class="token function">bootstrap</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 bootstrap'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token comment">// 应用 render 之前触发</span> + <span class="token keyword">async</span> <span class="token function">mount</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 mount'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token comment">// 当 props 更新时触发</span> + <span class="token keyword">async</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 update'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token comment">// 应用卸载之后触发</span> + <span class="token keyword">async</span> <span class="token function">unmount</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 unmount'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="父子应用通讯" tabindex="-1"><a class="header-anchor" href="#父子应用通讯" aria-hidden="true">#</a> 父子应用通讯</h2><p>有两种方式实现</p>`,36),b={id:"配合-usemodel-使用",tabindex:"-1"},g=s("a",{class:"header-anchor",href:"#配合-usemodel-使用","aria-hidden":"true"},"#",-1),h=e(`<p>确保已经安装了 <code>@fesjs/plugin-model</code>:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="主应用传递-props" tabindex="-1"><a class="header-anchor" href="#主应用传递-props" aria-hidden="true">#</a> 主应用传递 props</h4><ul><li>如果使用 <code>MicroApp</code> 组件模式消费子应用,直接通过 props 传递即可:</li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">:user</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'app1'</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + name<span class="token punctuation">,</span> + user<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>如果使用路由绑定式消费子应用,那么约定<code>src/models/qiankunStateForMicro.js</code> 的模型数据将作为 <code>props</code> 船体给子应用,如:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + state<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="子应用消费-props" tabindex="-1"><a class="header-anchor" href="#子应用消费-props" aria-hidden="true">#</a> 子应用消费 props</h4><p>子应用中会自动生成一个全局名为 <code>qiankunStateFromMain</code> 的 <code>model</code>, 可以在任意组件中获取主应用透传的 <code>props</code> 的值。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> mainState <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">'qiankunStateFromMain'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + mainState<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="基于-props-传递" tabindex="-1"><a class="header-anchor" href="#基于-props-传递" aria-hidden="true">#</a> 基于 props 传递</h3><ul><li>主应用使用 props 的模式传递数据(参考主应用装载子应用配置一节)</li><li>子应用在生命周期钩子中获取 props 消费数据(参考子应用运行时配置一节)</li></ul><h3 id="microapp" tabindex="-1"><a class="header-anchor" href="#microapp" aria-hidden="true">#</a> MicroApp</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称,传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称,配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr></tbody></table><h3 id="microappwithmemohistory" tabindex="-1"><a class="header-anchor" href="#microappwithmemohistory" aria-hidden="true">#</a> MicroAppWithMemoHistory</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称,传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称,配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr><tr><td>url</td><td>子应用的路由地址</td><td>String</td><td>-</td></tr></tbody></table>`,16);function y(f,q){const t=p("ExternalLinkIcon"),o=p("RouterLink");return i(),l("div",null,[d,s("p",null,[n("Fes.js plugin for "),s("a",k,[n("qiankun"),a(t)]),n(",参考"),s("a",v,[n("@umijs/plugin-qiankun"),a(t)]),n(" 实现,喜欢 React 的同学推荐直接用 Umi。")]),m,s("h3",b,[g,n(" 配合 "),a(o,{to:"/reference/plugin/plugins/model.html"},{default:u(()=>[n("useModel")]),_:1}),n(" 使用")]),h])}const w=c(r,[["render",y],["__file","qiankun.html.vue"]]);export{w as default}; diff --git a/assets/qiankun.html.fd060b60.js b/assets/qiankun.html.fd060b60.js new file mode 100644 index 00000000..f2a7a4d6 --- /dev/null +++ b/assets/qiankun.html.fd060b60.js @@ -0,0 +1 @@ +const l=JSON.parse('{"key":"v-b15becb0","path":"/reference/plugin/plugins/qiankun.html","title":"@fesjs/plugin-qiankun","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"主应用配置","slug":"主应用配置","link":"#主应用配置","children":[{"level":3,"title":"第一步:注册子应用","slug":"第一步-注册子应用","link":"#第一步-注册子应用","children":[]},{"level":3,"title":"第二步:装载子应用","slug":"第二步-装载子应用","link":"#第二步-装载子应用","children":[]}]},{"level":2,"title":"子应用配置","slug":"子应用配置","link":"#子应用配置","children":[{"level":3,"title":"第一步:插件注册","slug":"第一步-插件注册","link":"#第一步-插件注册","children":[]},{"level":3,"title":"第二步:配置运行时生命周期钩子(可选)","slug":"第二步-配置运行时生命周期钩子-可选","link":"#第二步-配置运行时生命周期钩子-可选","children":[]}]},{"level":2,"title":"父子应用通讯","slug":"父子应用通讯","link":"#父子应用通讯","children":[{"level":3,"title":"配合 useModel 使用","slug":"配合-usemodel-使用","link":"#配合-usemodel-使用","children":[]},{"level":3,"title":"基于 props 传递","slug":"基于-props-传递","link":"#基于-props-传递","children":[]},{"level":3,"title":"MicroApp","slug":"microapp","link":"#microapp","children":[]},{"level":3,"title":"MicroAppWithMemoHistory","slug":"microappwithmemohistory","link":"#microappwithmemohistory","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/qiankun.md"}');export{l as data}; diff --git a/assets/request.html.08c691d1.js b/assets/request.html.08c691d1.js new file mode 100644 index 00000000..a69a9ad5 --- /dev/null +++ b/assets/request.html.08c691d1.js @@ -0,0 +1,123 @@ +import{_ as p,r as o,o as c,c as i,b as n,d as s,a as e,f as a}from"./app.bd9c95b7.js";const l={},u=a(`<h1 id="fesjs-plugin-request" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-request" aria-hidden="true">#</a> @fesjs/plugin-request</h1><p>基于 axios 封装的 request,内置防止重复请求、请求缓存、错误处理等功能。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2>`,6),r={href:"https://axios-http.com/zh/docs/req_config",target:"_blank",rel:"noopener noreferrer"},d=a(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRuntimeConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineRuntimeConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">request</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token comment">// API 前缀</span> + <span class="token literal-property property">baseURL</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token function">dataHandler</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理响应内容异常</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">!==</span> <span class="token string">'0'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">'10000'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + FMesseage<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">'20000'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + FMesseage<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token comment">// 响应数据格式化</span> + <span class="token keyword">return</span> data<span class="token operator">?.</span>result <span class="token operator">?</span> data<span class="token punctuation">.</span>result <span class="token operator">:</span> data<span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token comment">// http 异常,和插件异常</span> + <span class="token function">errorHandler</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>headers<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>request<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 请求已经成功发起,但没有收到响应</span> + <span class="token comment">// \`error.request\` 在浏览器中是 XMLHttpRequest 的实例,</span> + <span class="token comment">// 而在node.js中是 http.ClientRequest 的实例</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>request<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 插件异常</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token comment">// 发送请求时出了点问题</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Error'</span><span class="token punctuation">,</span> error<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>config<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token comment">// 请求拦截器</span> + <span class="token literal-property property">requestInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token comment">// 响应拦截器</span> + <span class="token literal-property property">responseInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token comment">// 支持其他 axios 配置</span> + <span class="token operator">...</span>otherConfigs<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="request" tabindex="-1"><a class="header-anchor" href="#request" aria-hidden="true">#</a> request</h3>`,3),k=n("li",null,[n("p",null,[n("strong",null,"类型"),s(":函数")])],-1),v=n("li",null,[n("p",null,[n("strong",null,"详情"),s(":请求后端接口")])],-1),m=n("p",null,[n("strong",null,"参数"),s(":")],-1),b=n("li",null,"url: 后端接口 url",-1),h=n("li",null,"data: 参数",-1),g={href:"https://axios-http.com/zh/docs/req_config",target:"_blank",rel:"noopener noreferrer"},f=n("li",null,[n("p",null,[n("strong",null,"返回值"),s(": Promise")])],-1),y=a(`<h3 id="userequest" tabindex="-1"><a class="header-anchor" href="#userequest" aria-hidden="true">#</a> useRequest</h3><p>request 的封装,返回响应式 <code>loading</code>、<code>error</code>、 <code>data</code></p><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><h3 id="发起一个普通-post-请求" tabindex="-1"><a class="header-anchor" href="#发起一个普通-post-请求" aria-hidden="true">#</a> 发起一个普通 post 请求</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token function">request</span><span class="token punctuation">(</span><span class="token string">'/api/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span> + <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// do something</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// 处理异常</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="merge-重复请求" tabindex="-1"><a class="header-anchor" href="#merge-重复请求" aria-hidden="true">#</a> merge 重复请求</h3><p>连续发送多个请求,会被合并成一个请求,不会报 <code>REPEAT</code> 接口错误。</p><p>当发生 <code>REPEAT</code> 请求异常,并且确保自身代码合理的情况下,可以使用该配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token function">request</span><span class="token punctuation">(</span> + <span class="token string">'/api/login'</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span> + <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">mergeRequest</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 在一个请求没有回来前,重复发送的请求会合并成一个请求</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// do something</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// 处理异常</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="请求缓存" tabindex="-1"><a class="header-anchor" href="#请求缓存" aria-hidden="true">#</a> 请求缓存</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token function">request</span><span class="token punctuation">(</span> + <span class="token string">'/api/login'</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span> + <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">cacheType</span><span class="token operator">:</span> <span class="token string">'ram'</span><span class="token punctuation">,</span> <span class="token comment">// ram: 内存,session: sessionStorage,local:localStorage</span> + <span class="token literal-property property">cacheTime</span><span class="token operator">:</span> <span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">// 缓存时间:默认3min</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// do something</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// 处理异常</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>若 <code>cache</code> 传 <code>true</code>,则默认使用 <code>ram</code> 缓存类型,缓存时间 3min。</p><h3 id="结合-use-使用" tabindex="-1"><a class="header-anchor" href="#结合-use-使用" aria-hidden="true">#</a> 结合 use 使用</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRequest <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> loading<span class="token punctuation">,</span> data<span class="token punctuation">,</span> error <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useRequest</span><span class="token punctuation">(</span><span class="token string">'/api/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span> + <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">return</span> <span class="token punctuation">{</span> + loading<span class="token punctuation">,</span> + data<span class="token punctuation">,</span> + error<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,14);function q(_,w){const t=o("ExternalLinkIcon");return c(),i("div",null,[u,n("p",null,[s("入口文件的全局配置,具体请求的配置参数会覆盖全局配置,支持 "),n("a",r,[s("axios"),e(t)]),s(" 所有的参数。")]),d,n("ul",null,[k,v,n("li",null,[m,n("ul",null,[b,h,n("li",null,[s("options: 配置支持 "),n("a",g,[s("axios"),e(t)]),s(" 所有的参数,和插件扩展参数。")])])]),f]),y])}const j=p(l,[["render",q],["__file","request.html.vue"]]);export{j as default}; diff --git a/assets/request.html.d16e6c85.js b/assets/request.html.d16e6c85.js new file mode 100644 index 00000000..89e3927a --- /dev/null +++ b/assets/request.html.d16e6c85.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-41dee210","path":"/reference/plugin/plugins/request.html","title":"@fesjs/plugin-request","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"运行时配置","slug":"运行时配置","link":"#运行时配置","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"request","slug":"request","link":"#request","children":[]},{"level":3,"title":"useRequest","slug":"userequest","link":"#userequest","children":[]}]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[{"level":3,"title":"发起一个普通 post 请求","slug":"发起一个普通-post-请求","link":"#发起一个普通-post-请求","children":[]},{"level":3,"title":"merge 重复请求","slug":"merge-重复请求","link":"#merge-重复请求","children":[]},{"level":3,"title":"请求缓存","slug":"请求缓存","link":"#请求缓存","children":[]},{"level":3,"title":"结合 use 使用","slug":"结合-use-使用","link":"#结合-use-使用","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/request.md"}');export{e as data}; diff --git a/assets/route.html.32be9bfc.js b/assets/route.html.32be9bfc.js new file mode 100644 index 00000000..cddf723b --- /dev/null +++ b/assets/route.html.32be9bfc.js @@ -0,0 +1,167 @@ +import{_ as p,r as o,o as c,c as i,b as n,d as s,a as t,f as e}from"./app.bd9c95b7.js";const l={},r=n("h1",{id:"路由",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#路由","aria-hidden":"true"},"#"),s(" 路由")],-1),u=n("code",null,"Vue Router",-1),d={href:"https://next.router.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},k=e(`<h2 id="路由配置" tabindex="-1"><a class="header-anchor" href="#路由配置" aria-hidden="true">#</a> 路由配置</h2><p>在配置文件 <code>.fes.js</code>中通过 <code>router</code> 进行配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'hash'</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="routes" tabindex="-1"><a class="header-anchor" href="#routes" aria-hidden="true">#</a> routes</h3>`,4),v=n("code",null,"routes",-1),m={href:"https://next.router.vuejs.org/zh/guide/",target:"_blank",rel:"noopener noreferrer"},b=n("h3",{id:"mode",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#mode","aria-hidden":"true"},"#"),s(" mode")],-1),g=n("p",null,"创建历史记录的类型:",-1),h=n("strong",null,"history",-1),y={href:"https://next.router.vuejs.org/zh/api/#createwebhistory",target:"_blank",rel:"noopener noreferrer"},q=n("strong",null,"hash",-1),f={href:"https://next.router.vuejs.org/zh/api/#createWebHashHistory",target:"_blank",rel:"noopener noreferrer"},_=n("strong",null,"memory",-1),x={href:"https://next.router.vuejs.org/zh/api/#createWebHashHistory",target:"_blank",rel:"noopener noreferrer"},j=e(`<p>默认是<code>hash</code>模式。</p><h2 id="约定式路由" tabindex="-1"><a class="header-anchor" href="#约定式路由" aria-hidden="true">#</a> 约定式路由</h2><p>约定式路由也叫文件路由,就是不需要手写配置,文件系统即路由,通过目录和文件及其命名分析出路由配置。</p><h3 id="约定规范" tabindex="-1"><a class="header-anchor" href="#约定规范" aria-hidden="true">#</a> 约定规范</h3><p>比如以下文件结构:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>pages +├── index.vue # 根路由页面 路径为 / +├── *.vue # 模糊匹配 路径为 * +├── a.vue # 路径 /a +├── b # 文件夹b +│ ├── index.vue # 路径 /b +│ ├── @id.vue # 动态路由 /b/:id +│ ├── c.vue # 路径 /b/c +│ └── layout.vue # /b 路径下所有页面公共的布局组件 +└── layout.vue # 根路由下所有页面共用的布局组件 +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>编译后会得到以下路由配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span> + <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/layout'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> + <span class="token string-property property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/a"</span><span class="token punctuation">,</span> + <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"a"</span><span class="token punctuation">,</span> + <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">7</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/b"</span><span class="token punctuation">,</span> + <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/b/layout'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span> + <span class="token string-property property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/b/c"</span><span class="token punctuation">,</span> + <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/b/c'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"b_c"</span><span class="token punctuation">,</span> + <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">14</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/b/:id"</span><span class="token punctuation">,</span> + <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/b/@id'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"b__id"</span><span class="token punctuation">,</span> + <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">13</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/b"</span><span class="token punctuation">,</span> + <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/b/index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"b_index"</span><span class="token punctuation">,</span> + <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">7</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span> + <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"index"</span><span class="token punctuation">,</span> + <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">5</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/:pathMatch(.*)"</span><span class="token punctuation">,</span> + <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/*'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"FUZZYMATCH"</span><span class="token punctuation">,</span> + <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token string-property property">"count"</span><span class="token operator">:</span> <span class="token number">3</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> + <span class="token punctuation">}</span> +<span class="token punctuation">]</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>需要注意的是,满足以下任意规则的文件不会被注册为路由</strong>:</p><ul><li>不是 <code>.vue .jsx</code> 文件</li><li><code>components</code> 目录中的文件</li></ul><h3 id="动态路由" tabindex="-1"><a class="header-anchor" href="#动态路由" aria-hidden="true">#</a> 动态路由</h3><p>Fes.js 里约定以 <code>@</code> 开头的文件或文件夹映射为动态路由。 比如:</p><ul><li><code>src/pages/users/@id.vue</code> 会成为 <code>/users/:id</code></li><li><code>src/pages/users/@id/settings.vue</code> 会成为 <code>/users/:id/settings</code></li></ul><h3 id="嵌套路由" tabindex="-1"><a class="header-anchor" href="#嵌套路由" aria-hidden="true">#</a> 嵌套路由</h3><p>Fes.js 里约定目录下有 <code>layout.vue</code> 时会生成嵌套路由,以 <code>layout.vue</code> 为该目录的公共父组件,<code>layout.vue</code> 中必须实现 <code>RouterView</code></p><p>比如以下目录结构:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>pages +└── users + ├── layout.vue + ├── index.vue + └── list.vue +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>会生成路由:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/users/layout'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/users/index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/users/list'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/users/list'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span> + <span class="token punctuation">}</span> +<span class="token punctuation">]</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="模糊匹配" tabindex="-1"><a class="header-anchor" href="#模糊匹配" aria-hidden="true">#</a> 模糊匹配</h3>`,20),E=n("code",null,"*",-1),B={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"},w=e(`<p>比如以下目录结构:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>pages +├── index.vue # 根路由页面 路径为 / +└── *.vue # 模糊匹配 路径为 * +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>会生成路由:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">5</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/:pathMatch(.*)'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/**'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">3</span> + <span class="token punctuation">}</span> +<span class="token punctuation">]</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这样,如果访问 <code>/foo</code>,<code>/</code> 不能匹配,会 fallback 到 <code>*</code> 路由,通过 <code>src/pages/*.vue</code> 进行渲染。</p><h3 id="智能路由" tabindex="-1"><a class="header-anchor" href="#智能路由" aria-hidden="true">#</a> 智能路由</h3><p>可以看到,编译后路由都会有 <code>count</code> 属性,这是我们根据精准匹配优先算法原则设计出路由排名算法,对匹配到的路由打分:</p><ul><li>路由的路径每个子项得到4分</li><li>子项为静态细分(<code>/list</code>)再加3分</li><li>子项为动态细分(<code>/:orderId</code>)再加2分</li><li>根段(<code>/</code>)再1分</li><li>通配符(<code>*</code>)匹配到的减去1分</li></ul><p>当我们跳转路由时,如果 URL 匹配到多个路由,则选择分数最高的路由。</p><h2 id="扩展路由元信息" tabindex="-1"><a class="header-anchor" href="#扩展路由元信息" aria-hidden="true">#</a> 扩展路由元信息</h2><p>我们在定义路由时可以配置<code>meta</code>字段,用来记录一些跟路由相关的信息:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/foo'</span><span class="token punctuation">,</span> + <span class="token literal-property property">component</span><span class="token operator">:</span> Foo<span class="token punctuation">,</span> + <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> + <span class="token literal-property property">component</span><span class="token operator">:</span> Bar<span class="token punctuation">,</span> + <span class="token comment">// a meta field</span> + <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">requiresAuth</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> + <span class="token punctuation">}</span> + <span class="token punctuation">]</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>我们使用<code>defineRouteMeta</code> 配置 <code>meta</code>:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMeta <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"store"</span><span class="token punctuation">,</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"vuex测试"</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当然在单文件组件中,还可以通过<code><config></config></code>配置 <code>meta</code>:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span><span class="token punctuation">></span></span> +{ + "name": "store", + "title": "vuex测试" +} +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>config</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>推荐使用<code>defineRouteMete</code>,有更好的提示。</p></div><p>路由元信息在编译后会附加到路由配置中:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/a'</span><span class="token punctuation">,</span> + <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"store"</span><span class="token punctuation">,</span> + <span class="token string-property property">"title"</span><span class="token operator">:</span> <span class="token string">"vuex测试"</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">]</span> +</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="路由跳转" tabindex="-1"><a class="header-anchor" href="#路由跳转" aria-hidden="true">#</a> 路由跳转</h2>`,20),R={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"},V=e(`<h3 id="声明式" tabindex="-1"><a class="header-anchor" href="#声明式" aria-hidden="true">#</a> 声明式</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/home<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="命令式" tabindex="-1"><a class="header-anchor" href="#命令式" aria-hidden="true">#</a> 命令式</h3>`,3),H=n("code",null,"router",-1),F={href:"https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},M=e(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token comment">// 这三种形式是等价的</span> + router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/users/posva#bio'</span><span class="token punctuation">)</span> + router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/users/posva'</span><span class="token punctuation">,</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">'#bio'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> + router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'users'</span><span class="token punctuation">,</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'posva'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">'#bio'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token comment">// 只改变 hash</span> + router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token string">'#bio'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token comment">// 只改变 query</span> + router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">page</span><span class="token operator">:</span> <span class="token string">'2'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> + <span class="token comment">// 只改变 param</span> + router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'jolyne'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> + + <span class="token comment">// 跳转到上一个路由</span> + router<span class="token punctuation">.</span><span class="token function">goBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// \b跳转到前一个历史记录</span> + router<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// 替换历史堆栈中的记录</span> + router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'/new'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> + +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1);function z(A,D){const a=o("ExternalLinkIcon");return c(),i("div",null,[r,n("p",null,[s("像 Vue 、React 这类框架是用组件化搭建页面,路由解决的是路径到组件的匹配问题。Fes.js 基于 "),u,s(" 实现的路由,想了解更多的同学可以看看"),n("a",d,[s("官方文档"),t(a)]),s("。")]),k,n("p",null,[v,s(" 是配置添加到路由的初始路由列表,格式为路由信息的数组。具体使用参考 "),n("a",m,[s("Vue Router 文档"),t(a)]),s(" 中关于路由配置、路由匹配相关内容。")]),b,g,n("ul",null,[n("li",null,[h,s(",对应 "),n("a",y,[s("createWebHistory"),t(a)])]),n("li",null,[q,s(",对应 "),n("a",f,[s("createWebHashHistory"),t(a)])]),n("li",null,[_,s(",对应 "),n("a",x,[s("createMemoryHistory"),t(a)])])]),j,n("p",null,[s("Fes.js 下约定文件名为 "),E,s(" 的路由是模糊匹配路由,可以用此特性实现 "),n("a",B,[s("404 路由"),t(a)]),s("。")]),w,n("p",null,[s("想学习更多,可以查看 "),n("a",R,[s("Vue Router 官方文档"),t(a)]),s("。")]),V,n("p",null,[s("页面跳转 API 由 "),H,s(" 实例提供,查看 "),n("a",F,[s("Vue Rouer 文档"),t(a)]),s("了解更多。")]),M])}const N=p(l,[["render",z],["__file","route.html.vue"]]);export{N as default}; diff --git a/assets/route.html.8edafb3a.js b/assets/route.html.8edafb3a.js new file mode 100644 index 00000000..1e7b336d --- /dev/null +++ b/assets/route.html.8edafb3a.js @@ -0,0 +1 @@ +const l=JSON.parse('{"key":"v-6320961c","path":"/guide/route.html","title":"路由","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"路由配置","slug":"路由配置","link":"#路由配置","children":[{"level":3,"title":"routes","slug":"routes","link":"#routes","children":[]},{"level":3,"title":"mode","slug":"mode","link":"#mode","children":[]}]},{"level":2,"title":"约定式路由","slug":"约定式路由","link":"#约定式路由","children":[{"level":3,"title":"约定规范","slug":"约定规范","link":"#约定规范","children":[]},{"level":3,"title":"动态路由","slug":"动态路由","link":"#动态路由","children":[]},{"level":3,"title":"嵌套路由","slug":"嵌套路由","link":"#嵌套路由","children":[]},{"level":3,"title":"模糊匹配","slug":"模糊匹配","link":"#模糊匹配","children":[]},{"level":3,"title":"智能路由","slug":"智能路由","link":"#智能路由","children":[]}]},{"level":2,"title":"扩展路由元信息","slug":"扩展路由元信息","link":"#扩展路由元信息","children":[]},{"level":2,"title":"路由跳转","slug":"路由跳转","link":"#路由跳转","children":[{"level":3,"title":"声明式","slug":"声明式","link":"#声明式","children":[]},{"level":3,"title":"命令式","slug":"命令式","link":"#命令式","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/route.md"}');export{l as data}; diff --git a/assets/runtime-config.html.90acb818.js b/assets/runtime-config.html.90acb818.js new file mode 100644 index 00000000..6b51a61f --- /dev/null +++ b/assets/runtime-config.html.90acb818.js @@ -0,0 +1,137 @@ +import{_ as n,o as s,c as a,f as e}from"./app.bd9c95b7.js";const p={},t=e(`<h1 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h1><p>Fes.js 约定 <code>src/app.js</code> 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端,因此我们可以在这里写函数、引入浏览器端依赖项等等,注意不要引入 node 端依赖项。</p><h2 id="运行时为啥需要配置" tabindex="-1"><a class="header-anchor" href="#运行时为啥需要配置" aria-hidden="true">#</a> 运行时为啥需要配置?</h2><p>Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件,而 Fes.js 中 entry 文件由框架生成,用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。</p><p>例如:</p><p>plugin-access 插件定义运行时配置项:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePluginKey</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'access'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>plugin-access 插件读取配置项:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> runtimeConfig <span class="token operator">=</span> plugin<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'access'</span><span class="token punctuation">,</span> + <span class="token literal-property property">type</span><span class="token operator">:</span> ApplyPluginsType<span class="token punctuation">.</span>modify<span class="token punctuation">,</span> + <span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>而用户则只需要配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> defineRuntimeConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineRuntimeConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token function-variable function">access</span><span class="token operator">:</span> <span class="token parameter">memo</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token operator">...</span>memo + <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> + router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next + <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理逻辑</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> + router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next + <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理逻辑</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置智能提示" tabindex="-1"><a class="header-anchor" href="#配置智能提示" aria-hidden="true">#</a> 配置智能提示</h2><p>配置可以单独导出,也可以通过 <code>defineRuntimeConfig</code> 工具函数获取类型提示。</p><p>方式一(推荐,有类型提示):</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> defineRuntimeConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineRuntimeConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token function-variable function">access</span><span class="token operator">:</span> <span class="token parameter">memo</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token operator">...</span>memo + <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> + router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next + <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理逻辑</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> + router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next + <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理逻辑</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token comment">// ...其他配置项</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>方式二:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span> +<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">access</span> <span class="token operator">=</span> <span class="token parameter">memo</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token operator">...</span>memo + <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> + router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next + <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理逻辑</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> + router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next + <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理逻辑</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置项" tabindex="-1"><a class="header-anchor" href="#配置项" aria-hidden="true">#</a> 配置项</h2><h3 id="beforerender" tabindex="-1"><a class="header-anchor" href="#beforerender" aria-hidden="true">#</a> beforeRender</h3><p>beforeRender(lastOpts)</p><p>在渲染之前执行,执行<code>action</code>过程中显示 <code>loading</code> 配置的组件,执行结果作为参数 <code>initialState</code> 传给 <code>modifyClientRenderOpts</code>。</p><p>示例:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token keyword">import</span> PageLoading <span class="token keyword">from</span> <span class="token string">'@/components/PageLoading'</span><span class="token punctuation">;</span> +<span class="token keyword">import</span> UserCenter <span class="token keyword">from</span> <span class="token string">'@/components/UserCenter'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">beforeRender</span><span class="token punctuation">(</span><span class="token parameter">lastOpts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>lastOpts<span class="token punctuation">,</span> + <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token operator"><</span>PageLoading <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> + <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> setRole <span class="token punctuation">}</span> <span class="token operator">=</span> access<span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'harrywan'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="patchroutes" tabindex="-1"><a class="header-anchor" href="#patchroutes" aria-hidden="true">#</a> patchRoutes</h3><p>patchRoutes({routes })</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>准备删除此API,推荐使用<code>modifyRoute</code></p></div><p>修改路由。</p><p>比如在最前面添加一个 /foo 路由:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">patchRoutes</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> routes <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + routes<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/foo'</span><span class="token punctuation">,</span> + <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/extraRoutes/foo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>直接修改 <code>routes</code>, 不需要返回</p></div><h3 id="modifyroute" tabindex="-1"><a class="header-anchor" href="#modifyroute" aria-hidden="true">#</a> modifyRoute</h3><p>modifyRoute({base, createHistory, routes})</p><p>修改路由配置信息。</p><p>比如在最前面添加一个 /foo 路由:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">modifyRoute</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>memo<span class="token punctuation">,</span> + <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/foo'</span><span class="token punctuation">,</span> + <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/extraRoutes/foo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token operator">...</span>memo<span class="token punctuation">.</span>routes + <span class="token punctuation">]</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如修改 base:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">modifyRoute</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>memo<span class="token punctuation">,</span> + <span class="token literal-property property">base</span><span class="token operator">:</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如改为使用createMemoryHistory:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">modifyRoute</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>memo<span class="token punctuation">,</span> + <span class="token literal-property property">createHistory</span><span class="token operator">:</span> createMemoryHistory + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifyclientrenderopts" tabindex="-1"><a class="header-anchor" href="#modifyclientrenderopts" aria-hidden="true">#</a> modifyClientRenderOpts</h3><p>modifyClientRenderOpts(lastOpts)</p><p>修改 <code>clientRender</code> 参数。参数是一个对象:</p><ul><li>routes,路由配置信息</li><li>rootElement, 渲染的根节点,默认是 <code>#app</code>,可通过配置 <code>mountElementId</code> 修改。</li><li>initialState, 初始化数据,<code>beforeRender</code> 运行得到的数据。</li></ul><p>比如在微前端里动态修改渲染根节点:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> isSubApp <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">modifyClientRenderOpts</span><span class="token punctuation">(</span><span class="token parameter">lastOpts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>lastOpts<span class="token punctuation">,</span> + <span class="token literal-property property">rootElement</span><span class="token operator">:</span> isSubApp <span class="token operator">?</span> <span class="token string">'sub-root'</span> <span class="token operator">:</span> lastOpts<span class="token punctuation">.</span>rootElement<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="rootcontainer" tabindex="-1"><a class="header-anchor" href="#rootcontainer" aria-hidden="true">#</a> rootContainer</h3><p>rootContainer(LastRootContainer, args)</p><p>修改交给 Vue 渲染时的根组件,默认是 <code><RouterView></RouterView></code>。</p><ul><li>LastRootContainer,上一个插件修改后的结果。</li><li>args,包含: <ul><li>routes,全量路由配置</li><li>plugin,运行时插件机制</li></ul></li></ul><p>比如在可以包一层 DIV:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">rootContainer</span><span class="token punctuation">(</span><span class="token parameter">container</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">(</span> + <span class="token operator"><</span>div<span class="token operator">></span> + <span class="token operator"><</span>RouterView<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>RouterView<span class="token operator">></span> + <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onappcreated" tabindex="-1"><a class="header-anchor" href="#onappcreated" aria-hidden="true">#</a> onAppCreated</h3><p>onAppCreated({app})</p><p>创建 app 实例后触发。</p><p>比如用于安装 Vue 插件:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-router'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">onAppCreated</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> app <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="render" tabindex="-1"><a class="header-anchor" href="#render" aria-hidden="true">#</a> render</h3><p>render(oldRender: Function)</p><p>覆写 render。</p><p>比如用于渲染之前做权限校验。</p><h3 id="onroutercreated" tabindex="-1"><a class="header-anchor" href="#onroutercreated" aria-hidden="true">#</a> onRouterCreated</h3><p>onRouterCreated({router})</p><p>生成 router 时触发。</p><p>比如用于收集切换路由的记录:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">onRouterCreated</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> router <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="更多配置项" tabindex="-1"><a class="header-anchor" href="#更多配置项" aria-hidden="true">#</a> 更多配置项</h2><p>Fes.js 允许插件注册运行时配置,如果你使用插件,肯定会在插件里找到更多运行时的配置项。</p>`,67),o=[t];function c(i,l){return s(),a("div",null,o)}const r=n(p,[["render",c],["__file","runtime-config.html.vue"]]);export{r as default}; diff --git a/assets/runtime-config.html.b70d36d5.js b/assets/runtime-config.html.b70d36d5.js new file mode 100644 index 00000000..ac50e994 --- /dev/null +++ b/assets/runtime-config.html.b70d36d5.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-3dba8814","path":"/guide/runtime-config.html","title":"运行时配置","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"运行时为啥需要配置?","slug":"运行时为啥需要配置","link":"#运行时为啥需要配置","children":[]},{"level":2,"title":"配置智能提示","slug":"配置智能提示","link":"#配置智能提示","children":[]},{"level":2,"title":"配置项","slug":"配置项","link":"#配置项","children":[{"level":3,"title":"beforeRender","slug":"beforerender","link":"#beforerender","children":[]},{"level":3,"title":"patchRoutes","slug":"patchroutes","link":"#patchroutes","children":[]},{"level":3,"title":"modifyRoute","slug":"modifyroute","link":"#modifyroute","children":[]},{"level":3,"title":"modifyClientRenderOpts","slug":"modifyclientrenderopts","link":"#modifyclientrenderopts","children":[]},{"level":3,"title":"rootContainer","slug":"rootcontainer","link":"#rootcontainer","children":[]},{"level":3,"title":"onAppCreated","slug":"onappcreated","link":"#onappcreated","children":[]},{"level":3,"title":"render","slug":"render","link":"#render","children":[]},{"level":3,"title":"onRouterCreated","slug":"onroutercreated","link":"#onroutercreated","children":[]}]},{"level":2,"title":"更多配置项","slug":"更多配置项","link":"#更多配置项","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/runtime-config.md"}');export{e as data}; diff --git a/assets/sass.html.9236bc5e.js b/assets/sass.html.9236bc5e.js new file mode 100644 index 00000000..2c98c1f2 --- /dev/null +++ b/assets/sass.html.9236bc5e.js @@ -0,0 +1,8 @@ +import{_ as s,o as a,c as n,f as e}from"./app.bd9c95b7.js";const t={},c=e(`<h1 id="fesjs-plugin-sass" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-sass" aria-hidden="true">#</a> @fesjs/plugin-sass</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>Fes.js 默认只支持 <code>less</code>,通过此插件扩展支持 <code>sass</code>。</p><div class="custom-container tip"><p class="custom-container-title">webpack 构建 sass 插件</p><p>如果使用 Vite 构建,直接装 <code>sass</code> 依赖即可,不需要安装此插件。</p></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-sass"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="global-css" tabindex="-1"><a class="header-anchor" href="#global-css" aria-hidden="true">#</a> global css</h2><p>添加 <code>src/global.scss</code> 和 <code>src/global.sass</code> 为全局 CSS 入口,添加一些通用样式内容。</p><h2 id="vue-单文件组件" tabindex="-1"><a class="header-anchor" href="#vue-单文件组件" aria-hidden="true">#</a> Vue 单文件组件</h2><p>Vue 单文件组件的 <code><style></style></code> 添加 <code>lang='scss'</code>,例如:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scss<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>`,12),o=[c];function p(l,i){return a(),n("div",null,o)}const u=s(t,[["render",p],["__file","sass.html.vue"]]);export{u as default}; diff --git a/assets/sass.html.be3aee7e.js b/assets/sass.html.be3aee7e.js new file mode 100644 index 00000000..ef63262c --- /dev/null +++ b/assets/sass.html.be3aee7e.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-5bf80046","path":"/reference/plugin/plugins/sass.html","title":"@fesjs/plugin-sass","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"global css","slug":"global-css","link":"#global-css","children":[]},{"level":2,"title":"Vue 单文件组件","slug":"vue-单文件组件","link":"#vue-单文件组件","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/sass.md"}');export{e as data}; diff --git a/assets/style.03dc0593.css b/assets/style.03dc0593.css new file mode 100644 index 00000000..ce128727 --- /dev/null +++ b/assets/style.03dc0593.css @@ -0,0 +1 @@ +@charset "UTF-8";:root{--external-link-icon-color: #aaa}.external-link-icon{position:relative;display:inline-block;color:var(--external-link-icon-color);vertical-align:middle;top:-1px}.external-link-icon-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--medium-zoom-z-index: 100;--medium-zoom-bg-color: #ffffff;--medium-zoom-opacity: 1}.medium-zoom-overlay{background-color:var(--medium-zoom-bg-color)!important;z-index:var(--medium-zoom-z-index)}.medium-zoom-overlay~img{z-index:calc(var(--medium-zoom-z-index) + 1)}.medium-zoom--opened .medium-zoom-overlay{opacity:var(--medium-zoom-opacity)}:root{--nprogress-color: #29d;--nprogress-z-index: 1031}#nprogress{pointer-events:none}#nprogress .bar{background:var(--nprogress-color);position:fixed;z-index:var(--nprogress-z-index);top:0;left:0;width:100%;height:2px}:root{--c-brand: #3eaf7c;--c-brand-light: #4abf8a;--c-bg: #ffffff;--c-bg-light: #f3f4f5;--c-bg-lighter: #eeeeee;--c-bg-navbar: var(--c-bg);--c-bg-sidebar: var(--c-bg);--c-bg-arrow: #cccccc;--c-text: #2c3e50;--c-text-accent: var(--c-brand);--c-text-light: #3a5169;--c-text-lighter: #4e6e8e;--c-text-lightest: #6a8bad;--c-text-quote: #999999;--c-border: #eaecef;--c-border-dark: #dfe2e5;--c-tip: #42b983;--c-tip-bg: var(--c-bg-light);--c-tip-title: var(--c-text);--c-tip-text: var(--c-text);--c-tip-text-accent: var(--c-text-accent);--c-warning: #e7c000;--c-warning-bg: #fffae3;--c-warning-title: #ad9000;--c-warning-text: #746000;--c-warning-text-accent: var(--c-text);--c-danger: #cc0000;--c-danger-bg: #ffe0e0;--c-danger-title: #990000;--c-danger-text: #660000;--c-danger-text-accent: var(--c-text);--c-details-bg: #eeeeee;--c-badge-tip: var(--c-tip);--c-badge-warning: var(--c-warning);--c-badge-danger: var(--c-danger);--t-color: .3s ease;--t-transform: .3s ease;--code-bg-color: #282c34;--code-hl-bg-color: rgba(0, 0, 0, .66);--code-ln-color: #9e9e9e;--code-ln-wrapper-width: 3.5rem;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;--navbar-height: 3.6rem;--navbar-padding-v: .7rem;--navbar-padding-h: 1.5rem;--sidebar-width: 20rem;--sidebar-width-mobile: calc(var(--sidebar-width) * .82);--content-width: 740px;--homepage-width: 960px}.back-to-top{--back-to-top-color: var(--c-brand);--back-to-top-color-hover: var(--c-brand-light)}.DocSearch{--docsearch-primary-color: var(--c-brand);--docsearch-text-color: var(--c-text);--docsearch-highlight-color: var(--c-brand);--docsearch-muted-color: var(--c-text-quote);--docsearch-container-background: rgba(9, 10, 17, .8);--docsearch-modal-background: var(--c-bg-light);--docsearch-searchbox-background: var(--c-bg-lighter);--docsearch-searchbox-focus-background: var(--c-bg);--docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);--docsearch-hit-color: var(--c-text-light);--docsearch-hit-active-color: var(--c-bg);--docsearch-hit-background: var(--c-bg);--docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);--docsearch-footer-background: var(--c-bg)}.external-link-icon{--external-link-icon-color: var(--c-text-quote)}.medium-zoom-overlay{--medium-zoom-bg-color: var(--c-bg)}#nprogress{--nprogress-color: var(--c-brand)}.pwa-popup{--pwa-popup-text-color: var(--c-text);--pwa-popup-bg-color: var(--c-bg);--pwa-popup-border-color: var(--c-brand);--pwa-popup-shadow: 0 4px 16px var(--c-brand);--pwa-popup-btn-text-color: var(--c-bg);--pwa-popup-btn-bg-color: var(--c-brand);--pwa-popup-btn-hover-bg-color: var(--c-brand-light)}.search-box{--search-bg-color: var(--c-bg);--search-accent-color: var(--c-brand);--search-text-color: var(--c-text);--search-border-color: var(--c-border);--search-item-text-color: var(--c-text-lighter);--search-item-focus-bg-color: var(--c-bg-light)}html.dark{--c-brand: #3aa675;--c-brand-light: #349469;--c-bg: #22272e;--c-bg-light: #2b313a;--c-bg-lighter: #262c34;--c-text: #adbac7;--c-text-light: #96a7b7;--c-text-lighter: #8b9eb0;--c-text-lightest: #8094a8;--c-border: #3e4c5a;--c-border-dark: #34404c;--c-tip: #318a62;--c-warning: #ceab00;--c-warning-bg: #7e755b;--c-warning-title: #ceac03;--c-warning-text: #362e00;--c-danger: #940000;--c-danger-bg: #806161;--c-danger-title: #610000;--c-danger-text: #3a0000;--c-details-bg: #323843;--code-hl-bg-color: #363b46}html.dark .DocSearch{--docsearch-logo-color: var(--c-text);--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);--docsearch-key-gradient: linear-gradient(-225deg, #444950, #1c1e21);--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2)}html,body{padding:0;margin:0;background-color:var(--c-bg);transition:background-color var(--t-color)}html.dark{color-scheme:dark}html{font-size:16px}body{font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:1rem;color:var(--c-text)}a{font-weight:500;color:var(--c-text-accent);text-decoration:none;overflow-wrap:break-word}p a code{font-weight:400;color:var(--c-text-accent)}kbd{font-family:var(--font-family-code);color:var(--c-text);background:var(--c-bg-lighter);border:solid .15rem var(--c-border-dark);border-bottom:solid .25rem var(--c-border-dark);border-radius:.15rem;padding:0 .15em}code{font-family:var(--font-family-code);color:var(--c-text-lighter);padding:.25rem .5rem;margin:0;font-size:.85em;background-color:var(--c-bg-lighter);border-radius:3px;overflow-wrap:break-word;transition:background-color var(--t-color)}blockquote{font-size:1rem;color:var(--c-text-quote);border-left:.2rem solid var(--c-border-dark);margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ul,ol{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}h1:focus-visible,h2:focus-visible,h3:focus-visible,h4:focus-visible,h5:focus-visible,h6:focus-visible{outline:none}h1:hover .header-anchor,h2:hover .header-anchor,h3:hover .header-anchor,h4:hover .header-anchor,h5:hover .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid var(--c-border);transition:border-color var(--t-color)}h3{font-size:1.35rem}h4{font-size:1.15rem}h5{font-size:1.05rem}h6{font-size:1rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}a.header-anchor:hover{text-decoration:none}a.header-anchor:focus-visible{opacity:1}p,ul,ol{line-height:1.7}hr{border:0;border-top:1px solid var(--c-border)}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto;transition:border-color var(--t-color)}tr{border-top:1px solid var(--c-border-dark);transition:border-color var(--t-color)}tr:nth-child(2n){background-color:var(--c-bg-light);transition:background-color var(--t-color)}th,td{padding:.6em 1em;border:1px solid var(--c-border-dark);transition:border-color var(--t-color)}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid var(--c-bg-arrow)}.arrow.down{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--c-bg-arrow)}.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--c-bg-arrow)}.arrow.left{border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:6px solid var(--c-bg-arrow)}.badge{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:var(--c-bg);vertical-align:top;transition:color var(--t-color),background-color var(--t-color)}.badge.tip{background-color:var(--c-badge-tip)}.badge.warning{background-color:var(--c-badge-warning)}.badge.danger{background-color:var(--c-badge-danger)}.badge+.badge{margin-left:5px}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:var(--font-family-code);font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#ec5975}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:#3eaf7c}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.3rem 1.5rem;margin:.85rem 0;border-radius:6px;overflow:auto}.theme-default-content pre code,.theme-default-content pre[class*=language-] code{color:#fff;padding:0;background-color:transparent;border-radius:0;overflow-wrap:unset;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.theme-default-content .line-number{font-family:var(--font-family-code)}div[class*=language-]{position:relative;background-color:var(--code-bg-color);border-radius:6px}div[class*=language-]:before{content:attr(data-ext);position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:var(--code-ln-color)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent!important;position:relative;z-index:1}div[class*=language-] .highlight-lines{-webkit-user-select:none;-moz-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlight-line{background-color:var(--code-hl-bg-color)}div[class*=language-]:not(.line-numbers-mode) .line-numbers{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlight-line{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlight-line:before{content:" ";position:absolute;z-index:2;left:0;top:0;display:block;width:var(--code-ln-wrapper-width);height:100%}div[class*=language-].line-numbers-mode pre{margin-left:var(--code-ln-wrapper-width);padding-left:1rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers{position:absolute;top:0;width:var(--code-ln-wrapper-width);text-align:center;color:var(--code-ln-color);padding-top:1.25rem;line-height:1.4;counter-reset:line-number}div[class*=language-].line-numbers-mode .line-numbers .line-number{position:relative;z-index:3;-webkit-user-select:none;-moz-user-select:none;user-select:none;height:1.4em}div[class*=language-].line-numbers-mode .line-numbers .line-number:before{counter-increment:line-number;content:counter(line-number);font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;top:0;left:0;width:var(--code-ln-wrapper-width);height:100%;border-radius:6px 0 0 6px;border-right:1px solid var(--code-hl-bg-color)}@media (max-width: 419px){.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.code-group__nav{margin-top:.85rem;margin-bottom:calc(-1.7rem - 6px);padding-bottom:calc(1.7rem - 6px);padding-left:10px;padding-top:10px;border-top-left-radius:6px;border-top-right-radius:6px;background-color:var(--code-bg-color)}.code-group__ul{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.code-group__nav-tab{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:#ffffffe6;font-weight:600}.code-group__nav-tab:focus{outline:none}.code-group__nav-tab:focus-visible{outline:1px solid rgba(255,255,255,.9)}.code-group__nav-tab-active{border-bottom:var(--c-brand) 1px solid}@media (max-width: 419px){.code-group__nav{margin-left:-1.5rem;margin-right:-1.5rem;border-radius:0}}.code-group-item{display:none}.code-group-item__active{display:block}.code-group-item>pre{background-color:orange}.custom-container{transition:color var(--t-color),border-color var(--t-color),background-color var(--t-color)}.custom-container .custom-container-title{font-weight:600}.custom-container .custom-container-title:not(:only-child){margin-bottom:-.4rem}.custom-container.tip,.custom-container.warning,.custom-container.danger{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-container.tip{border-color:var(--c-tip);background-color:var(--c-tip-bg);color:var(--c-tip-text)}.custom-container.tip .custom-container-title{color:var(--c-tip-title)}.custom-container.tip a{color:var(--c-tip-text-accent)}.custom-container.warning{border-color:var(--c-warning);background-color:var(--c-warning-bg);color:var(--c-warning-text)}.custom-container.warning .custom-container-title{color:var(--c-warning-title)}.custom-container.warning a{color:var(--c-warning-text-accent)}.custom-container.danger{border-color:var(--c-danger);background-color:var(--c-danger-bg);color:var(--c-danger-text)}.custom-container.danger .custom-container-title{color:var(--c-danger-title)}.custom-container.danger a{color:var(--c-danger-text-accent)}.custom-container.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:var(--c-details-bg)}.custom-container.details h4{margin-top:0}.custom-container.details figure:last-child,.custom-container.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-container.details summary{outline:none;cursor:pointer}.home{padding:var(--navbar-height) 2rem 0;max-width:var(--homepage-width);margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero h1,.home .hero .description,.home .hero .actions{margin:1.8rem auto}.home .hero .actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:var(--c-text-lightest)}.home .hero .action-button{display:inline-block;font-size:1.2rem;padding:.8rem 1.6rem;border-width:2px;border-style:solid;border-radius:4px;transition:background-color var(--t-color);box-sizing:border-box}.home .hero .action-button.primary{color:var(--c-bg);background-color:var(--c-brand);border-color:var(--c-brand)}.home .hero .action-button.primary:hover{background-color:var(--c-brand-light)}.home .hero .action-button.secondary{color:var(--c-brand);background-color:var(--c-bg);border-color:var(--c-brand)}.home .hero .action-button.secondary:hover{color:var(--c-bg);background-color:var(--c-brand-light)}.home .features{border-top:1px solid var(--c-border);transition:border-color var(--t-color);padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:var(--c-text-light)}.home .feature p{color:var(--c-text-lighter)}.home .theme-default-content{padding:0;margin:0}.home .footer{padding:2.5rem;border-top:1px solid var(--c-border);text-align:center;color:var(--c-text-lighter);transition:border-color var(--t-color)}@media (max-width: 719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width: 419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero h1,.home .hero .description,.home .hero .actions{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.page{padding-top:var(--navbar-height);padding-left:var(--sidebar-width)}.navbar{position:fixed;z-index:20;top:0;left:0;right:0;height:var(--navbar-height);box-sizing:border-box;border-bottom:1px solid var(--c-border);background-color:var(--c-bg-navbar);transition:background-color var(--t-color),border-color var(--t-color)}.sidebar{font-size:16px;width:var(--sidebar-width);position:fixed;z-index:10;margin:0;top:var(--navbar-height);left:0;bottom:0;box-sizing:border-box;border-right:1px solid var(--c-border);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--c-brand) var(--c-border);background-color:var(--c-bg-sidebar);transition:transform var(--t-transform),background-color var(--t-color),border-color var(--t-color)}.sidebar::-webkit-scrollbar{width:7px}.sidebar::-webkit-scrollbar-track{background-color:var(--c-border)}.sidebar::-webkit-scrollbar-thumb{background-color:var(--c-brand)}.sidebar-mask{position:fixed;z-index:9;top:0;left:0;width:100vw;height:100vh;display:none}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.sidebar-open .navbar>.toggle-sidebar-button .icon span:nth-child(1){transform:rotate(45deg) translate3d(5.5px,5.5px,0)}.theme-container.sidebar-open .navbar>.toggle-sidebar-button .icon span:nth-child(2){transform:scale3d(0,1,1)}.theme-container.sidebar-open .navbar>.toggle-sidebar-button .icon span:nth-child(3){transform:rotate(-45deg) translate3d(6px,-6px,0)}.theme-container.sidebar-open .navbar>.toggle-sidebar-button .icon span:nth-child(1),.theme-container.sidebar-open .navbar>.toggle-sidebar-button .icon span:nth-child(3){transform-origin:center}.theme-container.no-navbar .theme-default-content h1,.theme-container.no-navbar .theme-default-content h2,.theme-container.no-navbar .theme-default-content h3,.theme-container.no-navbar .theme-default-content h4,.theme-container.no-navbar .theme-default-content h5,.theme-container.no-navbar .theme-default-content h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .page{padding-top:0}.theme-container.no-navbar .sidebar{top:0}.theme-container.no-sidebar .sidebar{display:none}@media (max-width: 719px){.theme-container.no-sidebar .sidebar{display:block}}.theme-container.no-sidebar .page{padding-left:0}.theme-default-content a:hover{text-decoration:underline}.theme-default-content img{max-width:100%}.theme-default-content h1,.theme-default-content h2,.theme-default-content h3,.theme-default-content h4,.theme-default-content h5,.theme-default-content h6{margin-top:calc(.5rem - var(--navbar-height));padding-top:calc(1rem + var(--navbar-height));margin-bottom:0}.theme-default-content h1:first-child,.theme-default-content h2:first-child,.theme-default-content h3:first-child,.theme-default-content h4:first-child,.theme-default-content h5:first-child,.theme-default-content h6:first-child{margin-bottom:1rem}.theme-default-content h1:first-child+p,.theme-default-content h1:first-child+pre,.theme-default-content h1:first-child+.custom-container,.theme-default-content h2:first-child+p,.theme-default-content h2:first-child+pre,.theme-default-content h2:first-child+.custom-container,.theme-default-content h3:first-child+p,.theme-default-content h3:first-child+pre,.theme-default-content h3:first-child+.custom-container,.theme-default-content h4:first-child+p,.theme-default-content h4:first-child+pre,.theme-default-content h4:first-child+.custom-container,.theme-default-content h5:first-child+p,.theme-default-content h5:first-child+pre,.theme-default-content h5:first-child+.custom-container,.theme-default-content h6:first-child+p,.theme-default-content h6:first-child+pre,.theme-default-content h6:first-child+.custom-container{margin-top:2rem}@media (max-width: 959px){.sidebar{font-size:15px;width:var(--sidebar-width-mobile)}.page{padding-left:var(--sidebar-width-mobile)}}@media (max-width: 719px){.sidebar{top:0;padding-top:var(--navbar-height);transform:translate(-100%)}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translate(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width: 419px){h1{font-size:1.9rem}}.navbar{--navbar-line-height: calc( var(--navbar-height) - 2 * var(--navbar-padding-v) );padding:var(--navbar-padding-v) var(--navbar-padding-h);line-height:var(--navbar-line-height)}.navbar .logo{height:var(--navbar-line-height);margin-right:var(--navbar-padding-v);vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:var(--c-text);position:relative}.navbar .navbar-items-wrapper{display:flex;position:absolute;box-sizing:border-box;top:var(--navbar-padding-v);right:var(--navbar-padding-h);height:var(--navbar-line-height);padding-left:var(--navbar-padding-h);white-space:nowrap;font-size:.9rem}.navbar .navbar-items-wrapper .search-box{flex:0 0 auto;vertical-align:top}@media (max-width: 719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.navbar-items{display:inline-block}.navbar-items a{display:inline-block;line-height:1.4rem;color:inherit}.navbar-items a:hover,.navbar-items a.router-link-active{color:var(--c-text)}.navbar-items .navbar-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:var(--navbar-line-height)}.navbar-items .navbar-item:first-child{margin-left:0}.navbar-items .navbar-item>a:hover,.navbar-items .navbar-item>a.router-link-active{margin-bottom:-2px;border-bottom:2px solid var(--c-text-accent)}@media (max-width: 719px){.navbar-items .navbar-item{margin-left:0}.navbar-items .navbar-item>a:hover,.navbar-items .navbar-item>a.router-link-active{margin-bottom:0;border-bottom:none}.navbar-items a:hover,.navbar-items a.router-link-active{color:var(--c-text-accent)}}.toggle-sidebar-button{position:absolute;top:.6rem;left:1rem;display:none;padding:.6rem;cursor:pointer}.toggle-sidebar-button .icon{display:flex;flex-direction:column;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;cursor:inherit}.toggle-sidebar-button .icon span{display:inline-block;width:100%;height:2px;border-radius:2px;background-color:var(--c-text);transition:transform var(--t-transform)}.toggle-sidebar-button .icon span:nth-child(2){margin:6px 0}@media screen and (max-width: 719px){.toggle-sidebar-button{display:block}}.toggle-color-mode-button{display:flex;margin:auto;margin-left:1rem;border:0;background:none;color:var(--c-text);opacity:.8;cursor:pointer}.toggle-color-mode-button:hover{opacity:1}.toggle-color-mode-button .icon{width:1.25rem;height:1.25rem}.DocSearch{transition:background-color var(--t-color)}.navbar-dropdown-wrapper{cursor:pointer}.navbar-dropdown-wrapper .navbar-dropdown-title,.navbar-dropdown-wrapper .navbar-dropdown-title-mobile{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:var(--c-text)}.navbar-dropdown-wrapper .navbar-dropdown-title:hover,.navbar-dropdown-wrapper .navbar-dropdown-title-mobile:hover{border-color:transparent}.navbar-dropdown-wrapper .navbar-dropdown-title .arrow,.navbar-dropdown-wrapper .navbar-dropdown-title-mobile .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.navbar-dropdown-wrapper .navbar-dropdown-title-mobile{display:none;font-weight:600;font-size:inherit}.navbar-dropdown-wrapper .navbar-dropdown-title-mobile:hover{color:var(--c-text-accent)}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item{color:inherit;line-height:1.7rem}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item .navbar-dropdown-subtitle{margin:.45rem 0 0;border-top:1px solid var(--c-border);padding:1rem 0 .45rem;font-size:.9rem}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item .navbar-dropdown-subtitle>span{padding:0 1.5rem 0 1.25rem}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item .navbar-dropdown-subtitle>a{font-weight:inherit}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item .navbar-dropdown-subtitle>a.router-link-active:after{display:none}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item .navbar-dropdown-subitem-wrapper{padding:0;list-style:none}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item .navbar-dropdown-subitem-wrapper .navbar-dropdown-subitem{font-size:.9em}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item a:hover,.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item a.router-link-active{color:var(--c-text-accent)}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid var(--c-text-accent);border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item:first-child .navbar-dropdown-subtitle{margin-top:0;padding-top:0;border-top:0}.navbar-dropdown-wrapper.mobile.open .navbar-dropdown-title,.navbar-dropdown-wrapper.mobile.open .navbar-dropdown-title-mobile{margin-bottom:.5rem}.navbar-dropdown-wrapper.mobile .navbar-dropdown-title,.navbar-dropdown-wrapper.mobile .navbar-dropdown-title-mobile{display:none}.navbar-dropdown-wrapper.mobile .navbar-dropdown-title-mobile{display:block}.navbar-dropdown-wrapper.mobile .navbar-dropdown{transition:height .1s ease-out;overflow:hidden}.navbar-dropdown-wrapper.mobile .navbar-dropdown .navbar-dropdown-item .navbar-dropdown-subtitle{border-top:0;margin-top:0;padding-top:0;padding-bottom:0}.navbar-dropdown-wrapper.mobile .navbar-dropdown .navbar-dropdown-item .navbar-dropdown-subtitle,.navbar-dropdown-wrapper.mobile .navbar-dropdown .navbar-dropdown-item>a{font-size:15px;line-height:2rem}.navbar-dropdown-wrapper.mobile .navbar-dropdown .navbar-dropdown-item .navbar-dropdown-subitem{font-size:14px;padding-left:1rem}.navbar-dropdown-wrapper:not(.mobile){height:1.8rem}.navbar-dropdown-wrapper:not(.mobile):hover .navbar-dropdown,.navbar-dropdown-wrapper:not(.mobile).open .navbar-dropdown{display:block!important}.navbar-dropdown-wrapper:not(.mobile).open:blur{display:none}.navbar-dropdown-wrapper:not(.mobile) .navbar-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:var(--c-bg-navbar);padding:.6rem 0;border:1px solid var(--c-border);border-bottom-color:var(--c-border-dark);text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}.page{padding-bottom:2rem;display:block}.page .theme-default-content{max-width:var(--content-width);margin:0 auto;padding:2rem 2.5rem;padding-top:0}@media (max-width: 959px){.page .theme-default-content{padding:2rem}}@media (max-width: 419px){.page .theme-default-content{padding:1.5rem}}.page-meta{max-width:var(--content-width);margin:0 auto;padding:1rem 2.5rem;overflow:auto}@media (max-width: 959px){.page-meta{padding:2rem}}@media (max-width: 419px){.page-meta{padding:1.5rem}}.page-meta .meta-item{cursor:default;margin-top:.8rem}.page-meta .meta-item .meta-item-label{font-weight:500;color:var(--c-text-lighter)}.page-meta .meta-item .meta-item-info{font-weight:400;color:var(--c-text-quote)}.page-meta .edit-link{display:inline-block;margin-right:.25rem}.page-meta .last-updated{float:right}@media (max-width: 719px){.page-meta .last-updated{font-size:.8em;float:none}.page-meta .contributors{font-size:.8em}}.page-nav{max-width:var(--content-width);margin:0 auto;padding:1rem 2.5rem 2rem;padding-bottom:0}@media (max-width: 959px){.page-nav{padding:2rem}}@media (max-width: 419px){.page-nav{padding:1.5rem}}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid var(--c-border);transition:border-color var(--t-color);padding-top:1rem;overflow:auto}.page-nav .prev a:before{content:"\2190"}.page-nav .next{float:right}.page-nav .next a:after{content:"\2192"}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .navbar-items{display:none;border-bottom:1px solid var(--c-border);transition:border-color var(--t-color);padding:.5rem 0 .75rem}.sidebar .navbar-items a{font-weight:600}.sidebar .navbar-items .navbar-item{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar .sidebar-items{padding:1.5rem 0}@media (max-width: 719px){.sidebar .navbar-items{display:block}.sidebar .navbar-items .navbar-dropdown-wrapper .navbar-dropdown .navbar-dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar .sidebar-items{padding:1rem 0}}.sidebar-item{cursor:default;border-left:.25rem solid transparent;color:var(--c-text)}.sidebar-item:focus-visible{outline-width:1px;outline-offset:-1px}.sidebar-item.active:not(p.sidebar-heading){font-weight:600;color:var(--c-text-accent);border-left-color:var(--c-text-accent)}.sidebar-item.sidebar-heading{transition:color .15s ease;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0}.sidebar-item.sidebar-heading+.sidebar-item-children{transition:height .1s ease-out;overflow:hidden;margin-bottom:.75rem}.sidebar-item.sidebar-heading.collapsible{cursor:pointer}.sidebar-item.sidebar-heading.collapsible .arrow{position:relative;top:-.12em;left:.5em}.sidebar-item:not(.sidebar-heading){font-size:1em;font-weight:400;display:inline-block;margin:0;padding:.35rem 1rem .35rem 2rem;line-height:1.4;width:100%;box-sizing:border-box}.sidebar-item:not(.sidebar-heading)+.sidebar-item-children{padding-left:1rem;font-size:.95em}.sidebar-item-children .sidebar-item-children .sidebar-item:not(.sidebar-heading){padding:.25rem 1rem .25rem 1.75rem}.sidebar-item-children .sidebar-item-children .sidebar-item:not(.sidebar-heading).active{font-weight:500;border-left-color:transparent}a.sidebar-heading+.sidebar-item-children .sidebar-item:not(.sidebar-heading).active{border-left-color:transparent}a.sidebar-item{cursor:pointer}a.sidebar-item:hover{color:var(--c-text-accent)}.table-of-contents .badge{vertical-align:middle}.dropdown-enter-from,.dropdown-leave-to{height:0!important}.fade-slide-y-enter-active{transition:all .2s ease}.fade-slide-y-leave-active{transition:all .2s cubic-bezier(1,.5,.8,1)}.fade-slide-y-enter-from,.fade-slide-y-leave-to{transform:translateY(10px);opacity:0}/*! @docsearch/css 3.3.3 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;position:relative;padding:0 0 2px;border:0;top:-1px;width:20px}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-moz-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"\bb "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;color:var(--docsearch-muted-color);border:0;width:20px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (min-width: 751px){#docsearch-container{min-width:171.36px}}@media (max-width: 750px){.DocSearch-Container{position:fixed}#docsearch-container{min-width:52px}}:root{--pwa-popup-z-index: 10;--pwa-popup-text-color: #2c3e50;--pwa-popup-bg-color: #ffffff;--pwa-popup-border-color: #3eaf7c;--pwa-popup-shadow: 0 4px 16px var(--pwa-popup-border-color);--pwa-popup-btn-text-color: #ffffff;--pwa-popup-btn-bg-color: #3eaf7c;--pwa-popup-btn-hover-bg-color: #4abf8a}.pwa-popup{position:fixed;right:1em;bottom:1em;padding:1em;border:1px solid var(--pwa-popup-border-color);border-radius:3px;background-color:var(--pwa-popup-bg-color);box-shadow:var(--pwa-popup-shadow);text-align:center;z-index:var(--pwa-popup-z-index)}.pwa-popup>button{cursor:pointer;margin-top:.5em;padding:.25em 2em;border:none;color:var(--pwa-popup-btn-text-color);background-color:var(--pwa-popup-btn-bg-color)}.pwa-popup>button:hover{background-color:var(--pwa-popup-btn-hover-bg-color)}.pwa-popup-enter-active,.pwa-popup-leave-active{transition:opacity .3s,transform .3s}.pwa-popup-enter-from,.pwa-popup-leave-to{opacity:0;transform:translateY(50%) scale(.5)}:root{--back-to-top-z-index: 5;--back-to-top-color: #3eaf7c;--back-to-top-color-hover: #71cda3}.back-to-top{cursor:pointer;position:fixed;bottom:2rem;right:2.5rem;width:2rem;height:1.2rem;background-color:var(--back-to-top-color);-webkit-mask:url(/assets/back-to-top.8efcbe56.svg) no-repeat;mask:url(/assets/back-to-top.8efcbe56.svg) no-repeat;z-index:var(--back-to-top-z-index)}.back-to-top:hover{background-color:var(--back-to-top-color-hover)}@media (max-width: 959px){.back-to-top{display:none}}.back-to-top-enter-active,.back-to-top-leave-active{transition:opacity .3s}.back-to-top-enter-from,.back-to-top-leave-to{opacity:0} diff --git a/assets/swc.html.1459de3d.js b/assets/swc.html.1459de3d.js new file mode 100644 index 00000000..e8d0c17c --- /dev/null +++ b/assets/swc.html.1459de3d.js @@ -0,0 +1,16 @@ +import{_ as t,r as o,o as p,c,b as s,d as n,a as r,f as a}from"./app.bd9c95b7.js";const i={},l=a(`<h1 id="fesjs-plugin-swc" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-swc" aria-hidden="true">#</a> @fesjs/plugin-swc</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>webpack 启用 swc,构建速度更快!</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-swc"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2>`,7),d={href:"https://swc.rs/docs/configuration/swcrc",target:"_blank",rel:"noopener noreferrer"},u=a(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">swc</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">coreJs</span><span class="token operator">:</span> <span class="token string">'3.27'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1);function k(v,h){const e=o("ExternalLinkIcon");return p(),c("div",null,[l,s("p",null,[n("传对象时使用swc进行编译和压缩,"),s("a",d,[n("loader配置"),r(e)]),n(",默认usage模式。")]),u])}const b=t(i,[["render",k],["__file","swc.html.vue"]]);export{b as default}; diff --git a/assets/swc.html.86a67f1f.js b/assets/swc.html.86a67f1f.js new file mode 100644 index 00000000..3cc3a99a --- /dev/null +++ b/assets/swc.html.86a67f1f.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-317f9008","path":"/reference/plugin/plugins/swc.html","title":"@fesjs/plugin-swc","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"编译时配置","slug":"编译时配置","link":"#编译时配置","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/swc.md"}');export{e as data}; diff --git a/assets/template.html.8e33412a.js b/assets/template.html.8e33412a.js new file mode 100644 index 00000000..b888143c --- /dev/null +++ b/assets/template.html.8e33412a.js @@ -0,0 +1,23 @@ +import{_ as n,o as a,c as s,f as t}from"./app.bd9c95b7.js";const p={},e=t(`<h1 id="html-模板" tabindex="-1"><a class="header-anchor" href="#html-模板" aria-hidden="true">#</a> HTML 模板</h1><p>Fes.js 默认模板内容是:</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>fes3.0+ html 模版文件从 <code>public/index.html</code> 挪到项目根目录。</p></div><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width,initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><%= title %><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= mountElementId %><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="修改页面标题" tabindex="-1"><a class="header-anchor" href="#修改页面标题" aria-hidden="true">#</a> 修改页面标题</h2><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'这是页面标题'</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>页面的标题会设置成 <code>这是页面标题</code>。</p><h2 id="模板变量" tabindex="-1"><a class="header-anchor" href="#模板变量" aria-hidden="true">#</a> 模板变量</h2><p>模版中可以使用的变量:</p><ul><li><code>NODE_ENV</code>: Node.js 环境变量</li><li><code>FES_ENV</code>: Fes.js 环境变量</li><li><code>BASE_URL</code>: publicPath</li><li><code>.env.**</code>: 文件中以 <code>FES_APP_</code> 开头的变量</li></ul><p>举个 🌰 :</p><div class="language-env line-numbers-mode" data-ext="env"><pre class="language-env"><code># .env +FES_APP_HELLO_WORLD=hello world +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><%= FES_APP_HELLO_WORLD %><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,13),l=[e];function c(o,i){return a(),s("div",null,l)}const d=n(p,[["render",c],["__file","template.html.vue"]]);export{d as default}; diff --git a/assets/template.html.900fbffc.js b/assets/template.html.900fbffc.js new file mode 100644 index 00000000..408e006f --- /dev/null +++ b/assets/template.html.900fbffc.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-7b48519a","path":"/guide/template.html","title":"HTML 模板","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"修改页面标题","slug":"修改页面标题","link":"#修改页面标题","children":[]},{"level":2,"title":"模板变量","slug":"模板变量","link":"#模板变量","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/template.md"}');export{e as data}; diff --git a/assets/upgrade3.html.9bc44b95.js b/assets/upgrade3.html.9bc44b95.js new file mode 100644 index 00000000..ed5a4cd0 --- /dev/null +++ b/assets/upgrade3.html.9bc44b95.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-4acab794","path":"/guide/upgrade3.html","title":"从 2.0.x 迁移到 3.0.x","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"版本 3.0.x 的 break","slug":"版本-3-0-x-的-break","link":"#版本-3-0-x-的-break","children":[]},{"level":2,"title":"继续使用 Webpack","slug":"继续使用-webpack","link":"#继续使用-webpack","children":[]},{"level":2,"title":"换成 Vite","slug":"换成-vite","link":"#换成-vite","children":[]},{"level":2,"title":"插件","slug":"插件","link":"#插件","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"guide/upgrade3.md"}');export{e as data}; diff --git a/assets/upgrade3.html.c353af42.js b/assets/upgrade3.html.c353af42.js new file mode 100644 index 00000000..61b7fe9c --- /dev/null +++ b/assets/upgrade3.html.c353af42.js @@ -0,0 +1 @@ +import{_ as i,r as l,o as c,c as s,b as t,d as e,a as n,w as a,f as d}from"./app.bd9c95b7.js";const h={},u=t("h1",{id:"从-2-0-x-迁移到-3-0-x",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#从-2-0-x-迁移到-3-0-x","aria-hidden":"true"},"#"),e(" 从 2.0.x 迁移到 3.0.x")],-1),_=t("h2",{id:"版本-3-0-x-的-break",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#版本-3-0-x-的-break","aria-hidden":"true"},"#"),e(" 版本 3.0.x 的 break")],-1),p={href:"https://github.com/webpack/webpack-dev-server",target:"_blank",rel:"noopener noreferrer"},b=t("code",null,"v3.x",-1),f=t("code",null,"v4.x",-1),k={href:"https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md",target:"_blank",rel:"noopener noreferrer"},m=t("h2",{id:"继续使用-webpack",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#继续使用-webpack","aria-hidden":"true"},"#"),e(" 继续使用 Webpack")],-1),x=t("li",null,[e("添加 Webpack 构建依赖包: "),t("code",null,"npm i @fesjs/builder-webpack -D"),e("。")],-1),g=t("code",null,"public/index.html",-1),v={href:"https://github.com/jantimon/html-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},w=t("h2",{id:"换成-vite",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#换成-vite","aria-hidden":"true"},"#"),e(" 换成 Vite")],-1),j=t("li",null,[e("安装依赖包 "),t("code",null,"npm i @fesjs/builder-vite"),e("。")],-1),V=t("li",null,[e("将 Webpack 相关的配置换成 Vite,具体可查看"),t("a",{href:"../reference/config"},"配置"),e("。")],-1),L=t("code",null,"public/index.html",-1),q={href:"https://github.com/jantimon/html-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},N={href:"https://github.com/vbenjs/vite-plugin-html",target:"_blank",rel:"noopener noreferrer"},W=t("li",null,[e("将 "),t("code",null,"require"),e(" 等 Vite 不支持的代码,改写成 Vite 支持的方式。")],-1),B=d('<h2 id="插件" tabindex="-1"><a class="header-anchor" href="#插件" aria-hidden="true">#</a> 插件</h2><p>插件都需要升级到 <code>3.0.x</code> 版本,新版添加了兼容<code>builder</code>的逻辑,但是提供的接口和配置没有变化,只需要升级版本即可使用。</p><ul><li><a href="../reference/plugins/layout">@fesjs/plugin-layout</a> 需要升级到<code>5.0.x</code>版本。</li><li><a href="../reference/plugins/locale">@fesjs/plugin-locale</a> 需要升级到<code>4.0.x</code>版本。</li><li><a href="../reference/plugins/qiankun">@fesjs/plugin-qiankun</a> 由于<code>qiankun</code>技术限制,子应用目前还只能使用 Webpack 构建。</li></ul>',3);function E(y,C){const o=l("RouterLink"),r=l("ExternalLinkIcon");return c(),s("div",null,[u,_,t("ol",null,[t("li",null,[e("编译时的 "),n(o,{to:"/reference/config/#base"},{default:a(()=>[e("base")]),_:1}),e(" 配置,移到了 "),n(o,{to:"/reference/config/#router"},{default:a(()=>[e("router.base")]),_:1}),e(" 下。")]),t("li",null,[t("a",p,[e("webpack-dev-server"),n(r)]),e(" 从 "),b,e(" 升级到了 "),f,e(",如果遇到配置不兼容,可以查看"),t("a",k,[e("webpack-dev-server 3.x 升级 4.x"),n(r)]),e("。")])]),m,t("ol",null,[x,t("li",null,[e("如果有,将 "),g,e(" 文件挪到项目根目录,移除 "),t("a",v,[e("html-webpack-plugin"),n(r)]),e(" 相关配置,具体模版变量使用请查看"),n(o,{to:"/guide/template.html"},{default:a(()=>[e("HTML 模版")]),_:1}),e("。")])]),w,t("ol",null,[j,V,t("li",null,[e("将 html 模版文件从 "),L,e(" 挪到项目根目录,如果有相应的 "),t("a",q,[e("html-webpack-plugin"),n(r)]),e(" 配置,需要改成 "),t("a",N,[e("vite-plugin-html"),n(r)]),e(" 的写法。")]),W]),B])}const R=i(h,[["render",E],["__file","upgrade3.html.vue"]]);export{R as default}; diff --git a/assets/vuex.html.1794fc22.js b/assets/vuex.html.1794fc22.js new file mode 100644 index 00000000..735863b1 --- /dev/null +++ b/assets/vuex.html.1794fc22.js @@ -0,0 +1,122 @@ +import{_ as p,r as e,o,c,b as n,d as s,a as l,f as a}from"./app.bd9c95b7.js";const i={},u=a(`<h1 id="fesjs-plugin-vuex" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-vuex" aria-hidden="true">#</a> @fesjs/plugin-vuex</h1><div class="custom-container tip"><p class="custom-container-title">提示</p><p>vue3+ 官方推荐使用<a href="./pinia">pinia</a>,不在推荐使用 vuex。</p></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>集成 vuex 插件</p><p>增强 vuex,导出所有的<code>mutations</code>、<code>actions</code>和<code>getter</code>的事件类型,编辑器提示</p><p>约定模式,module 和 plugin 定义放在 stores 目录下,文件名包含 plugin 被解析为插件,无需额外配置,定义即可用。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>└── src + ├── pages + │ └── index.vue + └── stores + │ └── foo + │ │ └── bar.js + │ ├── counter.js + │ ├── plugin-logger.js + │ ├── user.js + └── app.js +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>为了防止<code>fesjs</code>与<code>vuex</code>的 export 冲突,fesjs 不提供导出 vuex 的任何 api。你可以直接使用 vuex 的 api</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-vuex"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">vuex</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">strict</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启严格模式</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="场景使用" tabindex="-1"><a class="header-anchor" href="#场景使用" aria-hidden="true">#</a> 场景使用</h2><p>先定义在 stores 下定义 user 模块,包含嵌套模块</p><p>stores/user.js</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">namespaced</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'aring'</span><span class="token punctuation">,</span> + <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token function">login</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">reslove</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">reslove</span><span class="token punctuation">(</span><span class="token string">'OK'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">province</span><span class="token operator">:</span> <span class="token string">'广东省'</span><span class="token punctuation">,</span> + <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">'深圳市'</span><span class="token punctuation">,</span> + <span class="token literal-property property">zone</span><span class="token operator">:</span> <span class="token string">'南山区'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token function">address</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> state<span class="token punctuation">.</span>province <span class="token operator">+</span> state<span class="token punctuation">.</span>city <span class="token operator">+</span> state<span class="token punctuation">.</span>zone<span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>stores/foo/bar.js</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">namespaced</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token function">increment</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + state<span class="token punctuation">.</span>count<span class="token operator">++</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token function">doubleCount</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token function">asyncIncrement</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>导出的<code>mutations</code>、<code>actions</code>和<code>getter</code>的事件类型,将会按文件命名;</p><p>如<code>ACTION_TYPES.user.login</code>指向 user 模块中 actions 的 login 方法</p><p>如<code>GETTER_TYPES.user.address</code>指向 user 模块中嵌套的 address getter</p><p>如<code>MUTATION_TYPES.fooBar.increment</code>指向 foo/bar 模块中 mutations 的 increment 方法</p></div><p>在 vue 文件中使用 store</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Vuex<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>login<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>async login<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fooBarIncrement<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>foo/bar:{{ fooBarDoubleCount }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{ address }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span><span class="token punctuation">></span></span> +{ + "name": "store", + "title": "vuex测试" +} +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>config</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> computed<span class="token punctuation">,</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span><span class="token punctuation">;</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">MUTATION_TYPES</span><span class="token punctuation">,</span> <span class="token constant">GETTER_TYPES</span><span class="token punctuation">,</span> <span class="token constant">ACTION_TYPES</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'store==>'</span><span class="token punctuation">,</span> store<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> disabled <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token comment">// 可以利用导出的事件类型,不再通过字符传入(store.getters['user/address'])</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token constant">GETTER_TYPES</span><span class="token punctuation">.</span>user<span class="token punctuation">.</span>address<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + disabled<span class="token punctuation">,</span> + <span class="token function-variable function">login</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + disabled<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> + store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token constant">ACTION_TYPES</span><span class="token punctuation">.</span>user<span class="token punctuation">.</span>login<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> + disabled<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function-variable function">fooBarIncrement</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token constant">MUTATION_TYPES</span><span class="token punctuation">.</span>fooBar<span class="token punctuation">.</span>increment<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// foo/bar目录会解析成驼峰fooBar</span> + <span class="token literal-property property">fooBarDoubleCount</span><span class="token operator">:</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token constant">GETTER_TYPES</span><span class="token punctuation">.</span>fooBar<span class="token punctuation">.</span>doubleCount<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>由于该插件注册在 onAppCreated 中,如果在 onAppCreated 及之前使用 useStore 时,获取不到 vuex 实例</p><p><code>fesjs</code>导出了 vuex 实例<code>store</code>,如在 app.js 文件中</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> store<span class="token punctuation">,</span> <span class="token constant">GETTER_TYPES</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token constant">GETTER_TYPES</span><span class="token punctuation">.</span>user<span class="token punctuation">.</span>address<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></div><h2 id="vuex-插件" tabindex="-1"><a class="header-anchor" href="#vuex-插件" aria-hidden="true">#</a> vuex 插件</h2>`,25),r={href:"https://next.vuex.vuejs.org/guide/plugins.html",target:"_blank",rel:"noopener noreferrer"},k=a('<h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="store" tabindex="-1"><a class="header-anchor" href="#store" aria-hidden="true">#</a> store</h3><ul><li>类型 <code>Object</code></li><li>vuex 实例</li></ul><h3 id="mutation-types" tabindex="-1"><a class="header-anchor" href="#mutation-types" aria-hidden="true">#</a> MUTATION_TYPES</h3><ul><li>类型 <code>Object</code></li><li>mutation 的所有事件类型</li></ul><h3 id="getter-types" tabindex="-1"><a class="header-anchor" href="#getter-types" aria-hidden="true">#</a> GETTER_TYPES</h3><ul><li>类型 <code>Object</code></li><li>getter 的所有方法名</li></ul><h3 id="action-types" tabindex="-1"><a class="header-anchor" href="#action-types" aria-hidden="true">#</a> ACTION_TYPES</h3><ul><li>类型 <code>Object</code></li><li>action 的所有事件类型</li></ul>',9);function d(v,m){const t=e("ExternalLinkIcon");return o(),c("div",null,[u,n("p",null,[s("stores 文件夹下的文件名包含 plugin 被解析为插件,vuex 插件写法参考"),n("a",r,[s("官方文档"),l(t)])]),k])}const g=p(i,[["render",d],["__file","vuex.html.vue"]]);export{g as default}; diff --git a/assets/vuex.html.3e9bd488.js b/assets/vuex.html.3e9bd488.js new file mode 100644 index 00000000..85a548f8 --- /dev/null +++ b/assets/vuex.html.3e9bd488.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-5f4c684e","path":"/reference/plugin/plugins/vuex.html","title":"@fesjs/plugin-vuex","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"配置","slug":"配置","link":"#配置","children":[]},{"level":2,"title":"场景使用","slug":"场景使用","link":"#场景使用","children":[]},{"level":2,"title":"vuex 插件","slug":"vuex-插件","link":"#vuex-插件","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"store","slug":"store","link":"#store","children":[]},{"level":3,"title":"MUTATION_TYPES","slug":"mutation-types","link":"#mutation-types","children":[]},{"level":3,"title":"GETTER_TYPES","slug":"getter-types","link":"#getter-types","children":[]},{"level":3,"title":"ACTION_TYPES","slug":"action-types","link":"#action-types","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/vuex.md"}');export{e as data}; diff --git a/assets/watermark.html.6ba7e245.js b/assets/watermark.html.6ba7e245.js new file mode 100644 index 00000000..5d82796b --- /dev/null +++ b/assets/watermark.html.6ba7e245.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-1c0edac3","path":"/reference/plugin/plugins/watermark.html","title":"@fesjs/plugin-watermark","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"编译时配置","slug":"编译时配置","link":"#编译时配置","children":[{"level":3,"title":"disabled","slug":"disabled","link":"#disabled","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"createWatermark","slug":"createwatermark","link":"#createwatermark","children":[]}]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/watermark.md"}');export{e as data}; diff --git a/assets/watermark.html.e99470a0.js b/assets/watermark.html.e99470a0.js new file mode 100644 index 00000000..5b520405 --- /dev/null +++ b/assets/watermark.html.e99470a0.js @@ -0,0 +1,35 @@ +import{_ as n,o as a,c as s,f as e}from"./app.bd9c95b7.js";const t={},p=e(`<h1 id="fesjs-plugin-watermark" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-watermark" aria-hidden="true">#</a> @fesjs/plugin-watermark</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>给页面添加水印效果</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-watermark"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">watermark</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="disabled" tabindex="-1"><a class="header-anchor" href="#disabled" aria-hidden="true">#</a> disabled</h3><p>是否禁用水印,默认是<code>false</code>。</p><p>可以在开发环境关闭水印:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">watermark</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="createwatermark" tabindex="-1"><a class="header-anchor" href="#createwatermark" aria-hidden="true">#</a> createWatermark</h3><p>创建水印功能,通过 <code>@fesjs/fes</code> 导入 API:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createWatermark<span class="token punctuation">,</span> destroyWatermark <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token function">createWatermark</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'我是水印'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 生成水印</span> +<span class="token function">destroyWatermark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 销毁水印</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>默认参数是:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> + <span class="token punctuation">(</span>content <span class="token operator">=</span> <span class="token string">'请勿外传'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>container <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>width <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>height <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>textAlign <span class="token operator">=</span> <span class="token string">'center'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>textBaseline <span class="token operator">=</span> <span class="token string">'middle'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>fontSize <span class="token operator">=</span> <span class="token string">'14px'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>fontFamily <span class="token operator">=</span> <span class="token string">'Microsoft Yahei'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>fillStyle <span class="token operator">=</span> <span class="token string">'rgba(184, 184, 184, 0.3)'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>rotate <span class="token operator">=</span> <span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>zIndex <span class="token operator">=</span> <span class="token number">99999</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>timestamp <span class="token operator">=</span> <span class="token string">'YYYY-MM-DD HH:mm'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果不需要时间戳,则可以设置<code>timestamp</code>为<code>false</code>。</p>`,19),o=[p];function c(i,l){return a(),s("div",null,o)}const u=n(t,[["render",c],["__file","watermark.html.vue"]]);export{u as default}; diff --git a/assets/windicss.html.17a13504.js b/assets/windicss.html.17a13504.js new file mode 100644 index 00000000..e21bddf8 --- /dev/null +++ b/assets/windicss.html.17a13504.js @@ -0,0 +1 @@ +const e=JSON.parse('{"key":"v-392e58ee","path":"/reference/plugin/plugins/windicss.html","title":"@fesjs/plugin-windicss","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"配置","slug":"配置","link":"#配置","children":[]}],"git":{"updatedTime":1680333770000,"contributors":[{"name":"winixt","email":"haizekuo@gmail.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/windicss.md"}');export{e as data}; diff --git a/assets/windicss.html.afe09b0e.js b/assets/windicss.html.afe09b0e.js new file mode 100644 index 00000000..18638fcd --- /dev/null +++ b/assets/windicss.html.afe09b0e.js @@ -0,0 +1,11 @@ +import{_ as t,r as i,o,c,b as s,d as n,a as r,f as a}from"./app.bd9c95b7.js";const p={},d=a(`<h1 id="fesjs-plugin-windicss" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-windicss" aria-hidden="true">#</a> @fesjs/plugin-windicss</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p><code>windicss</code> 支持</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/plugin-windicss"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2>`,7),l=s("code",null,".fes.js",-1),u={href:"https://windicss.org/integrations/webpack.html",target:"_blank",rel:"noopener noreferrer"},h=a(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">windicss</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'./'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1);function v(k,m){const e=i("ExternalLinkIcon");return o(),c("div",null,[d,s("p",null,[n("在 "),l,n(" 配置文件中添加自定义配置,详细配置"),s("a",u,[n("请看"),r(e)]),n(":")]),h])}const b=t(p,[["render",v],["__file","windicss.html.vue"]]);export{b as default}; diff --git a/guide/builder.html b/guide/builder.html new file mode 100644 index 00000000..ed8c4a5f --- /dev/null +++ b/guide/builder.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="zh-CN"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> + <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>支持 Vite 和 Webpack 双构建 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/builder.html.5491993d.js"><link rel="modulepreload" href="/assets/builder.html.246dbbe3.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> + </head> + <body> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/builder.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/builder.html#使用差异" class="router-link-active router-link-exact-active sidebar-item" aria-label="使用差异"><!--[--><!--]--> 使用差异 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/builder.html#配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/builder.html#静态文件处理" class="router-link-active router-link-exact-active sidebar-item" aria-label="静态文件处理"><!--[--><!--]--> 静态文件处理 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/builder.html#html-模版" class="router-link-active router-link-exact-active sidebar-item" aria-label="html 模版"><!--[--><!--]--> html 模版 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="支持-vite-和-webpack-双构建" tabindex="-1"><a class="header-anchor" href="#支持-vite-和-webpack-双构建" aria-hidden="true">#</a> 支持 Vite 和 Webpack 双构建</h1><p><code>Fes.js@3.0.x</code> 版本支持 Vite 和 Webpack 两种构建方式,不再内置构建方式,需要开发者自行选择:</p><ul><li>选用 Vite 构建,安装 <code>npm i @fesjs/builder-vite</code> 依赖即可。</li><li>选用 Webpack 构建,安装 <code>npm i @fesjs/builder-webpack</code> 依赖即可。</li></ul><h2 id="使用差异" tabindex="-1"><a class="header-anchor" href="#使用差异" aria-hidden="true">#</a> 使用差异</h2><p>由于 Fes.js 在 Vite 和 Webpack 上做了一层封装,开发者关心的构建配置不会太多。从使用上来说,主要存在以下几个差异点:</p><h3 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>Webpack 和 Vite 构建在配置方面有一些差异,具体可以查看<a href="../reference/config">配置</a>。</p><h3 id="静态文件处理" tabindex="-1"><a class="header-anchor" href="#静态文件处理" aria-hidden="true">#</a> 静态文件处理</h3><p>由于 Vite 的限制,不支持 <code>require</code> 语法,具体 Vite 的用法可以查看<a href="https://cn.vitejs.dev/guide/assets.html" target="_blank" rel="noopener noreferrer">官网<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></p><h3 id="html-模版" tabindex="-1"><a class="header-anchor" href="#html-模版" aria-hidden="true">#</a> html 模版</h3><p>html 模版比较常规的需求,例如模版变量,Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求, Webpack 可以使用 <a href="https://github.com/jantimon/html-webpack-plugin" target="_blank" rel="noopener noreferrer">html-webpack-plugin<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,Vite 使用<a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noopener noreferrer">vite-plugin-html<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 进行个性化配置。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>fes3.0+ html 模版文件从 <code>public/index.html</code> 挪到项目根目录。</p></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/builder.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/directory-structure.html" class="" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a></span><span class="next"><a href="/guide/config.html" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> + </body> +</html> diff --git a/guide/config.html b/guide/config.html index b43ed6c6..425814cb 100644 --- a/guide/config.html +++ b/guide/config.html @@ -3,68 +3,89 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> - <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>配置 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> + <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>编译时配置 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/config.html.bebaf600.js"><link rel="modulepreload" href="/assets/config.html.637a9806.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/config.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/config.html#本地临时配置文件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="本地临时配置文件"><!--[--><!--]--> 本地临时配置文件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/config.html#多环境多份配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="多环境多份配置"><!--[--><!--]--> 多环境多份配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/config.html#优先级" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="优先级"><!--[--><!--]--> 优先级 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h1><p>Fes.js 约定 <code>.fes.js</code> 文件为项目编译需要配置文件,可以引入 node 端依赖项,不要引入浏览器端依赖项。</p><p>一份常见的配置示例如下:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'/foo/'</span><span class="token punctuation">,</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/config.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/config.html#本地临时配置文件" class="router-link-active router-link-exact-active sidebar-item" aria-label="本地临时配置文件"><!--[--><!--]--> 本地临时配置文件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/config.html#多环境多份配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="多环境多份配置"><!--[--><!--]--> 多环境多份配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/config.html#优先级" class="router-link-active router-link-exact-active sidebar-item" aria-label="优先级"><!--[--><!--]--> 优先级 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h1><p>Fes.js 约定 <code>.fes.js</code> 文件为项目编译需要编译时配置文件,可以引入 <code>node</code> 端依赖项,不要引入浏览器端依赖项。</p><p>一份常见的配置示例如下(更多配置项请查阅<a href="../reference/config">配置</a>):</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineBuildConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineBuildConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> - <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/v2'</span> + <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/v2'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'/v2'</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token string-property property">'target'</span><span class="token operator">:</span> <span class="token string">'https://api.douban.com/'</span><span class="token punctuation">,</span> - <span class="token string-property property">'changeOrigin'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">'https://api.douban.com/'</span><span class="token punctuation">,</span> + <span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Fes.js"</span><span class="token punctuation">,</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Fes.js'</span><span class="token punctuation">,</span> <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token string">'Created by MumbelFe'</span><span class="token punctuation">,</span> <span class="token literal-property property">multiTabs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> - <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'simpleList'</span> - <span class="token punctuation">}</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h2 id="本地临时配置文件" tabindex="-1"><a class="header-anchor" href="#本地临时配置文件" aria-hidden="true">#</a> 本地临时配置文件</h2><p>可以新建 <code>.fes.local.js</code> 作为本地临时配置文件。这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配置。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span> + <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'simpleList'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="本地临时配置文件" tabindex="-1"><a class="header-anchor" href="#本地临时配置文件" aria-hidden="true">#</a> 本地临时配置文件</h2><p>可以新建 <code>.fes.local.js</code> 作为本地临时配置文件。这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// .fes.local.js</span> -<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>最终的配置是:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最终的配置是:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="custom-container warning"><p class="custom-container-title">注意</p><p><code>.fes.local.js</code> 是本地验证使用的临时配置,仅在 <code>fes dev</code> 时有效,请将其添加到 <code>.gitignore</code>,务必不要提交到 <code>git</code> 仓库中。</p></div><h2 id="多环境多份配置" tabindex="-1"><a class="header-anchor" href="#多环境多份配置" aria-hidden="true">#</a> 多环境多份配置</h2><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境,来指定当前环境的配置文件,这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配。</p><p>比如配置如下:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container warning"><p class="custom-container-title">注意</p><p><code>.fes.local.js</code> 是本地验证使用的临时配置,仅在 <code>fes dev</code> 时有效,请将其添加到 <code>.gitignore</code>,不要提交到 <code>git</code> 仓库中。</p></div><h2 id="多环境多份配置" tabindex="-1"><a class="header-anchor" href="#多环境多份配置" aria-hidden="true">#</a> 多环境多份配置</h2><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境,来指定当前环境的配置文件,这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配。</p><p>比如配置如下:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// .fes.uat.js</span> -<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>当我们运行:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token assign-left variable">FES_ENV</span><span class="token operator">=</span>uat fes dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>这时候会命中 <code>.fes.uat.js</code> 这份环境配置,最终配置是:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当我们运行:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">FES_ENV</span><span class="token operator">=</span>uat fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>这时候会命中 <code>.fes.uat.js</code> 这份环境配置,最终配置是:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="优先级" tabindex="-1"><a class="header-anchor" href="#优先级" aria-hidden="true">#</a> 优先级</h2><p>本地临时配置 > 环境配置 > 基础配置</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果多份配置中存在相同的配置项,<strong>则优先级高的会覆盖优先级低的</strong>。</p></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/config.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/directory-structure.html" class="nav-link" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/guide/runtime-config.html" class="nav-link" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="优先级" tabindex="-1"><a class="header-anchor" href="#优先级" aria-hidden="true">#</a> 优先级</h2><p>本地临时配置 > 环境配置 > 基础配置</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果多份配置中存在相同的配置项,<strong>则优先级高的会覆盖优先级低的</strong>。</p></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/config.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/builder.html" class="" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a></span><span class="next"><a href="/guide/runtime-config.html" class="" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/contributing.html b/guide/contributing.html index fdecceae..85417f60 100644 --- a/guide/contributing.html +++ b/guide/contributing.html @@ -3,20 +3,38 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>贡献指南 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/contributing.html.3aa886b1.js"><link rel="modulepreload" href="/assets/contributing.html.8f3528e9.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a aria-current="page" href="/fes.js/guide/contributing.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-heading sidebar-item active" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><ul class=""><li><!--[--><a aria-current="page" href="/fes.js/guide/contributing.html#包概览" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="包概览"><!--[--><!--]--> 包概览 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/contributing.html#开发准备" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="开发准备"><!--[--><!--]--> 开发准备 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/contributing.html#贡献文档" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="贡献文档"><!--[--><!--]--> 贡献文档 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/contributing.html#贡献源码" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="贡献源码"><!--[--><!--]--> 贡献源码 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/contributing.html#提交pr" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="提交PR"><!--[--><!--]--> 提交PR <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="贡献指南" tabindex="-1"><a class="header-anchor" href="#贡献指南" aria-hidden="true">#</a> 贡献指南</h1><h2 id="包概览" tabindex="-1"><a class="header-anchor" href="#包概览" aria-hidden="true">#</a> 包概览</h2><p>项目仓库借助于 <a href="https://classic.yarnpkg.com/zh-Hans/docs/workspaces" target="_blank" rel="noopener noreferrer">Yarn 工作区<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 来实现 <a href="https://en.wikipedia.org/wiki/Monorepo" target="_blank" rel="noopener noreferrer"> Monorepo<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> ,在 <code>packages</code> 目录下存放多个互相关联的独立包。</p><ul><li><p><code>@fesjs/create-fes-app</code>: 创建项目模板模块。提供<code>create-fes-app</code>命令,提供创建多种类型项目模板的能力。</p></li><li><p><code>@fesjs/compiler</code>: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。</p></li><li><p><code>@fesjs/runtime</code>: 运行时插件模块。集成了vue-router,定义运行时插件生命周期、插件通讯机制。</p></li><li><p><code>@fesjs/preset-build-in</code>: 内置插件集。包含<code>dev</code>、<code>build</code>等命令,集成webpack5+babel,提供方便编写插件的API,入口文件处理,路由处理等能力。</p></li><li><p><code>@fesjs/fes-template</code>: 适用于PC类型的模板项目。</p></li><li><p><code>@fesjs/fes-template-h5</code>: 适用于H5类型的模板项目。</p></li><li><p><code>@fesjs/plugin-${name}</code>: 官方插件。</p></li><li><p><code>@fesjs/fes</code>: 入口模块。提供<code>fes</code>命令和 API 入口,封装<code>@fesjs/compiler</code> + <code>@fesjs/runtime</code> + <code>@fesjs/preset-build-in</code>,用户只需要安装此依赖和其他插件。</p></li></ul><h2 id="开发准备" tabindex="-1"><a class="header-anchor" href="#开发准备" aria-hidden="true">#</a> 开发准备</h2><p>开发要求:</p><ul><li><a href="http://nodejs.org" target="_blank" rel="noopener noreferrer">Node.js v14+<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li><li><a href="https://classic.yarnpkg.com/zh-Hans/docs/install" target="_blank" rel="noopener noreferrer">Yarn v1<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li></ul><p>本项目开发使用的一些主要工具:</p><ul><li><a href="https://jestjs.io/" target="_blank" rel="noopener noreferrer">Jest<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 用于单元测试</li><li><a href="https://eslint.org/" target="_blank" rel="noopener noreferrer">ESLint<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> + <a href="https://prettier.io/" target="_blank" rel="noopener noreferrer">Prettier<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 用于代码检查和格式化</li></ul><p>克隆仓库:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">git</span> clone https://github.com/WeBankFinTech/fes.js.git -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>进入<code>fes.js</code>目录,安装依赖:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">yarn</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="贡献文档" tabindex="-1"><a class="header-anchor" href="#贡献文档" aria-hidden="true">#</a> 贡献文档</h2><p>文档代码在<code>docs</code>目录,基于 <a href="https://v2.vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">vuepress<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 实现。</p><h4 id="第一步-启动服务" tabindex="-1"><a class="header-anchor" href="#第一步-启动服务" aria-hidden="true">#</a> 第一步:启动服务</h4><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">yarn</span> docs:dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h4 id="第二步-修改md文件" tabindex="-1"><a class="header-anchor" href="#第二步-修改md文件" aria-hidden="true">#</a> 第二步:修改md文件</h4><p>菜单配置在<code>/docs/.vuepress/configs/sidebar/zh.ts</code>中,可以通过此配置找到对应想修改的文档。</p><p>如果想添加图片,则可以先把图片添加至<code>/docs/.vuepress/public</code>,在代码中使用:</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>$withBase('framework.png')<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>架构<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h4 id="第三步-查看更新" tabindex="-1"><a class="header-anchor" href="#第三步-查看更新" aria-hidden="true">#</a> 第三步:查看更新</h4><p>当md文档保存后,文档会自动更新,在<code>http://localhost:8080/</code>查看。</p><h2 id="贡献源码" tabindex="-1"><a class="header-anchor" href="#贡献源码" aria-hidden="true">#</a> 贡献源码</h2><p><code>Fes.js</code>统一使用<code>ES Module</code>规范编写源码,代码会在 node 端和浏览器端执行,所以源码需要编译后才能发布成包,再被执行。</p><h4 id="启动编译服务" tabindex="-1"><a class="header-anchor" href="#启动编译服务" aria-hidden="true">#</a> 启动编译服务</h4><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">yarn</span> dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>当我们修改<code>build.config.js</code>中配置的包代码时,会把<code>src</code>目录的源码编译后到<code>lib</code>目录。</p><h4 id="修改源码" tabindex="-1"><a class="header-anchor" href="#修改源码" aria-hidden="true">#</a> 修改源码</h4><p>在了解<code>Fes.js</code>设计前提下,修改核心代码或者插件代码。</p><h4 id="验证修改内容" tabindex="-1"><a class="header-anchor" href="#验证修改内容" aria-hidden="true">#</a> 验证修改内容</h4><p>根据需求选择模板项目来验证修改内容,比如选择<code>fes-template</code>:</p><ol><li>查看需待验证包是否已经添加到模板项目的依赖中,如果没有则在模板项目的 package.json 中添加包依赖,添加后在根目录执行<code>yarn</code>关联依赖</li><li>启动模板项目的开发服务</li></ol><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> packages/fes-template -<span class="token function">yarn</span> dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li>在项目模板中添加代码验证修改内容</li><li>打开<code>localhost:8000</code>查看结果</li></ol><h4 id="快速调试技巧" tabindex="-1"><a class="header-anchor" href="#快速调试技巧" aria-hidden="true">#</a> 快速调试技巧</h4><p>每次修改插件或者核心代码后,等待自动编译完,需要在模板目录重新执行<code>fes dev</code>,比较费时费力。</p><p>可以先在模板的 <code>.fes</code> 目录中找到对应临时代码,更改逻辑,验证完后再将变更逻辑保存到正式文件中。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>直接修改临时文件切莫重新执行<code>fes dev</code>,修改会被覆盖。</p></div><h2 id="提交pr" tabindex="-1"><a class="header-anchor" href="#提交pr" aria-hidden="true">#</a> 提交PR</h2><ol><li>fork项目!</li><li>创建你的功能分支: git checkout -b my-new-feature</li><li>本地提交新代码: git commit -am 'Add some feature'</li><li>推送本地到服务器分支: git push origin my-new-feature</li><li>创建一个PR</li></ol><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/contributing.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/fes.js/guide/faq.html" class="nav-link" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/guide/contributing.html" class="router-link-active router-link-exact-active router-link-active sidebar-item sidebar-heading active" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/contributing.html#包概览" class="router-link-active router-link-exact-active sidebar-item" aria-label="包概览"><!--[--><!--]--> 包概览 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/contributing.html#开发准备" class="router-link-active router-link-exact-active sidebar-item" aria-label="开发准备"><!--[--><!--]--> 开发准备 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/contributing.html#贡献文档" class="router-link-active router-link-exact-active sidebar-item" aria-label="贡献文档"><!--[--><!--]--> 贡献文档 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/contributing.html#贡献源码" class="router-link-active router-link-exact-active sidebar-item" aria-label="贡献源码"><!--[--><!--]--> 贡献源码 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/contributing.html#提交-pr" class="router-link-active router-link-exact-active sidebar-item" aria-label="提交 PR"><!--[--><!--]--> 提交 PR <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="贡献指南" tabindex="-1"><a class="header-anchor" href="#贡献指南" aria-hidden="true">#</a> 贡献指南</h1><h2 id="包概览" tabindex="-1"><a class="header-anchor" href="#包概览" aria-hidden="true">#</a> 包概览</h2><p>项目仓库借助于 <a href="https://pnpm.io/pnpm-workspace_yaml" target="_blank" rel="noopener noreferrer">pnpm 工作区<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 来实现 <a href="https://en.wikipedia.org/wiki/Monorepo" target="_blank" rel="noopener noreferrer"> Monorepo<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> ,在 <code>packages</code> 目录下存放多个互相关联的独立包。</p><ul><li><p><code>@fesjs/create-fes-app</code>: 创建项目模板模块。提供<code>create-fes-app</code>命令,提供创建多种类型项目模板的能力。</p></li><li><p><code>@fesjs/compiler</code>: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。</p></li><li><p><code>@fesjs/runtime</code>: 运行时插件模块。集成了 vue-router,定义运行时插件生命周期、插件通讯机制。</p></li><li><p><code>@fesjs/preset-build-in</code>: 内置插件集。包含<code>dev</code>、<code>build</code>等命令,集成 webpack5+babel,提供方便编写插件的 API,入口文件处理,路由处理等能力。</p></li><li><p><code>@fesjs/fes-template</code>: 适用于 PC 类型的模板项目。</p></li><li><p><code>@fesjs/fes-template-h5</code>: 适用于 H5 类型的模板项目。</p></li><li><p><code>@fesjs/plugin-${name}</code>: 官方插件。</p></li><li><p><code>@fesjs/fes</code>: 入口模块。提供<code>fes</code>命令和 API 入口,封装<code>@fesjs/compiler</code> + <code>@fesjs/runtime</code> + <code>@fesjs/preset-build-in</code>,用户只需要安装此依赖和其他插件。</p></li></ul><h2 id="开发准备" tabindex="-1"><a class="header-anchor" href="#开发准备" aria-hidden="true">#</a> 开发准备</h2><p>开发要求:</p><ul><li><a href="http://nodejs.org" target="_blank" rel="noopener noreferrer">Node.js v14+<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></li><li><a href="https://pnpm.io/" target="_blank" rel="noopener noreferrer">pnpm v8<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></li></ul><p>本项目开发使用的一些主要工具:</p><ul><li><a href="https://jestjs.io/" target="_blank" rel="noopener noreferrer">Jest<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 用于单元测试</li><li><a href="https://eslint.org/" target="_blank" rel="noopener noreferrer">ESLint<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> + <a href="https://prettier.io/" target="_blank" rel="noopener noreferrer">Prettier<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 用于代码检查和格式化</li></ul><p>克隆仓库:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">git</span> clone https://github.com/WeBankFinTech/fes.js.git +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>进入<code>fes.js</code>目录,安装依赖:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> i +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="贡献文档" tabindex="-1"><a class="header-anchor" href="#贡献文档" aria-hidden="true">#</a> 贡献文档</h2><p>文档代码在<code>docs</code>目录,基于 <a href="https://v2.vuepress.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">vuepress<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 实现。</p><h4 id="第一步-启动服务" tabindex="-1"><a class="header-anchor" href="#第一步-启动服务" aria-hidden="true">#</a> 第一步:启动服务</h4><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> docs:dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="第二步-修改-md-文件" tabindex="-1"><a class="header-anchor" href="#第二步-修改-md-文件" aria-hidden="true">#</a> 第二步:修改 md 文件</h4><p>菜单配置在<code>/docs/.vuepress/configs/sidebar/zh.ts</code>中,可以通过此配置找到对应想修改的文档。</p><p>如果想添加图片,则可以先把图片添加至<code>/docs/.vuepress/public</code>,在代码中使用:</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>$withBase('framework.png')<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>架构<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="第三步-查看更新" tabindex="-1"><a class="header-anchor" href="#第三步-查看更新" aria-hidden="true">#</a> 第三步:查看更新</h4><p>当 md 文档保存后,文档会自动更新,在<code>http://localhost:8080/</code>查看。</p><h2 id="贡献源码" tabindex="-1"><a class="header-anchor" href="#贡献源码" aria-hidden="true">#</a> 贡献源码</h2><p><code>Fes.js</code>统一使用<code>ES Module</code>规范编写源码,代码会在 node 端和浏览器端执行,所以源码需要编译后才能发布成包,再被执行。</p><h4 id="启动编译服务" tabindex="-1"><a class="header-anchor" href="#启动编译服务" aria-hidden="true">#</a> 启动编译服务</h4><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>当我们修改<code>build.config.js</code>中配置的包代码时,会把<code>src</code>目录的源码编译后到<code>lib</code>目录。</p><h4 id="修改源码" tabindex="-1"><a class="header-anchor" href="#修改源码" aria-hidden="true">#</a> 修改源码</h4><p>在了解<code>Fes.js</code>设计前提下,修改核心代码或者插件代码。</p><h4 id="验证修改内容" tabindex="-1"><a class="header-anchor" href="#验证修改内容" aria-hidden="true">#</a> 验证修改内容</h4><p>根据需求选择模板项目来验证修改内容,比如选择<code>fes-template</code>:</p><ol><li>查看需待验证包是否已经添加到模板项目的依赖中,如果没有则在模板项目的 package.json 中添加包依赖,添加后在根目录执行<code>pnpm</code>关联依赖</li><li>启动模板项目的开发服务</li></ol><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> packages/fes-template +<span class="token function">pnpm</span> dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>在项目模板中添加代码验证修改内容</li><li>打开<code>localhost:8000</code>查看结果</li></ol><h4 id="快速调试技巧" tabindex="-1"><a class="header-anchor" href="#快速调试技巧" aria-hidden="true">#</a> 快速调试技巧</h4><p>每次修改插件或者核心代码后,等待自动编译完,需要在模板目录重新执行<code>fes dev</code>,比较费时费力。</p><p>可以先在模板的 <code>.fes</code> 目录中找到对应临时代码,更改逻辑,验证完后再将变更逻辑保存到正式文件中。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>直接修改临时文件切莫重新执行<code>fes dev</code>,修改会被覆盖。</p></div><h2 id="提交-pr" tabindex="-1"><a class="header-anchor" href="#提交-pr" aria-hidden="true">#</a> 提交 PR</h2><ol><li>fork 项目!</li><li>创建你的功能分支: git checkout -b my-new-feature</li><li>本地提交新代码: git commit -am 'Add some feature'</li><li>推送本地到服务器分支: git push origin my-new-feature</li><li>创建一个 PR</li></ol></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/contributing.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/guide/faq.html" class="" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/css.html b/guide/css.html index 4ed582a3..e899e156 100644 --- a/guide/css.html +++ b/guide/css.html @@ -3,29 +3,47 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>使用 css | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/css.html.8c2b9f6e.js"><link rel="modulepreload" href="/assets/css.html.f4729d94.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/css.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/css.html#全局样式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="全局样式"><!--[--><!--]--> 全局样式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/css.html#组件内样式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="组件内样式"><!--[--><!--]--> 组件内样式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/css.html#引入第三方样式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="引入第三方样式"><!--[--><!--]--> 引入第三方样式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/css.html#css-modules" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="CSS Modules"><!--[--><!--]--> CSS Modules <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/css.html#css-预处理器" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="CSS 预处理器"><!--[--><!--]--> CSS 预处理器 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="使用-css" tabindex="-1"><a class="header-anchor" href="#使用-css" aria-hidden="true">#</a> 使用 css</h1><div class="custom-container tip"><p class="custom-container-title">提示</p><p>本文档以 css 为示例,把后缀换成 <code>.less</code> 同样适用。</p></div><h2 id="全局样式" tabindex="-1"><a class="header-anchor" href="#全局样式" aria-hidden="true">#</a> 全局样式</h2><p>Fes.js 中约定 <code>src/global.css</code> 为全局样式,如果存在此文件,会被自动引入到入口文件最前面。</p><p>比如用于覆盖样式,</p><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.layout-content</span> <span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/css.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/css.html#全局样式" class="router-link-active router-link-exact-active sidebar-item" aria-label="全局样式"><!--[--><!--]--> 全局样式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/css.html#组件内样式" class="router-link-active router-link-exact-active sidebar-item" aria-label="组件内样式"><!--[--><!--]--> 组件内样式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/css.html#引入第三方样式" class="router-link-active router-link-exact-active sidebar-item" aria-label="引入第三方样式"><!--[--><!--]--> 引入第三方样式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/css.html#css-modules" class="router-link-active router-link-exact-active sidebar-item" aria-label="CSS Modules"><!--[--><!--]--> CSS Modules <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/css.html#css-预处理器" class="router-link-active router-link-exact-active sidebar-item" aria-label="CSS 预处理器"><!--[--><!--]--> CSS 预处理器 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="使用-css" tabindex="-1"><a class="header-anchor" href="#使用-css" aria-hidden="true">#</a> 使用 css</h1><div class="custom-container tip"><p class="custom-container-title">提示</p><p>本文档以 css 为示例,把后缀换成 <code>.less</code> 同样适用。</p></div><h2 id="全局样式" tabindex="-1"><a class="header-anchor" href="#全局样式" aria-hidden="true">#</a> 全局样式</h2><p>Fes.js 中约定 <code>src/global.css</code> 为全局样式,如果存在此文件,会被自动引入到入口文件最前面。</p><p>比如用于覆盖样式,</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.layout-content</span> <span class="token punctuation">{</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="组件内样式" tabindex="-1"><a class="header-anchor" href="#组件内样式" aria-hidden="true">#</a> 组件内样式</h2><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件内样式" tabindex="-1"><a class="header-anchor" href="#组件内样式" aria-hidden="true">#</a> 组件内样式</h2><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.layout-content</span> <span class="token punctuation">{</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="引入第三方样式" tabindex="-1"><a class="header-anchor" href="#引入第三方样式" aria-hidden="true">#</a> 引入第三方样式</h2><p>可以直接通过 <code>import</code> 引入第三方组件,当然最好在入口文件<code>app.js</code>中引入</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// src/app.js</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="引入第三方样式" tabindex="-1"><a class="header-anchor" href="#引入第三方样式" aria-hidden="true">#</a> 引入第三方样式</h2><p>可以直接通过 <code>import</code> 引入第三方组件,当然最好在入口文件<code>app.js</code>中引入</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// src/app.js</span> <span class="token keyword">import</span> <span class="token string">'bootstrap/dist/css/bootstrap.css'</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="css-modules" tabindex="-1"><a class="header-anchor" href="#css-modules" aria-hidden="true">#</a> CSS Modules</h2><p>支持 <code>Vue</code> 的 <a href="https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95" target="_blank" rel="noopener noreferrer">CSS Modules<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 用法,可以直接使用:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">module</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="css-modules" tabindex="-1"><a class="header-anchor" href="#css-modules" aria-hidden="true">#</a> CSS Modules</h2><p>支持 <code>Vue</code> 的 <a href="https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95" target="_blank" rel="noopener noreferrer">CSS Modules<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 用法,可以直接使用:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">module</span><span class="token punctuation">></span></span> .layout-content { max-width: 1000px; } -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>如果想直接引入CSS文件的话,则CSS文件名需要包含<code>.module</code>,比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> style <span class="token keyword">from</span> <span class="token string">'@/styles/index.module.css'</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果想直接引入CSS文件的话,则CSS文件名需要包含<code>.module</code>,比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> style <span class="token keyword">from</span> <span class="token string">'@/styles/index.module.css'</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>style<span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="css-预处理器" tabindex="-1"><a class="header-anchor" href="#css-预处理器" aria-hidden="true">#</a> CSS 预处理器</h2><p>Fes.js 内置支持 <code>less</code>,不支持 <code>sass</code> 和 <code>stylus</code>,但如果有需求,可以通过 <code>chainWebpack</code> 配置或者 <code>fes-plugin</code> 插件的形式支持。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/css.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/image.html" class="nav-link" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/guide/public.html" class="nav-link" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="css-预处理器" tabindex="-1"><a class="header-anchor" href="#css-预处理器" aria-hidden="true">#</a> CSS 预处理器</h2><p>Fes.js 内置支持 <code>less</code>,不支持 <code>sass</code> 和 <code>stylus</code>,但如果有需求,可以通过 <code>chainWebpack</code> 配置或者 <code>fes-plugin</code> 插件的形式支持。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/css.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/image.html" class="" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a></span><span class="next"><a href="/guide/public.html" class="" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/directory-structure.html b/guide/directory-structure.html index b393be22..96d9ae94 100644 --- a/guide/directory-structure.html +++ b/guide/directory-structure.html @@ -3,27 +3,46 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>目录结构 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/directory-structure.html.c7e6fd2d.js"><link rel="modulepreload" href="/assets/directory-structure.html.c7ccc960.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">基础</p><ul class=""><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#package-json" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="package.json"><!--[--><!--]--> package.json <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#tsconfig-json" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="tsconfig.json"><!--[--><!--]--> tsconfig.json <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#fes-js" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label=".fes.js"><!--[--><!--]--> .fes.js <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#mock-js" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="mock.js"><!--[--><!--]--> mock.js <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#env" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label=".env"><!--[--><!--]--> .env <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#dist-目录" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="dist 目录"><!--[--><!--]--> dist 目录 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#public-目录" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="public 目录"><!--[--><!--]--> public 目录 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#index-html" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="index.html"><!--[--><!--]--> index.html <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#src-目录" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="src 目录"><!--[--><!--]--> src 目录 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#fes-目录" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label=".fes 目录"><!--[--><!--]--> .fes 目录 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#pages-目录" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="pages 目录"><!--[--><!--]--> pages 目录 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/directory-structure.html#app-js" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="app.js"><!--[--><!--]--> app.js <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="目录结构" tabindex="-1"><a class="header-anchor" href="#目录结构" aria-hidden="true">#</a> 目录结构</h1><p>在<a href="/fes.js/guide/getting-started.html" class="">快速上手</a>中,大家对框架应该有初步的印象,接下来我们了解下目录结构。Fes.js 遵循 <code>约定优于配置</code> 的原则,一个基础的 Fes.js 项目大致是这样的:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>fes-template + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/directory-structure.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/directory-structure.html#package-json" class="router-link-active router-link-exact-active sidebar-item" aria-label="package.json"><!--[--><!--]--> package.json <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#tsconfig-json" class="router-link-active router-link-exact-active sidebar-item" aria-label="tsconfig.json"><!--[--><!--]--> tsconfig.json <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#fes-js" class="router-link-active router-link-exact-active sidebar-item" aria-label=".fes.js"><!--[--><!--]--> .fes.js <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#mock-js" class="router-link-active router-link-exact-active sidebar-item" aria-label="mock.js"><!--[--><!--]--> mock.js <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#env" class="router-link-active router-link-exact-active sidebar-item" aria-label=".env"><!--[--><!--]--> .env <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#dist-目录" class="router-link-active router-link-exact-active sidebar-item" aria-label="dist 目录"><!--[--><!--]--> dist 目录 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#public-目录" class="router-link-active router-link-exact-active sidebar-item" aria-label="public 目录"><!--[--><!--]--> public 目录 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#index-html" class="router-link-active router-link-exact-active sidebar-item" aria-label="index.html"><!--[--><!--]--> index.html <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#src-目录" class="router-link-active router-link-exact-active sidebar-item" aria-label="src 目录"><!--[--><!--]--> src 目录 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#fes-目录" class="router-link-active router-link-exact-active sidebar-item" aria-label=".fes 目录"><!--[--><!--]--> .fes 目录 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#pages-目录" class="router-link-active router-link-exact-active sidebar-item" aria-label="pages 目录"><!--[--><!--]--> pages 目录 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/directory-structure.html#app-js" class="router-link-active router-link-exact-active sidebar-item" aria-label="app.js"><!--[--><!--]--> app.js <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="目录结构" tabindex="-1"><a class="header-anchor" href="#目录结构" aria-hidden="true">#</a> 目录结构</h1><p>在<a href="/guide/getting-started.html" class="">快速上手</a>中,大家对框架应该有初步的印象,接下来我们了解下目录结构。Fes.js 遵循 <code>约定优于配置</code> 的原则,一个基础的 Fes.js 项目大致是这样的:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>fes-template ├── package.json ├── tsconfig.json ├── mock.js ├── .fes.js ├── .env +├── index.html ├── dist ├── public -│ └── index.html +│ └── logo.png └── src ├── .fes └── pages │ └── index.vue └── app.js -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="package-json" tabindex="-1"><a class="header-anchor" href="#package-json" aria-hidden="true">#</a> package.json</h3><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="package-json" tabindex="-1"><a class="header-anchor" href="#package-json" aria-hidden="true">#</a> package.json</h3><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"@fesjs/template"</span><span class="token punctuation">,</span> <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"2.0.0"</span><span class="token punctuation">,</span> <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"fes项目模版"</span><span class="token punctuation">,</span> @@ -35,18 +54,7 @@ <span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"fes test"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"keywords"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"管理端"</span><span class="token punctuation">,</span> <span class="token string">"fes"</span><span class="token punctuation">,</span> <span class="token string">"fast"</span><span class="token punctuation">,</span> <span class="token string">"easy"</span><span class="token punctuation">,</span> <span class="token string">"strong"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token property">"files"</span><span class="token operator">:</span> <span class="token punctuation">[</span> - <span class="token string">".eslintrc.js"</span><span class="token punctuation">,</span> - <span class="token string">".gitignore"</span><span class="token punctuation">,</span> - <span class="token string">".fes.js"</span><span class="token punctuation">,</span> - <span class="token string">".fes.prod.js"</span><span class="token punctuation">,</span> - <span class="token string">"mock.js"</span><span class="token punctuation">,</span> - <span class="token string">"package.json"</span><span class="token punctuation">,</span> - <span class="token string">"README.md"</span><span class="token punctuation">,</span> - <span class="token string">"tsconfig.json"</span><span class="token punctuation">,</span> - <span class="token string">"/src"</span><span class="token punctuation">,</span> - <span class="token string">"/config"</span> - <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token property">"files"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">".eslintrc.js"</span><span class="token punctuation">,</span> <span class="token string">".gitignore"</span><span class="token punctuation">,</span> <span class="token string">".fes.js"</span><span class="token punctuation">,</span> <span class="token string">".fes.prod.js"</span><span class="token punctuation">,</span> <span class="token string">"mock.js"</span><span class="token punctuation">,</span> <span class="token string">"package.json"</span><span class="token punctuation">,</span> <span class="token string">"README.md"</span><span class="token punctuation">,</span> <span class="token string">"tsconfig.json"</span><span class="token punctuation">,</span> <span class="token string">"/src"</span><span class="token punctuation">,</span> <span class="token string">"/config"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token property">"repository"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"git"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"git+https://github.com/WeBankFinTech/fes.js.git"</span><span class="token punctuation">,</span> @@ -62,33 +70,33 @@ <span class="token property">"access"</span><span class="token operator">:</span> <span class="token string">"public"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@webank/eslint-config-webank"</span><span class="token operator">:</span> <span class="token string">"0.3.1"</span> + <span class="token property">"@webank/eslint-config-webank"</span><span class="token operator">:</span> <span class="token string">"1.2.1"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-access"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-layout"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-locale"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-enums"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-jest"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-vuex"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-qiankun"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-sass"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-monaco-editor"</span><span class="token operator">:</span> <span class="token string">"^2.0.0-beta.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-windicss"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/fes-design"</span><span class="token operator">:</span> <span class="token string">"^0.5.0"</span><span class="token punctuation">,</span> - <span class="token property">"vue"</span><span class="token operator">:</span> <span class="token string">"^3.0.5"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/builder-webpack"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-access"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-layout"</span><span class="token operator">:</span> <span class="token string">"^5.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-enums"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-jest"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-vuex"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-qiankun"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-sass"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-monaco-editor"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-windicss"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/fes-design"</span><span class="token operator">:</span> <span class="token string">"^0.7.23"</span><span class="token punctuation">,</span> + <span class="token property">"vue"</span><span class="token operator">:</span> <span class="token string">"^3.2.47"</span><span class="token punctuation">,</span> <span class="token property">"vuex"</span><span class="token operator">:</span> <span class="token string">"^4.0.0"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token property">"private"</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br></div></div><p>其中<code>@fesjs/fes</code>是 Fes.js 核心依赖,另外以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被自动注册为插件或插件集。</p><h3 id="tsconfig-json" tabindex="-1"><a class="header-anchor" href="#tsconfig-json" aria-hidden="true">#</a> tsconfig.json</h3><p>解决 <code>@fesjs/fes</code> 和使用 <code>@</code> 的 API 提示</p><h3 id="fes-js" tabindex="-1"><a class="header-anchor" href="#fes-js" aria-hidden="true">#</a> .fes.js</h3><p>配置文件,包含 Fes.js 内置功能和安装的其他插件配置。</p><h3 id="mock-js" tabindex="-1"><a class="header-anchor" href="#mock-js" aria-hidden="true">#</a> mock.js</h3><p><code>mock</code> 数据的配置文件。</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> .env</h3><p>定义环境变量。</p><p>比如 <code>.env</code> 文件内容如下:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>PORT=8888 +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>其中<code>@fesjs/fes</code>是 Fes.js 核心依赖,另外以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被自动注册为插件或插件集。<code>@fesjs/builder-</code> 开头的会被注册为构建器。</p><h3 id="tsconfig-json" tabindex="-1"><a class="header-anchor" href="#tsconfig-json" aria-hidden="true">#</a> tsconfig.json</h3><p>解决 <code>@fesjs/fes</code> 和使用 <code>@</code> 的 API 提示</p><h3 id="fes-js" tabindex="-1"><a class="header-anchor" href="#fes-js" aria-hidden="true">#</a> .fes.js</h3><p>配置文件,包含 Fes.js 内置功能和安装的其他插件配置。</p><h3 id="mock-js" tabindex="-1"><a class="header-anchor" href="#mock-js" aria-hidden="true">#</a> mock.js</h3><p><code>mock</code> 数据的配置文件。</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> .env</h3><p>定义环境变量。</p><p>比如 <code>.env</code> 文件内容如下:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>PORT=8888 FES_ENV=prod -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>等同于 node 端运行时,设置如下:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>process.env.PORT = '8888'; -process.env.FES_ENV = 'prod'; -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="dist-目录" tabindex="-1"><a class="header-anchor" href="#dist-目录" aria-hidden="true">#</a> dist 目录</h3><p>执行 <code>fes build</code> 后,产物默认会存放在这里。</p><h2 id="public-目录" tabindex="-1"><a class="header-anchor" href="#public-目录" aria-hidden="true">#</a> public 目录</h2><p>此目录下所有文件为静态资源,会被复制到输出路径。</p><h3 id="index-html" tabindex="-1"><a class="header-anchor" href="#index-html" aria-hidden="true">#</a> index.html</h3><p>默认的 <code>html</code> 模板文件,如果删除此 <code>html</code> 则会使用内置的 <code>html</code> 模板文件。</p><h2 id="src-目录" tabindex="-1"><a class="header-anchor" href="#src-目录" aria-hidden="true">#</a> src 目录</h2><h3 id="fes-目录" tabindex="-1"><a class="header-anchor" href="#fes-目录" aria-hidden="true">#</a> .fes 目录</h3><p>临时文件目录,比如入口文件、路由等,都会被临时生成到这里。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>不要提交 <code>.fes</code> 目录到 <code>git</code> 仓库,他们会在 <code>fes dev</code> 和 <code>fes build</code> 时被删除并重新生成。</p></div><h3 id="pages-目录" tabindex="-1"><a class="header-anchor" href="#pages-目录" aria-hidden="true">#</a> pages 目录</h3><p>所有路由组件文件存放在这里。</p><h3 id="app-js" tabindex="-1"><a class="header-anchor" href="#app-js" aria-hidden="true">#</a> app.js</h3><p>运行时配置文件,可以在这里扩展运行时的能力,比如修改路由等。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/directory-structure.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/fes.js/guide/config.html" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>等同于 node 端运行时,设置如下:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>p<wbr>rocess.env.PORT = '8888'; +p<wbr>rocess.env.FES_ENV = 'prod'; +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dist-目录" tabindex="-1"><a class="header-anchor" href="#dist-目录" aria-hidden="true">#</a> dist 目录</h3><p>执行 <code>fes build</code> 后,产物默认会存放在这里。</p><h3 id="public-目录" tabindex="-1"><a class="header-anchor" href="#public-目录" aria-hidden="true">#</a> public 目录</h3><p>此目录下所有文件为静态资源,会被复制到输出路径。</p><h3 id="index-html" tabindex="-1"><a class="header-anchor" href="#index-html" aria-hidden="true">#</a> index.html</h3><p>默认的 <code>html</code> 模板文件,如果删除此 <code>html</code> 则会使用内置的 <code>html</code> 模板文件。</p><h3 id="src-目录" tabindex="-1"><a class="header-anchor" href="#src-目录" aria-hidden="true">#</a> src 目录</h3><h3 id="fes-目录" tabindex="-1"><a class="header-anchor" href="#fes-目录" aria-hidden="true">#</a> .fes 目录</h3><p>临时文件目录,比如入口文件、路由等,都会被临时生成到这里。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>不要提交 <code>.fes</code> 目录到 <code>git</code> 仓库,他们会在 <code>fes dev</code> 和 <code>fes build</code> 时被删除并重新生成。</p></div><h3 id="pages-目录" tabindex="-1"><a class="header-anchor" href="#pages-目录" aria-hidden="true">#</a> pages 目录</h3><p>所有路由组件文件存放在这里。</p><h3 id="app-js" tabindex="-1"><a class="header-anchor" href="#app-js" aria-hidden="true">#</a> app.js</h3><p>运行时配置文件,可以在这里扩展运行时的能力,比如修改路由等。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/directory-structure.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/guide/builder.html" class="" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/env.html b/guide/env.html index 1bb34b03..09b27079 100644 --- a/guide/env.html +++ b/guide/env.html @@ -3,30 +3,48 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>环境变量 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/env.html.5728b740.js"><link rel="modulepreload" href="/assets/env.html.2fbe8f51.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#配置环境变量" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置环境变量"><!--[--><!--]--> 配置环境变量 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#命令行添加" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="命令行添加"><!--[--><!--]--> 命令行添加 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#env-文件配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label=".env 文件配置"><!--[--><!--]--> .env 文件配置 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#编译时配置列表" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="编译时配置列表"><!--[--><!--]--> 编译时配置列表 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#fes-env" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="FES_ENV"><!--[--><!--]--> FES_ENV <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#fes-presets" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="FES_PRESETS"><!--[--><!--]--> FES_PRESETS <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#fes-plugins" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="FES_PLUGINS"><!--[--><!--]--> FES_PLUGINS <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#port" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="PORT"><!--[--><!--]--> PORT <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#host" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="HOST"><!--[--><!--]--> HOST <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#https" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="HTTPS"><!--[--><!--]--> HTTPS <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#watch" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="WATCH"><!--[--><!--]--> WATCH <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#babel-cache" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="BABEL_CACHE"><!--[--><!--]--> BABEL_CACHE <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#analyze" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="ANALYZE"><!--[--><!--]--> ANALYZE <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#analyze-mode" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="ANALYZE_MODE"><!--[--><!--]--> ANALYZE_MODE <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#analyze-port" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="ANALYZE_PORT"><!--[--><!--]--> ANALYZE_PORT <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#clear-output" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="CLEAR_OUTPUT"><!--[--><!--]--> CLEAR_OUTPUT <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#rm-tmpdir" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="RM_TMPDIR"><!--[--><!--]--> RM_TMPDIR <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/env.html#process-env" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="process.env"><!--[--><!--]--> process.env <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量" aria-hidden="true">#</a> 环境变量</h1><p>在构建或者代码在端上运行中需要一些跟区分于环境的变量,用于配置构建流程或者运行时过程,这时候我们可以配置环境变量。</p><h2 id="配置环境变量" tabindex="-1"><a class="header-anchor" href="#配置环境变量" aria-hidden="true">#</a> 配置环境变量</h2><h3 id="命令行添加" tabindex="-1"><a class="header-anchor" href="#命令行添加" aria-hidden="true">#</a> 命令行添加</h3><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># OS X, Linux</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/env.html#配置环境变量" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置环境变量"><!--[--><!--]--> 配置环境变量 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/env.html#命令行添加" class="router-link-active router-link-exact-active sidebar-item" aria-label="命令行添加"><!--[--><!--]--> 命令行添加 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#env-文件配置" class="router-link-active router-link-exact-active sidebar-item" aria-label=".env 文件配置"><!--[--><!--]--> .env 文件配置 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/guide/env.html#编译时配置列表" class="router-link-active router-link-exact-active sidebar-item" aria-label="编译时配置列表"><!--[--><!--]--> 编译时配置列表 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/env.html#fes-env" class="router-link-active router-link-exact-active sidebar-item" aria-label="FES_ENV"><!--[--><!--]--> FES_ENV <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#fes-presets" class="router-link-active router-link-exact-active sidebar-item" aria-label="FES_PRESETS"><!--[--><!--]--> FES_PRESETS <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#fes-plugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="FES_PLUGINS"><!--[--><!--]--> FES_PLUGINS <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#port" class="router-link-active router-link-exact-active sidebar-item" aria-label="PORT"><!--[--><!--]--> PORT <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#host" class="router-link-active router-link-exact-active sidebar-item" aria-label="HOST"><!--[--><!--]--> HOST <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#https" class="router-link-active router-link-exact-active sidebar-item" aria-label="HTTPS"><!--[--><!--]--> HTTPS <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#watch" class="router-link-active router-link-exact-active sidebar-item" aria-label="WATCH"><!--[--><!--]--> WATCH <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#babel-cache" class="router-link-active router-link-exact-active sidebar-item" aria-label="BABEL_CACHE"><!--[--><!--]--> BABEL_CACHE <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#analyze" class="router-link-active router-link-exact-active sidebar-item" aria-label="ANALYZE"><!--[--><!--]--> ANALYZE <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#analyze-mode" class="router-link-active router-link-exact-active sidebar-item" aria-label="ANALYZE_MODE"><!--[--><!--]--> ANALYZE_MODE <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#analyze-port" class="router-link-active router-link-exact-active sidebar-item" aria-label="ANALYZE_PORT"><!--[--><!--]--> ANALYZE_PORT <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#clear-output" class="router-link-active router-link-exact-active sidebar-item" aria-label="CLEAR_OUTPUT"><!--[--><!--]--> CLEAR_OUTPUT <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/env.html#rm-tmpdir" class="router-link-active router-link-exact-active sidebar-item" aria-label="RM_TMPDIR"><!--[--><!--]--> RM_TMPDIR <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/guide/env.html#process-env" class="router-link-active router-link-exact-active sidebar-item" aria-label="process.env"><!--[--><!--]--> process.env <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量" aria-hidden="true">#</a> 环境变量</h1><p>在构建或者代码在端上运行中需要一些跟区分于环境的变量,用于配置构建流程或者运行时过程,这时候我们可以配置环境变量。</p><h2 id="配置环境变量" tabindex="-1"><a class="header-anchor" href="#配置环境变量" aria-hidden="true">#</a> 配置环境变量</h2><h3 id="命令行添加" tabindex="-1"><a class="header-anchor" href="#命令行添加" aria-hidden="true">#</a> 命令行添加</h3><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># OS X, Linux</span> <span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> fes dev <span class="token comment"># Windows (cmd.exe)</span> <span class="token builtin class-name">set</span> <span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> <span class="token operator">&&</span> fes dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>如果要同时考虑 OS X 和 Windows,可借助三方工具 <a href="https://github.com/kentcdodds/cross-env" target="_blank" rel="noopener noreferrer">cross-env<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></p><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">YARN</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">yarn</span> <span class="token function">add</span> cross-env <span class="token parameter variable">--dev</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果要同时考虑 OS X 和 Windows,可借助三方工具 <a href="https://github.com/kentcdodds/cross-env" target="_blank" rel="noopener noreferrer">cross-env<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></p><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> <span class="token function">add</span> cross-env <span class="token parameter variable">--dev</span> cross-env <span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> fes dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> i cross-env --save-dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i cross-env --save-dev cross-env <span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> fes dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><!--]--></div><!--]--></div><h3 id="env-文件配置" tabindex="-1"><a class="header-anchor" href="#env-文件配置" aria-hidden="true">#</a> <code>.env</code> 文件配置</h3><p>Fes.js 中约定根目录下以 <code>.env</code> 开头的文件为环境变量配置文件。</p><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>然后执行</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>会以 3000 端口启动 dev server。</p><h4 id="本地临时配置" tabindex="-1"><a class="header-anchor" href="#本地临时配置" aria-hidden="true">#</a> 本地临时配置</h4><p>可以新建 <code>.env.local</code>,这份配置会和 <code>.env</code> 做合并后形成最终配置。</p><h4 id="环境配置" tabindex="-1"><a class="header-anchor" href="#环境配置" aria-hidden="true">#</a> 环境配置</h4><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境来指定配置,这时候必须在执行命令前添加 <code>FES_ENV</code> 保证执行加载环境变量配置文件逻辑前 <code>FES_ENV</code> 已设置。</p><p>举个 🌰 :</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token assign-left variable">FES_ENV</span><span class="token operator">=</span>sit fes dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>如果存在 <code>.env.sit</code> 文件,则会将 <code>.env.sit</code> 的配置和 <code>.env</code> 做合并后形成最终配置。</p><h4 id="配置优先级" tabindex="-1"><a class="header-anchor" href="#配置优先级" aria-hidden="true">#</a> 配置优先级</h4><p>本地临时配置 > 环境配置 > 基础配置</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果多份配置中存在相同的配置项,<strong>则优先级高的会覆盖优先级低的</strong>。</p></div><h2 id="编译时配置列表" tabindex="-1"><a class="header-anchor" href="#编译时配置列表" aria-hidden="true">#</a> 编译时配置列表</h2><p>编译时配置是在构建过程需要的变量,开放给用户配置。</p><h3 id="fes-env" tabindex="-1"><a class="header-anchor" href="#fes-env" aria-hidden="true">#</a> FES_ENV</h3><p>指定当前的环境,不同环境各自的配置文件。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p><code>FES_ENV</code> 在会在加载<code>.env</code>前使用,所以只能用命令行方式配置。</p></div><h3 id="fes-presets" tabindex="-1"><a class="header-anchor" href="#fes-presets" aria-hidden="true">#</a> FES_PRESETS</h3><p>添加额外的插件集入口</p><h3 id="fes-plugins" tabindex="-1"><a class="header-anchor" href="#fes-plugins" aria-hidden="true">#</a> FES_PLUGINS</h3><p>添加额外的插件入口</p><h3 id="port" tabindex="-1"><a class="header-anchor" href="#port" aria-hidden="true">#</a> PORT</h3><p><code>fes dev</code> 时服务指定的端口号,默认是 <code>8080</code></p><h3 id="host" tabindex="-1"><a class="header-anchor" href="#host" aria-hidden="true">#</a> HOST</h3><p>默认是 <code>localhost</code>。</p><h3 id="https" tabindex="-1"><a class="header-anchor" href="#https" aria-hidden="true">#</a> HTTPS</h3><p>默认是 <code>false</code>。</p><h3 id="watch" tabindex="-1"><a class="header-anchor" href="#watch" aria-hidden="true">#</a> WATCH</h3><p>设为 none 时不监听文件变更。比如:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>WATCH=none fes dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="babel-cache" tabindex="-1"><a class="header-anchor" href="#babel-cache" aria-hidden="true">#</a> BABEL_CACHE</h3><p>默认开启 Babel 编译缓存,值为 none 时禁用缓存。</p><h3 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> ANALYZE</h3><p>用于分析 bundle 构成,默认关闭。</p><p>比如:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>ANALYZE=1 fes build -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="analyze-mode" tabindex="-1"><a class="header-anchor" href="#analyze-mode" aria-hidden="true">#</a> ANALYZE_MODE</h3><p>默认是<code>server</code></p><h3 id="analyze-port" tabindex="-1"><a class="header-anchor" href="#analyze-port" aria-hidden="true">#</a> ANALYZE_PORT</h3><p>默认是<code>8888</code></p><h3 id="clear-output" tabindex="-1"><a class="header-anchor" href="#clear-output" aria-hidden="true">#</a> CLEAR_OUTPUT</h3><p>仅仅在 <code>build</code> 时生效。如果设置为 <code>none</code>,就不会在构建前清除 <code>Output</code> 文件内容。</p><h3 id="rm-tmpdir" tabindex="-1"><a class="header-anchor" href="#rm-tmpdir" aria-hidden="true">#</a> RM_TMPDIR</h3><p>仅仅在 <code>build</code> 时生效。如果设置为 <code>none</code>,就不会在构建后清除 <code>.fes</code> 临时文件内容。</p><h2 id="process-env" tabindex="-1"><a class="header-anchor" href="#process-env" aria-hidden="true">#</a> process.env</h2><p>运行时配置需要以 <code>FES_APP_</code> 开头,比如在 <code>.env</code> 中配置:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>FES_APP_KEY=123456789 -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>在代码中使用:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">FES_APP_KEY</span><span class="token punctuation">)</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h3 id="env-文件配置" tabindex="-1"><a class="header-anchor" href="#env-文件配置" aria-hidden="true">#</a> <code>.env</code> 文件配置</h3><p>Fes.js 中约定根目录下以 <code>.env</code> 开头的文件为环境变量配置文件。</p><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>然后执行</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>会以 3000 端口启动 dev server。</p><h4 id="本地临时配置" tabindex="-1"><a class="header-anchor" href="#本地临时配置" aria-hidden="true">#</a> 本地临时配置</h4><p>可以新建 <code>.env.local</code>,这份配置会和 <code>.env</code> 做合并后形成最终配置。</p><h4 id="环境配置" tabindex="-1"><a class="header-anchor" href="#环境配置" aria-hidden="true">#</a> 环境配置</h4><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境来指定配置,这时候必须在执行命令前添加 <code>FES_ENV</code> 保证执行加载环境变量配置文件逻辑前 <code>FES_ENV</code> 已设置。</p><p>举个 🌰 :</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">FES_ENV</span><span class="token operator">=</span>sit fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>如果存在 <code>.env.sit</code> 文件,则会将 <code>.env.sit</code> 的配置和 <code>.env</code> 做合并后形成最终配置。</p><h4 id="配置优先级" tabindex="-1"><a class="header-anchor" href="#配置优先级" aria-hidden="true">#</a> 配置优先级</h4><p>本地临时配置 > 环境配置 > 基础配置</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果多份配置中存在相同的配置项,<strong>则优先级高的会覆盖优先级低的</strong>。</p></div><h2 id="编译时配置列表" tabindex="-1"><a class="header-anchor" href="#编译时配置列表" aria-hidden="true">#</a> 编译时配置列表</h2><p>编译时配置是在构建过程需要的变量,开放给用户配置。</p><h3 id="fes-env" tabindex="-1"><a class="header-anchor" href="#fes-env" aria-hidden="true">#</a> FES_ENV</h3><p>指定当前的环境,不同环境各自的配置文件。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p><code>FES_ENV</code> 在会在加载<code>.env</code>前使用,所以只能用命令行方式配置。</p></div><h3 id="fes-presets" tabindex="-1"><a class="header-anchor" href="#fes-presets" aria-hidden="true">#</a> FES_PRESETS</h3><p>添加额外的插件集入口</p><h3 id="fes-plugins" tabindex="-1"><a class="header-anchor" href="#fes-plugins" aria-hidden="true">#</a> FES_PLUGINS</h3><p>添加额外的插件入口</p><h3 id="port" tabindex="-1"><a class="header-anchor" href="#port" aria-hidden="true">#</a> PORT</h3><p><code>fes dev</code> 时服务指定的端口号,默认是 <code>8080</code></p><h3 id="host" tabindex="-1"><a class="header-anchor" href="#host" aria-hidden="true">#</a> HOST</h3><p>默认是 <code>localhost</code>。</p><h3 id="https" tabindex="-1"><a class="header-anchor" href="#https" aria-hidden="true">#</a> HTTPS</h3><p>默认是 <code>false</code>。</p><h3 id="watch" tabindex="-1"><a class="header-anchor" href="#watch" aria-hidden="true">#</a> WATCH</h3><p>设为 none 时不监听文件变更。比如:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>WATCH=none fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="babel-cache" tabindex="-1"><a class="header-anchor" href="#babel-cache" aria-hidden="true">#</a> BABEL_CACHE</h3><p>默认开启 Babel 编译缓存,值为 none 时禁用缓存。</p><h3 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> ANALYZE</h3><p>用于分析 bundle 构成,默认关闭。</p><p>比如:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>ANALYZE=1 fes build +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="analyze-mode" tabindex="-1"><a class="header-anchor" href="#analyze-mode" aria-hidden="true">#</a> ANALYZE_MODE</h3><p>默认是<code>server</code></p><h3 id="analyze-port" tabindex="-1"><a class="header-anchor" href="#analyze-port" aria-hidden="true">#</a> ANALYZE_PORT</h3><p>默认是<code>8888</code></p><h3 id="clear-output" tabindex="-1"><a class="header-anchor" href="#clear-output" aria-hidden="true">#</a> CLEAR_OUTPUT</h3><p>仅仅在 <code>build</code> 时生效。如果设置为 <code>none</code>,就不会在构建前清除 <code>Output</code> 文件内容。</p><h3 id="rm-tmpdir" tabindex="-1"><a class="header-anchor" href="#rm-tmpdir" aria-hidden="true">#</a> RM_TMPDIR</h3><p>仅仅在 <code>build</code> 时生效。如果设置为 <code>none</code>,就不会在构建后清除 <code>.fes</code> 临时文件内容。</p><h2 id="process-env" tabindex="-1"><a class="header-anchor" href="#process-env" aria-hidden="true">#</a> p<wbr>rocess.env</h2><p>运行时配置需要以 <code>FES_APP_</code> 开头,比如在 <code>.env</code> 中配置:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>FES_APP_KEY=123456789 +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>在代码中使用:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">FES_APP_KEY</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 123456789</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>除了用户自定义的以<code>FES_APP_</code>开头的变量,还提供如下配置:</p><ul><li><p><strong>NODE_ENV</strong>:Node 环境变量</p></li><li><p><strong>FES_ENV</strong>:Fes.js 环境变量</p></li><li><p><strong>BASE_URL</strong>:等同于 publicPath</p></li></ul><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/env.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/runtime-config.html" class="nav-link" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/guide/route.html" class="nav-link" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>除了用户自定义的以<code>FES_APP_</code>开头的变量,还提供如下配置:</p><ul><li><p><strong>NODE_ENV</strong>:Node 环境变量</p></li><li><p><strong>FES_ENV</strong>:Fes.js 环境变量</p></li><li><p><strong>BASE_URL</strong>:等同于 publicPath</p></li></ul></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/env.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/runtime-config.html" class="" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a></span><span class="next"><a href="/guide/route.html" class="" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/faq.html b/guide/faq.html index 60265d6a..052c72b5 100644 --- a/guide/faq.html +++ b/guide/faq.html @@ -3,13 +3,33 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>常见问题 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/faq.html.d692a6e2.js"><link rel="modulepreload" href="/assets/faq.html.7f01d8a8.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a aria-current="page" href="/fes.js/guide/faq.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-heading sidebar-item active" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><h1 id="常见问题" tabindex="-1"><a class="header-anchor" href="#常见问题" aria-hidden="true">#</a> 常见问题</h1></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/faq.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/contributing.html" class="nav-link" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/faq.html" class="router-link-active router-link-exact-active router-link-active sidebar-item sidebar-heading active" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="常见问题" tabindex="-1"><a class="header-anchor" href="#常见问题" aria-hidden="true">#</a> 常见问题</h1><h4 id="为什么代码提示不生效" tabindex="-1"><a class="header-anchor" href="#为什么代码提示不生效" aria-hidden="true">#</a> 为什么代码提示不生效?</h4><ol><li>需要先运行一次<code>fes dev</code></li><li>检查tsconfig.json,<code>include</code>包含当前编辑文件,<code>compilerOptions.path</code>包含</li></ol><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>"@/*": ["./src/*"], +"@@/*": ["./src/.fes/*"] +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/faq.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/contributing.html" class="" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/getting-started.html b/guide/getting-started.html index 133f1810..8454a00a 100644 --- a/guide/getting-started.html +++ b/guide/getting-started.html @@ -3,39 +3,57 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>快速上手 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/getting-started.html.0eb9c5e2.js"><link rel="modulepreload" href="/assets/getting-started.html.f4fdc148.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item active">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/getting-started.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/getting-started.html#依赖环境" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="依赖环境"><!--[--><!--]--> 依赖环境 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/getting-started.html#创建项目" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="创建项目"><!--[--><!--]--> 创建项目 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/getting-started.html#启动项目" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启动项目"><!--[--><!--]--> 启动项目 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/getting-started.html#部署发布" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="部署发布"><!--[--><!--]--> 部署发布 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/getting-started.html#构建" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="构建"><!--[--><!--]--> 构建 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/getting-started.html#本地验证" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="本地验证"><!--[--><!--]--> 本地验证 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/getting-started.html#部署" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="部署"><!--[--><!--]--> 部署 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="快速上手" tabindex="-1"><a class="header-anchor" href="#快速上手" aria-hidden="true">#</a> 快速上手</h1><h2 id="依赖环境" tabindex="-1"><a class="header-anchor" href="#依赖环境" aria-hidden="true">#</a> 依赖环境</h2><p>首先得有 <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">Node.js<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>,并确保 node 版本是 10.13 或以上。</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 打印 node 版本</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading active">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/getting-started.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/getting-started.html#依赖环境" class="router-link-active router-link-exact-active sidebar-item" aria-label="依赖环境"><!--[--><!--]--> 依赖环境 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/getting-started.html#创建项目" class="router-link-active router-link-exact-active sidebar-item" aria-label="创建项目"><!--[--><!--]--> 创建项目 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/getting-started.html#启动项目" class="router-link-active router-link-exact-active sidebar-item" aria-label="启动项目"><!--[--><!--]--> 启动项目 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/getting-started.html#部署发布" class="router-link-active router-link-exact-active sidebar-item" aria-label="部署发布"><!--[--><!--]--> 部署发布 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/getting-started.html#构建" class="router-link-active router-link-exact-active sidebar-item" aria-label="构建"><!--[--><!--]--> 构建 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/getting-started.html#本地验证" class="router-link-active router-link-exact-active sidebar-item" aria-label="本地验证"><!--[--><!--]--> 本地验证 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/getting-started.html#部署" class="router-link-active router-link-exact-active sidebar-item" aria-label="部署"><!--[--><!--]--> 部署 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="快速上手" tabindex="-1"><a class="header-anchor" href="#快速上手" aria-hidden="true">#</a> 快速上手</h1><h2 id="依赖环境" tabindex="-1"><a class="header-anchor" href="#依赖环境" aria-hidden="true">#</a> 依赖环境</h2><p>首先得有 <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">Node.js<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,并确保 node 版本是 12.13 或以上。</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 打印 node 版本</span> <span class="token function">node</span> <span class="token parameter variable">-v</span> -v10.13.0 -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>推荐使用 yarn 管理 npm 依赖</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 全局安装 yarn</span> -<span class="token function">npm</span> i <span class="token function">yarn</span> <span class="token parameter variable">-g</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="创建项目" tabindex="-1"><a class="header-anchor" href="#创建项目" aria-hidden="true">#</a> 创建项目</h2><p>这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。</p><h5 id="步骤1-创建工作空间" tabindex="-1"><a class="header-anchor" href="#步骤1-创建工作空间" aria-hidden="true">#</a> 步骤1 创建工作空间</h5><p>如果工作空间不存在,则先创建:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 创建目录 workspace</span> +v12.13.0 +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>推荐使用 <a href="https://pnpm.io/installation" target="_blank" rel="noopener noreferrer">pnpm<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 管理 npm 依赖</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 全局安装 pnpm</span> +<span class="token function">npm</span> i <span class="token function">pnpm</span> <span class="token parameter variable">-g</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="创建项目" tabindex="-1"><a class="header-anchor" href="#创建项目" aria-hidden="true">#</a> 创建项目</h2><p>这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。</p><h5 id="步骤-1-创建工作空间" tabindex="-1"><a class="header-anchor" href="#步骤-1-创建工作空间" aria-hidden="true">#</a> 步骤 1 创建工作空间</h5><p>如果工作空间不存在,则先创建:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建目录 workspace</span> <span class="token function">mkdir</span> workspace <span class="token comment"># 进入目录 workspace</span> <span class="token builtin class-name">cd</span> workspace -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>如果工作空间已存在,则直接进入</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 进入目录 workspace</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果工作空间已存在,则直接进入</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 进入目录 workspace</span> <span class="token builtin class-name">cd</span> workspace -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h5 id="步骤2-在工作空间创建项目" tabindex="-1"><a class="header-anchor" href="#步骤2-在工作空间创建项目" aria-hidden="true">#</a> 步骤2 在工作空间创建项目</h5><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">YARN</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> -<span class="token function">yarn</span> create @fesjs/fes-app myapp -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h5 id="步骤-2-在工作空间创建项目" tabindex="-1"><a class="header-anchor" href="#步骤-2-在工作空间创建项目" aria-hidden="true">#</a> 步骤 2 在工作空间创建项目</h5><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> +<span class="token function">pnpm</span> create @fesjs/fes-app myapp +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> npx @fesjs/create-fes-app myapp -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><!--]--></div><!--]--></div><p>如果项目文件夹 <code>workspace/myapp</code> 已经存在,会提示目录已存在:</p><img src="/fes.js/pickTemplateTip.png" alt="目录已存在提示"><p>你可以选择:</p><ul><li><code>Overwrite</code> 删除项目文件夹,重新创建项目。</li><li><code>Merge</code> 保留原项目文件夹,存在相同文件则用模板文件覆盖当前目录文件。</li></ul><p>当选择 <code>Overwrite</code> 或者 <code>Merge</code> 或者项目目录 <code>workspace/myapp</code> 不存在,会提示选取一个 <code>template</code>: <img src="/fes.js/pickTemplate.png" alt="选择模板类型"></p><p>你可以选默认适用于中后台前端应用的 <code>PC</code> 类型,也可以选适用于移动端的 <code>H5</code> 类型。</p><h5 id="步骤3-安装依赖" tabindex="-1"><a class="header-anchor" href="#步骤3-安装依赖" aria-hidden="true">#</a> 步骤3 安装依赖</h5><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">YARN</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 进入项目目录</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p>如果项目文件夹 <code>workspace/myapp</code> 已经存在,会提示目录已存在:</p><img src="/pickTemplateTip.png" alt="目录已存在提示"><p>你可以选择:</p><ul><li><code>Overwrite</code> 删除项目文件夹,重新创建项目。</li><li><code>Merge</code> 保留原项目文件夹,存在相同文件则用模板文件覆盖当前目录文件。</li></ul><p>当选择 <code>Overwrite</code> 或者 <code>Merge</code> 或者项目目录 <code>workspace/myapp</code> 不存在,会提示选取一个 <code>template</code>: <img src="/pickTemplate.png" alt="选择模板类型"></p><p>你可以选默认适用于中后台前端应用的 <code>PC</code> 类型,也可以选适用于移动端的 <code>H5</code> 类型。</p><h5 id="步骤-3-安装依赖" tabindex="-1"><a class="header-anchor" href="#步骤-3-安装依赖" aria-hidden="true">#</a> 步骤 3 安装依赖</h5><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 进入项目目录</span> <span class="token builtin class-name">cd</span> myapp <span class="token comment"># 安装依赖</span> -<span class="token function">yarn</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 进入项目目录</span> +<span class="token function">pnpm</span> i +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 进入项目目录</span> <span class="token builtin class-name">cd</span> myapp <span class="token comment"># 安装依赖</span> -<span class="token function">npm</span> i -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><!--]--></div><!--]--></div><h2 id="启动项目" tabindex="-1"><a class="header-anchor" href="#启动项目" aria-hidden="true">#</a> 启动项目</h2><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">YARN</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 开发调试</span> -<span class="token function">yarn</span> dev +<span class="token function">npm</span> i +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h2 id="启动项目" tabindex="-1"><a class="header-anchor" href="#启动项目" aria-hidden="true">#</a> 启动项目</h2><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 开发调试</span> +<span class="token function">pnpm</span> dev -<span class="token function">yarn</span> run v1.22.4 +<span class="token function">pnpm</span> run v1.22.4 $ fes dev Starting the development server http://localhost:8080 <span class="token punctuation">..</span>. @@ -43,7 +61,7 @@ Starting the development server http://localhost:8080 <span class="token punctua Compiled successfully <span class="token keyword">in</span> <span class="token number">15</span>.91s DONE Compiled successfully <span class="token keyword">in</span> 15917ms <span class="token number">11</span>:17:08 AM -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 开发调试</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 开发调试</span> <span class="token function">npm</span> run dev <span class="token operator">></span> fes dev @@ -53,24 +71,24 @@ Starting the development server http://localhost:8080 <span class="token punctua Compiled successfully <span class="token keyword">in</span> <span class="token number">3</span>.66s DONE Compiled successfully <span class="token keyword">in</span> 3662ms <span class="token number">11</span>:17:46 AM -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><!--]--></div><!--]--></div><p>Fes.js 会在 <a href="http://localhost:8080" target="_blank" rel="noopener noreferrer">http://localhost:8080<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 启动一个热重载的开发服务器。当你修改你的 .vue 文件时,浏览器中的内容也会自动更新。</p><img src="/fes.js/home.png" alt="home"><h2 id="部署发布" tabindex="-1"><a class="header-anchor" href="#部署发布" aria-hidden="true">#</a> 部署发布</h2><h3 id="构建" tabindex="-1"><a class="header-anchor" href="#构建" aria-hidden="true">#</a> 构建</h3><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">YARN</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 构建</span> -<span class="token function">yarn</span> build +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p>Fes.js 会在 <a href="http://localhost:8080" target="_blank" rel="noopener noreferrer">http://localhost:8080<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 启动一个热重载的开发服务器。当你修改你的 .vue 文件时,浏览器中的内容也会自动更新。</p><img src="/home.png" alt="home"><h2 id="部署发布" tabindex="-1"><a class="header-anchor" href="#部署发布" aria-hidden="true">#</a> 部署发布</h2><h3 id="构建" tabindex="-1"><a class="header-anchor" href="#构建" aria-hidden="true">#</a> 构建</h3><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 构建</span> +<span class="token function">pnpm</span> build -<span class="token function">yarn</span> run v1.22.4 +<span class="token function">pnpm</span> run v1.22.4 $ fes build ✔ Webpack Compiled successfully <span class="token keyword">in</span> <span class="token number">45</span>.37s ✨ Done <span class="token keyword">in</span> <span class="token number">48</span>.87s. -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 构建</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 构建</span> <span class="token function">npm</span> run build <span class="token operator">></span> fes build ✔ Webpack Compiled successfully <span class="token keyword">in</span> <span class="token number">45</span>.37s -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><!--]--></div><!--]--></div><p>构建产物默认生成到 ./dist 下,然后通过 tree 命令查看。</p><div class="language-base ext-base line-numbers-mode"><pre class="language-base"><code>tree ./dist +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p>构建产物默认生成到 ./dist 下,然后通过 tree 命令查看。</p><div class="language-base line-numbers-mode" data-ext="base"><pre class="language-base"><code>tree ./dist dist ├── chunk-vendors.27cd4686.js @@ -81,7 +99,7 @@ dist ├── logo.png └── static └── logo.0f85bba0.png -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="本地验证" tabindex="-1"><a class="header-anchor" href="#本地验证" aria-hidden="true">#</a> 本地验证</h3><p>发布之前,可以通过 <a href="https://github.com/vercel/serve" target="_blank" rel="noopener noreferrer">serve<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 做本地验证,验证结果应该跟执行 <code>fes dev</code> 的结果一样。</p><h3 id="部署" tabindex="-1"><a class="header-anchor" href="#部署" aria-hidden="true">#</a> 部署</h3><p>本地验证完,就可以部署了。你需要把 dist 目录部署到服务器上。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/getting-started.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="本地验证" tabindex="-1"><a class="header-anchor" href="#本地验证" aria-hidden="true">#</a> 本地验证</h3><p>发布之前,可以通过 <a href="https://github.com/vercel/serve" target="_blank" rel="noopener noreferrer">serve<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 做本地验证,验证结果应该跟执行 <code>fes dev</code> 的结果一样。</p><h3 id="部署" tabindex="-1"><a class="header-anchor" href="#部署" aria-hidden="true">#</a> 部署</h3><p>本地验证完,就可以部署了。你需要把 dist 目录部署到服务器上。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/getting-started.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/" class="router-link-active" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/image.html b/guide/image.html index 67b0a483..1052d4d5 100644 --- a/guide/image.html +++ b/guide/image.html @@ -3,33 +3,51 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>使用图片 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/image.html.50bf0bdd.js"><link rel="modulepreload" href="/assets/image.html.f92a08c2.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">样式和资源文件</p><ul class=""><li><!--[--><a aria-current="page" href="/fes.js/guide/image.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/image.html#使用图片-1" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/image.html#vue-里使用图片" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="Vue 里使用图片"><!--[--><!--]--> Vue 里使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/image.html#js-里使用图片" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="JS 里使用图片"><!--[--><!--]--> JS 里使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/image.html#css-里使用图片" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="CSS 里使用图片"><!--[--><!--]--> CSS 里使用图片 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/image.html#public-文件夹" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="public 文件夹"><!--[--><!--]--> public 文件夹 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/image.html#在html模板中使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="在HTML模板中使用"><!--[--><!--]--> 在HTML模板中使用 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/image.html#在-vue-文件中使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="在.vue 文件中使用"><!--[--><!--]--> 在.vue 文件中使用 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="使用图片" tabindex="-1"><a class="header-anchor" href="#使用图片" aria-hidden="true">#</a> 使用图片</h1><h2 id="使用图片-1" tabindex="-1"><a class="header-anchor" href="#使用图片-1" aria-hidden="true">#</a> 使用图片</h2><p>假设在 <code>src/images</code> 目录下有 <code>logo.png</code>。</p><h3 id="vue-里使用图片" tabindex="-1"><a class="header-anchor" href="#vue-里使用图片" aria-hidden="true">#</a> Vue 里使用图片</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@/images/logo.png`<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/image.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/image.html#使用图片-1" class="router-link-active router-link-exact-active sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/image.html#vue-里使用图片" class="router-link-active router-link-exact-active sidebar-item" aria-label="Vue 里使用图片"><!--[--><!--]--> Vue 里使用图片 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/image.html#js-里使用图片" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 里使用图片"><!--[--><!--]--> JS 里使用图片 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/image.html#css-里使用图片" class="router-link-active router-link-exact-active sidebar-item" aria-label="CSS 里使用图片"><!--[--><!--]--> CSS 里使用图片 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/guide/image.html#public-文件夹" class="router-link-active router-link-exact-active sidebar-item" aria-label="public 文件夹"><!--[--><!--]--> public 文件夹 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/image.html#在-html-模板中使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="在 HTML 模板中使用"><!--[--><!--]--> 在 HTML 模板中使用 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/image.html#在-vue-文件中使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="在.vue 文件中使用"><!--[--><!--]--> 在.vue 文件中使用 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="使用图片" tabindex="-1"><a class="header-anchor" href="#使用图片" aria-hidden="true">#</a> 使用图片</h1><h2 id="使用图片-1" tabindex="-1"><a class="header-anchor" href="#使用图片-1" aria-hidden="true">#</a> 使用图片</h2><p>假设在 <code>src/images</code> 目录下有 <code>logo.png</code>。</p><h3 id="vue-里使用图片" tabindex="-1"><a class="header-anchor" href="#vue-里使用图片" aria-hidden="true">#</a> Vue 里使用图片</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@/images/logo.png`<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="js-里使用图片" tabindex="-1"><a class="header-anchor" href="#js-里使用图片" aria-hidden="true">#</a> JS 里使用图片</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> imageUrl <span class="token keyword">from</span> <span class="token string">'@/images/logo.png`'</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="css-里使用图片" tabindex="-1"><a class="header-anchor" href="#css-里使用图片" aria-hidden="true">#</a> CSS 里使用图片</h3><div class="language-css ext-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.logo</span> <span class="token punctuation">{</span> - <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'@/images/logo.png'</span><span class="token punctuation">)</span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="js-里使用图片" tabindex="-1"><a class="header-anchor" href="#js-里使用图片" aria-hidden="true">#</a> JS 里使用图片</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> imageUrl <span class="token keyword">from</span> <span class="token string">'@/images/logo.png`'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="css-里使用图片" tabindex="-1"><a class="header-anchor" href="#css-里使用图片" aria-hidden="true">#</a> CSS 里使用图片</h3><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.logo</span> <span class="token punctuation">{</span> + <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'@/images/logo.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注意:</p><ol><li>这是 <code>webpack</code> 的规则,如果切到其他打包工具,可能会有变化</li><li><code>less</code> 中同样适用</li></ol><h2 id="public-文件夹" tabindex="-1"><a class="header-anchor" href="#public-文件夹" aria-hidden="true">#</a> <code>public</code> 文件夹</h2><p>有些内容不需要经过 <code>webpack</code> 模块化处理,则可以将这些内容放在 <code>public</code> 文件夹,构建后会直接复制到 <code>dist</code> 目录,所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在html模板中使用" tabindex="-1"><a class="header-anchor" href="#在html模板中使用" aria-hidden="true">#</a> 在HTML模板中使用</h3><p>在 <code>public/index.html</code> 中需要设置:</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="在-vue-文件中使用" tabindex="-1"><a class="header-anchor" href="#在-vue-文件中使用" aria-hidden="true">#</a> 在.vue 文件中使用</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`${publicPath}my-image.png`<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意:</p><ol><li>这是 <code>webpack</code> 的规则,如果切到其他打包工具,可能会有变化</li><li><code>less</code> 中同样适用</li></ol><h2 id="public-文件夹" tabindex="-1"><a class="header-anchor" href="#public-文件夹" aria-hidden="true">#</a> <code>public</code> 文件夹</h2><p>有些内容不需要经过 <code>webpack</code> 模块化处理,则可以将这些内容放在 <code>public</code> 文件夹,构建后会直接复制到 <code>dist</code> 目录,所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在-html-模板中使用" tabindex="-1"><a class="header-anchor" href="#在-html-模板中使用" aria-hidden="true">#</a> 在 HTML 模板中使用</h3><p>在 <code>index.html</code> 中需要设置:</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="在-vue-文件中使用" tabindex="-1"><a class="header-anchor" href="#在-vue-文件中使用" aria-hidden="true">#</a> 在.vue 文件中使用</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`${publicPath}my-image.png`<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token punctuation">{</span> - <span class="token literal-property property">publicPath</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token literal-property property">publicPath</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/image.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/fes.js/guide/css.html" class="nav-link" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/image.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/guide/css.html" class="" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/index.html b/guide/index.html index 335a8958..4e40187c 100644 --- a/guide/index.html +++ b/guide/index.html @@ -3,18 +3,36 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>介绍 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/index.html.9f427ef5.js"><link rel="modulepreload" href="/assets/index.html.4ecf73ea.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a aria-current="page" href="/fes.js/guide/" class="router-link-active router-link-exact-active nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a aria-current="page" href="/fes.js/guide/" class="router-link-active router-link-exact-active nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item active">介绍</p><ul class=""><li><!--[--><a aria-current="page" href="/fes.js/guide/" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/#痛点" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="痛点"><!--[--><!--]--> 痛点 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/#fes-js-是什么" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="Fes.js 是什么?"><!--[--><!--]--> Fes.js 是什么? <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/#fes-js-如何工作" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="Fes.js 如何工作?"><!--[--><!--]--> Fes.js 如何工作? <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/#架构" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="架构"><!--[--><!--]--> 架构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/#插件和插件集" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="插件和插件集"><!--[--><!--]--> 插件和插件集 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/#fes-临时文件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label=".fes 临时文件"><!--[--><!--]--> .fes 临时文件 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/#为什么不是" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="为什么不是 ...?"><!--[--><!--]--> 为什么不是 ...? <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/#vue-cli" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="Vue CLI"><!--[--><!--]--> Vue CLI <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/#umi" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="UMI"><!--[--><!--]--> UMI <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h1><h2 id="痛点" tabindex="-1"><a class="header-anchor" href="#痛点" aria-hidden="true">#</a> 痛点</h2><p>在开发一个前端项目之前,我们可能需要做如下准备工作:</p><ul><li>搭建开发环境</li><li>约定代码规范</li><li>封装API请求</li><li>配置路由</li><li>实现布局、菜单、导航</li><li>实现登录</li><li>权限管理</li><li>...</li></ul><p>除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。</p><h2 id="fes-js-是什么" tabindex="-1"><a class="header-anchor" href="#fes-js-是什么" aria-hidden="true">#</a> Fes.js 是什么?</h2><p>Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础,同时支持配置式路由和约定式路由,并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系,支持各种功能扩展和业务需求。</p><p>它主要具备以下特点:</p><ul><li><p>🚀 <strong>快速</strong> ,内置了路由、开发、构建等,并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件,可以满足大部分日常开发需求。</p></li><li><p>🧨 <strong>简单</strong> ,基于Vue.js 3.0,上手简单。贯彻“约定优于配置”思想,设计插件上尽可能用约定替代配置,同时提供统一的插件配置入口,简单简洁又不失灵活。提供一致性的API入口,一致化的体验,学习起来更轻松。</p></li><li><p>💪 <strong>健壮</strong> ,只需要关心页面内容,减少写BUG的机会!提供单元测试、覆盖测试能力保障项目质量。</p></li><li><p>📦 <strong>可扩展</strong> ,借鉴Umi实现了完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序的运行。</p></li><li><p>📡 <strong>面向未来</strong> ,在满足需求的同时,我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能,已使用webpack5提升构建性能和实现微服务,未来会探索vite等新技术。</p></li></ul><h2 id="fes-js-如何工作" tabindex="-1"><a class="header-anchor" href="#fes-js-如何工作" aria-hidden="true">#</a> Fes.js 如何工作?</h2><h3 id="架构" tabindex="-1"><a class="header-anchor" href="#架构" aria-hidden="true">#</a> 架构</h3><img src="/fes.js/framework.png" alt="架构"><p>Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。</p><h3 id="插件和插件集" tabindex="-1"><a class="header-anchor" href="#插件和插件集" aria-hidden="true">#</a> 插件和插件集</h3><p><img src="/fes.js/plugins.png" alt="插件" title="插件" style="width:500px;" class="medium-zoom-image"></p> Fes.js 支持插件和插件集,通过这张图应该很好理解到他们的关系,通过插件集我们把插件收敛依赖然后支持不同的业务类型。 <h3 id="fes-临时文件" tabindex="-1"><a class="header-anchor" href="#fes-临时文件" aria-hidden="true">#</a> .fes 临时文件</h3><p>.fes 临时目录是整个 Fes.js 项目的发动机,你的入口文件、路由等等都在这里,这些是由 fes 内部插件及三方插件生成的。</p><p>你通常会在 .fes 下看到以下目录</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>+ .fes + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a aria-current="page" href="/guide/" class="router-link-active router-link-exact-active router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a aria-current="page" href="/guide/" class="router-link-active router-link-exact-active router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading active">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/#痛点" class="router-link-active router-link-exact-active sidebar-item" aria-label="痛点"><!--[--><!--]--> 痛点 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/#fes-js-是什么" class="router-link-active router-link-exact-active sidebar-item" aria-label="Fes.js 是什么?"><!--[--><!--]--> Fes.js 是什么? <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/#fes-js-如何工作" class="router-link-active router-link-exact-active sidebar-item" aria-label="Fes.js 如何工作?"><!--[--><!--]--> Fes.js 如何工作? <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/#架构" class="router-link-active router-link-exact-active sidebar-item" aria-label="架构"><!--[--><!--]--> 架构 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/#插件和插件集" class="router-link-active router-link-exact-active sidebar-item" aria-label="插件和插件集"><!--[--><!--]--> 插件和插件集 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/#fes-临时文件" class="router-link-active router-link-exact-active sidebar-item" aria-label=".fes 临时文件"><!--[--><!--]--> .fes 临时文件 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/guide/#为什么不是" class="router-link-active router-link-exact-active sidebar-item" aria-label="为什么不是 ...?"><!--[--><!--]--> 为什么不是 ...? <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/#vue-cli" class="router-link-active router-link-exact-active sidebar-item" aria-label="Vue CLI"><!--[--><!--]--> Vue CLI <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/#umi" class="router-link-active router-link-exact-active sidebar-item" aria-label="UMI"><!--[--><!--]--> UMI <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h1><h2 id="痛点" tabindex="-1"><a class="header-anchor" href="#痛点" aria-hidden="true">#</a> 痛点</h2><p>在开发一个前端项目之前,我们可能需要做如下准备工作:</p><ul><li>搭建开发环境</li><li>约定代码规范</li><li>封装API请求</li><li>配置路由</li><li>实现布局、菜单、导航</li><li>实现登录</li><li>权限管理</li><li>...</li></ul><p>除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。</p><h2 id="fes-js-是什么" tabindex="-1"><a class="header-anchor" href="#fes-js-是什么" aria-hidden="true">#</a> Fes.js 是什么?</h2><p>Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础,同时支持配置式路由和约定式路由,并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系,支持各种功能扩展和业务需求。</p><p>它主要具备以下特点:</p><ul><li><p>🚀 <strong>快速</strong> ,内置了路由、开发、构建等,并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件,可以满足大部分日常开发需求。</p></li><li><p>🧨 <strong>简单</strong> ,基于Vue.js 3.0,上手简单。贯彻“约定优于配置”思想,设计插件上尽可能用约定替代配置,同时提供统一的插件配置入口,简单简洁又不失灵活。提供一致性的API入口,一致化的体验,学习起来更轻松。</p></li><li><p>💪 <strong>健壮</strong> ,只需要关心页面内容,减少写BUG的机会!提供单元测试、覆盖测试能力保障项目质量。</p></li><li><p>📦 <strong>可扩展</strong> ,借鉴Umi实现了完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序的运行。</p></li><li><p>📡 <strong>面向未来</strong> ,在满足需求的同时,我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能,已使用webpack5提升构建性能和实现微服务,未来会探索vite等新技术。</p></li></ul><h2 id="fes-js-如何工作" tabindex="-1"><a class="header-anchor" href="#fes-js-如何工作" aria-hidden="true">#</a> Fes.js 如何工作?</h2><h3 id="架构" tabindex="-1"><a class="header-anchor" href="#架构" aria-hidden="true">#</a> 架构</h3><!--  --><img src="/framework.png" alt="架构"><p>Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。</p><h3 id="插件和插件集" tabindex="-1"><a class="header-anchor" href="#插件和插件集" aria-hidden="true">#</a> 插件和插件集</h3><p><img src="/plugins.png" alt="插件" title="插件" style="width:500px;" class="medium-zoom-image"></p> Fes.js 支持插件和插件集,通过这张图应该很好理解到他们的关系,通过插件集我们把插件收敛依赖然后支持不同的业务类型。 <h3 id="fes-临时文件" tabindex="-1"><a class="header-anchor" href="#fes-临时文件" aria-hidden="true">#</a> .fes 临时文件</h3><p>.fes 临时目录是整个 Fes.js 项目的发动机,你的入口文件、路由等等都在这里,这些是由 fes 内部插件及三方插件生成的。</p><p>你通常会在 .fes 下看到以下目录</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>+ .fes + core # 内部插件生成 + pluginA # 外部插件生成 + presetB # 外部插件生成 + fes.js # 入口文件 -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>临时文件是 Fes.js 中非常重要的一部分,框架或插件会根据你的代码生成临时文件,这些原来需要放在项目里的脏乱差的部分都被藏在了这里。</p><p>你可以在这里调试代码,但不要在 .git 仓库里提交他,因为他的临时性,每次启动 fes 时都会被删除并重新生成。</p><h2 id="为什么不是" tabindex="-1"><a class="header-anchor" href="#为什么不是" aria-hidden="true">#</a> 为什么不是 ...?</h2><h3 id="vue-cli" tabindex="-1"><a class="header-anchor" href="#vue-cli" aria-hidden="true">#</a> Vue CLI</h3><p>Vue CLI 是基于 Vue.js 进行快速开发的完整系统,提供交互式脚手架、丰富的官方插件,并且可通过插件进行扩展,他在打包层把体验做到了极致,但是不包含路由,不是框架。所以,如果大家想基于他修改部分配置,或者希望在打包层之外也做技术收敛时,就会遇到困难。</p><h3 id="umi" tabindex="-1"><a class="header-anchor" href="#umi" aria-hidden="true">#</a> UMI</h3><p>UMI 是个很好的选择,Fes.js 很多功能是借鉴 UMI 做的。UMI 是基于 React 封装的应用级框架,贯彻着函数式编程的思维。而 Vue 有所不同,虽然 Vue 3.0 向函数式迈了一大步,但大家可能依然喜欢编写 <code>.vue</code>文件,而非 <code>.jsx</code> 文件。两种思维方式会导致部分API设计上有所差异,虽然 UMI 有 <code>plugin-vue</code> ,但不太 "vue"。推荐喜欢 React 的同学使用 UMI。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/fes.js/guide/getting-started.html" class="nav-link" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>临时文件是 Fes.js 中非常重要的一部分,框架或插件会根据你的代码生成临时文件,这些原来需要放在项目里的脏乱差的部分都被藏在了这里。</p><p>你可以在这里调试代码,但不要在 .git 仓库里提交他,因为他的临时性,每次启动 fes 时都会被删除并重新生成。</p><h2 id="为什么不是" tabindex="-1"><a class="header-anchor" href="#为什么不是" aria-hidden="true">#</a> 为什么不是 ...?</h2><h3 id="vue-cli" tabindex="-1"><a class="header-anchor" href="#vue-cli" aria-hidden="true">#</a> Vue CLI</h3><p>Vue CLI 是基于 Vue.js 进行快速开发的完整系统,提供交互式脚手架、丰富的官方插件,并且可通过插件进行扩展,他在打包层把体验做到了极致,但是不包含路由,不是框架。所以,如果大家想基于他修改部分配置,或者希望在打包层之外也做技术收敛时,就会遇到困难。</p><h3 id="umi" tabindex="-1"><a class="header-anchor" href="#umi" aria-hidden="true">#</a> UMI</h3><p>UMI 是个很好的选择,Fes.js 很多功能是借鉴 UMI 做的。UMI 是基于 React 封装的应用级框架,贯彻着函数式编程的思维。而 Vue 有所不同,虽然 Vue 3.0 向函数式迈了一大步,但大家可能依然喜欢编写 <code>.vue</code>文件,而非 <code>.jsx</code> 文件。两种思维方式会导致部分API设计上有所差异,虽然 UMI 有 <code>plugin-vue</code> ,但不太 "vue"。推荐喜欢 React 的同学使用 UMI。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/guide/getting-started.html" class="" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/mock.html b/guide/mock.html index 64d67172..76e9f9ca 100644 --- a/guide/mock.html +++ b/guide/mock.html @@ -3,49 +3,73 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>Mock 数据 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/mock.html.ab147021.js"><link rel="modulepreload" href="/assets/mock.html.561d68eb.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/mock.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/mock.html#约定式-mock-文件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="约定式 Mock 文件"><!--[--><!--]--> 约定式 Mock 文件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/mock.html#编写-mock-文件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="编写 Mock 文件"><!--[--><!--]--> 编写 Mock 文件 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/mock.html#cgimock-参数" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="cgiMock 参数"><!--[--><!--]--> cgiMock 参数 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/mock.html#mockjs-参数" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="mockjs 参数"><!--[--><!--]--> mockjs 参数 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/mock.html#utils-参数" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="utils 参数"><!--[--><!--]--> utils 参数 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/mock.html#配置-mock" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置 Mock"><!--[--><!--]--> 配置 Mock <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/mock.html#关闭-mock" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="关闭 Mock"><!--[--><!--]--> 关闭 Mock <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="mock-数据" tabindex="-1"><a class="header-anchor" href="#mock-数据" aria-hidden="true">#</a> Mock 数据</h1><p>Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。</p><h2 id="约定式-mock-文件" tabindex="-1"><a class="header-anchor" href="#约定式-mock-文件" aria-hidden="true">#</a> 约定式 Mock 文件</h2><p>Fes.js 约定 <code>./mock.js</code> 为 mock 文件。</p><p>比如:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>. + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/mock.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/mock.html#约定式-mock-文件" class="router-link-active router-link-exact-active sidebar-item" aria-label="约定式 Mock 文件"><!--[--><!--]--> 约定式 Mock 文件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/mock.html#编写-mock-文件" class="router-link-active router-link-exact-active sidebar-item" aria-label="编写 Mock 文件"><!--[--><!--]--> 编写 Mock 文件 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/mock.html#cgimock-参数" class="router-link-active router-link-exact-active sidebar-item" aria-label="cgiMock 参数"><!--[--><!--]--> cgiMock 参数 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/mock.html#mockjs-参数" class="router-link-active router-link-exact-active sidebar-item" aria-label="mockjs 参数"><!--[--><!--]--> mockjs 参数 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/mock.html#utils-参数" class="router-link-active router-link-exact-active sidebar-item" aria-label="utils 参数"><!--[--><!--]--> utils 参数 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/guide/mock.html#配置-mock" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置 Mock"><!--[--><!--]--> 配置 Mock <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/mock.html#关闭-mock" class="router-link-active router-link-exact-active sidebar-item" aria-label="关闭 Mock"><!--[--><!--]--> 关闭 Mock <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="mock-数据" tabindex="-1"><a class="header-anchor" href="#mock-数据" aria-hidden="true">#</a> Mock 数据</h1><p>Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。</p><h2 id="约定式-mock-文件" tabindex="-1"><a class="header-anchor" href="#约定式-mock-文件" aria-hidden="true">#</a> 约定式 Mock 文件</h2><p>Fes.js 约定 <code>./mock.js</code> 为 mock 文件。</p><p>比如:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>. ├── mock.js └── src └── pages └── index.vue -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="编写-mock-文件" tabindex="-1"><a class="header-anchor" href="#编写-mock-文件" aria-hidden="true">#</a> 编写 Mock 文件</h2><p>可以参考如下 🌰:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cgiMock<span class="token punctuation">,</span> mockjs<span class="token punctuation">,</span> utils <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编写-mock-文件" tabindex="-1"><a class="header-anchor" href="#编写-mock-文件" aria-hidden="true">#</a> 编写 Mock 文件</h2><p>可以参考如下 🌰:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cgiMock<span class="token punctuation">,</span> mockjs<span class="token punctuation">,</span> utils <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> Random <span class="token punctuation">}</span> <span class="token operator">=</span> mockjs<span class="token punctuation">;</span> <span class="token comment">// 测试 proxy 与 mock 用例集合</span> <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/movie/in_theaters_mock'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> - <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> - <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'movie: movie/in_theaters_mock ~~~~~'</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span> + <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'movie: movie/in_theaters_mock ~~~~~'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/movie/test_mock'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> - <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> - <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'mock: movie/test_mock'</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span> + <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'mock: movie/test_mock'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 测试用例: mock.js change,重现请求,需要能拉最新的数据</span> <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/watchtest'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> - <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> - <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'通过 register 测试 mock watch: 初始状态'</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span> + <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'通过 register 测试 mock watch: 初始状态'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回一个数字</span> @@ -56,17 +80,23 @@ <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">'/json'</span><span class="token punctuation">,</span> <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'400101'</span><span class="token punctuation">,</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">"不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String"</span><span class="token punctuation">,</span> <span class="token literal-property property">transactionTime</span><span class="token operator">:</span> <span class="token string">'20170309171146'</span><span class="token punctuation">,</span> <span class="token literal-property property">success</span><span class="token operator">:</span> <span class="token boolean">false</span> - <span class="token punctuation">}</span> + <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'400101'</span><span class="token punctuation">,</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">"不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String"</span><span class="token punctuation">,</span> + <span class="token literal-property property">transactionTime</span><span class="token operator">:</span> <span class="token string">'20170309171146'</span><span class="token punctuation">,</span> + <span class="token literal-property property">success</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 利用 mock.js 产生随机文本</span> <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/text'</span><span class="token punctuation">,</span> Random<span class="token punctuation">.</span><span class="token function">cparagraph</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 返回一个字符串 利用 mock.js 产生随机字符</span> - <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/random'</span><span class="token punctuation">,</span> mockjs<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token string-property property">'string|1-10'</span><span class="token operator">:</span> <span class="token string">'★'</span> - <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span> + <span class="token string">'/random'</span><span class="token punctuation">,</span> + mockjs<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token string-property property">'string|1-10'</span><span class="token operator">:</span> <span class="token string">'★'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 正则匹配url, 返回一个字符串</span> <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\/abc|\/xyz</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">'regexp test!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> @@ -93,20 +123,21 @@ <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'text/plain'</span><span class="token punctuation">,</span> <span class="token string-property property">'Content-Length'</span><span class="token operator">:</span> <span class="token string">'123'</span><span class="token punctuation">,</span> - <span class="token literal-property property">ETag</span><span class="token operator">:</span> <span class="token string">'12345'</span> + <span class="token literal-property property">ETag</span><span class="token operator">:</span> <span class="token string">'12345'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">cookies</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'myname'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'kwan'</span><span class="token punctuation">,</span> <span class="token literal-property property">maxAge</span><span class="token operator">:</span> <span class="token number">900000</span><span class="token punctuation">,</span> <span class="token literal-property property">httpOnly</span><span class="token operator">:</span> <span class="token boolean">true</span> - <span class="token punctuation">}</span> - <span class="token punctuation">]</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'myname'</span><span class="token punctuation">,</span> + <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'kwan'</span><span class="token punctuation">,</span> + <span class="token literal-property property">maxAge</span><span class="token operator">:</span> <span class="token number">900000</span><span class="token punctuation">,</span> + <span class="token literal-property property">httpOnly</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 携带参数的请求</span> <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/v2/audit/list'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token keyword">const</span> <span class="token punctuation">{</span> - currentPage<span class="token punctuation">,</span> pageSize<span class="token punctuation">,</span> isAudited - <span class="token punctuation">}</span> <span class="token operator">=</span> req<span class="token punctuation">.</span>body<span class="token punctuation">;</span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> currentPage<span class="token punctuation">,</span> pageSize<span class="token punctuation">,</span> isAudited <span class="token punctuation">}</span> <span class="token operator">=</span> req<span class="token punctuation">.</span>body<span class="token punctuation">;</span> res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> @@ -130,9 +161,9 @@ <span class="token literal-property property">handleTag</span><span class="token operator">:</span> <span class="token string">'已采纳'</span><span class="token punctuation">,</span> <span class="token literal-property property">postType</span><span class="token operator">:</span> <span class="token string">'voice'</span><span class="token punctuation">,</span> <span class="token literal-property property">postStatus</span><span class="token operator">:</span> isAudited <span class="token operator">?</span> <span class="token string">'pass'</span> <span class="token operator">:</span> <span class="token string">'auditing'</span><span class="token punctuation">,</span> - <span class="token literal-property property">auditStatus</span><span class="token operator">:</span> <span class="token string">'audit1'</span> - <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span> - <span class="token punctuation">}</span> + <span class="token literal-property property">auditStatus</span><span class="token operator">:</span> <span class="token string">'audit1'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> @@ -140,19 +171,22 @@ <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/v2/upload'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">code</span><span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span> - <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'文件上传成功'</span> + <span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'文件上传成功'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -<span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br></div></div><h3 id="cgimock-参数" tabindex="-1"><a class="header-anchor" href="#cgimock-参数" aria-hidden="true">#</a> cgiMock 参数</h3><p>创建一个 mock 接口,参数非常灵活,参考上面的 demo 即可。</p><h3 id="mockjs-参数" tabindex="-1"><a class="header-anchor" href="#mockjs-参数" aria-hidden="true">#</a> mockjs 参数</h3><p><a href="http://mockjs.com/" target="_blank" rel="noopener noreferrer">Mock.js<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 是常用的辅助生成模拟数据的三方库,借助他可以提升我们的 mock 数据能力。</p><p>比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cgiMock<span class="token punctuation">,</span> mockjs<span class="token punctuation">,</span> utils <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/random'</span><span class="token punctuation">,</span> mockjs<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token string-property property">'string|1-10'</span><span class="token operator">:</span> <span class="token string">'★'</span> - <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="utils-参数" tabindex="-1"><a class="header-anchor" href="#utils-参数" aria-hidden="true">#</a> utils 参数</h3><p>工具函数:</p><ul><li>utils.file(path),从项目根目录根据path寻找文件,返回文件流。</li></ul><h2 id="配置-mock" tabindex="-1"><a class="header-anchor" href="#配置-mock" aria-hidden="true">#</a> 配置 Mock</h2><p>详见配置 <a href="/fes.js/reference/config/#mock" class="">mock</a>。</p><h2 id="关闭-mock" tabindex="-1"><a class="header-anchor" href="#关闭-mock" aria-hidden="true">#</a> 关闭 Mock</h2><p>可以通过配置关闭。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="cgimock-参数" tabindex="-1"><a class="header-anchor" href="#cgimock-参数" aria-hidden="true">#</a> cgiMock 参数</h3><p>创建一个 mock 接口,参数非常灵活,参考上面的 demo 即可。</p><h3 id="mockjs-参数" tabindex="-1"><a class="header-anchor" href="#mockjs-参数" aria-hidden="true">#</a> mockjs 参数</h3><p><a href="http://mockjs.com/" target="_blank" rel="noopener noreferrer">Mock.js<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 是常用的辅助生成模拟数据的三方库,借助他可以提升我们的 mock 数据能力。</p><p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> cgiMock<span class="token punctuation">,</span> mockjs<span class="token punctuation">,</span> utils <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token function">cgiMock</span><span class="token punctuation">(</span> + <span class="token string">'/random'</span><span class="token punctuation">,</span> + mockjs<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token string-property property">'string|1-10'</span><span class="token operator">:</span> <span class="token string">'★'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="utils-参数" tabindex="-1"><a class="header-anchor" href="#utils-参数" aria-hidden="true">#</a> utils 参数</h3><p>工具函数:</p><ul><li>utils.file(path),从项目根目录根据 path 寻找文件,返回文件流。</li></ul><h2 id="配置-mock" tabindex="-1"><a class="header-anchor" href="#配置-mock" aria-hidden="true">#</a> 配置 Mock</h2><p>详见配置 <a href="/reference/config/#mock" class="">mock</a>。</p><h2 id="关闭-mock" tabindex="-1"><a class="header-anchor" href="#关闭-mock" aria-hidden="true">#</a> 关闭 Mock</h2><p>可以通过配置关闭。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/mock.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/template.html" class="nav-link" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/mock.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/template.html" class="" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a></span><span class="next"><a href="/guide/upgrade3.html" class="" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/plugin.html b/guide/plugin.html index a36f09c4..3d514c37 100644 --- a/guide/plugin.html +++ b/guide/plugin.html @@ -3,31 +3,49 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>插件 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/plugin.html.de4f8c7b.js"><link rel="modulepreload" href="/assets/plugin.html.a5e6ae94.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/plugin.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/plugin.html#插件的-id-和-key" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="插件的 id 和 key"><!--[--><!--]--> 插件的 id 和 key <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/plugin.html#启动插件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启动插件"><!--[--><!--]--> 启动插件 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/plugin.html#package-json-依赖" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="package.json 依赖"><!--[--><!--]--> package.json 依赖 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/plugin.html#配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/plugin.html#环境变量" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/plugin.html#禁用插件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="禁用插件"><!--[--><!--]--> 禁用插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/plugin.html#配置插件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置插件"><!--[--><!--]--> 配置插件 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="插件" tabindex="-1"><a class="header-anchor" href="#插件" aria-hidden="true">#</a> 插件</h1><h2 id="插件的-id-和-key" tabindex="-1"><a class="header-anchor" href="#插件的-id-和-key" aria-hidden="true">#</a> 插件的 id 和 key</h2><p>每个插件都会对应一个 <code>id</code> 和一个 <code>key</code>,<strong><code>id</code> 是路径的简写,<code>key</code> 是进一步简化后用于配置的唯一值</strong>。</p><p>比如插件 <code>/node_modules/@fesjs/plugin-foo/index.js</code>,通常来说,其 <code>id</code> 为 <code>@fesjs/plugin-foo</code>,<code>key</code> 为 <code>foo</code>。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>id 一般用不上,对于普通开发者 key 用来配置插件,而插件开发者可以使用 key 判断是否安装某个插件。</p></div><h2 id="启动插件" tabindex="-1"><a class="header-anchor" href="#启动插件" aria-hidden="true">#</a> 启动插件</h2><p>有多种方式引入插件</p><h3 id="package-json-依赖" tabindex="-1"><a class="header-anchor" href="#package-json-依赖" aria-hidden="true">#</a> package.json 依赖</h3><p>Fes.js 会自动检测 <code>dependencies</code> 和 <code>devDependencies</code> 里的 fes 插件,比如:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> - <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>那么 <code>@fesjs/plugin-request</code> 会自动被注册,无需在配置里重复声明。</p><h3 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>在配置里可通过 <code>presets</code> 和 <code>plugins</code> 配置插件,比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'./preset'</span><span class="token punctuation">,</span> <span class="token string">'foo/presets'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'./plugin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>通常用于几种情况:</p><ol><li>项目相对路径的插件</li><li>非 npm 包入口文件的插件</li></ol><div class="custom-container warning"><p class="custom-container-title">注意</p><p>请不要配置 npm 包的插件,否则会报重复注册的错误</p></div><h3 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量" aria-hidden="true">#</a> 环境变量</h3><p>还可通过环境变量 <code>FES_PRESETS</code> 和 <code>FES_PLUGINS</code> 注册额外插件。</p><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token assign-left variable">FES_PRESETS</span><span class="token operator">=</span>/a/b/preset.js fes dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="禁用插件" tabindex="-1"><a class="header-anchor" href="#禁用插件" aria-hidden="true">#</a> 禁用插件</h2><p>通过配置插件的 <code>key</code> 为 <code>false</code>,比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Mock 插件的 <code>key</code> 是 <code>mock</code>,我们在配置文件中配置 <code>mock</code> 为 <code>false</code>,则会禁用 Mock 插件及其功能。</p><h2 id="配置插件" tabindex="-1"><a class="header-anchor" href="#配置插件" aria-hidden="true">#</a> 配置插件</h2><p>通过插件的 <code>key</code> 来配置插件,比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/v2'</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/plugin.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/plugin.html#插件的-id-和-key" class="router-link-active router-link-exact-active sidebar-item" aria-label="插件的 id 和 key"><!--[--><!--]--> 插件的 id 和 key <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/plugin.html#启动插件" class="router-link-active router-link-exact-active sidebar-item" aria-label="启动插件"><!--[--><!--]--> 启动插件 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/plugin.html#package-json-依赖" class="router-link-active router-link-exact-active sidebar-item" aria-label="package.json 依赖"><!--[--><!--]--> package.json 依赖 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/plugin.html#配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/plugin.html#环境变量" class="router-link-active router-link-exact-active sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/guide/plugin.html#禁用插件" class="router-link-active router-link-exact-active sidebar-item" aria-label="禁用插件"><!--[--><!--]--> 禁用插件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/plugin.html#配置插件" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置插件"><!--[--><!--]--> 配置插件 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="插件" tabindex="-1"><a class="header-anchor" href="#插件" aria-hidden="true">#</a> 插件</h1><h2 id="插件的-id-和-key" tabindex="-1"><a class="header-anchor" href="#插件的-id-和-key" aria-hidden="true">#</a> 插件的 id 和 key</h2><p>每个插件都会对应一个 <code>id</code> 和一个 <code>key</code>,<strong><code>id</code> 是路径的简写,<code>key</code> 是进一步简化后用于配置的唯一值</strong>。</p><p>比如插件 <code>/node_modules/@fesjs/plugin-foo/index.js</code>,通常来说,其 <code>id</code> 为 <code>@fesjs/plugin-foo</code>,<code>key</code> 为 <code>foo</code>。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>id 一般用不上,对于普通开发者 key 用来配置插件,而插件开发者可以使用 key 判断是否安装某个插件。</p></div><h2 id="启动插件" tabindex="-1"><a class="header-anchor" href="#启动插件" aria-hidden="true">#</a> 启动插件</h2><p>有多种方式引入插件</p><h3 id="package-json-依赖" tabindex="-1"><a class="header-anchor" href="#package-json-依赖" aria-hidden="true">#</a> package.json 依赖</h3><p>Fes.js 会自动检测 <code>dependencies</code> 和 <code>devDependencies</code> 里的 fes 插件,比如:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>这里的 <code>mock</code> 是 Mock插件 的 key。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/plugin.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/route.html" class="nav-link" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/guide/template.html" class="nav-link" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>那么 <code>@fesjs/plugin-request</code> 会自动被注册,无需在配置里重复声明。</p><h3 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>在配置里可通过 <code>presets</code> 和 <code>plugins</code> 配置插件,比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'./preset'</span><span class="token punctuation">,</span> <span class="token string">'foo/presets'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'./plugin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>通常用于几种情况:</p><ol><li>项目相对路径的插件</li><li>非 npm 包入口文件的插件</li></ol><div class="custom-container warning"><p class="custom-container-title">注意</p><p>请不要配置 npm 包的插件,否则会报重复注册的错误</p></div><h3 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量" aria-hidden="true">#</a> 环境变量</h3><p>还可通过环境变量 <code>FES_PRESETS</code> 和 <code>FES_PLUGINS</code> 注册额外插件。</p><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">FES_PRESETS</span><span class="token operator">=</span>/a/b/preset.js fes dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="禁用插件" tabindex="-1"><a class="header-anchor" href="#禁用插件" aria-hidden="true">#</a> 禁用插件</h2><p>通过配置插件的 <code>key</code> 为 <code>false</code>,比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Mock 插件的 <code>key</code> 是 <code>mock</code>,我们在配置文件中配置 <code>mock</code> 为 <code>false</code>,则会禁用 Mock 插件及其功能。</p><h2 id="配置插件" tabindex="-1"><a class="header-anchor" href="#配置插件" aria-hidden="true">#</a> 配置插件</h2><p>通过插件的 <code>key</code> 来配置插件,比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/v2'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这里的 <code>mock</code> 是 Mock 插件 的 key。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/plugin.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/route.html" class="" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a></span><span class="next"><a href="/guide/template.html" class="" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/public.html b/guide/public.html index 8d72a2cf..4a6c9e23 100644 --- a/guide/public.html +++ b/guide/public.html @@ -3,26 +3,44 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>静态资源 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/public.html.d51b184d.js"><link rel="modulepreload" href="/assets/public.html.950ba2eb.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/public.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/public.html#在html模板中使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="在HTML模板中使用"><!--[--><!--]--> 在HTML模板中使用 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/public.html#在-vue-和-js-文件中使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="在.vue 和 js 文件中使用"><!--[--><!--]--> 在.vue 和 js 文件中使用 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="静态资源" tabindex="-1"><a class="header-anchor" href="#静态资源" aria-hidden="true">#</a> 静态资源</h1><p>有些内容不需要经过 <code>webpack</code> 模块化处理,则可以将这些内容放在 <code>public</code> 文件夹,构建后会直接复制到 <code>dist</code> 目录,所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在html模板中使用" tabindex="-1"><a class="header-anchor" href="#在html模板中使用" aria-hidden="true">#</a> 在HTML模板中使用</h3><p>在 <code>public/index.html</code> 中需要设置:</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="在-vue-和-js-文件中使用" tabindex="-1"><a class="header-anchor" href="#在-vue-和-js-文件中使用" aria-hidden="true">#</a> 在.vue 和 js 文件中使用</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`${publicPath}my-image.png`<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/public.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/public.html#在-html-模板中使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="在 HTML 模板中使用"><!--[--><!--]--> 在 HTML 模板中使用 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/public.html#在-vue-和-js-文件中使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="在.vue 和 js 文件中使用"><!--[--><!--]--> 在.vue 和 js 文件中使用 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="静态资源" tabindex="-1"><a class="header-anchor" href="#静态资源" aria-hidden="true">#</a> 静态资源</h1><p>有些内容不需要经过 <code>webpack</code> 模块化处理,则可以将这些内容放在 <code>public</code> 文件夹,构建后会直接复制到 <code>dist</code> 目录,所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在-html-模板中使用" tabindex="-1"><a class="header-anchor" href="#在-html-模板中使用" aria-hidden="true">#</a> 在 HTML 模板中使用</h3><p>在 <code>index.html</code> 中需要设置:</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="在-vue-和-js-文件中使用" tabindex="-1"><a class="header-anchor" href="#在-vue-和-js-文件中使用" aria-hidden="true">#</a> 在.vue 和 js 文件中使用</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`${publicPath}my-image.png`<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token punctuation">{</span> - <span class="token literal-property property">publicPath</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token literal-property property">publicPath</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/public.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/css.html" class="nav-link" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/public.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/css.html" class="" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/route.html b/guide/route.html index 6a034afb..e97964c6 100644 --- a/guide/route.html +++ b/guide/route.html @@ -3,19 +3,37 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>路由 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/route.html.32be9bfc.js"><link rel="modulepreload" href="/assets/route.html.8edafb3a.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#路由配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="路由配置"><!--[--><!--]--> 路由配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#routes" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="routes"><!--[--><!--]--> routes <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#mode" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="mode"><!--[--><!--]--> mode <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#约定式路由" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="约定式路由"><!--[--><!--]--> 约定式路由 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#约定规范" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="约定规范"><!--[--><!--]--> 约定规范 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#动态路由" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="动态路由"><!--[--><!--]--> 动态路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#嵌套路由" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="嵌套路由"><!--[--><!--]--> 嵌套路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#模糊匹配" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="模糊匹配"><!--[--><!--]--> 模糊匹配 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#扩展路由元信息" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="扩展路由元信息"><!--[--><!--]--> 扩展路由元信息 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#智能路由" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="智能路由"><!--[--><!--]--> 智能路由 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#路由跳转" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="路由跳转"><!--[--><!--]--> 路由跳转 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#声明式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="声明式"><!--[--><!--]--> 声明式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/route.html#命令式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="命令式"><!--[--><!--]--> 命令式 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="路由" tabindex="-1"><a class="header-anchor" href="#路由" aria-hidden="true">#</a> 路由</h1><p>像 Vue 、React 这类框架是用组件化搭建页面,路由解决的是路径到组件的匹配问题。Fes.js 基于 <code>Vue Router</code> 实现的路由,想了解更多的同学可以看看<a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p><h2 id="路由配置" tabindex="-1"><a class="header-anchor" href="#路由配置" aria-hidden="true">#</a> 路由配置</h2><p>在配置文件 <code>.fes.js</code>中通过 <code>router</code> 进行配置。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/route.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/route.html#路由配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="路由配置"><!--[--><!--]--> 路由配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/route.html#routes" class="router-link-active router-link-exact-active sidebar-item" aria-label="routes"><!--[--><!--]--> routes <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/route.html#mode" class="router-link-active router-link-exact-active sidebar-item" aria-label="mode"><!--[--><!--]--> mode <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/guide/route.html#约定式路由" class="router-link-active router-link-exact-active sidebar-item" aria-label="约定式路由"><!--[--><!--]--> 约定式路由 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/route.html#约定规范" class="router-link-active router-link-exact-active sidebar-item" aria-label="约定规范"><!--[--><!--]--> 约定规范 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/route.html#动态路由" class="router-link-active router-link-exact-active sidebar-item" aria-label="动态路由"><!--[--><!--]--> 动态路由 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/route.html#嵌套路由" class="router-link-active router-link-exact-active sidebar-item" aria-label="嵌套路由"><!--[--><!--]--> 嵌套路由 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/route.html#模糊匹配" class="router-link-active router-link-exact-active sidebar-item" aria-label="模糊匹配"><!--[--><!--]--> 模糊匹配 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/route.html#智能路由" class="router-link-active router-link-exact-active sidebar-item" aria-label="智能路由"><!--[--><!--]--> 智能路由 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/guide/route.html#扩展路由元信息" class="router-link-active router-link-exact-active sidebar-item" aria-label="扩展路由元信息"><!--[--><!--]--> 扩展路由元信息 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/route.html#路由跳转" class="router-link-active router-link-exact-active sidebar-item" aria-label="路由跳转"><!--[--><!--]--> 路由跳转 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/route.html#声明式" class="router-link-active router-link-exact-active sidebar-item" aria-label="声明式"><!--[--><!--]--> 声明式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/route.html#命令式" class="router-link-active router-link-exact-active sidebar-item" aria-label="命令式"><!--[--><!--]--> 命令式 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="路由" tabindex="-1"><a class="header-anchor" href="#路由" aria-hidden="true">#</a> 路由</h1><p>像 Vue 、React 这类框架是用组件化搭建页面,路由解决的是路径到组件的匹配问题。Fes.js 基于 <code>Vue Router</code> 实现的路由,想了解更多的同学可以看看<a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</p><h2 id="路由配置" tabindex="-1"><a class="header-anchor" href="#路由配置" aria-hidden="true">#</a> 路由配置</h2><p>在配置文件 <code>.fes.js</code>中通过 <code>router</code> 进行配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'hash'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="routes" tabindex="-1"><a class="header-anchor" href="#routes" aria-hidden="true">#</a> routes</h3><p><code>routes</code> 是配置添加到路由的初始路由列表,格式为路由信息的数组。具体使用参考 <a href="https://next.router.vuejs.org/zh/guide/" target="_blank" rel="noopener noreferrer">Vue Router 文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 中关于路由配置、路由匹配相关内容。</p><h3 id="mode" tabindex="-1"><a class="header-anchor" href="#mode" aria-hidden="true">#</a> mode</h3><p>创建历史记录的类型:</p><ul><li><strong>history</strong>,对应 <a href="https://next.router.vuejs.org/zh/api/#createwebhistory" target="_blank" rel="noopener noreferrer">createWebHistory<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li><li><strong>hash</strong>,对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noopener noreferrer">createWebHashHistory<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li><li><strong>memory</strong>,对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noopener noreferrer">createMemoryHistory<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li></ul><p>默认是<code>hash</code>模式。</p><h2 id="约定式路由" tabindex="-1"><a class="header-anchor" href="#约定式路由" aria-hidden="true">#</a> 约定式路由</h2><p>约定式路由也叫文件路由,就是不需要手写配置,文件系统即路由,通过目录和文件及其命名分析出路由配置。</p><h3 id="约定规范" tabindex="-1"><a class="header-anchor" href="#约定规范" aria-hidden="true">#</a> 约定规范</h3><p>比如以下文件结构:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>pages +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="routes" tabindex="-1"><a class="header-anchor" href="#routes" aria-hidden="true">#</a> routes</h3><p><code>routes</code> 是配置添加到路由的初始路由列表,格式为路由信息的数组。具体使用参考 <a href="https://next.router.vuejs.org/zh/guide/" target="_blank" rel="noopener noreferrer">Vue Router 文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 中关于路由配置、路由匹配相关内容。</p><h3 id="mode" tabindex="-1"><a class="header-anchor" href="#mode" aria-hidden="true">#</a> mode</h3><p>创建历史记录的类型:</p><ul><li><strong>history</strong>,对应 <a href="https://next.router.vuejs.org/zh/api/#createwebhistory" target="_blank" rel="noopener noreferrer">createWebHistory<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></li><li><strong>hash</strong>,对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noopener noreferrer">createWebHashHistory<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></li><li><strong>memory</strong>,对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noopener noreferrer">createMemoryHistory<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></li></ul><p>默认是<code>hash</code>模式。</p><h2 id="约定式路由" tabindex="-1"><a class="header-anchor" href="#约定式路由" aria-hidden="true">#</a> 约定式路由</h2><p>约定式路由也叫文件路由,就是不需要手写配置,文件系统即路由,通过目录和文件及其命名分析出路由配置。</p><h3 id="约定规范" tabindex="-1"><a class="header-anchor" href="#约定规范" aria-hidden="true">#</a> 约定规范</h3><p>比如以下文件结构:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>pages ├── index.vue # 根路由页面 路径为 / ├── *.vue # 模糊匹配 路径为 * ├── a.vue # 路径 /a @@ -25,7 +43,7 @@ │ ├── c.vue # 路径 /b/c │ └── layout.vue # /b 路径下所有页面公共的布局组件 └── layout.vue # 根路由下所有页面共用的布局组件 -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>编译后会得到以下路由配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>编译后会得到以下路由配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span> <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/layout'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> @@ -83,12 +101,12 @@ <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br></div></div><p><strong>需要注意的是,满足以下任意规则的文件不会被注册为路由</strong>:</p><ul><li>不是 <code>.vue .jsx</code> 文件</li><li><code>components</code> 目录中的文件</li></ul><h3 id="动态路由" tabindex="-1"><a class="header-anchor" href="#动态路由" aria-hidden="true">#</a> 动态路由</h3><p>Fes.js 里约定以 <code>@</code> 开头的文件或文件夹映射为动态路由。 比如:</p><ul><li><code>src/pages/users/@id.vue</code> 会成为 <code>/users/:id</code></li><li><code>src/pages/users/@id/settings.vue</code> 会成为 <code>/users/:id/settings</code></li></ul><h3 id="嵌套路由" tabindex="-1"><a class="header-anchor" href="#嵌套路由" aria-hidden="true">#</a> 嵌套路由</h3><p>Fes.js 里约定目录下有 <code>layout.vue</code> 时会生成嵌套路由,以 <code>layout.vue</code> 为该目录的公共父组件,<code>layout.vue</code> 中必须实现 <code>RouterView</code></p><p>比如以下目录结构:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>pages +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>需要注意的是,满足以下任意规则的文件不会被注册为路由</strong>:</p><ul><li>不是 <code>.vue .jsx</code> 文件</li><li><code>components</code> 目录中的文件</li></ul><h3 id="动态路由" tabindex="-1"><a class="header-anchor" href="#动态路由" aria-hidden="true">#</a> 动态路由</h3><p>Fes.js 里约定以 <code>@</code> 开头的文件或文件夹映射为动态路由。 比如:</p><ul><li><code>src/pages/users/@id.vue</code> 会成为 <code>/users/:id</code></li><li><code>src/pages/users/@id/settings.vue</code> 会成为 <code>/users/:id/settings</code></li></ul><h3 id="嵌套路由" tabindex="-1"><a class="header-anchor" href="#嵌套路由" aria-hidden="true">#</a> 嵌套路由</h3><p>Fes.js 里约定目录下有 <code>layout.vue</code> 时会生成嵌套路由,以 <code>layout.vue</code> 为该目录的公共父组件,<code>layout.vue</code> 中必须实现 <code>RouterView</code></p><p>比如以下目录结构:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>pages └── users ├── layout.vue ├── index.vue └── list.vue -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>会生成路由:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>会生成路由:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/users/layout'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span> @@ -97,10 +115,10 @@ <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="模糊匹配" tabindex="-1"><a class="header-anchor" href="#模糊匹配" aria-hidden="true">#</a> 模糊匹配</h3><p>Fes.js 下约定文件名为 <code>*</code> 的路由是模糊匹配路由,可以用此特性实现 <a 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">404 路由<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p><p>比如以下目录结构:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>pages +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="模糊匹配" tabindex="-1"><a class="header-anchor" href="#模糊匹配" aria-hidden="true">#</a> 模糊匹配</h3><p>Fes.js 下约定文件名为 <code>*</code> 的路由是模糊匹配路由,可以用此特性实现 <a 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">404 路由<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</p><p>比如以下目录结构:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>pages ├── index.vue # 根路由页面 路径为 / └── *.vue # 模糊匹配 路径为 * -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>会生成路由:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>会生成路由:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/index'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> @@ -108,7 +126,7 @@ <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/:pathMatch(.*)'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/**'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>这样,如果访问 <code>/foo</code>,<code>/</code> 不能匹配,会 fallback 到 <code>*</code> 路由,通过 <code>src/pages/*.vue</code> 进行渲染。</p><h3 id="扩展路由元信息" tabindex="-1"><a class="header-anchor" href="#扩展路由元信息" aria-hidden="true">#</a> 扩展路由元信息</h3><p>我们在定义路由时可以配置<code>meta</code>字段,用来记录一些跟路由相关的信息:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这样,如果访问 <code>/foo</code>,<code>/</code> 不能匹配,会 fallback 到 <code>*</code> 路由,通过 <code>src/pages/*.vue</code> 进行渲染。</p><h3 id="智能路由" tabindex="-1"><a class="header-anchor" href="#智能路由" aria-hidden="true">#</a> 智能路由</h3><p>可以看到,编译后路由都会有 <code>count</code> 属性,这是我们根据精准匹配优先算法原则设计出路由排名算法,对匹配到的路由打分:</p><ul><li>路由的路径每个子项得到4分</li><li>子项为静态细分(<code>/list</code>)再加3分</li><li>子项为动态细分(<code>/:orderId</code>)再加2分</li><li>根段(<code>/</code>)再1分</li><li>通配符(<code>*</code>)匹配到的减去1分</li></ul><p>当我们跳转路由时,如果 URL 匹配到多个路由,则选择分数最高的路由。</p><h2 id="扩展路由元信息" tabindex="-1"><a class="header-anchor" href="#扩展路由元信息" aria-hidden="true">#</a> 扩展路由元信息</h2><p>我们在定义路由时可以配置<code>meta</code>字段,用来记录一些跟路由相关的信息:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/foo'</span><span class="token punctuation">,</span> @@ -124,23 +142,18 @@ <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>接下来我们来配置 <code>meta</code>:</p><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">vue</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">jsx</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">tsx</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>我们使用<code>defineRouteMeta</code> 配置 <code>meta</code>:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMeta <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"store"</span><span class="token punctuation">,</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"vuex测试"</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当然在单文件组件中,还可以通过<code><config></config></code>配置 <code>meta</code>:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span><span class="token punctuation">></span></span> { "name": "store", "title": "vuex测试" } <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>config</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-jsx ext-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMeta<span class="token punctuation">,</span> useRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> -<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"store"</span><span class="token punctuation">,</span> - <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"vuex测试"</span> -<span class="token punctuation">}</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-tsx ext-tsx line-numbers-mode"><pre class="language-tsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMeta<span class="token punctuation">,</span> useRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> -<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - name<span class="token operator">:</span> <span class="token string">"store"</span><span class="token punctuation">,</span> - title<span class="token operator">:</span> <span class="token string">"vuex测试"</span> -<span class="token punctuation">}</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><!--]--></div><!--]--></div><p>则编译后的路由配置为:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">[</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>推荐使用<code>defineRouteMete</code>,有更好的提示。</p></div><p>路由元信息在编译后会附加到路由配置中:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/a'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/pages/a'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> @@ -150,10 +163,10 @@ <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span> -</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="智能路由" tabindex="-1"><a class="header-anchor" href="#智能路由" aria-hidden="true">#</a> 智能路由</h3><p>可以看到,编译后路由都会有 <code>count</code> 属性,这是我们根据精准匹配优先算法原则设计出路由排名算法,对匹配到的路由打分:</p><ul><li>路由的路径每个子项得到4分</li><li>子项为静态细分(<code>/list</code>)再加3分</li><li>子项为动态细分(<code>/:orderId</code>)再加2分</li><li>根段(<code>/</code>)再1分</li><li>通配符(<code>*</code>)匹配到的减去1分</li></ul><p>当我们跳转路由时,如果 URL 匹配到多个路由,则选择分数最高的路由。</p><h2 id="路由跳转" tabindex="-1"><a class="header-anchor" href="#路由跳转" aria-hidden="true">#</a> 路由跳转</h2><p>想学习更多,可以查看 <a 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">Vue Router 官方文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p><h3 id="声明式" tabindex="-1"><a class="header-anchor" href="#声明式" aria-hidden="true">#</a> 声明式</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> +</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="路由跳转" tabindex="-1"><a class="header-anchor" href="#路由跳转" aria-hidden="true">#</a> 路由跳转</h2><p>想学习更多,可以查看 <a 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">Vue Router 官方文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</p><h3 id="声明式" tabindex="-1"><a class="header-anchor" href="#声明式" aria-hidden="true">#</a> 声明式</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/home<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="命令式" tabindex="-1"><a class="header-anchor" href="#命令式" aria-hidden="true">#</a> 命令式</h3><p>页面跳转 API 由 <code>router</code> 实例提供,查看 <a href="https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95" target="_blank" rel="noopener noreferrer">Vue Rouer 文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>了解更多。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="命令式" tabindex="-1"><a class="header-anchor" href="#命令式" aria-hidden="true">#</a> 命令式</h3><p>页面跳转 API 由 <code>router</code> 实例提供,查看 <a href="https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95" target="_blank" rel="noopener noreferrer">Vue Rouer 文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>了解更多。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> @@ -180,7 +193,7 @@ <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/route.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/env.html" class="nav-link" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/guide/plugin.html" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/route.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/env.html" class="" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a></span><span class="next"><a href="/guide/plugin.html" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/runtime-config.html b/guide/runtime-config.html index 87caef36..cfd954d1 100644 --- a/guide/runtime-config.html +++ b/guide/runtime-config.html @@ -3,19 +3,74 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>运行时配置 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/runtime-config.html.90acb818.js"><link rel="modulepreload" href="/assets/runtime-config.html.b70d36d5.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html#运行时为啥需要配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="运行时为啥需要配置?"><!--[--><!--]--> 运行时为啥需要配置? <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html#配置项" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置项"><!--[--><!--]--> 配置项 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html#beforerender" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="beforeRender"><!--[--><!--]--> beforeRender <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html#patchroutes" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="patchRoutes"><!--[--><!--]--> patchRoutes <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html#modifyclientrenderopts" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="modifyClientRenderOpts"><!--[--><!--]--> modifyClientRenderOpts <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html#rootcontainer" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="rootContainer"><!--[--><!--]--> rootContainer <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html#onappcreated" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="onAppCreated"><!--[--><!--]--> onAppCreated <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html#render" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="render"><!--[--><!--]--> render <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html#onroutercreated" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="onRouterCreated"><!--[--><!--]--> onRouterCreated <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/runtime-config.html#更多配置项" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="更多配置项"><!--[--><!--]--> 更多配置项 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/template.html" class="nav-link sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h1><p>Fes.js 约定 <code>src/app.js</code> 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端,因此我们可以在这里写函数、引入浏览器端依赖项等等,注意不要引入 node 端依赖项。</p><h2 id="运行时为啥需要配置" tabindex="-1"><a class="header-anchor" href="#运行时为啥需要配置" aria-hidden="true">#</a> 运行时为啥需要配置?</h2><p>Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件,而 Fes.js 中 entry 文件由框架生成,用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。</p><p>例如:</p><p>plugin-acess插件定义运行时配置项:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePluginKey</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'access'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>plugin-acess插件读取配置项:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> runtimeConfig <span class="token operator">=</span> plugin<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/runtime-config.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/runtime-config.html#运行时为啥需要配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="运行时为啥需要配置?"><!--[--><!--]--> 运行时为啥需要配置? <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/runtime-config.html#配置智能提示" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置智能提示"><!--[--><!--]--> 配置智能提示 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/runtime-config.html#配置项" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置项"><!--[--><!--]--> 配置项 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/runtime-config.html#beforerender" class="router-link-active router-link-exact-active sidebar-item" aria-label="beforeRender"><!--[--><!--]--> beforeRender <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/runtime-config.html#patchroutes" class="router-link-active router-link-exact-active sidebar-item" aria-label="patchRoutes"><!--[--><!--]--> patchRoutes <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/runtime-config.html#modifyroute" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyRoute"><!--[--><!--]--> modifyRoute <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/runtime-config.html#modifyclientrenderopts" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyClientRenderOpts"><!--[--><!--]--> modifyClientRenderOpts <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/runtime-config.html#rootcontainer" class="router-link-active router-link-exact-active sidebar-item" aria-label="rootContainer"><!--[--><!--]--> rootContainer <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/runtime-config.html#onappcreated" class="router-link-active router-link-exact-active sidebar-item" aria-label="onAppCreated"><!--[--><!--]--> onAppCreated <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/runtime-config.html#render" class="router-link-active router-link-exact-active sidebar-item" aria-label="render"><!--[--><!--]--> render <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/runtime-config.html#onroutercreated" class="router-link-active router-link-exact-active sidebar-item" aria-label="onRouterCreated"><!--[--><!--]--> onRouterCreated <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/guide/runtime-config.html#更多配置项" class="router-link-active router-link-exact-active sidebar-item" aria-label="更多配置项"><!--[--><!--]--> 更多配置项 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h1><p>Fes.js 约定 <code>src/app.js</code> 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端,因此我们可以在这里写函数、引入浏览器端依赖项等等,注意不要引入 node 端依赖项。</p><h2 id="运行时为啥需要配置" tabindex="-1"><a class="header-anchor" href="#运行时为啥需要配置" aria-hidden="true">#</a> 运行时为啥需要配置?</h2><p>Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件,而 Fes.js 中 entry 文件由框架生成,用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。</p><p>例如:</p><p>plugin-access 插件定义运行时配置项:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePluginKey</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'access'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>plugin-access 插件读取配置项:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> runtimeConfig <span class="token operator">=</span> plugin<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'access'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> ApplyPluginsType<span class="token punctuation">.</span>modify<span class="token punctuation">,</span> - <span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> + <span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>而用户则只需要配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// app.js</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>而用户则只需要配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> defineRuntimeConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineRuntimeConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token function-variable function">access</span><span class="token operator">:</span> <span class="token parameter">memo</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token operator">...</span>memo + <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> + router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next + <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理逻辑</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> + router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next + <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理逻辑</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置智能提示" tabindex="-1"><a class="header-anchor" href="#配置智能提示" aria-hidden="true">#</a> 配置智能提示</h2><p>配置可以单独导出,也可以通过 <code>defineRuntimeConfig</code> 工具函数获取类型提示。</p><p>方式一(推荐,有类型提示):</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span> +<span class="token keyword">import</span> <span class="token punctuation">{</span> defineRuntimeConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineRuntimeConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token function-variable function">access</span><span class="token operator">:</span> <span class="token parameter">memo</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token operator">...</span>memo + <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> + router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next + <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理逻辑</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> + router<span class="token punctuation">,</span> to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next + <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理逻辑</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token comment">// ...其他配置项</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>方式二:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">access</span> <span class="token operator">=</span> <span class="token parameter">memo</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>memo <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> @@ -29,8 +84,7 @@ <span class="token comment">// 处理逻辑</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="配置项" tabindex="-1"><a class="header-anchor" href="#配置项" aria-hidden="true">#</a> 配置项</h2><h3 id="beforerender" tabindex="-1"><a class="header-anchor" href="#beforerender" aria-hidden="true">#</a> beforeRender</h3><p>beforeRender(lastOpts)</p><p>在渲染之前执行,执行<code>action</code>过程中显示 <code>loading</code> 配置的组件,执行结果作为参数 <code>initialState</code> 传给 <code>modifyClientRenderOpts</code>。</p><p>示例:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// app.js</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置项" tabindex="-1"><a class="header-anchor" href="#配置项" aria-hidden="true">#</a> 配置项</h2><h3 id="beforerender" tabindex="-1"><a class="header-anchor" href="#beforerender" aria-hidden="true">#</a> beforeRender</h3><p>beforeRender(lastOpts)</p><p>在渲染之前执行,执行<code>action</code>过程中显示 <code>loading</code> 配置的组件,执行结果作为参数 <code>initialState</code> 传给 <code>modifyClientRenderOpts</code>。</p><p>示例:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> PageLoading <span class="token keyword">from</span> <span class="token string">'@/components/PageLoading'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> UserCenter <span class="token keyword">from</span> <span class="token string">'@/components/UserCenter'</span><span class="token punctuation">;</span> @@ -45,48 +99,71 @@ <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'harrywan'</span> + <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'harrywan'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="patchroutes" tabindex="-1"><a class="header-anchor" href="#patchroutes" aria-hidden="true">#</a> patchRoutes</h3><p>patchRoutes({routes })</p><p>修改路由。</p><p>比如在最前面添加一个 /foo 路由:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>export function patchRoutes({ routes }) { - routes.unshift({ - path: '/foo', - component: require('@/extraRoutes/foo').default, - }); -} -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>直接修改 <code>routes</code>, 不需要返回</p></div><h3 id="modifyclientrenderopts" tabindex="-1"><a class="header-anchor" href="#modifyclientrenderopts" aria-hidden="true">#</a> modifyClientRenderOpts</h3><p>modifyClientRenderOpts(lastOpts)</p><p>修改 <code>clientRender</code> 参数。参数是一个对象:</p><ul><li>routes,路由配置信息</li><li>rootElement, 渲染的根节点,默认是 <code>#app</code>,可通过配置 <code>mountElementId</code> 修改。</li><li>initialState, 初始化数据,<code>beforeRender</code> 运行得到的数据。</li></ul><p>比如在微前端里动态修改渲染根节点:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">let</span> isSubApp <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> -<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">modifyClientRenderOpts</span><span class="token punctuation">(</span><span class="token parameter">lastOpts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token punctuation">{</span> - <span class="token operator">...</span>lastOpts<span class="token punctuation">,</span> - <span class="token literal-property property">rootElement</span><span class="token operator">:</span> isSubApp <span class="token operator">?</span> <span class="token string">'sub-root'</span> <span class="token operator">:</span> lastOpts<span class="token punctuation">.</span>rootElement<span class="token punctuation">,</span> - <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="rootcontainer" tabindex="-1"><a class="header-anchor" href="#rootcontainer" aria-hidden="true">#</a> rootContainer</h3><p>rootContainer(LastRootContainer, args)</p><p>修改交给 Vue 渲染时的根组件,默认是 <code><RouterView></RouterView></code>。</p><ul><li>LastRootContainer,上一个插件修改后的结果。</li><li>args,包含: <ul><li>routes,全量路由配置</li><li>plugin,运行时插件机制</li></ul></li></ul><p>比如在可以包一层DIV:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">rootContainer</span><span class="token punctuation">(</span><span class="token parameter">container</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="patchroutes" tabindex="-1"><a class="header-anchor" href="#patchroutes" aria-hidden="true">#</a> patchRoutes</h3><p>patchRoutes({routes })</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>准备删除此API,推荐使用<code>modifyRoute</code></p></div><p>修改路由。</p><p>比如在最前面添加一个 /foo 路由:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">patchRoutes</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> routes <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + routes<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/foo'</span><span class="token punctuation">,</span> + <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/extraRoutes/foo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>直接修改 <code>routes</code>, 不需要返回</p></div><h3 id="modifyroute" tabindex="-1"><a class="header-anchor" href="#modifyroute" aria-hidden="true">#</a> modifyRoute</h3><p>modifyRoute({base, createHistory, routes})</p><p>修改路由配置信息。</p><p>比如在最前面添加一个 /foo 路由:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">modifyRoute</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>memo<span class="token punctuation">,</span> + <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/foo'</span><span class="token punctuation">,</span> + <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@/extraRoutes/foo'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token operator">...</span>memo<span class="token punctuation">.</span>routes + <span class="token punctuation">]</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如修改 base:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">modifyRoute</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>memo<span class="token punctuation">,</span> + <span class="token literal-property property">base</span><span class="token operator">:</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如改为使用createMemoryHistory:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">modifyRoute</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>memo<span class="token punctuation">,</span> + <span class="token literal-property property">createHistory</span><span class="token operator">:</span> createMemoryHistory + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifyclientrenderopts" tabindex="-1"><a class="header-anchor" href="#modifyclientrenderopts" aria-hidden="true">#</a> modifyClientRenderOpts</h3><p>modifyClientRenderOpts(lastOpts)</p><p>修改 <code>clientRender</code> 参数。参数是一个对象:</p><ul><li>routes,路由配置信息</li><li>rootElement, 渲染的根节点,默认是 <code>#app</code>,可通过配置 <code>mountElementId</code> 修改。</li><li>initialState, 初始化数据,<code>beforeRender</code> 运行得到的数据。</li></ul><p>比如在微前端里动态修改渲染根节点:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> isSubApp <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">modifyClientRenderOpts</span><span class="token punctuation">(</span><span class="token parameter">lastOpts</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>lastOpts<span class="token punctuation">,</span> + <span class="token literal-property property">rootElement</span><span class="token operator">:</span> isSubApp <span class="token operator">?</span> <span class="token string">'sub-root'</span> <span class="token operator">:</span> lastOpts<span class="token punctuation">.</span>rootElement<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="rootcontainer" tabindex="-1"><a class="header-anchor" href="#rootcontainer" aria-hidden="true">#</a> rootContainer</h3><p>rootContainer(LastRootContainer, args)</p><p>修改交给 Vue 渲染时的根组件,默认是 <code><RouterView></RouterView></code>。</p><ul><li>LastRootContainer,上一个插件修改后的结果。</li><li>args,包含: <ul><li>routes,全量路由配置</li><li>plugin,运行时插件机制</li></ul></li></ul><p>比如在可以包一层 DIV:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">rootContainer</span><span class="token punctuation">(</span><span class="token parameter">container</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>RouterView<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>RouterView<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> - <span class="token punctuation">)</span> - <span class="token punctuation">}</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="onappcreated" tabindex="-1"><a class="header-anchor" href="#onappcreated" aria-hidden="true">#</a> onAppCreated</h3><p>onAppCreated({app})</p><p>创建 app 实例后触发。</p><p>比如用于安装 Vue 插件:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue-router"</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onappcreated" tabindex="-1"><a class="header-anchor" href="#onappcreated" aria-hidden="true">#</a> onAppCreated</h3><p>onAppCreated({app})</p><p>创建 app 实例后触发。</p><p>比如用于安装 Vue 插件:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-router'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">onAppCreated</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> app <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="render" tabindex="-1"><a class="header-anchor" href="#render" aria-hidden="true">#</a> render</h3><p>render(oldRender: Function)</p><p>覆写 render。</p><p>比如用于渲染之前做权限校验。</p><h3 id="onroutercreated" tabindex="-1"><a class="header-anchor" href="#onroutercreated" aria-hidden="true">#</a> onRouterCreated</h3><p>onRouterCreated({router})</p><p>生成router时触发。</p><p>比如用于收集切换路由的记录:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">onRouterCreated</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> router <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="render" tabindex="-1"><a class="header-anchor" href="#render" aria-hidden="true">#</a> render</h3><p>render(oldRender: Function)</p><p>覆写 render。</p><p>比如用于渲染之前做权限校验。</p><h3 id="onroutercreated" tabindex="-1"><a class="header-anchor" href="#onroutercreated" aria-hidden="true">#</a> onRouterCreated</h3><p>onRouterCreated({router})</p><p>生成 router 时触发。</p><p>比如用于收集切换路由的记录:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">onRouterCreated</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> router <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="更多配置项" tabindex="-1"><a class="header-anchor" href="#更多配置项" aria-hidden="true">#</a> 更多配置项</h2><p>Fes.js 允许插件注册运行时配置,如果你使用插件,肯定会在插件里找到更多运行时的配置项。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/runtime-config.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/config.html" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/guide/env.html" class="nav-link" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="更多配置项" tabindex="-1"><a class="header-anchor" href="#更多配置项" aria-hidden="true">#</a> 更多配置项</h2><p>Fes.js 允许插件注册运行时配置,如果你使用插件,肯定会在插件里找到更多运行时的配置项。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/runtime-config.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/config.html" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></span><span class="next"><a href="/guide/env.html" class="" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/template.html b/guide/template.html index 253ecc63..e984bb68 100644 --- a/guide/template.html +++ b/guide/template.html @@ -3,32 +3,53 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>HTML 模板 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/template.html.8e33412a.js"><link rel="modulepreload" href="/assets/template.html.900fbffc.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">介绍</p><ul class=""><li><!--[--><a href="/fes.js/guide/" class="nav-link router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">基础</p><ul class=""><li><!--[--><a href="/fes.js/guide/directory-structure.html" class="nav-link sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/config.html" class="nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/runtime-config.html" class="nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/env.html" class="nav-link sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/route.html" class="nav-link sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/plugin.html" class="nav-link sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/template.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/guide/template.html#自定义模板" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="自定义模板"><!--[--><!--]--> 自定义模板 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/template.html#模板配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="模板配置"><!--[--><!--]--> 模板配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/guide/template.html#模板变量" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="模板变量"><!--[--><!--]--> 模板变量 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/guide/mock.html" class="nav-link sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">样式和资源文件</p><ul class=""><li><!--[--><a href="/fes.js/guide/image.html" class="nav-link sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/css.html" class="nav-link sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/guide/public.html" class="nav-link sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/fes.js/guide/contributing.html" class="nav-link sidebar-heading sidebar-item" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/fes.js/guide/faq.html" class="nav-link sidebar-heading sidebar-item" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="html-模板" tabindex="-1"><a class="header-anchor" href="#html-模板" aria-hidden="true">#</a> HTML 模板</h1><p>Fes.js 基于 <a href="https://github.com/jantimon/html-webpack-plugin" target="_blank" rel="noopener noreferrer">html-webpack-plugin<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 实现的模板功能,默认模板内容是:</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/template.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/template.html#修改页面标题" class="router-link-active router-link-exact-active sidebar-item" aria-label="修改页面标题"><!--[--><!--]--> 修改页面标题 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/template.html#模板变量" class="router-link-active router-link-exact-active sidebar-item" aria-label="模板变量"><!--[--><!--]--> 模板变量 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a href="/guide/upgrade3.html" class="sidebar-item" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="html-模板" tabindex="-1"><a class="header-anchor" href="#html-模板" aria-hidden="true">#</a> HTML 模板</h1><p>Fes.js 默认模板内容是:</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>fes3.0+ html 模版文件从 <code>public/index.html</code> 挪到项目根目录。</p></div><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width,initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><%= htmlWebpackPlugin.options.title %><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width,initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><%= title %><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= mountElementId %><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="自定义模板" tabindex="-1"><a class="header-anchor" href="#自定义模板" aria-hidden="true">#</a> 自定义模板</h2><p>在 <code>src/public</code> 文件夹中创建<code>index.html</code>,Fes.js 约定如果这个文件存在,则会替换默认模板。</p><h2 id="模板配置" tabindex="-1"><a class="header-anchor" href="#模板配置" aria-hidden="true">#</a> 模板配置</h2><p>在配置文件(<code>.fes.js</code>)中配置 <code>html</code>,把<a href="https://github.com/jantimon/html-webpack-plugin#options" target="_blank" rel="noopener noreferrer">配置<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>的对象作为参数传入 <code>html-webpack-plugin</code> 实例。</p><p>举个 🌰 :</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">html</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'海贼王'</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>页面的标题会设置成'海贼王'。</p><h2 id="模板变量" tabindex="-1"><a class="header-anchor" href="#模板变量" aria-hidden="true">#</a> 模板变量</h2><p>当然我们也可以手动编写模板,在模板中添加<code>link</code>、<code>link</code>、<code>meta</code>等标签。在我们手动配置模板时,有时候需要用到一些环境变量,模板里可以获取到的变量如下:</p><ul><li><strong>htmlWebpackPlugin</strong>,特定于此插件的数据</li><li><strong>webpackConfig</strong>,用于此编译的webpack配置。例如,它可用于获取publicPath(webpackConfig.output.publicPath)。</li><li><strong>compilation</strong>,webpack编译对象。例如,可以使用它来获取已处理资产的内容,并将其直接内联到页面中compilation.assets[...].source()</li></ul><p>举个 🌰 :</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/x-icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= webpackConfig.output.publicPath %>favicon.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>除上述 <code>html-webpack-plugin</code> 插件提供的变量外,Fes.js 还把 <code>process.env</code> 中的环境变量添加到模板作用域内:</p><ul><li><code>NODE_ENV</code></li><li><code>FES_ENV</code></li><li><code>.env</code> 文件中以 <code>FES_APP_</code> 开头的变量</li></ul><p>举个 🌰 :</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/guide/template.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/guide/plugin.html" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/guide/mock.html" class="nav-link" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="修改页面标题" tabindex="-1"><a class="header-anchor" href="#修改页面标题" aria-hidden="true">#</a> 修改页面标题</h2><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'这是页面标题'</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>页面的标题会设置成 <code>这是页面标题</code>。</p><h2 id="模板变量" tabindex="-1"><a class="header-anchor" href="#模板变量" aria-hidden="true">#</a> 模板变量</h2><p>模版中可以使用的变量:</p><ul><li><code>NODE_ENV</code>: Node.js 环境变量</li><li><code>FES_ENV</code>: Fes.js 环境变量</li><li><code>BASE_URL</code>: publicPath</li><li><code>.env.**</code>: 文件中以 <code>FES_APP_</code> 开头的变量</li></ul><p>举个 🌰 :</p><div class="language-env line-numbers-mode" data-ext="env"><pre class="language-env"><code># .env +FES_APP_HELLO_WORLD=hello world +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><%= FES_APP_HELLO_WORLD %><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/template.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/plugin.html" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></span><span class="next"><a href="/guide/mock.html" class="" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/guide/upgrade3.html b/guide/upgrade3.html new file mode 100644 index 00000000..e19473b0 --- /dev/null +++ b/guide/upgrade3.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="zh-CN"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> + <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>从 2.0.x 迁移到 3.0.x | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/upgrade3.html.c353af42.js"><link rel="modulepreload" href="/assets/upgrade3.html.9bc44b95.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> + </head> + <body> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="router-link-active" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">介绍 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/" class="router-link-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a href="/guide/getting-started.html" class="sidebar-item" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">基础 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/directory-structure.html" class="sidebar-item" aria-label="目录结构"><!--[--><!--]--> 目录结构 <!--[--><!--]--></a><!----></li><li><a href="/guide/builder.html" class="sidebar-item" aria-label="支持 Vite 和 Webpack 双构建"><!--[--><!--]--> 支持 Vite 和 Webpack 双构建 <!--[--><!--]--></a><!----></li><li><a href="/guide/config.html" class="sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/runtime-config.html" class="sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a href="/guide/env.html" class="sidebar-item" aria-label="环境变量"><!--[--><!--]--> 环境变量 <!--[--><!--]--></a><!----></li><li><a href="/guide/route.html" class="sidebar-item" aria-label="路由"><!--[--><!--]--> 路由 <!--[--><!--]--></a><!----></li><li><a href="/guide/plugin.html" class="sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><li><a href="/guide/template.html" class="sidebar-item" aria-label="HTML 模板"><!--[--><!--]--> HTML 模板 <!--[--><!--]--></a><!----></li><li><a href="/guide/mock.html" class="sidebar-item" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/upgrade3.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="从 2.0.x 迁移到 3.0.x"><!--[--><!--]--> 从 2.0.x 迁移到 3.0.x <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/guide/upgrade3.html#版本-3-0-x-的-break" class="router-link-active router-link-exact-active sidebar-item" aria-label="版本 3.0.x 的 break"><!--[--><!--]--> 版本 3.0.x 的 break <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/upgrade3.html#继续使用-webpack" class="router-link-active router-link-exact-active sidebar-item" aria-label="继续使用 Webpack"><!--[--><!--]--> 继续使用 Webpack <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/upgrade3.html#换成-vite" class="router-link-active router-link-exact-active sidebar-item" aria-label="换成 Vite"><!--[--><!--]--> 换成 Vite <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/guide/upgrade3.html#插件" class="router-link-active router-link-exact-active sidebar-item" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">样式和资源文件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/guide/image.html" class="sidebar-item" aria-label="使用图片"><!--[--><!--]--> 使用图片 <!--[--><!--]--></a><!----></li><li><a href="/guide/css.html" class="sidebar-item" aria-label="使用 css"><!--[--><!--]--> 使用 css <!--[--><!--]--></a><!----></li><li><a href="/guide/public.html" class="sidebar-item" aria-label="静态资源"><!--[--><!--]--> 静态资源 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/guide/contributing.html" class="sidebar-item sidebar-heading" aria-label="贡献指南"><!--[--><!--]--> 贡献指南 <!--[--><!--]--></a><!----></li><li><a href="/guide/faq.html" class="sidebar-item sidebar-heading" aria-label="常见问题"><!--[--><!--]--> 常见问题 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="从-2-0-x-迁移到-3-0-x" tabindex="-1"><a class="header-anchor" href="#从-2-0-x-迁移到-3-0-x" aria-hidden="true">#</a> 从 2.0.x 迁移到 3.0.x</h1><h2 id="版本-3-0-x-的-break" tabindex="-1"><a class="header-anchor" href="#版本-3-0-x-的-break" aria-hidden="true">#</a> 版本 3.0.x 的 break</h2><ol><li>编译时的 <a href="/reference/config/#base" class="">base</a> 配置,移到了 <a href="/reference/config/#router" class="">router.base</a> 下。</li><li><a href="https://github.com/webpack/webpack-dev-server" target="_blank" rel="noopener noreferrer">webpack-dev-server<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 从 <code>v3.x</code> 升级到了 <code>v4.x</code>,如果遇到配置不兼容,可以查看<a href="https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md" target="_blank" rel="noopener noreferrer">webpack-dev-server 3.x 升级 4.x<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</li></ol><h2 id="继续使用-webpack" tabindex="-1"><a class="header-anchor" href="#继续使用-webpack" aria-hidden="true">#</a> 继续使用 Webpack</h2><ol><li>添加 Webpack 构建依赖包: <code>npm i @fesjs/builder-webpack -D</code>。</li><li>如果有,将 <code>public/index.html</code> 文件挪到项目根目录,移除 <a href="https://github.com/jantimon/html-webpack-plugin" target="_blank" rel="noopener noreferrer">html-webpack-plugin<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 相关配置,具体模版变量使用请查看<a href="/guide/template.html" class="">HTML 模版</a>。</li></ol><h2 id="换成-vite" tabindex="-1"><a class="header-anchor" href="#换成-vite" aria-hidden="true">#</a> 换成 Vite</h2><ol><li>安装依赖包 <code>npm i @fesjs/builder-vite</code>。</li><li>将 Webpack 相关的配置换成 Vite,具体可查看<a href="../reference/config">配置</a>。</li><li>将 html 模版文件从 <code>public/index.html</code> 挪到项目根目录,如果有相应的 <a href="https://github.com/jantimon/html-webpack-plugin" target="_blank" rel="noopener noreferrer">html-webpack-plugin<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 配置,需要改成 <a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noopener noreferrer">vite-plugin-html<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 的写法。</li><li>将 <code>require</code> 等 Vite 不支持的代码,改写成 Vite 支持的方式。</li></ol><h2 id="插件" tabindex="-1"><a class="header-anchor" href="#插件" aria-hidden="true">#</a> 插件</h2><p>插件都需要升级到 <code>3.0.x</code> 版本,新版添加了兼容<code>builder</code>的逻辑,但是提供的接口和配置没有变化,只需要升级版本即可使用。</p><ul><li><a href="../reference/plugins/layout">@fesjs/plugin-layout</a> 需要升级到<code>5.0.x</code>版本。</li><li><a href="../reference/plugins/locale">@fesjs/plugin-locale</a> 需要升级到<code>4.0.x</code>版本。</li><li><a href="../reference/plugins/qiankun">@fesjs/plugin-qiankun</a> 由于<code>qiankun</code>技术限制,子应用目前还只能使用 Webpack 构建。</li></ul></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/guide/upgrade3.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/guide/mock.html" class="" aria-label="Mock 数据"><!--[--><!--]--> Mock 数据 <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> + </body> +</html> diff --git a/index.html b/index.html index 5f36b9e3..b8afc7e4 100644 --- a/index.html +++ b/index.html @@ -3,29 +3,47 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>首页 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/index.html.de0d80a1.js"><link rel="modulepreload" href="/assets/index.html.c52ea2ee.js"><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container no-sidebar"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a aria-current="page" href="/fes.js/" class="router-link-active router-link-exact-active"><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="home" aria-labelledby="main-title"><header class="hero"><!----><h1 id="main-title">Fes.js</h1><p class="description">一个好用的前端应用解决方案</p><p class="actions"><!--[--><a href="/fes.js/guide/getting-started.html" class="nav-link action-button primary" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><a href="/fes.js/guide/" class="nav-link action-button secondary" aria-label="项目简介"><!--[--><!--]--> 项目简介 <!--[--><!--]--></a><!--]--></p></header><div class="features"><!--[--><div class="feature"><h2>Fast</h2><p>Fes.js 内置路由、构建、插件管理,提供测试、布局、权限、国际化、状态管理、请求、数据字典、Svg等插件,可以满足大部分日常开发需求。</p></div><div class="feature"><h2>Easy</h2><p>基于Vue.js 3.0,上手非常简单。贯彻 “约定优于配置” 思想,在设计插件上尽可能用约定替代配置,依然提供统一的插件配置入口,简单简洁又不失灵活。提供一致性的API入口,一致化的体验,学习起来更轻松。</p></div><div class="feature"><h2>Strong</h2><p>仅仅需要关心页面内容,减少犯错的机会!提供单元测试、覆盖测试的能力保障项目质量。</p></div><div class="feature"><h2>可扩展</h2><p>借鉴 UMI 实现完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序的运行。</p></div><div class="feature"><h2>面向未来</h2><p>在满足需求的同时,我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能,已使用webpack5提升构建性能和实现微服务,未来会探索vite等新技术。</p></div><div class="feature"><h2>令人愉悦</h2><p>我们的主要重点是开发人员体验。我们喜欢 Fes.js,并且会不断改进框架,所以您也喜欢它!期待有吸引力的解决方案,描述性的错误消息,强大的默认值和详细的文档。如果有问题或疑问,我们有用的社区将为您提供帮助。</p></div><!--]--></div><div class="theme-default-content custom"><!--[--><h2 id="像数-1-2-3-一样容易" tabindex="-1"><a class="header-anchor" href="#像数-1-2-3-一样容易" aria-hidden="true">#</a> 像数 1, 2, 3 一样容易</h2><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">YARN</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> -<span class="token function">yarn</span> create @fesjs/fes-app myapp + <div id="app"><!--[--><div class="theme-container no-sidebar"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a aria-current="page" href="/" class="router-link-active router-link-exact-active"><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><!----><!--[--><!--]--></aside><!--]--><!--[--><main class="home"><header class="hero"><img src="/logo.png" alt="Fes.js" height="280"><h1 id="main-title">Fes.js</h1><p class="description">一个好用的前端应用解决方案</p><p class="actions"><!--[--><a href="/guide/getting-started.html" class="action-button primary" aria-label="快速上手"><!--[--><!--]--> 快速上手 <!--[--><!--]--></a><a href="/guide/" class="action-button secondary" aria-label="项目简介"><!--[--><!--]--> 项目简介 <!--[--><!--]--></a><!--]--></p></header><div class="features"><!--[--><div class="feature"><h2>Fast</h2><p>Fes.js 内置路由、构建、插件管理,提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件,可以满足大部分日常开发需求。</p></div><div class="feature"><h2>Easy</h2><p>基于Vue.js 3.0,上手非常简单。贯彻 “约定优于配置” 思想,在设计插件上尽可能用约定替代配置,依然提供统一的插件配置入口,简单简洁又不失灵活。提供一致性的API入口,一致化的体验,学习起来更轻松。</p></div><div class="feature"><h2>Strong</h2><p>仅仅需要关心页面内容,减少犯错的机会!提供单元测试、覆盖测试的能力保障项目质量。</p></div><div class="feature"><h2>可扩展</h2><p>借鉴 UMI 实现完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序的运行。</p></div><div class="feature"><h2>面向未来</h2><p>在满足需求的同时,我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能,已使用 webpack5 和 vite 提升构建性能和实现微服务。</p></div><div class="feature"><h2>令人愉悦</h2><p>我们的主要重点是开发人员体验。我们喜欢 Fes.js,并且会不断改进框架,所以您也喜欢它!期待有吸引力的解决方案,描述性的错误消息,强大的默认值和详细的文档。如果有问题或疑问,我们有用的社区将为您提供帮助。</p></div><!--]--></div><div class="theme-default-content"><div><h2 id="像数-1-2-3-一样容易" tabindex="-1"><a class="header-anchor" href="#像数-1-2-3-一样容易" aria-hidden="true">#</a> 像数 1, 2, 3 一样容易</h2><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> +<span class="token function">pnpm</span> create @fesjs/fes-app myapp <span class="token comment"># 安装依赖</span> -<span class="token function">yarn</span> +<span class="token function">pnpm</span> i <span class="token comment"># 运行</span> -<span class="token function">yarn</span> dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> +<span class="token function">pnpm</span> dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> npx @fesjs/create-fes-app myapp <span class="token comment"># 安装依赖</span> -<span class="token function">npm</span> <span class="token function">install</span> +<span class="token function">npm</span> <span class="token function">install</span> <span class="token comment"># 运行</span> <span class="token function">npm</span> run dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><!--]--></div><!--]--></div><h2 id="反馈" tabindex="-1"><a class="header-anchor" href="#反馈" aria-hidden="true">#</a> 反馈</h2><table><thead><tr><th>Github Issue</th><th>Fes.js开源运营小助手</th></tr></thead><tbody><tr><td><a href="https://github.com/WeBankFinTech/fes.js/issues" target="_blank" rel="noopener noreferrer">@fesjs/fes.js/issues<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></td><td><img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"></td></tr></tbody></table><!--]--></div><!--[--><div class="footer">MIT Licensed | Copyright © 2020-present Webank</div><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h2 id="反馈" tabindex="-1"><a class="header-anchor" href="#反馈" aria-hidden="true">#</a> 反馈</h2><table><thead><tr><th>Github Issue</th><th>Fes.js 开源运营小助手</th></tr></thead><tbody><tr><td><a href="https://github.com/WeBankFinTech/fes.js/issues" target="_blank" rel="noopener noreferrer">@fesjs/fes.js/issues<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></td><td><img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"></td></tr></tbody></table></div></div><!--[--><!-- eslint-disable-next-line vue/no-v-html --><div class="footer">MIT Licensed | Copyright © 2020-present Webank</div><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/left-right.png b/left-right.png new file mode 100644 index 0000000000000000000000000000000000000000..c5c102083cd3fad58d6dd906fa59fdecd9b640c2 GIT binary patch literal 117270 zcmeFZcQ~8x`#(%trBQUyVe8UTqstarZM9TsNrIR~?OihnZPA6k+c#QjRcpkEmDpkw ztre}B5wTZ9tOz3fZvA||<9MF$TYt|V&mYfo{2WKP-S>Un=Y5^$>zvnl<%PjLZ62^7 zn2n8%=g#dL57^i^L)qB&YI5xZ&hUM@M`L4S*L2j<GPt9qC2rv5{>ahAj*acyUp7`& zhi_jv_s!bc%IaIY^m(wC--GARUq7%yHPtqWf2(b%?MVIb-pp+H_`%^lM)hpz_v=cX z54;xND3bklVf+0IYVtEP#c+T7?c4kR_Ng<90hK*?@akRIikSF49ochIz*FzC6~(sd zf;H!kiX%RAO`j7-?t7lZYmH$qd?!A)$LgxYwGPcy0da)5@~Mj)-$FpPl+zL~GEWtz ztv+GXe*Tx|%ltHU_RP1uIuE3EG)ufguG!sx6nN{!lT-4~9tfx{zokFse|_Nf>*L2Y zM|keD*7qq1pJ-G%`0%{Ifdfs~HLqzuGlnVbX%N-lx9^(dv-cbJsqt}_<b{n*-WdPQ z<;OOr7&m&w<`h>VQgzQBO3C)NM&xDr0_RKeo7G#}+cfI-_O^LbZEX;D7DI@we#7i1 z-qax$U@6Sb_|79eJvJ%en2U`)(vfX1aKsLL1c475+n%=(Y@EQ~!@%c8D(FA1a)zev z`H$nhn!q)-Yld2P?f`!cZM^L4+`Jv!A0w(nk-($+9F2@08|&Rwv2k~mwYGJCXeaCM z>ajC~P0e2gICQmpY%T8Z>f+|D;;(-4_Z=$0@y=<vlj6T`dF-ry(pb+xT+7|dPFz7& zURM4j1S~EtuI6R?NaeweTmK#o{HK1>;qhY+6*)OSKR;Q&%d+lX_Hq}Mm6he>FUeiH zBm>+b;~n7k*xFyl&HL299`Ya0xnbvR<K^h_*wNiheCN5=58ZtptDii%L+C$${`H=A z{*M1e$<6!U(*h<aw{u1AqO82!e?A)+s<v}h#lX?u&c)=0qbtB3fCl8EypodI?*ad} zOaDdkzYR71Z$p(Y$^ZAE|LxNMbtu%^&P&VP6(IT;@?Wy~_u&72@!td0<aXx%-+1va zM*ltwa2f(ullxDpLBQ?JA@AAPG}-RlxMt+fK1bpVHG}qVFWNuy>+*f)5=h&BCo7E+ zeZ}$N&4T+E#2<Xg3gwbI`GlYSuaggM{C)EIW;dMUuaoM}uKd(`t0$M}qCngx&|Kzi zeJ`J{{6OmOUr%NvwI!+gxvdX=-#_o3;{C9(I-=(U5BuH+;I_o&w8qUO{|jzDi|-qQ zm5+8MY{XRw=Z&3U-+NG#?H_-I-Q9nV@JS-H_UPW(+1a~ziTjioV^<bUXF=!)qW0lc z5SMr;+duu%Y~tVwy&S@=6s90IEK$&X9yHXqk`VEa_y4}2Da0?%=Jr%E+|Wr2BqSXw zur39<_cDywdB;m?H)6oxU)%@Tmi08Pq(Q$n+&Cgjcbgdd-hq#7>>i1gXFeJv3M^Qs zrU!%)=aju3?oLBl=1oc$oX~ixKqhQ_J;bKa)wP|u`w%W$qfj=b^i5$k1jm&tk8xk? zCMJYjzW=ntxsg<Ivh55gP2}<_|F)MeU*=kpAwA{ZnN9A?g8wKI;KDa4cF=Hch55$| zAiX07YpTwx!a|q)3#eBf{oOeBdSl4A0Eg>|lR+H%cq>Zy8rR_Q=e@hU;~OaG^EDHn zN~M0>S%Y}B8;=pH${J$OEvZdvFNSY~c62`Gy65`0I~G@VgNk?}AnfAxdCz$+7cI>O z2xF$pSqQO++dF<*PVk=)vLo>~?V!E2{Xq;Rzr8q#RAtnO)c~Q}Lgct3-lyGD1P~It z;EN~#K&6rqaarr15&UmHCY;t}8$2zmaO;nE4&-YJfkSOv;V=F-9$Ta-uHij(yttwU zIgsFKd5Kb3Y*JO5`?#j@k%lvA3Stj~6Tce1GU>g~X&O^aDA`Ot)t(8#^0YoOnW>B+ zZUkVMTR|LvitdipgAUE05Bo!HJaa@I7sQJCzB0*u8eRfhccIP0dYu&!B%dq+{R(fU z7SXtEpYW;=#q+Bjj8g8Y7X>l37paIT89k)^o<&E(AXH3EeuW5GM>g-vUeS;hK3uP8 zWxptLZs0+r6@C|x>`3ABP4QD&n!QnKLpm{4qzi-w%c#wd{%cR-{8U<DH1GB%MVx0+ z4Xg8rY^i9Z`2(@7KsGb#h<jdS?bYOcy~fEt%JZ2$j-><_8||tnO{Xw~J1e$&tBIIR zZu<)>q~KD(BOm}XF%b||_Ubn~yDMgVKzTxJ$S?U(%H2J}LDhWgbCEsH+o)Geu|NkC z%F<F>M9RY)KW2}@HBQkj9!dqF9Oi5R&0Xki4uP#9@)i`0_Vk)S&D)lEnaMtbtP5m3 zEfFwGM41AoZYLpm|6HEqCGY4$N-Ao%UJo?Lu5}1V@DB}%s59rdR|%+^L91mWil9p^ z_pWjaJG;Ncf^DwOZD?4_g)Y(iVFEdUi5BLl8R@r_jI1>kWyH!@+-+kh&X-^im<G90 zK|X(hRoIzud^hBCN&T=CDxW?zTTuoTeH=a!rP2{Y42-XC<Q|U7J#1Vah)tqTxDUKv zL=rDHC%MVtH=RZ|bI@oiXYW=YFJxse(KY5NwaVShWqC^OcGWiZRelMLHGGTNR4R-8 z%jRs~A?=ihh8cHDQ^;QNQAE4#g%4t+wdJp?rfZ~AsDiP3Yj^#(ou`6`kObw*I_3v| z&#iTG0Up1WtG>KKqb8D-h@z-XK3}Sj25H`~e5#kPpOz9-QMa1ibG0w@*zQo$JM4fx zeZ_sw5jU#D!<-W+yT6c=9x2`j{|pY3Bw-t0DX%4_loCk(pQsRP$M@HjpcC%KnFp2B z+N9LZS$KYpk-;q=D=o7e(iD%at!50lr{Cf!&B0U*N+}riDNh9xrGjqTVp}m~J)-^# zeycNG`Z!(L@><CIEBzfx%W8<y{0mk1GTUtR6{2>oRx|JFJ0T4As<RIDv!RANVSC~x za|8<?xUVhZ##r03T&Gd2nf6<o@XDoGXIDbCZz;_(_(S^#RdR>gvYE7uxzG^dml%^) zT1u^?CHsE0=IoD!o7q;<aEW@`4v&<Q;w=M6zC%<t1U@8qbVYQ7I_CSUFf*bzQY_$Y z^?DCt^_L+bf;tq!RM*Ac6GBy4r6mQ=hbuf998$2RHOwtZV|*wr1u1-x_lF_d(>AE0 zr@YD?`*=^-OQr<gTD#j9s<E5-2opZ`&3%!=&>=m!FKIlHrcuCK2;#mN-Q>ipmyL;^ zmfD+7D$Avte%yE?pub&h;o7sh-jeORaMN-j=BsO4eok(#8eu5KSa@=aCl(LkEJ#*o zV8Pp3-F1{;^8h86K^PU8?UN%_y7t<hwE(fW!V~7oC5)W=;mh)Y2mBQ{7;)f)t)(h6 zQNd?cTNE5qAi2HvH_5*N>)X-WaR8~j(z%CP&=6A^Z?S<%di)mt5h<kVn@d`6O|17y zLLHN<-bDH`%uD<7E2B#Z!K)<&F?Zf&45UR0JNOOxqy*2F7|vygSqkAaR*z`=9}LW@ z-b{g0$KOTsQ7$cN`#@u%(C)ssUv#Nr+iRtqq<3?0Ka$`*JFS57*uVca_MvCs^__Ke zsbf*Go$;1iB9)T^LV12Pi&YtnsOZIqWnWA)+14+ouwLddSmvJVH*tY<!Ak0?Wj`9~ zJQv1vD_wfYGosXMhJ0%7GjRsz|NQ}z9?Ulo%+PqKxVeD7Ti|hbHzSd%x4*=n%}jpN zqga2?)>G_>GNEDUePn@;HP<7Vvhc}Gy5@yvH6wiFM+3B6CezPt-xuo?#@f<%-vt5t zfLa6v!L(PuJLHWQfSDWGyI0dB3P6^GRHxt+FiK#r`@+=0tquF2DhIOrpblfZMgW#q z`lNgtv$d8elE=zDckbN6a6X!4X0R{cHiqP<C+vgSPj5{S^85Muyfy2uNU@LpsMnG8 zEGFMV=wqFeY(oK?eP5aCfh%0Cr*0kKBY39pA&77oY$F)GY8Bw*|Mkj&zz2q!AHTD$ zeO#8kts+!x6Afv(r#kU$9|gBEI<7D3>=#g=ZabZ7a6XUvAdg9TwOtVNsI35Qxn6nm z5jYBvwo~PLrpDd5Eqg_Cu_xYn=gylvBxr2ILBr2@xpy%uZ(2d<YS+RZ&#A85;WdN| zVNZUL#sh6W57qVJOJsRI_s5Sp%&pCnd;)2*d?-UcR@JhJ<bVZvy@WtPP_DU0Y4ko5 zFB>>Q4(2s><fK-f+>5^|)L;qSibJkd4yEXgxcje8EC?4D?Qt)dX9l^B?Z+P1YVsXS zOMTj&a=Ab5LV|T>QlM8;N4mOjnK)kD^TcA69$xXjiHXL6$Ia0qM`+GzT9Ho-@&xl- zgePxNgf!r=9!@&=nLyC37#j`G*VMx1jDr=6Q>J6|_?nfQ$l34O)ECWSMPlZtsA|?~ z<!ZJ*svpIvg-ZL`b@txJx!yt5Lt9Q5Z80C?zV*{$rm9ZJdwuGrCBdu7R?Cy^x>b+Z zcZ(~&*@fxdfvE^o)t4@RJC!?jNTVR3DmtyU*M5r*n}XI_lnO1kn4zHAg(+jAqTxDL z#rF(D+><iZ=1lU2T>E@C>I)S{E{U!7Ygm4%y)#nim3i<aGH{Nv+UFe=oBxVPq4^Q3 zmf%G62E4n;lsBeKK-8;n0vbDjenD76Bt~H9G6^L93SX*eNh3jn)wXQS+b`qxCPT4_ zrY7qtnwb*vQk^+9)m38edu0DyQR`a4+C1`zYiBCEwMlH<@)V(z<lC=2;8K~w&8<r8 zOw*#Sjl~pFf<uP0WERt+U%jljC3kr#sO^XLT2NzTgpHWr+<gV7ae38c-Kl|Jj$&sz zv>OoGG6Bk_rFm0yA%*u+J?{|w`Oe1E9pUEn2$5jOMAn3(h3BrpYpCYI=T077Ek6QQ ze!w2LBps!7HjY}55^3u$Lrsw{gH_kW0z$@lYlNl3Smn%dvT3FwD*4i;$l`}|m-to< z8Wi6xIu|&BL8G)d7BY0Kpd7tx+akVSrBod-S8;U>L;GU!JoT30we*;dB$a{Gt`H}6 z#+uQ<fh+oRJqZy-Zcz%JqnxV?wB&;AYI;6vm{YN&Ny2;nc<{ywZqF*2P{Uve&53OX z^$!Iy)m3Ri@y3k#M&C7SPKDO775yX^#(EVlMs4GB@D*<yDVXr|g>q;jw&CbT=i4)_ z^~ug?=RCuy4(s*wm`7)#73}9Xzj~DzU<>P&1M{ZFeUA8&&$KO8y7Vu7Jxi-%h8Pd2 zJ073^ns{NCq!5TBuN=JX&Ee7Z(ihVIGP=BHHmGmvV9~}1Kgik50!ljz2f>kNJYwUw zkLm|~n;oj|EgdvcKb|zvsV`=2Bg@Q%A7EzEaiT47XkCtHdb*vuGYvAoe2p`2(P>Bp zIm?52KbX4&ufw>{(ik*>QjmV;Ril+qeGB`-C(*c3Dw&C}o*Ee8#fG1GMSW$d=2ski z!K}og*hdCCI;yJ({R{W&qL(%Pds^_{G;NA#;DRi(hl7ljLrqY^9&WBJuJ)Z`m;jEv z!8v%_5Zgpa-*F4!zum(8Mv8Gc+Ctr|dIQ}`{dy$&4mJ^nV5Gn;u*vEb2)mm*;Vxp8 zNLD`@;XLHi>xpyfPVf-b*ltYnrN<s44hAe!|I!xaqiIVjIsM{dHgB_9EkY)Ii0&!- zM=As{s&k!t^7<N<G0DMUtYIb@>qF`3pMaa$AZgX{JgZ<z_$!@Hq{Y`eY1KcbO>eG? z!v>wFC$pVj@|2dh<e0v?CE}>AUw-uf^W(WP`Y^ne9#bJN;9inzpyd8@48|I07yYIn z9AaW^yxqlz{SlAq0IPX+rE94Xz-o7;pRX6=J9>*b+c``zy(8rz$`;3p$wP%-&*l@m z^htY^>?%U4HWo^IDg?R*?y)K&JyhnKAKW^YlUMR~s>VL&EXyu3;;DtaA6nq3PvMEn zkBA|hqUF$vcls(nWUJSLi2aey9RxzLviD>^ix2XUv9%GlFQsz!r7rbjF`>w!IxvFX z8kbi<bi*Tysc$v@PDybuw!gdL{EB#0^ekkh^VA3xFs>z}rDdU96n+ab=$0HCmygA7 zkC8<mT0HFTPUOQURT0b($(Ox9@tNdXw^GE44lJ+F(r>*!SC*HHUh*jU8R;Z@m-}7F z3+weIfsy29I=4W(!x2fnLKcIRb0TGM<q(gfx>uWMB5dvL<P6EXUevd>U1Lcihcl8f zU&FXox!9~2*%??H%I-TH#w4P)mMs%6Qj-?85bo9XmdZ>-T0LW3W4n%5d5ujMJ73L! z6mZK`w4Bw?PFZFYH1J|MQQn!VD_le|WWA%pA_;z^nMG~Dm+Hz^w!makdWVG*m#=p( zA?JEl(kc_ZFF>B|hJcc1nggKW{PdWDp_GbNX%zSM4%2jr59;pSf2U%Fw5(*{>tg6K zXc?5Tipg7QM+OBfcNQ}4aP}3nYS;i~u~UuDSJi*v=#$~7F!vgKPsJ|@kHIY@kw(RG zCKu9e@K!>rRegNZK`rlDW);3U*!$HL;nrCKL+25OY{E~h_&(`clr_Psn9Yxn?(S?s zo1Q5JWDQ?b%h=%Bm}Q@wTji-LKXSESpS^~+lW`n^U&*Oa1iukw?njCmscu3!$aa4@ zbGcy_feMHrd5r1#Zp>u%?_rRV`>q6_3^VSPKIKzaSQO=cq_;nm_zA888qP3->*+=1 z85g!}tju%|BL%5i<kFWf!IWRwh9y!f98tY9?L|Hm8N4|8?G#flC@cIZS15ujj&$-L zwJ20GXa5yUu6*N+fY>HatMs&0a(9IMRYHSFJCm~RlvNZJ#~pODCVr#|;{QvEysp=> zP}=;Ri6BegD|I5n!=H>tEwh}G$!Jq`r=Z)8sMTJ&H>elGjbT;CyQ2mzs%dv}^72bM zx{~D+*PQi})ooX)%N0HSZ$__cxE+^Kd8S{JbI?@!BbtsLg+y8mOV*5CX>26j6{z_h zqo3>_)JYkJ37$393+o5;$<?Nb>Po|FoX=&}G31KVv?3xV4E2>Ss-f0Kj3^|(&pd)E z5Tj$x6Y!3WAb)q{_F4xAy@4NNi64rH86X8Rgajt{_e?d%5WjD%=856_k&I?vuG8G( z6BFxxS$-`GaN<n-v9}FmnY^w*=#SDzYdJPQcTGuLj@@n*t}WcW2UB{CIru3;B2K*w zip}fo*|_e?3XJVTA2xQ*fY?o721`Dex9NIv$B<fI$|`rGjn2+7?~k}SY(1#t#wf~0 ziZE5Ge~DqYKKO|S)eTiKVkG*yXDbqPq?1>i5h64Pg^{~L-PJkxW6Lp4w?;SknwNtx zSjcA#{`LByQ4*&~vuH!^!wF&Pr~W+sl%ds1@=$UA6mmuM5vS<mP|mRsP4`UHq^{_6 z4}4Y>S)b|h{nH7FbE+fH^!qS0r1$}zJnF_O)uwVD_bPay?z1beOdiz`dy=pF7dWV9 ztbtGU>()~IF}>xzm*E~#GCjK#vvxH0jX8+Ef1Eej`+}TC+vS|siiGV2lLuO73eYI% z{*N^6A7MtU($tb)NAu6?2Yijzrn+&Em48U7e<TfSU4#cZ=Evof%n`aRNQmOXB}F3; zvN1mydoQ;32#Wcn+J}&_ptvr+N2Pb*n<yBi&cCXS<!lnnsDMH7$vQb3@DJYa&-TSr zoTT1r4CUHU4P$ZNW3bM>;laV9?@t|J2F+L!h%I*B4X3~;`s82Q!iRC|y?BfL1axlD zx+QASI?0}xgV`i?s8C)P)SO3c&JJ<bPbM%KBa!pC30-^Q=NImMSIPLF;L6YT^8*<l z`G~uy*KY%+xv}@>VYXgaZt<+0ST`Y!lIH&2(9ed;Orz9I?ErUm+tf<#1!;L9x(T9s z>Si)85<1@$xBX&2ZnaX<Bp?JR7W@SrMx+(=8umL`<{yyoh>EQ1ele1AmA|CkTK(+S zq%v|US~955UTju5yD{kAXf!g#l>?b_Z1QwZ)z_=w;9wzgFjol6E_jX7jW>lCy5OMs zCV!X2Ps((BRF*u@n=6r+-rRYp@>!A(W#DRI*F-DacuC9s0s=RvqZ9Yc6@qGlQ+tSN zxpe9;{-Jrbkl$(TT)F-B!5&wd7@zve^WT}ibI(T)DtLmEPtYpf!mCCvc_qSU=7FU| zRW;K_b+`0!r<&=Y3Ub^Z>Z9ChQQkZ%+974|nsNvoVq<YAx5ct}!nxI@+lg!-7nE#3 zoXEk2#ADv0BW;*bg%iib?Cq{z#q~4{@&I{Gcr7?Y0MsjoJU2%Xd{*0iRblyiyvt8@ z{YcGX_B^=QvAIphS2WZMXk*Z%HP1B>kX1OIE>R#ACLkZ#Vu{(CpO=k`#cXHPxtWeO z;<s2{4@)D(eBM&8gwVcfY2BdE&%~Px;C^^?D{ijYL$ntxByMkYoPi@gM9w%xih6|# z2)KgZHMF>HF18gD`XNlQLzCO;tjm`BtqUMOtC5PT6XW`BV_j8IyScWVsK*s5?#jL} z`yGYlKvjHuh!sd1Py~kwaLJjN&+^6Y)8?C6I0c_ymqGY6wc}>d@2dIX6J=OYP;bOR z<8C}Xw${g5$sxRUB#mBU&JQ94jHW2e#5F@(h@E{giTK_CSnvXLvhcBgWuOh+J!_3_ z7hY=$>&8Sp&Ckv*nvmP7)zR?BjntS9cLQ8_@DPIvT(ahCyXslgZ-Jyba!=mFz6}@a z4?mXdKGqbC4Jg()5c5i|Li~Uv>)WXq;wuyr|8)wR3KXHrC8<vt7TipSg-1VM@kz4e z<|r}xn;n?SrY+V_UEg*ejXN&)O`x&HyXSd3t2;%y08c!UIJ0sxSq(ZCYiW(>)*~jg zBCJrZExqZIm55B>GaW0`kC}7DGsu7w`H>AZd?`VI1&KE`+Ha;I{Md*csQ%Eu;(q3Y zPpNOA6j;%jn>JhJpN}p(k=JA`OS+N4T?)p@k&W~Qi1zX(OcDyxZn)NK1n*CXcQ3@g z+nP%&hzFH=0L3!r(ygUr4}PAhs-W+=2RFBtX#`X2`^RE(ZC2N8Pz8=%nUUyOH&Vrb zPp_FZ5XzOz7!DN@f;RqM=+Ewg0B*WxAUiYYCojYSC3MO54QozPV{o*e@ctsP1Y;Ae zJg9T@F5mJtWc6FHH4}{%M9!DvT^5V0{t5;qysO0hAjiyAzU)!9QU3mF*Oe&S;?U8) zm8)`@=IcW#E<aK*yjmK_d8g$#|C`zMLpSIcIY|rVzCtz1B|kpCFv(x>qX2$lYqKMt z!Vcz^qvE$%B8kX&_^d+yW_S0TS45uLFc`DhUh1XsLWPGRe0_MM9lC$eUuoKBd$TaM zhE6Pbh8HX{kqP9Ld$8%*5T)2}?x%4u!W;Ib<cTG=zZghav_pQva&uFb{m6TwaWi7= z2Wa%^`!2!E)z#(PVibN8EfP=y*GD2J@R&1CYVZnZUS1)W%`xwk?IQK<dUC^*s?RL{ z<aT$V#+H8?)vxw17|DTmVw_O)F&K37=1oY-V;18av!lj`V0>>0SoGUP)A}zQl%Bt8 zr0i;nXqy_MLbm*+A&X~`sB82lG&xG506ez@c%mBfW2pJLk%CFE#bw)<(ATI|G6tnj zJGK#2XRdyFe!Nvg5u%_*kC3TmuD28V$(R9_nKW@Zu?9u{-emK5p<#ll)qI~fuR(g{ zS4G+6@sOE7=@h`KY4jez0+D}zYS<q2=_G3b0ig%U;Sm9%mjnNX2HaLfuFkdNX8H=> z`A|)5TjS;UXw({_+v*aYA{~fY8AHtBi1RKBA9lhZCoAZQBby4TcdFiB_I|jQKh6B4 zJ&3ot82n--a13Tjh9Lsh_a$CMM)RCd>jQ$v39WF79EXgFW-K0z(y%C~1s2$>fi+j1 zkVL!P?6i2!UenWT`Ny7{Fo0E{02{d>{w66U?vW4fBg#g{_|jDZ1ari3=@_^I)_<G` zySUj9bv_TXP@C7;WgT9dr0(@<+x1i4TI1!!Q%ElO#f>Y{8ViEtQb?xFnphyrVTzE% z`cc;_u;%?O)ds@3Kq)m@ujKoZe|l*1oJsLyMv9rcJ&LLeGceF7U09S1>DgjTCYpF} zxlY_DR%eS#zdn3MH-6n<gpzyf%R<RMkl?CGES|NoDzWJ*-mu#u$G2Nyn{lc$Dv0F{ z8(4|UUwNvVaT^A(uw46Mu<empe2vbCd$ME+8YBuqX&_9xzQ;xN^TXoSpSN(-=xyS= z@-}fAnQ9Y0s;F)>qoR}C#jb$6(F1k%3ArowdH@_WJwEUT%skk>UC|_!xxV#)=adNb zlx_;6A9?-cX7?MyGrURQsV<KJw1Wu5<+kAJSJ~adPGHfuLX#WD=3e!f&w_F**~*!B zJuRkTP-46oy%`k|99>TiBDgLK>}3{9Ex`_K)E<pq7)cE_3G<{)k+HLu+oXnprq34< z)DaBTGYr+4V;;P0FrQ;@S0}~dp{%HgqEXy=O<;@4ezZo=rSt{}^90tI=!{X%^TQ-7 zEI$2?v;97LRP`Q`?1{``bE7eyQ+8ju>^t50M4(oP@4*xuS8P!rDxyL}Kdqs~;@2fM zy9)>s3p|AHBkpQ<$wbu5-W;ld^_e}A3Dp-H8px>6T&Q*(?c|3zVkyh2CjEv|Zum64 z$u23HKsTAlSstn)q0g%4U!~%zne#~M>Oh(NZus4aGj7XtF0n5(jrHguTLR-TB?Dt_ zSl+^*R>mFwF$+?TxG^CC2Sls}humx6)LHuTMkXSDyUJZUxo=6n9eYGJPveP~MY}ut z<w$2xc~3n3=hQ}?rKP?4mUmKj+gfXrtN-;sFV4n<?z`ibG`TznBOt#oZ6lu&7>FaF zp(jxz?yLm@Jr<7!!`5=F{JV*K#1=`n<ra&Sz5cqcODxfqo;3y0rH$>#gT{oBLQivJ zOJ~y1=9lhv|2pzA)p3`K$-fMtrs@%gYBpmJ(Q(+lkQS#c@9M}}ANn;+y@h_zn8i9G zb)okudDA~BFNvjy*z8RS%&&}H==C#EW8E*#=1c50Vs6E*1R9<xING4q>H}NpkvW>O zg0NhrI{a^t=64{m`JWn&;M;Z)+9H2RJFEnhe*5hCP|HCM)3G$jLop5C9|{fR4N|ws zVx(W9UJc=?rR9-u{EI15%F;m01yqaJzzB8h?e6LUTn*C$6^>eHK_!VB?R&@_r+7>9 znL+(33^7Wb`=Ar7z4#|za#1%;9iKGfzU0{KLM=Fw`>1WIy@F?1$5Q`k@7>b+6Z)og zPvWl&cr5i?I8~qy@_ux$<UI<WuB~>o^nHloHHyN#Chf-`-o$|$^np7Ru{5jxnK)Zj zCllbZO3L5M6-w-;jz8ROY?!ayo4+Jd5oSI@%lk^#7L|8#WB=y-8}_i(6KwWuZ?*oE zk+6Y292IBlSP>as`?J&%fY<HX``vA~xBXqA54#I=uGnwzdIbGR2Q|g@fNlxLC$@@z zCZDm>eG|;71lg?`_#4}A&I0`;SFRNa{h53hK>kC`9$~TFmKJ_D6y1IY^w%Va_w)Rj zydyyVE}1<#=8vNKd<W>I(R(wu?~mlal>p>3Xl%{ee>5sTf!>ghXK(xNS~dG!P_;D$ z$andLj-A>qIQlIb$HU@m_l}&dy!J=(mt+9)Gpe<VhjwYi`WH^F>_5nsx&JNcpR2q7 z@m~M`glX8OIUaIZukxWHSBZ95(W?J_vm?90OH)-K6;zfqWGu`5C&YN^1F~hzE5mm$ zp92i00u5dN=b8V9pZ{zv|G$GJacR)7y7t#ONy`@E-2CP&B>+du>U%_4W}y?7`dm13 z|74SZ;(~#=M$%N3-%ELgfNfeES~sMe)QZJEij0mShNL@F+dt5mO4gY7REV0JbBnX! z+*H~Ai_E&I1YeV0jr*?KjBCpsd3ALGVSlv#wg#z=cV=Ms9;f`c$ejJlGqL)#&l{Cb zsJ5ktiJ-x}IjJh2@%)RGD<u(`eqHdTyxdP)?`|f|rl351uRVloAS(telFjV9+;Vhs zUmXnz4hd_Q%El(9I37PvVV%iI&-4FtcVH1b)w;f7Pw$WFSN*w-KC9EZ7Ws*vf@hwW z`OsZ)rF!PZ_I#}3z~Xj%@WYyRL<U2F&&xjUSN}dj$dt@w)v?a9B;0n!p?q%Dgebv- zrHS|=$8Xc*?aZd+;LAQ%)%{^6e`Z68XIKeGZAHf^-zefa%!*!j#7cDk*MP)GTsE$| zqA{l}Ii$K{UPX=&K_~K$A6+x5ZP@ra=dA6n;saf^*wkzYjuAOtoS$T~x@<qIHQpi0 zmJ{oqE50>kzvNotZgY!G*lKOhpVYg^!piVv#nbpp<Qy+uwG!5<yWqaUA8s_(qZ-G= z3|yV4Fvi@{-kosU+@xx|uZ)M5sPZ^J3tfyt8Kc^m1VZWisc%z*P%$nP!%$EC2=32r zdH}bxZgt|!qjwtl*yWfQq9r*GTdqry3-Y%tKEikz$tcnD9+)jsNmNqw@mF)wOyZf1 zRbjgaiL1BVeGz{Lc%8`{Kaa9;&vYDfqIPjM%~jbfyUe9-82DBYCYbZNrpT5^Z#Orh zkMUp=-<_o4$@SS-=hA9gG{;e?7l}yTAl^SQ?4Sb$<j521QwR=B39N3q#}GHxTV9)Y zU{Z)zeY?7{BSULuSIR_&8#LW>=oC@zYb!Y1SnxmFn14r=;s}nPqHLvmzZN1VT`!JP z2fl<v59f(6-Xz)dWIyevbor{i9vblU=lkRPefz8l+gtkz-rbM5`~c1dtOzuyD!TD) zS2hJ!2^1&oOE71Y2QmEvl0+(;+wzsv38HJ-QRb{lCqz+#W?7*S=1=j9IFjS1Ae-Ne z!)o5xY^057KR$$O`cUw!Ru6Iu=1h@J;KXL+c0fL+sN{-VPVLyYiq?QF4KW|T>bK`x z97*$gNd%{yS}Te~yV~O4Q&k7%TJ)z7A5vPyEV2u=EzsE6U;SQ7^TvNx;(;nn(>+$^ zRNZ%!rvuZ<BB06xQOGmyvjHL8n_yTzk)O9&jXPv<03^L4Zz@4!p)iG!>f=!9MV(Q2 zCX_go{?PaP`2gS5ivhkH*8+T(qM$QMdaHj{Tw5dYJoW;qAo2(7`PX{QvFeLDdF>Wv z_U;{btI2>B1^}lgQ0r6E?-K(jJ`@`Y7%KW@pX#kf!8r+O^yS9G!CimOC04}`s*caL z{QB;MEK|v64-?_{-+FoJRe(vr%Jb&Yqpz59JPxF$V2b*mbi(zTIK8aJb)-#+^N%QG z1A1K#vMIiJ74;_&u!Z5IfmUo^8jt<1_1E7a?iC>1FS}#r^2d;jtHd10A#g}{rOSVO z*VH>e4x=~v(B{u~Qo#q=N=e9u54#paf5-cJK)mmE_?Xb2GXqyRFe&PgP{)Bks-(kP zAc=Wb)_45RcUA(Ea%Bv8Jo<BD_zuWR6Tdb#{rS%Smm2JWNfE0RKc3h%bpLIXPXkgt z>sfg5&v*I)*)DOudZg{o8uA}dEjAYy&1qfL9o{^oDXtA{aGAz<jl;Y@aM@O~v7kNV z>#}TN9}lJCTRtG#!%x1UgI3@sDDHB$y<WFMx1{Xdt{zJW2e@wH-=#D$xqoH;!J|_z z;}KJvEtAwx{T;;Qoi>2M9!bM;3tDtGa$qN?<N-f(mwhAWQT^gYVByXOID|<~h5p0Y zD|dD}b<Ul+rFYV1%;o5DHHT38OjqmC*b9YcbmLr?A56A=bSN~wu=rcAo7>>;w@)Mt zW$sX(Ici+$mJ}NwkFd5*^O^a1hE!>f0_3eZuy-2s^Vaw1gPN(~9Mc%n<L^nQ{^zp= zdqC@|3nq}4nmzk37#lwn5QtUqUtr7WGqBF-{reH=sz*JrVlA|@au63EZ@<CksO~q{ zcTrLHW6lk>u-qd6-zpGI`%k?o2Kc6oq?CK?ExHHrjpBAf^0j6MxYKfCE^n&7STj^2 zwHOfc%NYS<Tu^wPIpR@61W#cQA9SZMril=k9xN~RneMF9(bbJoh7Qb{k5(Pj)C3+H z#CK3r905$IXyTq{GMBg}s?iU~wu^28R1ow0Qy-iG>6H66mk)`{+s{`ms68B)zX8A_ zOhKkI4^b+AfR%97d0-{L%WFpySOR1~%f1~2Wa3h8_)!wX)oHmX0^IGg1A#cz#(>Ek zZImTZg{yl;=SeOLsbMf9qxT21va_)P%MjeBdRd^r{>GR90?_*APFPEej<mFNF&d5j z>gbTXm~UPg;e*9uU(kQI$9>=jp86Tme2XnC1E6&E<||hKh3|lAefTxi2OxqUc##Z; zLK)D9BUZe_ZT;Tku!F}hKl&V56%I2rv;i9YN;tT6?rLe~IBr?;WDgW;7s{Aa<O*~| zXzkce#8KnwKr9pvkL2mWSkmw%5BMXDx?ehMk%5gyUn^v2FZ^~`5hsv}cQUbDjRr6S zh)gHt4D$N_d^Yt9pkWBp_bmGxRx4SDdeUqn<(p}r`7$F6?8*r1Ku3@!0vo7z()PR@ zrT|#KJIrQ3F6(Kq_u!k*2w&KOP>94Ad;M3<W7Zv(P>}N$xhl##*16;fkB|beYYTgg zE$sFFPD{Jj$$J1i9s!`4z|}Mf@bMzRhSxv5tpIiT1Zd@vx<27B1@YR0ovy=YJ;186 zZ{m-Y%9^W023*3HUcw|(`qFA)c>_lG6}QL2C9F<danKwM%~ALNG4&fw&il_zcON7K z!deLgMILIdlw~;HDM9h3UTp1s!{fqGE^W&1B*64R=ob2nPro9t>%|a&Q&PelP(b*f z&W5#d8L)pm;TN57mYqW~{T46dV5woBjh$VrUXnsX+y#?Iz&eVXJRSpzn}BS3r$DNM z&rOFzE<DbQl%9Cesic?rb*DfW_BUvQZ))7y%c!5&B^^@vc;@gEi|Uj?6=2CuDg<a) zm}G~cGVOPKcIQt3Br-B>TL50nfy0@%wi^F%*482vJlsa!18nC7p*Ki&Q-u~6j}?D6 zgcO~)JoPN?fp(OjD0&8#Z$^bazFFhe)f==p`enp{#iZ*BL$|YbYP4Z-{017uLF-E% z&w(X36Hiai=}dku>0eYpD;-0~<6BvsQ*!VwgU+4ZVX0U^8%=c+#>7KwqX7-4W{Ib0 zvxW5>20$j`7!4HIRHZag*z_ksqG7l*1?NvVBc>Yr#S3n-LpN8a?+b(Y!|`1j33jou zvDQfF`cVPj{S7K|QYNEyI)fW@N@5?}M^Eqlo-$o)Rsmr{TQ4PT$Joh8q^{rRpPNm~ z7*-UVG^xWxJjq`Sxnqs7kmOs>?G-$lV4Z>(?I_R(Fmyo^)ouI?*bdhT128r)n=}F# zlhi^0SvH3(0OTQd^dZMDV)?pNGvFru+G6zWHB+;)I&&se!Zp8ql@3%twZB0#X0?Uf zoujMXnOA&m4>PjUmOgv6C({peF!x5Lir;)t;zb)@|MIk;r+P^n_g9V*b}X4G$4cvY zu*cOwZ=)YM+gY#)OoTt|TP2_>3%SZ6@Ag<F-R{jd*K)|6c=7~fNSEK)73Q!XfPb8U zT?+8Rhj+xD)&e=CnR;f2&DUdtPljsh0>%UTOp19!d>OEIAMl(X>tK8NqvzB@BvS~b z`VXbU&x@#WnE*Rp+UTkwgZFw04V&c;tUL*Sb^U76^-*3Cu*=A&w+616z1ay;Pv{Q! z3?0(NBX>fx+nT4qxn|`>*PiDL!v$)<?pJ$hF9oEpi|2|fqBpuxwvupmiVr$t%OGa* z%0|v)*5Zl10~mml%<59J6CkP{phDH8`}v$<tI`11LufMa2u&nlWSrdn{-#{BY6adG zfg4Fu5Kl$Dxw3b*HjI^9hAj2C1$der>r#+wRhlYJHtNnvGpbxuOQ478=Fu5xDbmt8 zb5HNQbEOXWIN}qQmX_pKN}dSqXhy0BOsmDYW60r~Jze{U{4&_LJM(6PCMDivB^i>r zb%Q8%9CpT|LWl*exY;iT>X*?(#gZ5?#oFTW07JcI+`RL+Y)gR|_>wg`M8nJg*tUGB zY{yPkXolqP@nE^?rk0ge@`zme7I(q?C>rVG3-(o9+x!4*h2UOh#W4%o8`Uc!k6`lA zyoBoD_fthhbOl?$EY<{t%PdFMTVfLuRtSqi;R*wIDN2POMnkMRLn2hujmxF4Kw^^x zx5J1!ZNyA(ZU$|Cd54wggk}jrS8jQ4JH5Au?#-c1&*4ixMdDsT#E$-4<77bvFZK(7 zOaO(7{h}D%bxWKRK(yCFhWB?a+iYMGaYIV?gu;Y({7hY9$C*<F_d~%}HDK3URtu@@ z8O;elu?ilV8k8UDN*@#J$xC!0mzkdv3XfK}a<cOZH>0fYlyk~+AB{7{B&*lkAC)l` zw#d;jj`dX?z?JYp8Ry&XPaokSSEM(OE(2y-9R&6l7<PIFf^N=gWOVb7OR@EA*5ttQ zz+oOn?78%WE;uU^k|UA&>gCJBBeZA>byjyYcqw4-K;{l&sxW2(AnJVpG3rCm{QY68 z=K;h(XwvX-O(ZY@rx?Fj=j&EXjx4sJ5NVu?b(kriivYSKkx|%K{nBl%pw2qKjmKh< zSne&EsO%gaDJ9~nxg8R6HnE;$*IG5&D>mZ-{)9wA3n!P2Zl+up;!wG72ra4?hR$av z=<~U1X|aV39(;}tpffDkF<VbfDZk_#jQyj)srEe8ABEe{Vt3|sf2Mu0kv58s?gC<m zgLk!=_vSJDurAA+m()%HVbBV^+%u(IXYasMU_QvQS7v)a<r08sgcu)kZltR3XlZ2S zx2xivLF`hYiSEski4v*uSk!inLR$k#-Iv^0;Ul9n_oXG$CA!&Wgf5)Y<wqU3By`p5 zeWYOA`(?k?j{z@qDzm^!g-@@@ygqUHC(w=H%3WP#ED^nxW`woyGEDsxpyH#B21VD$ zXMyDd5OIKiKyvWEkBf`j=v-<&vb-_twBn}$HtW{U(l9Q5q*rFpPR+@n|LE-afg6ds zvQ-#JpY^anpPm1au04%;T=P9@OUmS_-TxD%7FP$9ddAaMjwq2jOS+#P5ec>kuMn&; z!Ca+bOk*R@f}x)>UXqLG6FsHwa+Kj^JM{S*>kds95*1uCphzF{ibOQyCAjiE$f5m| zum$sAp40uTbi1TTkl0lyI|U0m$<Zhyu=4EbA}5He<Yg$@Paq%t1kQT90piHnu;as? z>x;T~%NjFDcQso?n3)Mb=^w9=*=UP~P=p2M(O?tSn~wY4c&8P(D!O&*&^J-Qyv~)w zKb{Ab%L2lpklFIZ!sd1YzGP(Mhm&t8J96FP8QwV5SHY&G=}wCD^D_{alba87VyVRg zG1!uL<MpzNK%d|*gIRwyxPD!bP;d`XJCvI>s*rHmd$LU#*Y*Csg&k4(nLHTo?BtYJ zl@U_YE}{nW)_VRQ-vv<J4jD?*3hvBRewLnry6tlh4FAPnc0(`BV8xVOpEgvTUJ3*y zVHb`VY=2U&ru&(8Zw4l*eJqj+qWf8dIgha!$D<42%Uftdr+v5NjS){>gBvW{D<5N` z(}w+=S+V*0fFR`;I6)?W9gfA8Mjz1@pV~2a^KssFT()@tV0(sC?g@u|+zHyt5gi<- zI$gr5?wMC?7xbsNt<)`!HT8e659$EAMi4LjqSZ#ZRA;jqTqfK4drI}ir0M10(w-V* zf1`pIuxVlVDPJk>gJWd~Ya{T?^vXV>V=!C{=HHXs&(o6`cqpbZubA@{dcbM3ldqGm z6=b^1VOz1hR@jpR=R+73omP{sN>W5!dzcB>4qk64?=)F*Z)LbeaAnYX%MG?%9(cal zg!iVbdx0#V2y#a7UgMgSQmO5gm>FeDRq2c4B~shqCGP9BpPVMVQW$VO>o*aWQBoW} zBp^QdCd(e44R#mUoTU{f3%tE0fUOX0C*@GDMCK0}_Mux4GTM4X2jjJIpC8DXkRH6D zikOIDv!Rj*R6Ga&Q!ejZTaVUME^PdiV5j95=Dh-qy{2%$WcgGp1K#I~C2+Xz8*~_m z6aR;^VP^cdbvZn&<FAXMOWT^Fglw9Hy~{`;Q>6W^tW{!bQ;d)^5O)>t;p=M#_NbbP zoh^mz6;*RE;IcR(#H_cD6mg(cDgMa09w~{z(RaQ<;BBLI()EdSmJ+9M8Ac>zt?mU? zG<fBEfkm?#(4Ty|XM0i+zij=C*%yyr3ID1hvq@_&rIvI-`mM}Y9!9~lLbhIGZpj6> zJqdmC+}!WPG0<Zflu|$-m$;5@Z@~MXKE>+ofPIC+p^<6H^o+^XD6|vZ^qPxG1hPkN zpTpKjG~}^&IVxomRaH>u`N<}Dj*_0S47d7Z;Fq_(^hAp76_OuO!zqP!=?QdA&k#Qc zg<6%!B?Hk5b$=Ghr10U*tb}gV4aRJ@^abbVjPa0jD&DO6$gK`(2WXf5TWOE<E%AYx zasv7n)FJ1M3F~!qVvsNu-u!bT>m~+Uy&=Uq`3n73V6XH__eRza%bSM*Gpr7%Yri)} z$#AciIS{q?;@QnKK>eox)T=XIUcM>byW=5QLbdc$ooZqJK+ZN}h~5aE&DM7P_C_KR zc2?$mTTWhHVG1cI2QHb1RdwGE7$qU+Yr5ylr*QjXK-+0db|#Hzm4qv&#|bq|8JYOZ zoS7n;l6$>U(tQTYl3alJ8Irru?EAfu4A%G?o|;Af;@lg6ow-glD6ET<MLeSEeH<S# zSHyJ8^2hbY<}D8ww%k)$FJ2wiiZO}Zt~GB(ZFUvE@V2#P?!EHM8|a*gjfGnD6D0-{ z&)qO7%lhgEn_|}`wELnNfJ;8yGc_^gy1EseKTXUmjaprgpg0BR4+%)CUpZe=s2Zj7 zthCbKO8wzlXFG5DLa9x2G|(O|oZ^H&0MB|WoZ%2$k{1VbzI6I>tcbPG#;@dd8sW>* z@Vy(V!r{55Jxugox51TU5cDcX?Ti~ZUSN23kpGv|0ho{1FCb|+F%)B=O#nZI^5jzP zi+#C;5|~+dt?3KI{flIH|9bmGt~cP(Uv5bq!!yjhch3K?w3||lFYdU>z9GGlW41Zu z-997GHv%5c?#k!~^F5TS8m6pn2)RcTcfI+*VlwzztAmH&9AW9VqLx~QEs0yA^S3ly zG}eC+B=c|8&7Z<E_4;}*k;!hr*5KtDPtQ-YiUS7SCg26Pn)P^`FG+>@T|dA0ykSOv zcIHP1Ql(#U%Fv2#qB=6#+_yh`b*PdCbZ4;$Kr|-^fdnksCKfPdakULis`G2H*>9EP z<jAsB3qeAc13$|hdp40&{q_Sc7=*sirB(y(?&jaT2V{8s)6pl?>qkWoXuCE<fPsX+ zl-(k{vYuu=hO?cyB&1Y;dYDgYqS3xlu07r7A6hgpxgp1y1vEa*PpP-<Nx6=hGtay< zc4Og)h-3nvQeYnHardXtbEbsLATHa;&@J8^DHs&%v{9O6Pe_(n>)sfbhtslA03Gf$ zr!nbYcoTGI)JFIY0cR0Iy#HYy4H4*y6c^0S3!RY)pAyDSS50G19!fq07(c+*RakzM z0hI$;P;9GTinF$OCEy2&C?TFWuJIzk56F^(^F_i|z%DvdzE*gY|I!JfYpHo|s#bGB zyrJ6bY8EcB-ll3YluDAmV2L7i`;IO)UpZd%K<v0iNR|3(-=3awL;K3jmtuX`UefXF z<xE;7>Fk_xTHOa=vvpr6J8SM(>E_q@N(L{5R2(0?EHt%N!7kc1L1f_l%GEu#F+ubF zo~!ibnn!#Zn-tf5FB7B-o2EjbT|kYdb9k7#8IEp$n`8Pe-q5@P9pcv?kXza8vh;V1 zOH-S&MCkE}SRAD%He9}}PiuWV!>TM*T;m!2J0*RhqQVq!nRxxRL$G18Dw5-4L@LZb z9ky*|?_A}i<^)df{^WXA|ASlcBLdLJ7ukX6J<79;_PEJ@-zNPlr!kNP!vs1}2P7HY z-&?cq-5|<Y)~Ho|u{`}CJQtFV@13RaCrerBxuI9O6{32ziB}+zJA?#oIdjcUZ+7=O z;K8BkN9l$?6u^1uhxV65ZIK>8J+2Tit7$K-H*#*jvEO@1y0Z-Pd`s4SCU+WxJKYcn z<bIBTz%~x0jJKgIu`8uftWyOxfPDi(msOt8F0PVfpk&2@Qi6#}he3(la~>Q8zU!l} zPz<L5t%ifOfvo9t{b!MJDM6#wlu7G>ObsM#G_uPS<6FDMBp$2r2t1x|at)y-_vl#g z6vDS5N~2f~MHljI^ph)0tg83>0)GWr7)}Si?SfUg^>k}0{8(`B6gTADW~gdm(T{rR z?SS_As^XAuj!^OKwFt3iVhIc?k(lhiDS_N%pq551=1}J=QLZUlE15ucbIp1^$CC9n z$z$+G)N0R`CHie?oAkiW9toX6i0B|n-m&GV^dNugxy_`lAGrrDvL3=TeqE57J6yxf zeJrl;`5|CR8Ta3q!f-><rLEVwKI)VVJoSejqTLp{;;-3<54o?oyxy~&dUX;Sln9E= zs!#;q6%=!)Cp<vR2s8w02!db|cRd-Sc_CARw8)+G{}SlSmoFp7l&<g>OFg3dVf9lW z2(|Yi&oeVZbnCLNKTvl*=OE*(F_3AYjo<uaua4vInO^=5Ek&rU!G?^dPMJ7tSM1{% z$z?g>!4c^PmC(k~9XX5hB}t-xJ>6;!-;fUfI&cg~;V%I(7xsI~meV^9U9J+q@a5?F zh5v8-7pG|o8b;4bRgM?s%&m0kyLt>IyfPTU40tw++7Q&3W}~d-4pu^Be&)0Cpp><S zuGPv&vErwEkj@%Ex}EQYKzxMqQ&eD=%xXP1syHXVs;`DgqCK-#vJ6^u$9dG9lwJ^X zLv49y5+8^u_-h3;C=1f}tXzA_IpB=hBIpEJn6Tu{8n$cJSCPKcX`H6v?if2(ss<TV zhLJa3?)6;|OLZ>q+;f-b&_`!It?*mcVUzIrscYret$4nx+kO+L^lN$R^z@Gc+lU8i zz(zVjTXqxN;FznJ`K5`RplGtF!na5-*i8>86w9-!>D%<We}Bh^nh;&R*s==Cc2^Zk zj!x&^I1@~ABLw5|B2pC#(O%h<=kzHd*FjE~phKml1Yw(wWlO+UT1`M`Q&j=nhoMiv z7Aw_1kvoxIm8RFZ9F#LZ8|9eZ75n_HF;i&etnL+~;(BuyD{7M3y;%`xNt?M0woWfF zl5o0$%Fn+PP`(Id%#$h?(PyiB3hA^r5k5U~30b4Y!39r-$J3I1?x~>E-y)1;atq)M zH!0ZqhjjP>*2fEtmp~tYvJpB3*hoFWzmd}xBBrbYLIA<^C;Y$w<0<2ygYIv|b)8{; zD;F=g`rG^E1#9^8g~c7ct;?4CPFUINb1+rfe&c7x!hG!>Ualz(@|3yyd|$fY-dey6 zpJy_3F@0?xE;lG_jKyx(IKffwu31&DVIlI4Z-W<ey<JwOe<&d1;0YUiD+Fa4i0>3K zLT`&XD<m-(h3hR2$wD<9gHWx<!OQ_=@&Wfev+{bkYC12`XUfx>*Gh&#=_T_+a`gIa z;6%r^<4hE48}47-mt*Cfmz|(k5sa>fesM#kVBp<Fq)Hzw2lugZWQ=?y2DJ1*?170u zwV;#<1E{n}x1E!nKRVgdJ#|#h#OWy~&jITjOB()&BGO+AaOQ>iA0!}JJok|Z`0Hil zV6WD2BczRz@Kxd}&3&o^2xh$=PBex8NWT>^JHn6*Io@;5<9^v;j<KlHDd3yNZ10KB z%B?Vr(lW1Gg{Ol31Tv(ox>c$(HK7E-eWs|Cs|QN1Kj6R&K+qsqADV@0A_uSzN7Y*- z!LK|kzV5`jW&7)~8`#H?<A-34>69SHkL>HC4jO7e(eDuu7EWU>F?q(Pxm@r&X0>}2 zh3GpR*7mQMWmV|gk3)SSzr{w~#uc0a%?RAqRUR8c((L?5p1Q|*mDX2y)yLTo6)xqZ z?cr09s-@1aK{*4r1WbiCBbR&4y|Dtm=Yd_ts}y4IJ?5`Ft6gH2iGA(oB~d@;t60Y* z&cVL*m5EGf>8Aw!T;vhm`A&zd1Npg5#-#qWVqgnHv84L*o-wN55Q8mMYH>pYvst=0 zNgc&L85|wmC}aqPtWbI-@1H+w0llv6`lG(l!t*G@8j2)pUw#zeQS>t>&>j&U+3>Ww z-c-*TJ-L!Z5x{{_mHzak>s(OMDr3Q?@g>yy_zZPFDt*k2YSP`W8g)Y8$&3-PJ>hEa z)4!n-^5<pDk4e23;#6*k;9VUytuqLY^{Yv7rw!5Z1_nj`cewHlsfj*-VXXjxZ>Ogv z(#2ZA-s#&8Js-}MM44W(#DGYmTd$<h;GW`*a;!6DY8&<*O_09Z9mtV0oA^unMt1`^ zLWptV$Hjz=T*!UzMJc0u-9{Xl%SI{Lp{BjPW!Wkw_-CKq80$@8yrG81xt9LG78T7& zKy(*gX8`fcI_;!=Xe|ziX8;FE7a0lOJMi+iheWK)dWmwm=<bA~P6+a$A#HI(kg6Gb z(6_Y6J_e@ZSI&9+K9og3drm0+c>b44LTq3yJF|aGU(M0IW<72@wYsGP!ff>=2lJiH zr{`YATOC;)AUQcXyG$2I^c36cBZtGZ=M)(vYhWK+0gHxm@BfwEMcrH`ToswZpTFLJ z9%8$of-%zThAh5FpUcinCe7t7+BElF*4J<o(@Swg-tEh)W9n<rjYsK=l0j01gBC|C zd}X|*M0>iQB6zxUQ+=ZdemNs=dILLCCH_vw4QWMqiOC|miv(Lt^hO#$Vo#92zFAw8 z!)&{SdKs&PY(f9$oDJxzo`N6flRc|}a}I_c>i>(q_l#?5>()mBVT&MwN>LC{Q4tUj zrMDn%LB)Uyp+iKZcaa_f=%y&mMv)d3X`%N{P?}0_p%aSK00BZL<<5BSeb4*9_iXn0 za6i6Z{Kb{9)?8zbIp#CQc*dCDL!Gc3?be&_#u8hT8GPlxKKguOrz#^y<6WV9w-{yo z&0~HLXC;|~UTqCE9CBm2!+XheQVQ%~!y$nTeVOV8oh(jV??oSVxpV%t=vb=F9$Ymn zVUI3|3_(O;HDO;_3}l{^2(Vc6_Z+7zLP%VDXm~e;Q(3b?M{_Q1ZXQvRLuUf3f54IJ zu~#F&lG9&qhZ-(Vcy6fz5;I-0zo%`uS?*1-+M|)*#&U!bTfoHNbdxr1XeY!;1y;r~ z5U{-!P`d1L#N_Pj(?R^l0{1tUEnP7Cb!P7E(M!4+$w?Kj@B!W)hRE3un7`(D%t@ii zl&p8lr32$7?2sHm^X-o>wn{-eCY80*;t0}Oi>&|f(Zqr|fwFzj25qH!+0lKjt=J_1 zpY)!-V0I4*laaBVpc}D49eGK&^Vf8Ase1>xsFU5~)VII@60UWt1)|D73+;2$QCyQ( znvEA)n$p5|n&5{`bXSewPTcIUdUyXQ6Sl}R!5qfe8cedH$I+mIyns*aC}rRGv)ke< zHwv+K^K*CEkuseGY4&cOD_4#*D2sjRcWr$zh<5TS5y=sd{|L{#rr*C(vs<iEv9bW0 zP85wPe|9u@*vfn+TXb$d>9c($y=qA*I*!ZH!PWsLmm!on-cwm1K+l+Pi6a=b=a<!` zdn0czf1Z#P+rKTg3R}%ie+{$9r!<(*7bc`|t%xeaZWU~$P8jU>ZLtLO_H#bO%d<Fu zFqCtt_FQppy1QOXzN%pIyF4g#AdADuqUibK=Qt<3bybF30B)>4NyaJy9E#kQ=VgF` zeeg5Je$gvr`S|zuzn5Qno!=Rrp!DCCRAy7DVT-vWz5dwY`c7qXPH0Z2wEWzQV~SnP zkt07=>h_UTi><2Faav0+;5tOJ6A+R9lM%&E5$w|=U*{A^WCAsQCx~+6Fu}!rwxd)m zzfP8PmJ|i2jAGyC6;>lR`Ks|9sF4&<X-TNvH-BMCUM5hFHXM~RT#(eJ{Bo1+I`lJB zWWsL&o<FFo1F^XnuBCqV>eI%s`Q=9U(SUjZ(5S=D=N9(WycJd@d(UI-t<|R@k6&RH z*jm4V``y`RVK-hdz?o)l-7@=zsNg+OS%#f^w-E^Yls7zFD)8R>V!pZ|j71ZAgRpAx zqTzLCYphRGKBQ;p^IcWg9Gb;vHs|f1mvcSVBKv(u6lc{jQOV5_8xtAw@_jy6Q`7I; zc8o^zwXxOY`mX`jeo0aw8otTO%OaQh%53wH@8$czSeCP>%NYNuSD5|ED7eag&o38l z`yh;$soprBY=6p@2|cV+bx1F`hsB0V6p!HQ(U{|bEiEdS^>f~KFoy>>|Cr09N`0FA z{BG`#acrG8pz#}nq&%9!;|wxND@x5N$8X2|p0=twt);^Np8THA1;VL)&ELsJkZ#<Q zC=_HgHdZ6|gIUa)ogwd4!b?vJwwKMN1bq4`WBTj|7p+Iih(VoiEc;hdQtbwT>f1E` zxge6Eu@gC4vKpqUH)runD4Kk(jq3NcT(aD#*!q^s#T1!e&q}GTHE#F`dYh+@cCjNa zi2@Js<GIyi3!k1&$JVU$8{i7~oJmI0(4yJW=gbP3cJYpEA95^`xgwT|h}r^|pOtb^ zF3yjX$9Zhs|1x^>@K`94>^pK-@R&k^Q2Cc9cbNTPG2CpG=*hP-Nk!k{pOv4x`G=7X zyCWoCy2-jd1(*N_<)e3xEy|6YwF?eO)4y1NJgqiox)`(-@xi@J-qE{9(+H3o^f~W` z@xr#z(GO4Y24lqZZEx@Xyni}d^)h-da_<6D&4UT_D$Kntdr>w)&cFh#-e;Tm%slqF z6;m0A7_Y&LvQTgpA1ZJg@ORBo_C|Br?s`ng9Y)8{=cDq3`fUtD0d+)@wzA-0Es+TV znty)G`fU@T<PK0z^8w_gK4X6Nc|}j3@6!8?O45-wg94ygYbIuRl1_g27tVXyiF(d2 zw|0NL@qJ9p-X~HyhG=F|;cBr%Pl3u&&#$dX`tO<wA}jJ|d~8pbrfJ1p3VH8vh7y|# zum*J}LWQ#PZZee6ZS#4~%yYacgkA7N?dX!v3_1ooKD*PtJ)t(4>70|0V!0OYL7Yt7 z-+$fWKG#wHKsAY&W8_}Tn|I~tq;h}gi2kkB`Wxhiy;~Q<YmLjQvmSdFb>`>zUzX=z za-TUSpj>a=7N1;jPv)@8RJ*mr<<$pFMJWFlm45HM4DdLqV9}8g>4?(2JE#X2Cu3(L z#>dHp{0z)X6>9S+Ua|^S5!Qx&F2{>DqR)JOA4Wy58~FbfTWW5R|J(xhX>$<<38+Lr z+4M5o?~;9>`!Q)HopJ%a3Qeh&+m#2+K{gf4-Z5Co_{Xlw-3QU})4+D!ZPy8i84fOG zegX&pqNS>2m^}~n{OdcwZR^|HFvv193|G4ZAjd;|FFeiD0+2H}Z}-ESdVSP+jg4R! zR_-gSf?fI0O1uwo_M-Y&GvAf9dIPSn-9ib}f;CUyT)`^H&II8E<g!am`!A7q%fT25 zra60L#vxd!A(X9f3{m%l&Et$rQ$6}~$2R&J6Bpm;JquS03m*1Kt(tE+mZx|<A`cV6 zTF-1xk`eyv7yx6(@;6&rSh;sy2eVJ)n>@Z@(K48<5vmZ9TIr|DpHbE!7U&;8u<Vpj z?48o-m4l(9c}F>cd*{j5UZZ_eKkC|i!B8I<qHUOJ(Nq05Cv!!;H(j1HnCJE)`}91r zF(bn^eVhX2&8|Oa$vpowbz`QEEMwh0QGauCL5LqMe@Vk&Wk`1L&q_lzu<mr^er)N& z|K@-7*uCs!oo-`dgaX#{i0z;?Y{OpOCb-HSG$p%n8~^F{g8_Bj*V&Rc(mH3Vv7yhw z9?H8?S%e-wH1I$b;}VenQEYRyY3}ESMT(fHs8bnxt*Pl~`<%VNY4y|XJT;GRwf<4h z;wCC4<_NaWb00w?AqNgy&CC7$GLuQ42WZfLgy+6@_FXe3jIsXhMCH!hJT=T<>Y_PQ zJ+HCeSG2j<QLKZ%d4muha;+b33o*|3Unus4<GCpI-t)1}iju*lESVmoztpPJqT2x< z<Kqm#F~%LSD&Wq(Kq@`>ALD>t@OM|sGBD@qoE50tBkm6#STH-cMDjW9`s`Y0o3IV! zyq2vLIVH0GNZox`-{=14vhSfcC9W(vR{NE@l1cR*Tip>x=ai#b084rBfk0-XQ=~yV z7*v!%NyKTDYd+=TRXMvpG7;YEqqULjhJ3S#^n~(4*8JnP;S9W=jZSuC8|$CT3bDf8 z?}!w8wy7nGUV>%v!rDa*`yo$QA~)+)^IySLHWY_5w$l93cMZ?EI>;o4ezRxlUv%Np zmUDgpbD!R<0a>XsVG!RSyT_K-R=1o!_uAyQovPf7oU<=B`W^gD#9)&AoB_9|8$N@T zOUZ7x4ocrJNW3)KJ}cJo#$8fkMPPP$x$D!}wn-(Y;kNrfs?%CgDmE!GaV`btUK|do z4D#C@tpceL(4Z3=(kX6M1+pjn)9#Yng?mn|Dvt{9D`faQg&k40TGTWd_7BfDFjRT^ z>uUar*gD=UPCjK;L0|Xw7mhGMX>ig}<ErH4Hu~f!eI?@Cn79nAXOW!AVAx->SEHJ} zX;$^@NKn4IK2tu68CRa@*(e6X_Cq<Z<xfH_N<%(jA@z!LnG0w7`wVV<_1q8uoQ~hH zb&+t03>(=|eag-3NTWQMhf?eva3{uZesls!-+tWTz3j3z|6f-)1`|Mlwe}cT9Ca6K zLe)k%Z1n^BWwn!w2j2!N;>KB=_qW;3g`p8#bdn}zH8*y$KP4VMwkRm-3F7PN90s{s zaUBBh8*>dhA15kpTbk5b_nLlSRe8cMg$NTlgLQkR%q052!MPqy_XOnkCkJ7weH*|o zgxvjQiy0y2h(7Vx-+v(Uv`_C`4q*7d1d;lY<Ci5R*<%V=9{00fro-L`wZ!>*r<iIN z;d+(X+`;L-Iw%-j&PO@pe5cQ^VT1*F`|f~`Av_}Hn)vdq9HL>hJ{bzj{3R|b%JOL) ztJ=Gx0y~$j^GY2*Po5`T<GQCg_Z3939YJChM%9vibCe9b04_M`{6_T4{$dJ3j1O69 zdXYx4F5v#HNw)&}x9Vb&jx%I2d49n>W}fd$ce2h6;o_Gsz!=o!mVwTne|<^-d6ROa z`H$@M#X&bq%~0TMzEBEo;61Ns&tj(NxioR^WiW?FZm5Ki=20!Z&m#A+B+Sjwqb!px z@3VSUytBeo$8+YiK|8%2H_LC8SKx&`FHp)Ob`c@59V1f|>7|l9-GR5DkA&prYUU&& zB|+FQ$o1*{WYTF`M*TVi%R{a}(W5Y#JhU$?nU5_pXVH*tBqucCn?-JTf@;18ix$^W ze6a)8k$2d9A6V4FZ&(2pUuovpRI>DpQA>D8ynak!RIcTsX<1)MWZw0vDBEh=@AgbT z9_R|@5J!!vJWj1ZZnXF=jLfmWVUW9>Jbjy48YC5gCsc{!R}EEj_${~6Ew8BQb6uvt zA;2usYv&9@u6RKz8J1Hq(A5?ZH#GckdEUEeta=CpP;+~-EoGwfzfIn{sHOh;nrBA$ zxr%rxch9L;`<wV_t_CsXdq3E3<a`Ua>$NE}3{-R+d?dDU_9CyU@z;_lGowlo&X?NS zlixuMU)|%WlT)(zR=ro2ft;{hyFtx(HraZQRG&Kr7^$a3k9x5AHrBpX<ldGx%a==u zzyj9#+0sA;b0##4+9rFfs4vVSn@*19KG$mvsD+!2V7J<cy()aufaRUZBH=@b6ISxw zpE2JRQ=*bZ3nD3BVN69G@SwsDnM!dGcmJy=0Ur+*^Uy`$^qXym7vDM?2TbkL-4*v` z<|hEW!aT<$JGg^P0d)O2Q{7oA1llS=!FHs4&eGG&T{}59#8uxA&8K1(Q(*p;yYy|7 zmgD=*#Oy~h=+|aNPmD4-vA*p`l-;ps@{2~EdYF{tFZ--4-K^Hvhsh42LQ=8H4ff~> ze1EoP=CDbs{d8o5PPV8|S3SLIqeD5z(auE7RmP#LC<U+a7X4)lIp9DS>73>Lrhp!V z9(xLt%62t`RRDl^UuIWOimCVqYUnuq=1WEGbxMhZq9#)fi<gHgS~?1gFBL_4nD03P zN?1byHml<ntg}iVq?w<f)Hb|QD5Co-{5BD4dBCpD4D-+V9{+9*Fv?P`SCRrl<s~2) z2d^ajEx`Xs=z$-nvsv($Ac`ske+DaDBCT((JvT3}u+HCa<U9%oQsk@i4;q|e*f*8E zR!9ZTn$*izmZtX4Oy1D+-^>n410Inx^K&lkx!r=!Ve7W}H|N6iKlpSCj5#&^?3WFo zFi@9nvlluz#s+B2)s&XyZkKNvjRQhW8|ysJ4bIF9hw~N1$d+jyz^ML_E#e5foa6I? zt0X<uE=+e>x4+h2QLtSy#}dCr9ja!RS3*|>)MLh=1g;ZzFKkF;UcSu#pi1q_OFa>W z^UR{RxkMOxZkQ*03=Gtx7ZJV8Y)H58=?`^qbi#$9_Sxj?-UR2jOec!AtzFjJsKtIZ z9c@Vp+aGEUL#Tul_lG`{3F=1nx}VtWE<CjlVDVz529YZ~{fBp>t92CU8N_b_&e64T z(7)yE>H@=FwvOCWroX@X$YMV`!IQs=Qe!1;B*uN~EYnH5T-@5Uu!O70$Q8Xiy?<ud zp?YIAN}(uKq2{P$FZ&rLXVdS`IseKjUorM^-QQ9oG`ATQ7mFlS+dx!`w(f;(@egYb zNF=A~a?jsGNvVwc%+=<IPp6v6e$La3b{_KYEzU}5`L&!FGdA+Jd^*5ePwIjw<IRQZ zV$w{{w2*GY*w2g)GZPuGyBS*Ak@v{DyhbMSaeHx`pShzFr^CNwrS}GKvO27#yULNj z*nBx&Uu@m}6T&+1Wxa1!FGYhPLnK?*$m0D|_mVsOjLaqX=*h5FgrxDU!20Jv8cfjl z93X4L1UQJqT3ar923D5&d~WFn>VayloQ8vxpUN@fM6$nqc8^|%pj^+DNb5vM=52ac zcPFzVSGmW|M>{l5W@LR4)=uISVRr6K_sHog*SQyeRSHfl_uns*dh&gB%Cc9l!{}*3 zB;!hKsA|(mPi787G*izN#s$b-!E!E*S?-REvt^ZKoEzzTtU}0M!Okz6KDtH;SOus; z@|G?~lEw~qSqX|VC=^^T%fJ}RPfzYIBIfz)GQ>!L@cf2cCi(9!1_dwYGuCtMxttHq zC5B$wEosZ%jvlY|Yp!s-;G9(^tuDz_8Cm|}y3Nd2mjqu$rb~8DTr3(Lr|~_um<>xI zwMRq8Z%?|YKCSCE&=z{$+xJrtxii_4moYNG-ZY#{9a@0A7Gc(&bY1LZ3AlPa0F@vx ztT*&nrnwym+7<{p9I3*q8K@=%J_;SJ{@aWHHB9k686;v_@k#HS4#+h?M$6k}bFtBt zh~|}<opv#AyKYy7m1d~Wn$srsNnZ<?9d-Q6W&4z}w=L4ST}EH*4~ST9g?gR!YM&jd zW|p8Fqj*;B;}lcR{BShI^~+>7qA&VSRo?Ofic7=L?1<K+GmG0CL9+LKN0u^ESMVE* z$ZH8lJ8)_YDm}35_}PLb=K1{CWUuAK6PeGz=+iJamWBWB;uXh$e*2+wM!t1+P^gD& zvfZ2`+nCP)m0#+yo>ASC1nsIiRaW0(kARGOPR#DTkgDO~s(Ea!gDQj1>VCs#swnyK zi_L)_n&fmlv(TgbDfybFu_3<9^bA_2A35sM>r2=4e|D9xxj)3{#{aBzi%)z$$$2;9 ztRnPKvigMGkYL8W_|@*EBUxjhV^7DxF=tbhKTs2Mpe8;0&i>aKv=Rd;_I7@$b?iZD z1_0J>)S2KS>U%DI#262cXA*8c0woIXDR=2igQ&;!4L`YH7tyCw(tR{`xzjbFR99}# zM0vZX8;e6iJ$h)79dSpIGtRg=Go-xF`g`xqQn_`R0Nt;@M0AS^(#l-3bikwOgBE%- z=I9;Wnd-7oq8mo6t#QwB(hTxY2+sS$Q<hLxvO(1){tSH2^&U41`}tu1C_FPqrX!HE z6$X+kTyW(G5PlkHJAdMDE(YCNpy~Ba9&kHfAclJs+__!E$2^yZo6%%Q9239O(_p}k zXqwm#ot<nEF8p%*yO3to&lh9;`eql$ef{pQt#c-Pc~BoL9xP_r5-E9R?}FN+(<g5S zTzHG*mMKX_iR3z5y|^#*cH={ttkdw5>*o;C%Vg4ktg5z!bB1>E`X&<mo1mj$CXZUQ zKeL|h>P>m`GuXlZ#My!kRxoyo*Am|eLu1Ab1FhD?4Hf1qWMFF2sQmjOjIrFbd0D^Y z&(5HQssFrTAhWFajJ(^UQ}oQgfgO@`S`e{1`Pe^;lag19UGy>BAD=k4Ym;xTQq=7x zGbEkao0wCrn-R79zQc}jJ+s@gn8Vll3dWS6%$(P$9y=3@kAbERi-fQVe$dGtesYmZ z-<!l9{qsdOr@0K}$FU-*K|!Z*K1bN8m$N4fF9b=WWyx1MVkxhm^nAJFW0;t3ul;Em z<l~4C{W~{Ybxjh66_}bA*sXi!r~5)m#$Bo;$vDShoq;c|6>iL<dS*X?Et3VW+1l*4 zC4S@z8|^hG#rKXe#<J0@)LM$a7K7Fcn)-Q%*BuJ7y7}nAo|sTzTx7sWRzxeXL^JrE zI&z2KZb_!d{gs|HcUi?ehluYQ+p^;ihhB+o{LmOJjmpx^;L#*$w_~aPHeG(*<(=z= z>v#Q&IefHh_QzjGv%TgUutU)S(=GP;+c4*_Cmt(Ky+?hcHR+U)r@&MZS<bnd-X#~g z;-q}Hq5zft{k8)+y}Qniajk{vdnCRDG)M>v=IVlr=e!4MXxIbZ;Uf7DWz^qY-DP5| zCx&0KYFQpB4F`GEnaSn9UcP%Z={VxpXPUq(ll#(WaIyD&PvjqqX~(~cj6!ez>`lN3 zjSIj`C5v5kjEQo;?Ktz5JT=}0P~hDsS=zdnr!H?YpTQelrn4Uz-Anzh{nf>SJkGh& z0V$GWY5^1<_^5Ri?Im}q0zL5EP_;m{i_AMXgP7IWk~efg7d~Rv3E(~M9`Ay~ekS&4 zGcYpNYpr2|W{MuviRBFn^NAQF2DF0FT03k<y_B+SX^KD?_Z=f5_P3TtZm~RLH5qV3 z_rE+T+%hj^S=9ZE?S|WA4Oq*}(s61muD$c4>b8mLF50?sUh`e&P<54MTdByL)tYCf z%wf7lyvLKUXLYuvkA<)f>|X#wa|a7JLF=IkBlCM>;3nByY@R&ZWeNm4`&N&go*|99 z3m#)^NdA5IMX-|F(}un++KrS!1t?Ldt3Z4C-jq8>%IHVd`Nwr0nkY14R<>@dc$^Jd zpuLIQ$bI=HRfDH>+@C<6s^bS^e1G>WbRg*)PI|E%MC*1fFX^NtMbAU&0UB8*qP`J( zGpnV0<brF1#Upo0kAr=o4-DlYYc`nT*%P2hDej9eGsopp;N|vxTNGCNSP3+`{bH5? z1LIxs`}6r|E%Mn-$<smKs^S|$qp!$5`uQts=zB$&zKqOn*m!d<I$Z`S3{7~Oo25|g zUHf}LH$PsjD(`Yhvq|r+5%~p$5OubdEt?}q2#XR|h2i<rjLaOj8TQ1e$AI1Ar0p*? zBFh)l)B<L3V2WeTgKho2Tv{?CGbe4eh>>vW(E?+Z!H#+^pwl`Or;KR)?#R||<YW7` z&Y1T|QdF-#EIAGHfXidZwz}CQ-*Ll*<zYzlsTiINvfkXrX~8F-R)00e4GXIU*4uF3 z7V^^dPE;Q&5pd!Cnz)zuEtYaE%XL(5H8D?1*WinLaDhDeoEG|ef1C!#2s1!OXJ`|5 zU+*wI!wd(QxSK=QnK^8afl<3(M!%p7dJ4A6pP!b%J4uJuXKWg<Q6Yr(HEECcu#YyK zE8Q+LT$ZC1FNeO585NS&Yb}>cv0>#nq+HM5hj+qWQB}iLj}v<m>UA@;#RPafAFA{g zEf{1M2UdV>@iPDcL(G#3LyBJoxh2*>)of7HiOV@}-ljjx%ggJ?@Y3#8_5!P2usspG z>ZJTx&J3kKwp+d-Sju@KgTs5VFKc%gvyhOUmrOMWWiK3tr+`uVcDXVHl>eLs^!p<& zH~9YkYEbY(KDugiNzThc)E(M-($HpEX1%-i1x_$QP6GO_szcF1!((fAxL$6~&J`Hw z$1^ed5kdJF*wK3|JdOnvMITW2HZgqVs(_5|y?fuW$I5OU71(&{wm0<4#0*C6zP;!O ziOkS85iLJ{cJ&9tNn!1_7b6m8Rlj)B>EvS4ase}L*Jjdy#iuu+9vn^aeLr2@XYULI ziEs;f!FhoP%j^uYNI?6qL;?HiwlS&|sHOmL>`dR*6$VCbO|a3+`>tG6`<Mi#@2R~X zH$6kRP{CDl%<=kgA=7lf5u4rwPr|tPaETrN$xGU=?0VDZbhJ|^tUD5n9dEJd{eh9Y zfHn8qyq)Ub62*r?Y0=NH`0qD1-T|i0Mbu%e3g&6b=i%Yu6Q=O=*L=Kk+NZk5O#s`T zEqKk41-V1-oRFXZ{V|#jO(b<Z8}<InW$^_#6(Iq79U>ygmh^n|TkJR7GdPPkt4Tu4 z*)bH7MOTeyQNnZ@^jBgC2P?psQ+xpIrx(C0X+6XhAK@?r3#I?FZDlN7&_xmO{oB11 zXkh(k<}2C(7wOD77cROwu{<>}Ez}X{OK<TajLT?5ojGaQ9MyU#Rw7xcDf5BlEAjoS za7$vte68tCx+I`PSy@rXg*4`Zem)(l1Z#_RXVdY|)e%BXB6Qajp3`uQo`F#{T+L$m zrFvIl`ez+Hi96k2Tem-B8myVHi`1L3IXF?qdJ$!9dY8#6cGaD;>|wf(k~CN{L{fX} zB55xo1O|FWW&6b0``Tc^D3q#%104oNT0APn?+C}`3}ADThEsquGR1twnf4xM$R}_k zWlo98Bz_dMMcHvMjAZAKQ)s`jT#XQ*)A^x+-|Bci${F&d{!0NgMfoB|l1XeK|B#~1 zIX4#X{U;8L+lw*j#>t7$R7EL`Xn{oBd6M||-3w|H#VlWrSK0k?=G_G4By%+hCCx4@ zuDTV88hGw+W6ku=RjOkKrzTBIOcJ;479h^S_+A;1*!_ujL=bG8viHF{DFai{y0yQ( zd_?ap828)p*s>FUcQGLqV;>K9A1ZTvgRA54J}RhMG*~C{F2j2A_Mh2~ynSxd!cS)0 ziQP3#tVPK$-(8vu6;abRfyzeO^U{wN+eDvIv39IkU*wZQG-e_gU6Da>+WNg0#5tOt z3+yVn%xPpcAn7edEe$jZ-9@r^^0_P|l%$D#?v2fZLPSW=?G3=dW`ECwQHTbADh)6Q z`ZNdZMxdGzFz!|sTO16G2{(Xed^8LVHiRo+jTBw=1DLxV*gM)9X<t2m7k0}+&xPfw zO-E7;Bps~?^#`RM<#sG{09(!gcWAiYuEb@S1#gWV2#^+)Pfk>|)KFb4zi)&5L>sNG zb<jrK9lNcdk~GRCrt$@0C~NY!aq08&{@m#=Q>bgf9xr+`XiAdC39RZvgE25nnm#DV z^xq0p69K|b>x0RG5dmel*M@o=KYRafP}4$w1f9f8qETB_FEF6R$1xtIf=ty}RVAJT zK+kw3!_Kd$ET~YvWt^=EVl3-#>c|EQaXP!Er|jbL1m&F71)4csN^Sy6YR!53(+cUU z^WqERa%VHdT>!-Iyt`zDPw4E}|I*i)7FgkGmLO`pV{)PRW}w;;AhnBXu#5Bz7lHQ1 z`~^z`+b-C!U<`UNpxh^ba^Eq8-KG5yOg(xLTMTcQD!gd>MKn?8qd~p^Kx|^o^#iz{ z4e!+3MdXeAOJPM_zf!aG@QbsJV8!tPuU*1)ig=ynw~b`9WXVEjqlE;6lQm>0`5k)B zz!^0Uk`8t^9x2z17HBd$(!*tko-2`c-D^!NNjuG2<$>QS6nah!C!GfX<Oq=7#YUJ6 zke(=zp1yVrke)gi<PkR*G*GP=IQa=Nx>n#F?oSkN7^DYEOtRW_pmo1jsN+<J_UZ&9 zle9bnr0w%y+<y!-^SRW$)2SXt!=P?e^RtM$Dw>tM%mB13)rVELC&N#7J~17s{mJzl z9i<}cBhQRc-bJw0PJxY)TeGtkJVh5sO53UPyxJo-Ajt64IdcZapI}}^Gs<j$w<*tn zO2eF>lZ^5{O<2a}I;hqX!;YsC)vPLKd}n%ZWOxL^J2e<H#B=FQ4G&jDK#7-u-ER|m zP2m;ErH&L@w$v!+?k6I91ami*hOSGVBz4@J1yg(xz(Qm7RROKQ`t!go;r`IZ2DXcH zz>J=FzHJCL2_vvce1GD6R_)P|BM2;T0c-v;AN;IZ=02yrTUF;DOW?2dO{24Nju3>< zj7fDStTF{C>_x83+}!qt@sdAWCn4H)W;hUaj@hUbrQwUuwD<|EZ4*351U%^N+ig?u zAQ*U1=HonJwMTbozTNwpIbhl|8BnFPw?=QAsH(eUB3zuFuE?h{Afyp}8kCVlbq@5H zs<*F!aWW%v)Og8>$cH;4b^iPF;7}X^=71$OZI0gq2lwNsX#w~94i@pPOYVn&<9r)D z@2?3JuvOdwSX2Dk2iiWb{(nF36Hi%Ybn;cVhaem!B)FMqUPfDm;;^%kTTnbTU55{t zed8jq5-(!-orFLcE%;a%0=C+}xma&Qi?WFC=E~ZSfHla=4`R3=e8hEoGM{$i7yvcU zf0ciUWMsZTPmT#V%*d?w3f%JH_<PS2;JbB~-@tt*hYa&bL)-v3FcAC|Fd%3D#}7d| z+#GZPMbX87`-|UyoOvpU8^W{^YvO!dET>C&rD8hI=YFT^euVc@q43lXVXBml&*UQv zc`M3psN_e0@BAC}2hZ@>+zR;Mhuz7xcm)S*q@fv%->k}0B<Ux_<{s*}dogtY_+mak zGqgXP*u+jHw=~ipFi<cJ`X7xBO?V8LZJ)%n<MT0;mvf1VKH!v|rtimvh;$V$sJd>y zO7mSS6u$f+g5Y<!@ynfe>(dJEi<T4hK~18bIH!!AmR_oaz&228WB{J+0mR0+FsCYA zlm`CgXX6EDti*C_9-4YB&omM3<`Nv7BS3IP9uPHVMIh5{#Hk@0RANTk!NX*X{i0UP zR1XG-JX1g&Ut5{jP9&+4_w!GblPMh_#4(VdjMKBgAjzM-2q|uhc9`!vf&rrs3MWJG zElCO<O|6|ua~qj?&Rj6qaix_S8^^tv{Kj*K1B9zQ@w_I^b#{&w6vf?AOx<1x$vxly z7^rhhpWC-d@_f3nFp^<tF#N#;B9||`jN1%N?A0{ijyNsY80bPk2|~Q7$!|1RX(;@E z)P?_&e%D*Z1aZ2Ro=V-LzAmn#9s~YRB&K$2_`0Iaz?Gk#!y=HV@^OT)z0E)~fB6_E zIN{}G92_a5tvb`@gEn$+mziGI>g;UQh!jYUWJx(AmS6Lfw3{E$`fX}&=W61t&uGP( zl!6#$@n?9^`|Z>blTv4{{2FDKvt}?et^v5874pWk9ZIRh1%Ab4EPYeC)9Zk-g0BGf z?sBAeH9qE*m|GUszqjqO?zh>R?ucA2l}k__(3^}>LI~~oJI|cj=<st}mWi{bU-`=s zipwhOZsu!l2&gL0GFdM=cQfSAmZ;>Z-170L<+7n`DZ2yiYt^_hUO8~M7dK;P!dzXI zqx~FEKBb;w0iO*?Da7Ea{QO6u@PUnXjl-yf;4X;DLWKOzYeGxeh!ek`zu&g}uh*%T zq@A@U{L+B}2bJo~(k67k4GX)S>Y}4M6LASM(8QC>(-6w;vTmvy3^MUPU`u%F+*{_9 z<UW4O?b{mUyCx&<8PSP#^dVeMSkhsj%q*wQmny$a(wfQ?IwoPhy(pI75~buMNF@`r zq%25{HHbu~vM}JPH+NYG75V8$3!ZWJUfU}vR_CVkTIo@UYE4hkHo?m}eZCpG<u+bv z)BHY5cj}c`e&qJJpCn|C=fJhe7+XS9deD<3Jm?TE;t=~NgpvTQRkrWTBvo%NkI0qb zkRv41Dr<}KPyytHo=!n$s+00IDO}2Xbz;6d)uE&{{juuGAVKne`{>@D{6;})DuKmc z2s({e{2}}cRlQtwbE&9T&N9PntL@N)(RG`qwxMFG7j<-J0E22Bmc6=XBNUebMZJkD z?_`+UlrxlDw09udWPB?fFjZlHf%7Kk##6o?-t}<rEwG`P<O3FgaTx7g7WPNId)o^e z<S@rW&ydCp9e}@<ACF!2pA3$h?uJmU-eA@zL;2rERxEP>uznkmtD?F=MLsCZ6J@vd z+gdzLs8y23nz$r;?{v33o^yQWGW_s9qWQzz%szy?;I=mY@vGZ@GMlc(Hryj-{$1n} z)C3B}ldhBRZYTRRD-=#g;lc=lKDQ%y6)r_VCV$0WvwDhzR(mc_?cwu&YOv%d_;;F2 ze}$-=0e(}{{_?>}_UI0)v;$pI-8~lH-p*q<(&g9w8=!3E9?q?SO)iZ7kY_7F1>c5h za;N%B4VT&R^rk~2dCYw;$_~4d9mmF79xq?9rL?;sO^yckvH{C)ip1rx+cX1U@pvUk zp_}FeEETq(zNdc{_&^X0Fm1R!#c4{Nh;R4|1LtpXcAuPD@mq;*$CMcXAnveR%I92w zBu%n!Hwsh}PH0-wuK`(}8Nj*fj&8RcCK8b#uyVl0MSB}Rx=~ZO?f2IfYdh0A%_nt~ zlXFM*)m81cn{gz?OZSq_R9mM8WdpicCw3MZv<!@uA!3Pl$hb~vx#s2u+-hciyjD|n z+1+@5TNAQpglw<#BOEV{#Ij0^?qEj<jc`G#=F)1UQ>wr0A_xp`g#%pDL}ph`f)|bC zDK$l$?q!W@Dei;_=GSg%tPRrKy91O8ERfB&&h;%S5NItaJ6s}sczDRI11z&$49VwS z(p3@Fcqt)P^TXD<*L7ZEsN}3n)OEQ$3I@lSJ+#Bh*A#2w$h}<TfxzSOMXNh$gZ|Ov zsYp3oTmEkM%Z%nvI3-1-TSu^zJGO1m6EFT4Y{eZJfpw(y>~)7ICCZmU2h<_U!Gg&q z-%xhJl(@8Yg`vLAfQspHZ=0@<Q$9)u4IO};9)@;Bh6=M0Pq&F1xF49_#q6z4$Ud;D zB;qV?EcS37>wa)AXV)BQs?YWvQzc+rMT6imfBEQM=->{KuW{ns%~Xd0i8XLaYg5^X z^Kq*8;s<%kPAU;is3ET0hS=?s#pN2q-lSS4dknlpCAm79d-lg*enRkI6?ZojTX(zy z_0@A$!EpHARCBkSiEsr7TL*uh2SHv0I0W@q3k)XH^z<KI!&Zc$otG{{a&x1X+JP~d zBo-sPPhVFJJ1n^8&OJNMQ|q_=N=y=S6%?{Y`_L%|BxCmaE2YYjE2O5TX^Wv}J=<f{ zj4QVVj^7Mr3kMY#n&i<v$Hn=?B0Cf+45PYLK2>Tr*L8C%y2^2Eg433#474+9?$o9{ z0NCeUI|QJ=15`RtjrC+E@N{r3!WrV3h4|cZ^P^|vugZ>Wh)H=2Z#XK>zm#(8X*9G; zi+LQ`ZxH@QNV5r0dlhxUy?$U>1W1%FQk{=BiSP&<Q5r6X^A#TVPPGun-DFp}N?8r{ zBW@zghkWs;lsrw5n=GI(@#rgdWml^AL{RAC^<O`ruxv+>6Q`8tXB=x6&{H}dFb_SL zO#t2NpOkHtUY~<3CfI@ROVPV()%S#0>8R1wEY-T>;{O(N-v7bSA2aIh1knB8{)V=# z|3Odh`XX56Uu&u*e8cho=>_nwi~s&XuLN|A`wT}lpFGfVe7pe~>pilFKIq}}3|!)8 z>GI|WGS&`W7q%RrpP%92Kg{bbR^~vly-hpigDnIvBV#=q_tpV61blVBn}K2C71Ey< z<QWdQ-Ty~?|1PP2Z500z*}n<#KO+0@b@LxB`}ei=pN07^Q=|63wq>H=9Blh+@#%d{ z0c_Wzqs#8he&a2k6h0Xl8RC06)tyQ9=$EzI0$mlCL1d2T*W<q+%+FH>AXdu{;p9`x z!)2}E`X)}LO9<HHvz+1%MYp~Op*+!igr&;4^2Y#iIhwvFp!SMUjn368HENX%|D%EX zm!*>~SIeHwyV_rlHFjvG$BjvvBNk%3mrH}z06>?-T1F|8CgNrN_mn+0R>s7zxJP5k z^~opQU(Fep+w;SRmc)EqtH-Mxny@DR;<Pw83U$@uaneTb^kWcH<H^@iswNb|0gvi> z*_d_fpnYq8Q!tPDTNGwv%6&RNnktkBK(B2-8iw$zcP_N2Qr!Hr6W56Vx9{5Qm2So+ z(vU<2KF^Q%(K|I#_Isz(>(Vt=_~>Ot&&7Db&J;7g?NN7l9pN9Gums(YLx(2l4{e1- z$_-z2uH4)*3?Of=pOs$@z;aZ;G05&zn{C^XJSS71-KJeHLB(f=%IkA23D1BB=9l!e z=Lj)L2^=f_Ga4s&O&VQv9HT=bFI24TB~Be~IddGo*Q4RHlPEEGjWr+}ojnCAA0h$y zL>|w>(=6Gcc+uX$rey_Zf2wIe<1pbTUTLkd_wfY&5Ru%BksW+gyMxVB(g;1aY`M3= z{utY4v^GXqih*DATw<hmwY;)_;6^K*s8)QqK2*^2(Ne**fX^WiA=Ri>-TUs}RCLQ} z7qoqOA6m$+ymK3gm#eGuc(yXSV0mbQ=Ij2*NIDHsT^p1qg;`o+bBqetcx0n!r+P*y ztq8kKM^bsNtCFr>(oQ&q>eN`E;BlREo1RO9B3Kiz<%+d*TnkPh;5=Wuk{mcooP);< zVWqr3N?cpl%5OfMf#L)xOY`WN9gQubFJL(cmyP>o=Zq6Ht7V;tzIl{QE4K})mX@}q z)0$_H_s{qac1tNaG=KwId0+fd%OjkO*!z5<f))Th;MG|#b`{XAsGCt1cvPq)EmqS$ zy&(o3nFj^SWh0Goa=YrI8`UGzUYKeb>OxoH%^H$@L*~fX_Mk_Q5)Lt)JO3e)aoh_R ztuZFxw=pU8WVI_ZH(T7idNPFX&z77#lOi=ar^Eau0jhi3*@;dkGE(-YPZi8L7n*I6 zO8SBK6yVx6X~aQNN4W1VPh}5r_JSbw2=KH{`#sUUjUjeauK`Et*Cc^GO7)uT*ivgZ z+5=y)GAuTQ&X#CL^?&jYl_%5`e+H4c-P(Wf=sqeiCHOPCCOq_^<YpD^=6|5dL&>D+ zlTnd{)6Ff}R93`(e$m|$7n~}E(g=AK7eMGb^f)a>|CN?x?Rm)&3Vx*d++iCFXBc#e zyzF8Xv@AQs*`xB=Pd0KREiMUO;{ssuOLjn;`tARWA&5>=Aca2Yznx5U-R>VSkDiWJ z5;ZQj<2TD&KBMBd*_Mw7?x7>9ztT<CcPF%kDlKSXnj<~3(3j=D(Sbd+lC0vsvwFN6 zWF&3DDN!M8`~u6vr9Y6qzdU5?T2v35RmOyyw1qky1rg~`*l$CyP4v|ts;h>Z1~jyX zk7B{xiY_i%w}{K(jvJUFZ-9b6om=Fjy?7AUGxu4DG4!hSASz1M?V#l+HCz6~#OQ|! zQaAce$@n_f$gZ|uLdp5I#e?Gs#EI@0@|csGlk8ouxn$2U5P6X{$@Vf<{pS5n()rAE zb986=t2za$&t(&WSL62wyTsl|`2J#?<zk=R8XyY!_`PCBqhHAwz=fPER$dKmD~0}Q z0+ASZ1ob<i$+?=4>>pP(l}5|b9suU=vjkbQ2M)jkYHgLL<d!k<Ol9F!W6yfU-Kb>t zIs7Wfy<Lh@U0lt~%X%eDp*$;7b@4B(5-#elzYbEM+K^3Qx4t)_O)vvEU#>mcGE&As z(p-1YXJ-<_c?h_bA&t|~kkg@7_>FWr`ACVn2~u&<X0Vbbl|r8CP(tz?7WCCa;+Gs* z=2<0bF5sxkkps;E6e7aZeVJ`{Z3~W*IHt4|I6qwK(ASZ|Z(#1>KkC=%wEL{b$)vn} z1TkP%&YAE!U>vzW<~EnS-KGmNAqUQFxL8*Xy({l-;<s^r&r!=1PqtG9nyR8ZCB2;q z8KmB0z>vI#uV;h`yoAb;pCXVAn^Qfl`Nk7vU{G*3tfa(u4N6@KYJY{Y-{_0aeHU5f zWJoOckmVve<kw1d)|TVkyuQ3?27P~`L4vKxGQjUz8O|9WpUhOLqq^C7rHedISuPtB z?NGqKCykfn5z0MBL_CLf`P}Blw&w<-1Y~3dKPdaQ4SLU_s1cNGq=YPW(O}9Qh3DBG zC8`M+x>Rp+8&!;otOTsS@t&C(n6(Q%bdZUn5jAM>GC)k3B&ckUmaA1i9CFBKBi%da zigt`k_G;7Qf_wCPu;x^ncn@NzfI{O;*_}0UX^GaBuQc467h)}Q==t(vclQ{-V&lZu z7t>XE=Lojq<85{<^Cj@XhmZDg)VlYA0`7g=>kBABpN&Eg%Kdms_3@vhZY^eRO;#9D zQvtvMu{nCGz(m$#<GZ8r0!}j<oBOz40QbrS8K8;G^ZvyD5ATqwRt$3QB&dn*q|2vV zU_cy)0aj?gyu{Pt-!n%GB1b9gt$GvN%Y`BtouhI+xWAhREXUADD5(;O<31q8z^XS= zc(VoZ%moI6mZ`38fY2m_C7xY%RmsRu`9g~K)DNZ=5l%fTJUw-{yQO$DxI7v%?xlGz zMOk4HkH5EXO1BP3DSxkBYIhhDKu&)!cI+vB`3;uYJf5xsmaXqL`yr$85`0*mvOa)m zxfo|!SP=aq-^8gOHdUl0X}g{Rau^6s!bh*eE#T1ftDQ2-Bjw?dvf}_C%<MUmCttp? zs&pI9f<(1SU@oQj?tSo{ZZ9vQ+add`+&Rpz<QZmXbU&%As;a7Dp}hQw&`aS)P{Yrm z;_KPjs-rZMF~o_*&`5Q&E&mG(FHT4K(v3l-eO2+>2#b_8h2()OhWEtRQ0~fCRSKI@ zRzFLkYYB04@V;M_&STY0tDl6XQA1%k0@5a*W`CMf{8o4&ij;WywMM~T4rJ%r{#iGY zn<jWOl~V!x`w;NT$kVwaB~hA14=^+oneJbA2{1)?H{EAJj8K(-z|_yuv25Xz+pjmF zjkGAVtjuQTRD1cj{rWD;kpnH+su9y~2G4f!xas0PfUT)WXa9H63!|0pOQiz>Ya@xy zW)lgUSTjj9I=jdt6fQQNnEsa1qDzf{Vv6n@J*{}<4>n#s<pJ*uk8JD%6N5ya+*+(L zk+HN@5+@8g;&SE|cmJ^COX$Duu$43DJd$hq?XNp)-&iG|IDJSgb?CgE8V>i_jfuZ* zqm6XhgC(;G1G}_5)fwQEV`!aW#Y#(d%d*s<civH;=>aBow%%JxxSoFs-gJFFG!aYp zg{`$Lkj{GuNv%`)TNV7+!-y8k{W`35keUJwhJuJkqUVFV2mUPR)kzLIgHf^GNB^)i zK`h33_?F1uj_UVQM77oEOx^PDy*PLdyJ%4&J08F{IB2Rf<w5kRsrDM%r2{rLkd^HP z!I*Tj_a_e8{{U|s1a`Q#e@g#-Q0(_p{v))16XSn`_J8Q-e>Cmi7wmtQ=f6wi?El|3 z4dh4&tL@8{Aj;B)>O;e_D;8gcrvfLgaC;mVC7U}UJ@#B9tsmCk{pn`trGR08;OFmx zdYu15WB=bc<|;-ldzY1aZs)rY`%8-kjb`8o^8tQ!WdDGnjJ~m5)1Vhh#WK#U?sTXi z<wd-VgFYq9scc;FnDQf>kH9v{1_c~AoKH&8x3BMi=sre~k4ex9Ee_scb{P|#7+rbE zG@?(%q#UMIPzuoRNX1~^KJ#?GyIYEH$gjzYhZ`IWJ6hqrHe--#vMmANhUYG2<8*Io zUYV@tkVif(5TLodG_*@G^P(1dqy7O(a@ZPwGy+G3))J3vo;mSi+(**fXQqGZ-7K~< zvJ<4t3@w7|-0-<xjWk4dF7(W6l%TxpBU87ge9NB3A8S}8!tB0KNOV*}g1*~Qp=Jx# z#3^ODyklFAydL+;WBA-ZymLBJf)&d=JY}2c$mz0wN*3{_>9fg7qlpn3!Z-u#hq*OQ z9-h-lNrsY@eSY=<9Ie+YZl{+3ScJOU-ON)Za5x+{pJR6Lrp#e`_fg@Y2^ud1YZ8!5 zOIGFwXmexhHn%={2YfFWB%3HT1)u^%I`(JsKdYLYtXL}>w$E;=v_Wy3ReMH)>>!ud zsHg6z=l+<KjkcMo|7NMwqk4g%`AIG!8Fc77>q(mRjC3hKIL|@PKs<8Aldh(DF}rDO zdsJ}5x%QU%<{e>_Iij(d&xr$+I+&a#L3!>aNGqiHQ<?@Jhqph*hF&L<haJf{{alkd z3s>F;qv=i~2#jURv9+&<1-bF1fY5j#*kEM=&qVx4GiU~3pKyBDY0aa^07HaFZ~6cs zS>8?E^yv?-LQ0iG%j%odb@EIc;iMO7a=hkMq$&oPQ`yYBHV>!73Puaaq`UQR9gJ7h z9;pU39ShXm*>@Ycu0s{`9JQ#P2O)@iDAna@39;B{L5Rdk4KamOk(Vc-Z{iU%<+gVI zAJU*_yS~&vK3osQ?qR;oQTK6~t?3@)9s~T-TO))vEq2BE>a`4r%88Sg?p+?Q>M(X_ z^xq!mcEQM8Rz*Si#=NVyQ*b=&UW0DY|5Yz>(6Wy=`1pn1)wi#=lO((~V$-?P!0%<_ zKtIq@zC9}59G%Fqx#>RT7s`JsS<y2B5Me>m-S65;6@DBfcD2U8nR)J6BglA@mNj9L z<2bhxAY&dhGeMV_?h4SseTQIcrTOD0c+6crNqbc1Fszd?NYtwcW+PVI*BWstul!d0 z&jNxH7YIhvqOq*fMOA3DAvRUB^R~m`f8a-{J-QL}_Asq3^c5=QnTF{`cJVYdukM0I zB=5=T=E&B76hF%D<M1la1zrR5-Rvnhiww7+>zyQ}4%NBm-$YRVU?;n7e?*&fBHj7; z17^p@Fr^MPRLX1bg&Bi{oYb44$A)fCK&M{{r@R`j8oreO;P%I~BQ(^nXO-H;3IQhh z0W3N4u8tMe!BNrXptNMy2^!1G`3PKtk6F4LVB*SK{hEI-T)-7xe5jx2{0~OqG78)Y zflc}I@9zX=Fz77{bD-AG?579c?L9~)o2okK96af2cR&Hv#Tgi=O+HAnKZVcINuWxF z52lrT`~m>|+jVr(L0Se1SAgRZ*E#&|;2rP&L*PW*@quX{ER6Ld%z>>o%XbbMJ*X$j z0+RhwLnFl=FgCSa;A+eiZ(TT07R>MUfMg$<$NWR4907!}Zsd33V9DMU1(FrX|9P+- zyRQm_v74jv@_^BUuP$-{$-Xz3`3GVAN6r4*Rr-&b{o4lgA2s`L#ZdcSTQl1&x*Za+ z<5i4-dF2ipI75mDQ#Fw^<)*9TzrPWwi`;q#j&Bo5$;(4Wg-a;QVU28(9~(_4dpeCY zrSYHyL7}*_De2`t$bW=`7%pdkaj89*6Ue2k3#(uXasloO9@8N$0W6l3;2-@hHl?&* z--P=Z&yMm!hH&G!ANzMgRvy}TqUIlxxL01OW#6i-$a2v2_5%b}Zk<gti`^@$<XecH z$())T&>*2Z*RQ-{L2iIEe|JqsC-TV2OPtX*h^s<%RYR9(A<oER<XUSDNok+J5BOEu z5&TMJ-e%LuoOyZ0E5_YfmKpJ~PR6DntlOQ|`rKj_Lfv&VMb7l^=5CMso9GQlGv-Rx z?tm`MM7}>^9yg69PY;;;{U$7)_s3-C?Z8MgfDI48fW%7eT-mpayK^OWy3>atq&tW; zR=$?kpBf$$+vUVka3D7`J!l!-#<0dUO-n$>@_5!2tc6Gs8$PV1L1m+Qb(9o36!%jJ z=JEtu1=|7UF#LSMAiXP#3w3SddXvpc@pj4@t!V}*R{v#1);AZC9a(B6nqIfui<sI3 z3Dnyq_G6+U$M`<Ly+A^JZq9SuZ66Rz@5-uscGBXCre0%_O@0Z(r>|XLg_jRrp}5Y~ zHuZv}kL8AOp23>@G63pqYbdHRj~r!oU~M!24(PaAl4OsX)v4AdymQSYdWw?SomzB% z@45W+#=D}AKK24<sS|^!KY5`wD*zKC_u0ZqvF2h?%Ig#IGkwM3+iA(P%#>h1qHi0+ zLvsl=1<82jIic2Mhav*<D^ncsl9mMR{(Nd?HdZqre=r`XSEqq<Wsk)^Z_=8uWve)b z+iAEY>VZ&8W6p=-&wc~W-F5!e^JCctef`+xf$}j?m!9J|h$<*lG;$mdq_4ik`%-Cs zY<nH$R6c$lZI7OI0nAc(FV&s=xS=y2el$>y{L^6S%e&}k{eD4cH)5<buBmOwN0Z-Q zU4Ra<Q!gZi{I)|HcOg`oC=)j@;hlGt-d%!r92!BR6Dp__NE3*jgWl0zs6nea{_ufP z`~Ip5l;<CH6yGy$zY3*f`0Pl_^te~UOMqg#AUPe!W3Jli0p(X-owz9_&3D>VE<-i1 za<9in0%Rg}9jiBI3x^Eq-pAz^{S=k5?fU4G=XN!}-q<1cv`g*gR!uOGU%X9*I5zeA z05z(Ac#ft-4>LP8=8;zKB&|{n94y=7rMiJ%G@k<9SAMz??>!5rzEoPNlGHc13tk!p zU6CyJ7+l|F+-pzw6^M%)7#L_t8m^jhOT-dG3aOONfXC4)Tj4Y!cwI5Bd^)1IBbo>9 zErpR|YEN`r5BC1mjrrwpc;JbUJ<1nt@$Bj3*U&RH0VE=dDiKxYzy2d*I#P~Ty$O}P zk@_vo=PJ+*_Q=#I1u1L5hPa|bzb@?Lw_IwoREF2yz1XR`t#0}Odb4&w^>BxKt4ki$ zL)CciIjiJ{jM1+xtY=oo$Wu*m<}dwLD)WDY|8aCsNRnFey5dJ7*FllnOxK|3kZy_D zI9jTSRtq5;?1q=$eSdwr4TXBgRNw$A(9EMpTrk(i5#)CHM^t}Hz}>K2zavsIW*3@2 z2LT0-5#ZoDu4v3oaHpJ4XP#2Pb-<+0(FKJc<GU0Z+cne$se;3Kq3ETo*5BXO)sq|d z-C8>Czb}ExUD)4#>=t^AAN**m35C|sVt^z;r<I?~hwW^}@HDNrO2TXAdOd*~0}9I4 z^h??`Zsiy5p?7B-@+z$n3*qp#fV!O~$;P%T_g4lB8!})s2%(@}ZHSocxNXDjRKy(a zp^@UY+vF-~K<S_`cR|S!=~m{6zt-a*5N;*w-t*hby>dNOm6Ek2V}#|t(=<pwT#=Bc z=EN)eJT>)Ph=J}UyUqGYxlYuRM#1)g3ZTq4z9V*SVof9^>gJPtRz`kl!G8|0X$M=j zXoopa2u1P}^$pY8<zrkKq@}+M?V7lzTa7Xi#9Xg7cer9aVA@2SQoTl_=y-1p&8-ua ztUtN2d;}Df#~oDcM6xP5_07-Cq2XGH@=A-_o}IAfbZIzGrgz=*43w{8PbVnaIc`?{ z>_;bMz2<s&kPA7fa%~Uq@@MEVhKb#I)y>sd6PM^#$?CJ7gKMeXb-{cOhum6Fdh#0w zCF34_IB6Suy#CHI;9y5kDcfoDL)kV_@}8rAA@p1oD`tliry2!Oydw9U?3Lz{dZ$*Z zUD^Xc0dza!na!kpvO`Vj&vXyfnfE8B%0>ts;Xs4GAr==vdyqy5WlayU`Zd&TGhZ?a z6faHXRj)W99Neft>v+VhbsuhbVn?ASimFrlEls0)m4(}?hg-(?1>Q#Lk6*R7S526$ zlwb`G@FF@54L239<3TBn;O3^sF6A?ccXioualwXilE%+Y_8htnSn}^9Jt>#Zn7{Xp z-E`>P=l~3S_ayhN54T=PZ@P<K-*kV|cmT1z{@UfPD?)*Uisf{~81C10xZ~Z~l2V5e z3F;^yWc)$}!%ItxEm8jL5@)PGjS)V3q<SE|Myx`YOkv8a8Je#K+J0b9NjTylQ+`sy zCc-;wEh%9HeqS|2JX78Nve#`XQ%dj6=;m?1<u{SHDJE`_xNo(=ozhmDq1SDi^-WwJ zTz+NI5Yhzdyr#Mc{G28(o24~1px93en12Kn)FDOtQFk8I;WBhk@iNtA-UOSm)7L#6 z5f;;I5d3oMhJUbK3abO<QiS@@HMZ&21N@;Yy$tQw7<MR!1z$qOsrM<wsc=b~Uf%L( zQ26jG)wLHXDwaf@284zQ^4?~6YLudKtVy2NGs1Z8j&3jdlD#pEC%U)Nd?<73nNz~B z&raAIkS;_*I<>?iK*#@D&839H-;cvb5WOI{LsT9}dr>F0@p2hcXIAn<<Aj_!UM|^h zLMOVpL&*shT-UoUlEykoFu+t9m2_a&YatGPycRWIL-0*~BE64EgTHG_7O*;FTVr1N znJI)IT7`n_#b+6$anPq$s;8>HESTqZkc%;KpbEq4GJE&$0Y*@o$wwm%IvjF8xv~dP z?au5kUq74TGmC5TaDfL9a|a#jSEN=q<!EjGCGGP{dR`T_>;GTuy=PRD>((}k$db4$ zm?Z*AQ?MZdvJ~kA8>oPQh$vkU>AfZpA~uwgEJccR=}Hr&LkJ=e1tCJ{EkJ0Yg^+|m zLdbWs&N<`kbH?6lf8YPtG5o<p$#b_kuX)XD&O1dEvq$s!ugVYpO3n+v^JrTby@|X} zRW#5Co=`o(mZ!hQC)%<X)Yb&`o4viN|J<+6m^)j}%?zQ4*m2y7%4R--MDW{cYJ;F7 z)myblmQ#w-7AJ8#ZA~*`)k+FIlP2LA9#?6<j(u~OY~D><@;EZ92{O5RB`?bCTCA~3 zU5_&Z?Gr4}k<uIPw8M02(GbqAsAk5E#=>d8%a|XkFi7=j5^|jSZfa^{cE~l2>>W;C zP)0E3JdP}h&frFAry!|8?E4u$eRBVKW_IwmCv4Mb+o*S2yt7zNSIx3Xsq`IXs<t2p z@B9$83Gq^d12=|G>LO1TP^JG6l=$SW6SY=J;vL)CAfTpUbbmVpZ3Etgxupf)GLsG+ zDReINI75-oM)oD_K?PphT=GU?sz`9vlG@3p>WNx;^7s{W)Zkzb(Y0<N9o9-T)=o1% zYy%1_0j~?ZE@*)Bd(}tRL;8~b4%W!tmci3x_sJDml$if#CaT}spIJTM-|s9NQb?Y4 zPD{p|ZQv|($T39Ys5oN{<xbrAWVH@wEG3L$u&3O&r2&~`ezAq=lxQP4%Ucy4giK9; zc?|ag)rW}foHQP^K$wiYe-C@R@+7Udf8<jm_xFD$L_U4ukCx<PQAx115y$>@f<FO& zDADd9s35c+9~9Ewysnl0{4-2*1OHl&*s#)MKx>mPRrDEkR#2N=1Y17M7{(n5S>BkX zyX_K^k~p=sUS2&lY4>P?{=j!5-ePvz{|oc!9y7htjOU+R!Qm@i_pf}kf@EnQaJ3ne zMQbUR)UAD1TV1&Vs{90<i1+n3H<VBv4W!a6JKQ01lB03V9o{<_ObOg$&=bP!?I(kp zpZ5HQboJ1?w$2m%pgYoJ@`6{Ca|TlJq+yaU=yDMQO5;j>G=Kz5WH#L&5z~<u7Y^1t zYWlxOqCl;(`6yzoeX^rvcw1mv5m-UL^QN!E$m$4XIK+K^sCBk#G$>{BT<jz_r`TxW zVj1YX5B5}fxAtdB#=_@WW8f4ctnS(&nI7z!_ZyJ$r~BDno6`gg9zgHah3@3~w7P(f zyr=2)jY!v<l*8vAH3O!aSGBhC67(IZaBTkmdhp0sv*>>B&F8V?-m^c)Kwy&XIehW{ zFHTt8u@KselR@A(ysLU}>mswf*y(SMvGQ(!IW7O3o0h^+8zwF<j}F?${pST&xU`)F zNm#j79-%7-SgBkS^HcvhkkS1h@X^4$4Drt-l5Qpl5yw{%p-2AnU)qMbH%|ge>Tq$? zKmRooTR=&{vD({J)&DS%6We58%-xoM_!01})1`o)s~=0(`zLx1FrR?zGtet^_@@s9 z1^yO*pR@Hg{wD$#s1JUCX+4o`uKbU$FVH3rCZn_}|GzMw54V}mu8;pkqcFYA&-D)z z|MR+UPm{@?U}k@~m>d4{WUK-jxP4*C^}o#QJ20~k%g_81Mg@}r2Q=_BbM3-^nOQ?H zvwvD1`Ug)B*rfm2X8*!6|Iar2*U9*wZTA0K%l{*5Mx7*rrYa(!_0(A@RCgyp9*2O| z*djX7qimx;%PhaMh1{y?4vN^fv(*5~a9SUwgy+)a{<$#V>@@$OgM1bi=GRjCJY|sK zBMF`TJw0I~6k`P{XzY<1GU;2^eN!GeUqN}Y4Sm-Jkp0hVgSMi>gH~VB>QYM3hwk2+ z08Mods?}9~zBM3EPrY;dU7Y5_>hp0~hU|!oLs{Wj-G2_K?HJ;}80Qml_peKLbW8Yu ze_|AUw30uzTkSDKCTdhBb3E<*=+vWIXX0-<rH5kc2IAvxI_1Cc|JYfA=%ZS&_J(F) z`{8RJRBJXeD(<qUc|p$X1>EMB_VDl(!SsX%R%m+i-D2zb2G$2sycDk*za~AItF*Df zcn=G+i#h<e2aU`FYnLihh|l+kb}!hmk|&uvS+svN))BAdOj7vP^}`tyidhER1+nCA zr!p5G(q@)!?Sbm|#vy+#U4i?3eezsAfLkJ*?Go7?z7ATjhBNf_MfiBD3!tIM;z0Zu zFBF$1ayBVr8OMuYv}vN$x&4U^XVTOHWja8;3wC@12D$<b<Csw;n?LDxskhR!-s!9h zQWf-|!9hWJtIl6H;jV3OT`6BOxM8)_1`bhH%6IrsDNEoV-PS=fd&KBiUtGp!4x_Tl z*kG2Bfh$^o@%&+CS~|Xy%}#`>g{SKNGgF^f@vft_f$DSI4*@fauNYYwsPI}&I;Xql zyt8~Aa&x_mK_rAeKr|i9_{(;)Ni+x4dPBJ!;|z6KqqK`Buv9G0MvFC-ALh&+CU9+d zLBap%+mfpJ!KE0Wf641`W=E+3kR2N&>mVP^YxKm2Zv^6!gO*3$<$I(jhfnV-HNtQc z@Kc^d;>0&?%0BN+W;wh);WG0+fnCNR6X1Hu+U`Lbf$Tf%M!~Jq++I6W?QN|*{jDCm zO>>@({M{l$0}W9YOpyvW*+5DlF3j1o?vc6jiPfh<UN>-?Y}I^XzOiWCh%ZNy(rJOc zP<*fKY?_9@29lADy4z4*%^jDnR|4GU32v(usf)Lnud|U)k>%0J6h~>!Ri6KJT9O8v zxe?|&Ms&WF%cC3f-h|Ujf)i4d>bSq88(>JXcyPWdc0*M$RL2JSV!;6?gqmZ~A*6<g zVWrRw_wK|knn5B~XN+hQj6I=EAA|)C(xv_-8S^i8^Zzy)=V-qrgYL*S!CXDW&nm4m z$c=V80~C`&$ZLUn4zaeDZLY0zo@8(-jAwXMD4RhF(?O04>7>s5OiLTvT2mGMtV#;= zM{Lp4Q!2ei)5BTXxQtpM$y-YBAE+Dc2?})|H<xWfyT4>GvlBgmpgvqC4Hm4(l%g!5 z!pBD7lu>GUs3q3TiQSId@?hul=t>l{rk4Rw7n6j$=(9@Ky}7ZfQy=0)^NqRF`9vIY zNt}|8TE%nhq=Q8it^XpmXSJuNsJq{#Z8{mx2!e3-7B$>Lhcq8giOXQO2N1AAIr-rP zv+g~1>tA*TD@frsI=mIEZD~=7`)j#w#yTsFGv!Y7K98Pv1a<iq&Uz(Yr;>LnFAgp8 zzWyJfW8>5xVob>RZ+k>?QoP6h(&6@_QpT8?R0YNsO?pcXJ2{Q}tFPEDak-k?7qGlI z$cW%=ebwrqy<-T$!R@r8$=@dAD9RZ4oiZM0j3?-7AO+p5A)t<FZ_zLY&S&y;x4uiG zw6HTON(Kx4rN*FVoB`+nVL;lD#2E87r%Utnryf^%7$fI{bJf+~BB$lSM`5XBlawow zwL}!#*jTBrgIhvncV3V+PTXv>m|kM7dE)5iO2*)K%-XK(U04fEXOFrrkEl~xa4T(D zcC<;-R&iCHbjT1ZhlQo?w2)X>Ag!|)m839>{h5h5ohRT7zcsO&942YK!=apU3bt{o zWtlfomyv3_Icac=&g-}oTn;W-%v)Z*(t_muqb|zc4-$hASg8tMs1m-7O4Hv;SRzpy zG_|R}DgBfUt;!>W&Cp%hF^4Gx9olOKx{7Cs=#iB+HM9zwm~0WgM0-vbB~qtef1&cQ z!MV;_<VYfJv)!WmwXF8^`;uyI6N!h^2%Rxx4{Ci@vosXcRxnoJMhJzie@03(ziURB zesx+G7l(1GknR&YYgW=}QobBd<S_2=R_hvWV{w-J=;~4zX5K22WnLQQilBy$-QOGu z8di|g+ly!PJ*_}(;p}eNZM5~XFFIksMNoNQ=k2RpFwcno@F`=Bi<Hf>V}I_?u|u|7 zMI$ZF;@GF>3#ESU`bRA6rf_baFC=KcLU!7Z>@Y$1jExjRo&|2kV)gWhAW@;p!!USk zqni;4=MKAsvX+dL)(7pb+igz5a?vf(-Nw8gOg;w1_~z<5+x>NaFK@&d#%f_GV8S0l zi&_JIDJuj>6qa=)pVzec`QFV@Gw`GL5((JroWnIFi{Y{LWVtI6?=&?rTd{rqQ`dQf z&dA_gaEExQSnf#3&($rA4w*vH#?e!zzX@l55Ry_G;DsCymbr(ad;)!yPD@(${6D<_ zmag0COxT_G94dgV9vu5Feq1+GTVU7L;a(|h_Z~0-)^eG)Hm;M0`2~i|bg^!Pg)EDI z|M0SXkLy5x!y5DQ>J4K=7|x|=f)lNTx?x%2XKq<uAnQ5$Sphp!QECihd?VaK@mO{@ z+v#&X74H3c_wrfIKjJ9G-Z*(}jyf!EjFDF*Li`i9#KBeZ?mZpd_!X)1CeJYKjV*oN zBBwJqO)l@b)WCA*SN9k#FKgp<8Ya}EY#6t-&`;bc<Z-65^j<?fFV{G1lFX*!(~@d6 z`WOmU<c4Yg=_M>{%x(m^U`4%&V;Fd!4!2#4>dzq|W<$Ga2l4Hrign!g(why8-qLXG z$bJrSYp2Zz+0wLn*~nHQkD=7H>DiLrgtPbGq^}_@ECZ!=-dyw;F{$57+!{`^*q2!v zxcRCQ*^z8cd5x*oE=|$$&cdotBl#kBpY#EZi~>NfwEE*s?{=?s)&mXX$>hffm9CNk z))o87-wP}bvW5`O|Mua*EA~A*eEQ#)^rZFoaevI}oYLk-hM&`3_9dl{F^9d4NE|FF zZ9hxm7WL=Cc=%#ADk*(s9WNTOGNe*SY}q49jNl4(6SSzOi26LnQ;IqP{wT_a*#*Dj zU2c?8d1roYZ7t6TI7Q>I+qO#U42m%EvXF<}dXp$8KXD6vN?T4am#554%-~RZLUUA? zhOnC4(OKL*2HA!hW`*dEOTWk94idszogxQo{DYzAcs<72s-wPmNs6a8x3|3#lq)xp zm}ykdC2VODt3%t3F_zxQ7Rq65E^8hMUcljkI+Dwem-09;-V~XlO@-Tq!&0I=35Xd? z4km2Mk;2=eClc*YGyaqaK~)y+(RdnZy~6GWDXw2bahS*3NwP5ff>kMv-SmVfFR0<S zQO^Zg!3oQob-`348=J^(Bk}&+L-K~Nm(GKplbqjwrl=})bS?}?|M+q<Rn0dGsrk`a z0Ah&P!F20J3Gf{#h<%JOPcg{N7C4Coi$sC(^Fey_bg>^ha=W{3oB;=4ZNzqc(jo`) z1f1v$Bkypc(jl|Mxat0}*PsMDerz+LDwm8m&QWckRZyNvhk4i1S{J(O#<-#Iwz=~g zv`Em3O0%1=$w1wbX8+<4g<xQXX6cO1vi&O+L!jw6Cdy`O#+$eG*{1zQhLDt2k}dB= zm9YCt!xl3*FA=wSZ9}>{)ZY$OHUP_u3CG*u;$}KhQo^U1rMHw26MMR6w@Rq@M9oO1 zV{0kYpS+duKe@Bgyt06P&9OJ%zLiW?#1fA*A8GAclUDm{Y^BxC_zRuUO|vDfyyzD( zQ^w7A_KOY+Zq3#ZkU<ll0qiRGCATtG6S1eaA;*pL{`WYYBsNp#EN>-}rxrPp62<zp z&h`tSPNb(ZY9t==dhHmokGDE`)K@KDs5NKQ>$}C4?`&zScBk|3=!Hz??!~raD<w9e z#Cdc1+xV>K_W)}ARmo4EB@oVw{3M|6N*L$U6VtZoi1Nb6h~5$lJsjkK*y&8$eZl~@ zM+6-*DIH?A&4G&Uoxk-IM#xAVbdipblT7PRd`Bq=Rq=2AdBJ&kM527n+PA1?V*}i( zke4oDx!(g|KI3RnrCZRU%B+qI+|jg-2zu|<4(yjNU&NdO6-(1J??t;7Icm%m8cl1h zsQ5Ox;L(zj)gO4YQ(OJg`AS>gcsDXOev<NnaSNU;Jp<mzVH;OBTmN+yiWl6S^?VNz z81m-~B#G5?0frF>1)Dl)Ycnq6j4cl2GG#`%Efx(IpD$E}wL5lOG_3Zv>%HP)cw6b^ zkCx^c33fPnBt;t6gR%`~3taTNXYq{38sq3{1aEDc-<KL%jTK(dO@x`{8!F^U6O41@ zNMXGu{jVD4Z+HORitcmW7=HAJ%tS>S%bu(#8&8nwZ>$EUh1^D+5`gTzqKiGUE5T;> z0Wk}((XBVqQu!htKng6rHGY<lQ2xWkjZaGtnSLPue$vh{0OqD%+u)<*vUy;^mr-^= zuX(d-#Ls_zS;xBQ{%~(^8hH8AHE-#*G{~F8vy`)XkA$3fKPm}8vO$zxt}ed!6hWWy zv_NwB#|yg$z?+EeZZ0}lCgl@$|4d(0|Mq&9@Xwpq*&gPCMx2@8n3*&?0xx3@yiC7* zHt5;9SJ<R<S5%0h{U+e1$f$jc%ocv-UVp=DU2*zdps=o<=Rw=74eZYca@2E}1F&IU z7+G?MPxcEC^Ojp4)nn^vM;$(Yq~9BJ_$(qc)a>Uy<v=&HyWTELE8j3+f2+Y~epUKZ zrEkx_8`$4D2Za2;eR$B)p8YI5cx)s`w3?E~Y!M!srC$KIZYs$2@w5j53w$U)+%Mx* z;}Xs;e|J}_dc>yPK<(f=aP-{6h<h^ct)s@9Uma`_wV0U-oX&3fd7w)MqL?9{z9J3w zcFa@o4*TbB-FV#iQlO_0S_X&i;3pr=w2j?aYxc*{b24C|u6o#BwYLUbCAn!irr zO1N`p^1D3al!WDm*)5qnHMAEC-9z<?s}t$6++*!O;_``2&-Vy47B?J48$WI||IH!x zEhIczDd+6{+c7J#T@84Qw2~gbaeLrd%NU4G;QU*@^^b2Zg7t9Q!Ti|U1bzwBa`qHH zx}gD5m&GC`rIred>!3{40IW<x4*7tX<_`LGbXvvv3X`LK44_`RmHeh(2OXq^Nl#Jn z*V71F?|xYu8N95>p8(1bn5^S@&(ZzcETx!y1O(xjJX;+r;?A+H_IWQhZFP$(vCym^ z{kqX9+Vy=qv}xMk3((HLZh}{duSJ9Iu;;<?e&nVB8fF)R{b2cFVF0|!HWbOrbA*aX z?~r|r$B*7mIey^lj~7hUnFGN=zRl;IJM%cw1F36NSkm3IK+t?78Tu(;nv#*IV3nNz zWGt;S1NYar_&Dx+-?-YTbK9?W=jhhth?>!@m_?g6`kS3;npNOcLmgAJLxYqjRr}6i zl&Y>`<#AKp)fwBAic2LhN*<<o(2&#|?Bc?Ql8K;+@16pS4v|1D(3|u`rftQ|KHuFj z*vHUDNAKkrqd#7n;(|xQ4bl|@Z`QIJj9lpnk+%iTh+iDJ7n8TJy!?ZxNgxnx*h$pk z;7m16+aY;&C=^w&J#Q|#x;^hekM&96w6wGj+1c3zW>AQJf%pQumE91_bQ!CMw`?gN zDhClzMA;uErL8xI;9y9_U~gGoDg|v`i@<W0y$J#>^!4Py-n#p1VRw0AWA4KuEIU_K zpybQ}*>F*%<<tCcAt>pQa+Nf7|GWX1-bQDJYE@DnoG`{!zxOWrZqdClRFVHILDZd( zkk+rd<iGh|q_k`MApah5Px{1@(e+m%U%k~k`~`5zhZq~yi870^_*gR?JQ+alcWX6= zL|c`2AE>^pi>-aqd=Q+`4`2@SMD?m5|Mp?bZCyUCo4QKUp%EMO+37C7FVVVA-cnsD z=ifLSnTv%_c^eyh?+;MQQz^6%d4I#0@VeZ?)frm!R(rI8J5dg&S58iRh|BNhvb@iz z)@(O{HT!L{U9QZ_`{yka^js|N4*okSX;S_27|3`Zsw!*scI1<gy#LAm67&e33vxa= zV%kO9_Y)if3oL&}G7j9y3an+ZNuVKE;A3EcFZY7+xI71=_}v_T{M;5u0nl)}5GKbC zOnhIe8cpq|+w|cqp2?l}Kj61GKyxT2f%*#dj%4k^q+N*qW$hN1TF5I<Q1d#7I%pMB z8I6BhAqJIz$+|*^uKtw`KKiJDgI>h)@^bs-5lFb>Gw)|rWqnjoG!&()_GHAb$9wZc zov*NumQ>L-?U;<$7np9x-E99Gn*0}tIX(~GxNvx&dlx@V@U~$@ErJ=<Q|9uZE1Q^4 z$a(kWkqAq6AWhj35oL;1j-MZ?M?bO~_d8bn(+rlO?thWX8D-^V>tj^7qp4c(&q)Z4 zC*s@5AZTan+tsp1-s;o-J=uQA8<3#vym+E6KJmVTRlVZ;jYaXVJ~0AbL1v}N3iBZX z^9q@^y&N`0JL1RjOk1P8!X@k<1yulmQ5W)A0w?3ZE`C>1$<i47EzdZJkBY+zXlRJ! zE|glu0q}A!W;u53+NaPnr5T{$d0z_xcZy!#AsH=tND>wde1F{qV|v);`m2D^q23RL z3nm&#D49(l*$AWeuPa<hQ45bLvMMhqh0*STmezidRE@xo>s-uhEbXAe)*ss7Cf&{4 zxa@10;_toGv#P8)s(ElU^sA}n%#>1bv+<%uLqj#OnO9(8)Esb{Uj<+iH^f9hO5<^0 zsZLH@V<qhFxdTum<vG!lKh8uKoBT|4)avAl5inXv;UPWyrDSuta5O{8sL-PLdbDV; zFfw|DHTBAj(il+^Kx_@9Y(58Jwd%Jwaq5o;D?+{Jtv^?Xbfjx@qVUQ$)%1p9D{Yp< zlxvlmQX$ATij{t-A~@}tI{eTTy~pC`g_~cJ*4qQhA%3!aXeLrfTE|+TX&N#fqSMES zWkXA2<uU;+NRr+{uK_t<_8|s>{~$1|$w~dabu#Cm!0x^ZF~^?z_Ybd#p5qUhySwI5 z*7#gvK(C<I5#M=11(Q`rdr{G1`7VF;B?wm^<ttc8x4myGDtDWX8i_NQSpNDH-t4{Q z`Y8G+!d1##VgcUzvH{{L^GnVu<|g{wDZS+umxlFMNPzoJM(V03tA<l$$769Ocz;t- z2g~)OLr1+F=cilkFV0_gRB(N9H&yfU^s3e#QN^=QD60dp%ri}H%#Uw<4Zu<sSj3Sv zLK6i}J^>pDT9U=uUf+N7aEf1#4>Qs!uYdHwgZZ}jcH%zu5kLVhU*9A8lL~7a)N-N& zp<onVXj%n{k<w1TScE$kdE^7CgXAf+G$-w9f#zR^>BcRO1Q6Nf9)sQGnwYcb1E;n! zW4aKr3jFc+^3RVM$M7qDOY{@ACpRn~JZfSW0Wk~>4W;+2+HipluX{z}{^=8|0cDPV ze=XZ09$SITZlO>2bWS(4yg0d)5B|+r#GJIP5AiiE&BDbRVcmLsG8&t~c00LT!R&+> zUH~v5%f^%%`EMWU`UCLL;T!Pw7^Hb_bf37_S-lm#0&$`$o_vp`Iy5Mee6`?qr5G)A zv-wAP7~DDeU4MIw$g#G(4y)~W`o`?)T<xPOF{~<TY(#iRK#{DqR;O9Hp8S=xYH9Av z##5F6b>g81u9=K{%*<DN#{<acB)>93wW(L^t9YQC+a-ZQniIyw>62B^$)>S;{lVie zNoX`$CdsqNbJ|@mR2&)OqpEjIUouLkb&ljR-|G^HP1i*NpT)M8*FJG>5bVSsTf0}b zcK7Im(?qD~Hsg=80ULEOgO8e_Tk%*fvk>VancE1Ur+?;9Rp<0)r!@8JH?CC=5s9j| zy}q%<iM8UT2AWdoL()afFNgg)ekxc=-Bcx&AH#f3GkbOpT9OV!9ZS<9RgKM@t_yBy zckW!=lkB)};&Y31PFFs}BJ0}t?MleAHav9YtW9nC$Q0;hp1k`i@|6mf9IT;7$CFzr zZ-If{?9?CEILC*sI`Y7~h$F5dYb&nuelN!Al4;)$KaC7EeF2;~^URpt1?ES4001kt zEk-CMAhj{)AXv=N6Ra1zd+vfUF69z^`QvVZF$N@#h@U*?5aIe|RuMsdX}9!T;EaI7 zg%RLi-e_ow=4*$tM5~}<%ON2ayu$s`%W{1mtt<TQLl-;Sv%TwTYdJf|2g>R=KDOj4 zAbem8{hHF8?MyQ!`r{m@>^2{;pUiTv^4=1aSG`*qhp#pMksWV56Nt*bCMHZQO_2SK zjC2=(^cWm%>VbI6uE&x9cKfSb!c?4kvTr$->#%QhK;(gYOnofJDH;h5XzOg7XGenq z?(D(Y82U9e8?-JOamdc{)j7@ZEJD}J?BRU?%-QY6%bu&`pYI(&XoAL=vZ5xXdS0{f z01a;=mddeCy~mB;!J5AwhM$P|aoS#B<zfB2LO20>RcjJ$6>aL{%S#WHKFj}dY|K&J z@V-yWVDRF=yUsLi3qz)axT7b@?~bPy`e@~0qPEiag?)JTw=b(b9jA=bZwgUIkc03x z|D~UVL<P2V#EoaQ;Q9iEzV*d>Bd_yjbx-JB#M8@+%OOv8i66Qr)vmCEf9cc#<}^r! zwG<4l8w5BzJNv@&LcEKvI1$Kuq-mPcm)y%kjL49Y&r)wW7{*1tc|8~LWBxtw)V#^? z$!gz{kOq%wG5}NZc+vX~cl-ptLfNf!C$rL<yQ>7|Wr63LwWP>J{7?j*Z_W5I%NSVi zd2?h*eEJ_ri(rZ#@&rP70(vLy_l>`<f%o!7B+b|OCeHwXJM$WQp4fmCWM6qZ8oD-P zVe@lG`<or5x8y392EX7!!iN~H79P?|2ip@BjKt}PZ=y<56$qig*<TNBYo}-SaVM4} z)j!z=lbIH&C!0tBp&k0_RYW_ikQW?llB;a^YPKCoZqVCiOPcMHWk+I%Ax7kAaayP( z?wiy1BP_?z7y+pP2P=V(UEq4@plBa;{*gH=fePp@{M^*%z~Erf;dcDA=d-WMN7TlQ zdkS3U%|DP6bhUr$kw@V^&YrR;J(c|!k!x$zO2D$Ljdw6_V*me7N34Mi!e9H;XqUso zK?PNBLkwbS=~^a&<EbjT<EGs}N_UUM-oz!)<e#!mi*q%XdaikI7&UGmj=0IQtb4k2 zzIzt5EQ{ayR@Sw>FEYvmF?>a6mM<8wKa71jHI=~-giWirF(0?%X^~##e;z%P5ezQv z(H58tR(sL|(6&Q>$Kj89nc~IDKVuK5%n#GZctNE9^aX;GjaWcFROj$)j8b}Y;w>2$ z^zfWjO*qv)GB&fSES`J2^oaS$DHCZB!szthG~R6(1kCei6n{O6p9wW7o%b(hyls34 zcKu1tsYcGJUs@3c6l*$~a$V)n%dSVU*_Pr|p|u2u9;##&>CMhAIm#I4Vs3|()ET{W z&+oFH7)j0aZ&6=9ICeF)+aCGqBTyQ>OUrIKfHwJDqBh1$U?o+HUokHey>il$wA2!i z!*YQqYki~!e5-uR;n@$>dWQ1W=7Q_1{F3`277iM{5qexDA3#znA9{(~tGcT)mL<4w zeNp<WcX`r`y59Fz_eqw9n~gxj&YgXb7llvyBamW?_5BFNyb!cpLHm||@hh?(pLONu zgm})``=4_l&)b*E#=K*GSM1-2b-Y?#Y#V>sYj;d(W22?%mZDv;#e8q?LoE<v7J?(* za5$rBkW^~Pb@dP9&jvQIr?3n8q&~TE07T@#Kp=-wUp2-9lqzp@a_PKyA1Nt8aVaGo z&YX{z)1&J>_Nfrraq}5Y$ZKdwI<*<*_IJdxAHiD2!Zo_@w+QD=E2E`huhBC;YL~~q z4gs-g^mxc8&nrl;jv@0FnnkgtX?+e=+A?1lDTgsdFDvYfTisZ#oW1TnuQOsMa0Xg* z^}6tmuE~~Yd84-eI&gne1wR&x<=Xvv3H<`ix?8cXU+;npETm!@3cQsM1qkFRcVBE8 zXbnWkilH+KpR3T=1$(kx0fi)wwnJY)lUsbVm7L_Mc1s58P!YVbgzV+zg8ROykf=hp z5O`P>2#SFDubnEi1s9rPbTt8alUNdk2>j8c&A$Z5FPqvk^Svkbups5&@B~smf^VN4 zkv(^ppZJJi!)Ptjct<a<YV6KUySDDjm@AtUC&(u#b$tE)JV2&YAI@dEN2~Z*lvpP? zyQXh*0nkR}Hr2~L%muI0c|ps|I&XH823>FM4`(foW+coo!)K>;tLy4~xowcU#`~ju zKP{N}E?-jJKk>t9L;LKKbt)%V2BTy9*JKEE3}DT<D`5*~EE%eoGmsp|A&P-QpF;Y( zof!~o^wfd%-r$BJ$YU9aC^<Vvjb0g(AG@3`DB9Od%}Rlg^<~!v)UPvD{Y!N$p2j(R z%yn~`J=c}Z1rSAtRwvC#9F{#B%M2t3WA{ELi}}L(x)iKNl=R0F2=P^>2PczcJ$)PQ zIjXTmcLb^z2S}XnwCYO;f%)RBgR8ad7%KBt^;BTI>ral^#aJt1%$FB{`=){2#_p4~ zC~c*lpZh8B;!LLP2a7A*q5(`}2#Dk7dqYsW(lQ!NfWczA6=WRZKtZGjZ7en^rYJjJ z@SbnikG5CUn=kpfz%2QZ9U-b<{a4V^SlrWLvunTV&cV>G>8x2kW~G()tuKD#;voFd zf!=H$s#R_aB5mz-9aDWueE;d~jwO>dNso-}jL<htR?d=UkVwRjs6)tweJq9qMY=^4 z8T}Um|E;b>t+{pI!gf|^5!J9asVIBUcyfP4CG_;dwZn_8iKY%$Jq@QNj=2a_(X6%5 z_7^U9iOEU4_cq)q8Q~^SSccsj;b;XPxr^(9AVtsKGhwK7ns;75@WAWvmL4g~xQx^& za{gem@nF+2+d|uT8L!>t7~T68;CQ-c*;Wvo&5Zx%;x@T%<IYWv{7ZjN)e?KKM`@dU z1=I8QW5*Lm`K0727uAggY9u9*{#5<zpB!2~Z+$wt3lI2|d|ZBL5VbvfI4{qsJppJw zt7bl2tD|e+hPx?R^TA6)y)EI;yw-ru;VPJQj8uAxeoqT*zUBKwyn2{+z?=`8RYzSA zvf~KpG-)a)ug|1h6#mMvj~u8C3{~z{<&OhkKu%8}@zTv2-ahyRI=Cd6qkqhpz*Wd^ z7_0L}K`j$GwI_7#Hw9#lD&%{iacA{)Ew^&j5r^J;4z@87j$j6RrLrH8FV0)X>_Uq? zaI0@f-K8;qHRgKs5h&?<4D>5>uTat9Y4sPO;=~(x%lc_X=T1AE&qPyJhUs}nVV}c% zs>`AgK>~wNd;RDweY@=V^9O~6Hi2dJ1u*Y6?KcTPy24)Ex@CWze?A_ek|PwA1}Tr& zc7hdO@g|~>y*G5Rw@Y6zE|ndO@I4?FcC62L?xh(zw(-etbb9Sy(ZnYbBSAAC-pCfj zen2}$O=YXQylgD@P-fBr=NHxW*_p6btbcgo8=%#@0Tng{b)^$)ymh3B`gnFj|FnIz zym6g`nG&Ays|>XnQ+dq?`>5liR;}kFojatdcFvk)_2eh$%v(=ZIu;(VYSa>{;q$35 zq!v&l7(;Xy4qDKxEIO;J^(5yTyo1#G;bS|w8cb-IfQ)XeuIiKF>ezFtPr4yula+ff zX9v@)H?I~9tMOmd>y%RW%Td$Y2oor#aik~Qo;A=89`h)F^bAK6<w20yCC#)f-p+h) zw0}JJ6$fgMAHq5vkR-G$kWcY16nOgnR0}GHRFm}q)ut@~cH2j7omYrU<3rn%7`SBo zN*huh`S&E^Pnjw~tgW^uv4ksECKy439^k`ZIMt~tc@NQzNA;Mkr^mq&o2FdBFd`2C zGr~<v%lAj?stqk`bGlpisfs-C7HH{0gkti}tFOm?crP8|W01ZE_Xfg|KxHFFdOhlJ zrHCeG6$ZUqYFm*d<|L6F6s%RRAlMJLnRxNK%|i29eIyxPJRvr1y(X9UIJWYPv8QBq zqU-?Lwa_uZ|NN8rLS_pcP}|0tdtqeOpO*;`zwGdMT)r>t$p|D2AZ(Fi?$59^Q7YtR zc8lk;I%s<9%W<_^0yy8F1F$C2qYB6evKF*YFGHp}b~X#v@79Hf<dT_A8I#y+(X7MA z{GR=Q3hxOo&2`m`DBIq4rqNeyut$ao>0h8?CEL@qk9FP=#ZLwV<p&EgbI{+G{~P$Z zp2CUnM~lYxX93mj_(8jMHma+Xvw8%p{5g<YE8d-TZBG;w3(e8{bs&P8+*|0Ec}`Wk z+SPqazb;O_x;iOg=CR7<Q5Sv8Oy+USRP2FDV5c`A2=Dp_o>6ijfAv!~oNj#HO8t$J z-fZjXDFrLmT4XnEq{kcGSJ$T=Jj?Q>8!h;+5KYyrH)kLdkmpiE4PVYx_bGb-K7+}x z%vNd0gibtCcTk<z-MpH4gpjzvQ3PNE)$A3Mq|lF#B`t`Viyw14%%@KvS1a!e5cueu z`be+<dQ)Fb{JkIWNke{DebpU;Pd|ZP$0s*HkEpIGZ#m24MFV0)g<qi6P8U1RX^KUt zY-L>2KI)^ejYn(yoSTFAmt?kQYH9U;j}U)9AXj?|-I018r+z8&n}U0$mi$yKe_<dp zk7hDehrrceW`^%1h#LCm{P0Vvv$_v1X}pCAv?m7VsjCaCzq=9%@v|tpmt5=bA`#(J z4z5cOec&B)Q$F81)<iwe3~lP#;RPCIo>ce|;aMbEA2_@wzaOO&dCAOw;Lo=r#M}7m z<Gt{5KSqtJ;804H)}4^OK(TvF*WN=w=Bk1|OD{I+T=`y<kYtqHG(lL_F?&~hc6fWT z@DA_8)q3kg!^2iFwXsUISEJ9VT<-D9c+`*$Ns#?yQ|WPk>x~hKJs*q5*jI<y#S(;q zU~CYSLj$^IeO{V2Pjkc;Rnh@Jwg?d0ot_g+w?$ZJ=XLw)zs=YPA%?p<CUJXf#r8WB z;Jf!){B6cK@5*2iv_D=VR08X7E!TI5CZ#`p3K4G;5e;eUk#l`uTNvz=z8b=2xVm0R z?^J*C7BGpTW@@6u<FnAOh5bcmZ7ZFr4fR|PWru35y8`*!QLB4@$r&M=5xvYX#mF-q z9?<n>$kc}#QtSd$HJyCfwyJv3icGhtlP2E7fBza{6mvZ0oHcmwu-~$D_Ic2(W0GQ_ z_0WOVxzA!<;+I@D_v;TFP?1^Im)9R^4R?w*{Y<Nq!n=4tPYdOHU1(TyV`Znml?`iG z!tWhX?NlEKm8`bgP#ZI=$GgxhC%omz361N!_pWIc*)n_WnQogpiJgY_=K$6}cZlic zbBOSVm>u}S2gQS_RYyDTj>!knZFK|q|MwS-_RO1nTIm)!H)hd3Q?2491|ZeF)N%(u z{Xo{XCMiE4JzYQknu+fjL3!vdLW-(tOV9VRKJS=R%{Th(Ep*>h7pqF0JJ0s3TH`81 zBzS{0?#3WDH^Qqv6fCn?Jv|fKa^&0e5cX->Y*ULCzgpzwE1qSKXz2Penmvy1iuMaG z$Sa_Ad$Ppdi)SMor#uEHS-8Ch<cpV|-_ukLm#L4{RnyzjYZNE6_-3^f46l!(9TODt zo=HVh-fT08J#7$I!CjqBb}!5dCsj-%9c!Iq0jL5|&BxLRg!z)Ad_);wK|faX7P?7W z?T*O>gl=)MtvP4lCNMHRg>IhAk3;yo{El)a=A|#vvtpevY3|qgl|B7q=3*(SvOP!_ z&bP$Ka&_T%ID6ZuqpCUr%AZ*-Qrsg8Tde^E=g#!@h=mvR4b(QR?h@5VC3x{qtqwYc z=-geY#q`t1HwBp4!c?1*?kTPRdf&IJ5jvTw?yuoVqWM5g@GqzD)dkx}cYW_V1zwsB zxf&ua8wiXq2ikqH#9y3xT#uNL&2%jH2F#UO(|CwPDTeZztn|)QX;O_ACLwPtJ`Bto z$`LVlw`$JfSq1o$aPgf>cQb}*AR&+j5&{}l`X|BF#UPgV*OmmI(Ffw0;xB;@!9ABC z1EbPU1bGvev__Npc)seuEd|Zh%?*0g_*$QpY957{C+a>l7D{@0?fP&?H$-n{)?TJ> zRXgSB8<)`4fbaB~jvJV^?B|?5!3I!oKW6z153cJqs2cfvOz?~uy<j|>vL$#i|Gv6Q zjVqbm`mK@?UPK7hF{X`F2T>aj+Mdo!Yw%+aL~!7Sj~mzbG{2>njfce~#Qt@muiWPI z!ykua1IPwvls~Ip?)B^O05c$X|5<C9wym^mIQf)RB0i>36@CAfxb|JD1{-Rp_bO9k z-t!r8r<DgL9B@VDxW9cdFaM6vZpL;H7f<?)KM;hyJ%zPlcbS0A&$Zo9IBFsqF#+)9 z^IZ$8ohRWiO%0Jl;40Nr_3V4!SP_Di!m{wv*3V1tB`H%s%qX=Lg~Sbsgn*ffK#P)l z>1YXc%lhTUh^Lf3E3ca%z%f8_(tlpMc1EwWMWaUfkM#zQs?E}h0!pW8p1I)tJ)1K# z%NnklaZbH3W>5}!B_q%cCLb2jS`pUn`aos`YZ?8zybLR`Ln7PN(Q-P(Q%joIt3NJ& z%w3=qTB}!mWQXtJ#-N}ewAH|o2Z4rHBvE|&8SQsF?;fc5xVN(16C^BMgg~%Q)hMu7 zqQQIi@NcICGtdZgrd(O9ZYW@#k^PsjZWuzg?STT|Lf8R4g&&Pyc?t|&vA+uNOl^s% z#le@8br+rt$G1lxIG*Q#=35{CTGHM`N~(o3ljB=nj*9J*P`Ete0?PY;T>8<|Q<Ed> zNoqLHl&C4cJF_hDxulL(D<grXH*d(8$PHfyp}KBg$$j%wjz_v1Vzy+o<@(fW^_7}f z)9<t)wOcWIidHcP&?os6uZ{cxbQ5u>j75%l#vo!f4rKc|ew=MxQFSvEz?#}QOaW%( zLaZlk2=Z8VP9Xz>Z2L>4vIU+MkGiBFwRg2TtYQ8l+n3?elk%nI`WVR5iN5#ib>HO` zZTj6buI*Rti0vBT^!V*&g@`q<2iOe{&1|87q4zP!<o=E2xH|EOtM)$I?)J!L+{Asr zxBcyISs!|2`Je8I$+LaOkMJQ@!Y}3>vcV#pq&E8EmK!(?4j*S6fxhMt{J3|ym}KaJ zf_U_Y6teU(m;<@2c9Hk(MfcD9Uw;#Ifa$W|rmwW_J?glnKwH@smDyh`*M#9Lqs|E` z<+mqd=7QE1?^8gSc81*@SfD8gBX)NHQ`=1}LDVM&X^c77C$?4wlOiOfY#P#?iw*+E z?PxN(euM>N6w(op+p>JI=Pu}xTMNd-(yVU9N@P1a3VUx}jrLJXm$$0dNss<?;mJhE z61Z)st)s=4JOGu_AE*tXO}0Oo-ja;;J=JM(OIb2IhCJfiIoIB6xp<KJB}{rceEMxK z^mw9zn-Am5$F2CkBbP-$h&RZs^%j<KeySggcn!FL`QGa=O<R5YqQ9fCBA9=tzJ1Q$ zUb&lq?uUxGM|AZSZi`~9Qhka_hfWjvL3YowYMC8y5`&Hn43m`@`x1<T=8X8!TV<*T z>Yc23_d%LBL4U7w+k-ZS%*)u7$q2!!^0T_wi5C^Fw)=0lQL<%|(EcF(CnqeYDLV1} zqq%%k*AG!eYeSCTc<51#mzPJGE$x-okhg)YbV$+g6{`l*m~%0#128lC^?5ln|70l) zZtz`*E%3`e5s(mBlUTkBTa5r+DmPu^ANf-^_HnrfRD|&3{E_AcZEfvqN5vob6^0WW zhGy3PyrKSw`n+Rm=%>cY&7G=xNA-EK=g<uoD*;<4^A=r!21srm0NdUL1Vtg@$63Is z&J<Fy2MYi?F)v-ntr9r-WjmW#+Q7P%32^TR3k$oy%516d+suo3KIl&u6d6yI|G0>; zmmeNOa)>YLy}Sepry+w}j*y7#bMnT$gCT%OTs>V^i1CugsJtCkhr9KkcP3Z|)hD4f z`VON-WY+;FFDlDIH@lF%Z^0z9-}D#R#^;CF+!OewDK%yzF!(ghpMy@LSnsdfe%Vtd zw<fI71D<>R9Gg9!eN+CuYOl5I9nZ}xXP*qV_Q&WQb#q9~r-jh02k~I4Mq;;`uaj3d zLL_9vv+Za@K+P;nv=r(~6k|$I%|Uz=&Oc49N0{T>^YH>FQ@~IMOR8B0nGM^Na%o!n z!6c7uO1W-wOeuo>``&!p-H+W7X_#44KWNm&7dYBo1iiLq8)vmADj9{YvKzW&_KsCg zv<9ddGwYF@Z!P}WTtYqEpRU|Lotf>;a5pr-dJeD2K+rx2%k(w%wQYwZ^Ai1F#y~{r zW@K$>_ctMGTd7UPl|{O%d$<v!=A(^!Xs<iC$O~wCCZmr+3oh&`?J8XVb|yXgmrB#P z3$#-2w8X+L{a-^dB4(+r%8miv<#WbGN)of^jF5(r{4hoKowZ|nGGO6H6nKxZmbj7% zu3IS`Tn)9fosq`}{sN-a5|B~08U8K>yb*{Dd!_m>DFKNAP;3Nx%7y~Df)xLiVvGNa zF<YDaY`a(g=#y9X7ODyhIZ=rnZSQXy9+V{N=trA+0^ZJ8aKE)q#p)p?iOGY|XP{U> z;hImKE4?pZp7BoWIel{T%W>AMN%HyNTbAWMmy$Dfra9s<xg9B0(+vT+gYc`PZ%#;V z1maik5IE6WX`Q8>vumq~4F#~{XP&;V?l4Z~uT4`*ZK#OXeO3$ov_Dl*UE?rQPOmRv zIIH36OG_QER`FLK^2kChehOodVDhO>sO)3o3>}-11Wq%(Yc@njk01ZGmu9Vgv*s|; zZ|{Fq>HdH8y!HjmHm&$2IJac5FsW_BO}4|~!f<1z4FC9}is$MhMid9cY0OFVhn%`P zp?t`bZKcB9Qp<PyCFd3UHq*{K-vtqm1<%#-%xr4v%<D$UYjZ^0*KK8Mx$e))2T-SN zisNPd+n1ot7Yncb62~j)Z?+~nJ0QnG6!QYna{1(Nfv?I<RUW>uhDGSHPax|v1$@Lw zLdDvx-8~?`_mOj`2gM%;a(>BL{X?23OoD-vUA8dc?KYH(c;8p3y!&wmXJj_VS$hHh zA_wQt(#Duk#VRT+S!?8QPc7VnR_@<x6y^F(wZx!3Au#VL{J2-4Wz4VWqg7>~wMZ>c zRLoN#h7J$C)g3B*abioNFi;m8r+>7G<S-TX%?c#?l`B?%#GNXwP51h?oL#HAGC~u4 z2r@YP^|j@3=gxo1YrP>D>UAfL2I^6VEP*6xp*`ClsFQ%h-zT>G$I)MX;NV%=Nu`0K zc?o>G(FcfxDn-QHut(zf*74zskwpJ=Zp^U=<ZQ6cF`(zg7#W8&RSCKBe$*02v?M8w zuU#c2qkl&m!P}-mv{)5$GS3~5wjeW&Ta*Zm^0)md8zu_wLO@gx1ksJe*-tYn-0zCI z?_x<6+tOK|pCW+hW$8DE08f&rz9KfhLE}wSSM@X-msoj`Y75AP$^Au%%DMhp(mMjw zS5^5bpIhd}2c*n&0gf}20<p`gwLA5#?kIrkwRV@dr_RBF3;N+-j5XsA1VDd2{5NI> zSTiu5WF3*?gwV0*RalPDl3~Vr^C==Od}#rWm{__J`t|sT`%w7@xCZez_`cEhe%>fH zl$zwy9MCPQIF+ed$_dS3-A)pht_7<6ZE<`Q^t+HJ>0RGw2of<R>m{$pZ7nYW*3-O5 zU+bh~;2$7dx5?aVC+p+sQM?x^PB<8tpW0RfvNZN;mno1e$0Ku)2+WL9zJx}PYUpJ~ z=+`H|wG4fY#rtRQMZ5y&+i1jnAq|@30&L;cx~wsw|Mc)&Dxw!?<CL~o`ow(R47K|p zy<jvq%^(VOl{bfnz0;w+f+@WvF<#i6*?P_G?5|hUp6SBe^xo+0&&8l7%_#ce>w?{j z_rLsIz|>pHjV}iQYyc=H$t8sir*s?Gvgc(48kYL3h@d2GzFe(TJalWbhB5xss@t76 zEZ#ln?|f?cP<^YW6&7JW=6G|c3a6eO)=n`cKRw^mmsWb;dLiki$`jJ(Yie2`V?Fr* zXrKaE+ALA`t=5Cu`sgXb*D0)5?rSUlxEmk~?0AiDxTsNe{?7d`FXqL*ddKjgDYN4G zGWu%PeWe4Zr10Us=n(5$`?P!L0~o#t1Yp6L4dDo5`#%AWkE6JSmi`B=PNUDfxmn)h zbY=fX2)2;60_fo?gIq*$;ZnaLE^<c*TX)!N-ki$IezZ4etqx}rqgnZP55$)Knlp@k zm_pCsIIt5-H{GGjTbl$JZXh^lzmQ|7g#Y~850oYEP=8=tgV=L;o)&Vtke9IhJ^KcV zCTe$^Du1DEERtR_8tQjcr?w)%nUEgug<G1DXd{_!7TE=V`|C-(SVX-uVNAww@Y7an z`<T(QlghtWdq7Jh)CSBqAt-}G01;qx!)_dJB2B!g-1*$W<|$BH_4M|}JHynH&{Ilp z_vT(p(nM`-%JeKPEnyc=`2KADOSNfY{rnj{0aYE;V6+yv^}Go{v4d;f2uFdFsle$@ zD1K1A`kx*GudCuD;B$R#3i@6N(beAld=s;TT7|*Vb+*cc@-sq~zxcUudM~}_&0%;K zxIZ$&iU!u|s15SkGp51TWp<l8H#Nf-f{Ea!kYSht&~$eRc1s42AX*yYD6c?+Qw)1a zZ+#mN6TzJl#HT5hGZbUd9CP`^{NBR5d86thl0_XEFs0)A*gt`gNE1mWQ9ESIrEfv` z^k3HVbS?JZpP3$i7&P=bkYlgJk^lzL#D2VoAbaek(i;h#u<9h=Odvp9e`8wIB~A*8 z@(KPVVy1~-6Jyo|P`b4|x3YwH_&oa#U1=4KpRA^B7iC2pFewe&4>?c}4NzF3d@ktV zT415G6UYj#0UO^Q-)+n<@B(PTMEFok?xfRAq;VK1>KjV$N7?v~&KKIomd?D!In~XM zafq!ceThOGZy+HJrPe5E&#Ds)#Z^a=W@b$vrWt4w2RDT{LvsQNK;-%Kb+jvS#`Bu4 z-(>R-83FX`p`AO&LlmEofDn9&Z~ET;m@45@)Q$z7*VtzTLA-o-pu5Gi?sOPPkLsuM zZw}09%=T_8FAu1}S05@rQEMWJ-H<R-(QgzdstE0UY@DWH{!<T{9qK&u?s(hds(R`7 zK1EFNY^0-=R_V58@IJ8oUye%x^8YS4M#UmQKyaK4ps9*Mw=ej!6#$mFJ-`ELCa8zp z^O!7679XymI}^({g%&N`omb}yKc}_3bN2UXXlfE8w^mrIuytbtO**@gvtPon-v)QF zlouNQX;fSFWn-$ArD~rsdS%UoHL>Lrba%hDgIkZ7q($W(<y=P0s%cyHOoH%)*Iqe{ z3M$xpXc%YvsK%mbLwwug@<nw0-u!X|;*+h|Vz|>u&8qK1t7{H9oJ?Lf2r|Ujm5{_I zmK$ADWz~TCh~`p9VS-6Hy`__5yKxlsDG=NNa{1rPyY=}6fU0v<9SmF%4BV#VZ8-3L z<$UW<xaU}F(6@d4`8zp67j;w?Iol<0`L60=o25!M=RF6zRp&vu<!WRLY(<D;AGh*b zJN+~XsD@`=`yn52K;CtA2+N@dbO;h@5^q7-2J6pwbvSn#63|}hGSQ@E<7PZmh2j<T ziz{L%2|#=JbobTA;@SS~zb^Kz$5uRbtet^)IkwHTieTCwtEFR<j<p<_>bU1!P16EG ztbdlBKh~`S=Xwd@#E9mLhyZLa*rE9EBNp|Oxs*L9o)86}!Hn6&toe86!{{{;vl4w| z5GV+9V03)=apWXHCqA7f3wtXvO?l~veNb#^-&geR+WK&O|DG{WB~wN>f+sJ5>t}>_ ztVBrgQ@tT`nwp7IOqKjxAn9RBhb&Ysaap6FDo?jizyS;c<=8`g^4p#$B7?yYmPG(b zU*NtY{TE-F27~lh)7a;DGwnpoC}_y`zpGc>{y`_Kn<d|7toKOV*0*4!KD&XpK1ylY zh^Bx7Og!TUk1KkOMD`tA#SPkZO-iq}_l58b?AZB?#+|UF^wqc2)8XhD6=&9xwuzy$ z^)fZcC&JI>r%l}&gX)u$uUeX|rD~LMQ6a58!eG$hNbfx|Yh^+fZq(79zpBXc1-GC? z+}-^)JG8y_(Cn+OdRo}#yI*R({vMj)n<0RYQIH_~ts370kjUA$X-|Q`8d#1FlK=p7 zTfu%ivd3u_4EHeDap#34!MDo}oL(>|@{a@Q_gh=~P=EfR_Qd?Bf_2@`qZ9iQxbJ3p zVZ2cGtP)CHdx?W8=lPCoNb|^7T8u|{Y#fsNc}WS?;{Lb89?|M9tmBw0W~o4cra`T^ z6HugSV@VBgpxTA+>mYK84*?k;BH;<BY#IshG$G-xQe5#%ZNM9mANa!1@Wu6462FUk z+GMT^?cmQAdHK2yI<_sk)4)T<3T&LBy-&tt+Q)<K*Tu~&nk)Z2i)KcUlYHyNF8wVz z{?{=9J@@57bzn4J0Hd+@8Xj!hv)g)Zlc4>;rX2Gr20{S4u@v9Ruo$i&JI~Xrdm`#v zss{2*3nr*W*Lij_fE(!UH$Il8znp$c{_a_Wsxd#ap>kLEDCYT4gh-CRGl7Xa-6ycz zkzF8Isn*%0#hvewI8a(gWB0tyA4DIWS$`F`GnlzuEie1W>Hh1l<kIqQrCAzMC5T$V z0Rh6<aL0Y5Rw%X%^{jTM6%d6V^L^F`R1z&ixH5u0XMb2R9#{>rDBv1}PjEo|wI8gQ zruA<~Fp|>%gqgfuyz*FA6Rho$&ml$xU&MRJ-dtOi6MS2Xq)i)k8*X#Kg#9q%<nLEA zhvV`C(Wbbr+Wmp~!(Mgj#dfGGwX<V_-B*UCmtn)*xn-?XM){WqH|P8u1x_iC&TmU- z@~yQKrN(OHCEMHu0kS>dlAya8Asm=zU8SnG5CoJ;c6TX@i-tf&x(G9WRu5fCSlGex z{vNz77FVzpzvL%T>Wdt2MUH~z(T&%^)W0r(?*nBTAmEIRtn~+F8h?Ntx-Gqa+!z8z zL4LoS3dC$z?N2j5%I#S3#?piJx?!b<vl>$+-k!A`F)c!d6>xks5R7}YHb{VR+VT?Y z<}(=~&*9fz*g(f9pLN~zC{0Vl_qB-LwjSiV56`70#H%%ivOyaJcQe*FWN3%3<)+If zqWe+y+vWD>u0|A`f{wTL{DiJ<t0+R8w7euH#8q6nvaZ3CH@>yFjEfz%u5^U!JqfW9 zsCSAUSGARfnJzf|KDRnBt+QQlaZUmZLCtavBy_a^+^6*fgI?t?fIe-XetQEL%y#Y~ zo!x2lxY0*I4>;>T_=NJmtVyQp3e>pw6`g%D6fzBrbvKYE)9(xmMn86%c(UP29piEZ zweJ^|!T(gS3YX(UgN<X9k{m=Gvk*AbPOns3u8}Ah2_`)SuDTe0XEawOg(Ebx-7oLO zu>&NHsFljS2*)#QvG-QDI1*;PiL#H$pJ*o%CZo^Rc*XDVQD;|;P(f|YHC>4a-xy)E zT=uqL4Y)M02H9P7OJF5#11n+RISUGmE`W{Z!l(zrkL|QX>+Rthuq9&~T^8c`LN2fs z!j}MH7`;*@Z;Y?^pIx5xP#rDTDYmT0f;`4db=9`}{U!e3ddy3CD*&-41EEFDRXatd z{!-%~i-*UK=K{~{C2D425j<2?>WzH_aznG=gI@pM3>n?F+urJd{zWwL9bV7slr5|F z28-_;8GzYZpjW^;dYBR?g{uA+d+#0&_1gW9Ynpb{?x<2E+CrreF*&PURL<w~p%WoS zCgeD#RC||Ha)`l@avH~k9L7kyB#lE(Ig=O$GZ<qW2ER2u&+gg3&u1T=-ygs0dtKkl zAFhkHx#oS}>t6S|*IM^$y_VPVXGtxNmRsQX=>?iML|-1T99|AsMxtf{D4eq0;UIC@ z5?Gj;phZ#u!W)vvv}=XaQI%hJT-G9$9wiTbExJ<c>+r*#GQrkywTL#({nzLw=F#-E zWg7>B9S&(R6)SM`H)?O+@IFk@t8Geu$J<v|C+-4Jlo2T8*2onqFW$MzcC1f>yHlTQ zB8wY8lx}BVp!Cjqo#p(dOu8!c+T+5#pr>!QH8y@&6yw})<Kkd>BiE4EJOIFN0}?`W zzF#&T52<_t(!WqOwh!W9Zp@2#`tvtDFs<c@tO_5rw%QB>mP5Sa6L@NN=ND1P%9emJ zk)|8O3Yrk~4^(wNshWHLDCO-heU?JUv=+3a+9>6o$qZKh_~*%ix9Po8Pu_+vL4ygL z#QNV*kI&EGE*qiYE}ZaWhjLX9R8JHS9&KE0;E*G<yO_&zWew%ag~o09kfKio^Qo&> z{gY-=6xbgrZ(%$fC~(44ny($=eo!{f9~^V3+>iSo2#-30e@>>>&8#WA`pUAbxR`x; z`H@KQb&Dfj^i~_i)Km9%><|lTg9!D=AV%qv^o+*!3BxV#rpXQ5<|aptL{D_%UVAhr zK^4g~;d#8^{6zm7KRc%UDZRVO0;{f;IOuLa%o&%&fPc6H<aJon`!oyzZkh{2TaLq6 z0Tt4MFueoC*y1o&9ZTUz?gx*i*z1i9moI(#l7D#k+0Tjwjw7GM;daFB6SQx$43!*w zBzCMF@^!o8ruClt)4S$gauZea)3IIx#bVp8U#>;XYs+e#R`CANY#LS-Zgjs_)rsq_ zdX{MF_V0H4*NwXQjn87K{^5nV0lZG*`FA$}sZ9*$mG+t9)~mgQA_mvJIY0A@HkiVS zXT)y=gy?$E%N<{okHX>tk|6HGh$Hudj{8_2wly3s7p16P3k`z;2i@-8-AV%0bRh+l z+MU<VO^chZNT=E*s0UduUu&eOk}rVY?05{ZW$E4J9<Q_W*WE)aj<7JHRhM`I3p0}L zV5Aqox%rEI4Ax0dEf<Uz_i8b}*+&{Goy24#{Ka|p+@IZ9QIvAQ=m?2P?_Rj8d1-Fy z`P*v^`5PyK{7!nlv|RnlcJ1{a%Z5xr^Iz$TRzQj6avdI(3sn+}_X)F~&I0ClGQN*3 zC$|Z<h9vCE_`U?#-RHose<Q&J&h2-A+Yyw!o(8Y~3|1zurX1As>eihuq^&#;n$`%> zT?7t2amX4i^LqQ@<uw=N{(qYaMy2PbOIWT{P5Z{$3r>9&a^s1?9(!9_0cEi05kFyW z8wD;n<F=F&eC!?6-wDe2QQ<Xk^WNh5b_}Zfu0v=(AkHWUNQs5xGwzMD?a0**thK!) zhMRJk?uvMcUdCPP)3nHs9y;b-?E<#m(+szBQAlIUQXMqi<v&In|D6kf!mWA>&7DUG zaSs)Jc*(KXDu98012urR^@i5KIl!&P(Vx)Q38~BjNuPV{w+arzeX^gpl1^K%*wwU$ zrXC+ItYIHEfB#-KHxja2bN(edYgy>qcI>bM{h<<5(6C8h>)jUwFTA0S>kc>w2SJw1 z2>uPV4N%{^<D2-3nP%?8HfToUZEeV>X(k1&`H9m4gM-L}mATR4j0oRm-c_s*R1kP6 z>?7|I<M}foA^wB%;5OSKwXAbfTL(AL{)RXYB#h)Wg?4*TK>#IU-~Rk_3KmUwsG=w= zF;)JDu6(WlS}uH$4chbvD*6BU#ZX|*^GY%1toA=p>_O|koSFQnzZn+%s}NvLZ9~Q* z`~Q{^2$>1co)+~Y5aa(G%^#j5DIySk9kvIB|3MgqFn;d!{ohU#O6GZNzm?Jdy)bq_ zA49+e{LQdneLHx0L)<VK*CPL37%eb<F5uwrq%UeH1dHS@9Tol$!mx(%1CrtI<?1R1 ziv+{~Mt?7i6(#$=zAH-h#~rt#WZ#X*iY5DlsadgP-*?H%aruV>G=1f`{C$_K_+)?Z z<)9FD#V7l>$yo8p{@{$RIR4*v$%^Cuhq%aaCA$25m#jpW--9y<wO3LY-*?GM3gdfl zwvs3N9*;mKawSjp{ZQ3RT1jDi-z6(4jNgMZ$kVQ*Fut3Nl@!MR#VHKja&=F_+s}oJ zx#P=as-2h0uEaPKUN`Nck9YEJmQmf8tit>2zNg|RPoB`(;<DK#>G8`*+%J3Ct6r~1 zZxMaE`P7LJ-hCsX5AP&tZj00x-TGyQ#QsrzX3|sjf!Uy+Q;<c1Sx=6MecFdY-xm8q z4V}yaw*3G$XsJ_Up$EOVeD6<hM8@GF#OI$bLK=3#MTm3h*`NRZzNA4~l*fbpPxnv> za1Z61N<8`xH#92)`+iugNbI|P6kXA=?+(?<uKa@!v0^S(%*B7K#DDh4|G6V+VQ*eA zDK}7KHy4updVRS+%XLEF>Ke!;O#|YMw)&~bX3@N#06lY8wv2ZbA_(dq=0k?JA$hZY z3Gpxd>7(?Cz69j6bBy1HlBCz|R`N>c3=0GszN;?w&7bRlntWb9)$0>UUC?G-HE8}? zD7_;a!1Sj8@N$ooN&)mGz<?;hzHP`-AO!QyZ+jVAc^R-YDeVk;sR|tW^y#Q*X_LOG zLE>O*cIRMo&4s~ATu`kl{tX=Rvd3`aoy9<dT@*PoGBO3QwAXg;W8oipx`1qo4cQ1K z32y;$xIM*ZF9I12=()rE4gE0mCouH$&C(}f=!)e{MjL->Fv97W@p8V_G<i)ACr^Ey zd@QG+*3_udcm;uMEv=lLy>3Mg4l2Pe2QQZTF^39+Yw1u_6b>U59zRBrki7u{;`J%D zk!Uc2sig>~wIj6vT_*Ti-?uhli!9=myxsHU#jUTb?jtIE8OP`PZn8hzK4_Z{sToJh zHPF7u8oE83IypJrb<X_JO~wT}0YLR&Ab_-n0cqS4mH0^?0VU?WU`k2>Sm*sb?Iore zAUr9p1N7n@$9$JgEc%blu008EscbVs#g~3)v^ATUc5@Hywkwpqh{*uDmt(=hgR28z zQNqZ<4dSv>Fy!~xH9VV#!{80EIiDJ~Yz2lPL+1yyZ2hqgtMENawy=!#TcB3rh3%^e zy<NQ(*;l$=UG*TLU=v&F;h>Rn^x92(BB54^q9E4K2p3kNdCNFd#M>|cQH(T)wYAm@ zYLn1(JOJ-9emMp}D_0O1F@w>8<UIrhGuC&bgZQ!%L!5bX6G>9JA(a^>)x?Ls0e+KT zPPG@K4N9(!xYlfIu$toZ>SmNWvrm=;4-Bn)`A!_>IpKrL$jIPQP59rrvq{99{8G-| zAR}%&g^4Ao`pFg3$DLo?0%!6jV9tIR9UTLOHUNbtJeS`hDr*V)kylZtAELPo`mtoC z%#S+`xT&>=$2i2FJg0ukf8oMRo!>>)SZt?yr%#<@ee6xq-V{@2(uCPto1$&-0XV>r zmBddv(q}_7k*R6UZpMr24+P9a=I7_n$C7vP#Z#AamS?O6W3&5!Y7yb+AOr%@gBdIM z3xGg=1%YgRJ*FR0nF*LTq86hH1Oj+5>z|%<^Zkee64*OQ{728tAx7ICM7ehswbs{s zY~N#=LRCa}Skilf)SlA6pkhY1khQ~i$CdS&ZZH3OY&}=zXGM>rQ?J*#MQ;#NjMN>E zH>%*n7JMx^U?m62xAg~<SSa4xp1XBUg9ILy0tQ-B1F&zwu7Ko3+ypT34;iCfASzfp zT3RY*i={BoJ6lwDn=R~n*!T6f$xXz~zB)ngVCkdk$+MZZ<lutcpEc&*F@yN?x-wI- zJ;mr3aqH&26b?_<9<=p4Dj>+tIHS*nxUN|<wTar};wAUO*FfQmFEo|%ZorR|p!0wY zZ3{VeopSvueNrv)+mZo9?*~{47ze-vX)({3FyPBD;D)L?;94ZZk_Dep-h^x6(l)ae zG}reSiKYZ&XKy|rZo!OxsMk=jt5C+|Bpzh__Uoq6#%sQGU9*(ocSP@8@=#k&cY3bR zL?y0-I3%OMmDvvm9x7vCyUcG5VABut^YeQroE42X^o2*__3ZI%?M@;!#<|9{VFwt+ ztVl2&#-DNk9q$El8(gQH$b*Xl1he_s4sX~Mz)DqUd%T)|r!=mu=Cfy^jvH^enW$K> zFC#I1bz~^nAyM5X5m2HGf>FglXK_oDvO|eKX`T7I54hC})H)XD?Y;S3m7PWP`U~;o zX0Nbs;@JG2X|#20NK)rUuTvZq3BsB`Wfrq_W(dQGte=Z_N!D9X{Uz}#n1~_3aWYQ@ zf`(ag5sl-!#sMu}0We30-<$!64(%ueTN4|l5w+0AR;IqbktiywUO^H(T>N~aX^y#= zKQZiC;t%r|6{dV$T~pUxbBGeVv#B*1C_1jSqe_Z5n#ZLAw{U(SG(=`qS3lSjQ?H@X zePs&3Zn%ndUt>(R_BoYOolc^cj1nG^W4|cvWh^eRN83~ficviJKSKvWqdV{X$k2Ty zqVWw^nm=+2UqUmvRR@54blsd;2fZUiVR?_ID+A8)CLA_DB-7%N<_?-X<?}&FYYrp$ zw1X!`v|E^gY|40)>?M=!p<U$Vq~KOY8X?eB5#4TUusUdDD$4(;-H9)Hc*W>ii=5V! z@hQJ#aj_drrnJrpJW`4K>XV}K>$-qK^ZsVkYqZv^L^-7(7~NZ8x3-GU3vWc8)AnKP z?+diQd`9hKec2&eOIf<o?aB_YC9NL4rSb?j?p}6NqXqM3*}=%iXR=kq@>*f!g{>*{ zJC&UPPed2zU*bhh2^gnpss+w!#(pj=@Mr{blG;=Xp2p_$L3wl;%4MQVGCYWhDM~`G z$`7q2W)KMKLFU2KGz}Rxy_>Pnt?ECWp6IXq`aV|?_?+dR2PU?6>dwXcH|xq198n6{ zu|Fu2KSsDKNwfAXNbIaT-4`rFGb5i$c%WGf8sNbuwDRv1hY?2lcapXaa~nO3FE#li zQh=TQzA?J2%}C%gbO54bUm+zVe4^OBD#kgzudE)>^+vajspljT{Kh`7Wif+A%$gJp z#(K<9oVfxjYxJT5g?V%BrrH27iZ;a_G58jPs@_8~_S4I|$a<F_Go3GX=hzjD*Equl zOW8XyJ2^04kJXw16<*pxI``%_Ek>W-g7Y}h4a&kC>(yn(Z+V>|Y(sRgt}&Q#3(xJH zp46b3i5y9|tEmms2=|G1;@^23rh!!HKFmLy4%281Z@PjI1Fzw}V_MlIMDMzttHy}3 zM-kc&b|0LJO)Rn4D57lW1KX}MdV<~frh4$*eVcFo!`oVcOK*zL)ubE@DY-W1+Fs`D z8}u<ss*P5^OB}iv)Y|p<gon{}o;+?yi>>f3Y4ZX;hVCt=EAc!i`E3`0@cl@F_;C+J zpK32GQJJ@BR~S#-ylNAQC06aUZg_HXvSh-y#5dReutmcpvK4^(g^CL;c3Uj(fz7ub zGh?50bcaLGt-zssJFXDMpZ(U}+W@&k2B@LGWREF1;$qAk@rJCbTj&p#3U}#mHifs= ze+aa_KMS2Lb(AnOw%aqWNZ;AGC*68Vxr^jiAUJ8WIE^{8S<UMH!8)d@{8O1^Jw$?2 zP5ReRrClX4je&DD>Y(vjKPT;?;5FEM*O{AWSvq#_Urxks7tM|JFF`%g6CTMHUu^hL z$bS&k25qmLg>_L>dbR~0v4yDhP72ou8&NBT&@GNDgmy03x9qQNg71U9dq3DG2H6Uv z^o2Y88`U;n_l47<x4Z5UL-e66tMB#V;LU?wi)q1=cP>%GCrb)ciK$oi2-#R*)h*PT z*gd4RgK(l`8m4?yW3opv0z+CI3MnB}{f0DDn!d2i!i-*YZOi*Fp~vR#$)<V~_{^ z^quKIwTz#5zH80rGUyx1d(A==H}dhLu0kOvyM#JF<T2$;=Cd`CG~Se&mNqIxDF`aK z7$jeaDL|8wA1uel#btIzHU0*zv~otxIy%eJEl7er{FY^~HXY+OzFLmia2~s5Yj<zL z6+(4=c6WuhGqM$$n-#YDH!p4;egLo(jqth`ytuF)wX0v=_#@FLx^;Ww>;35HXlJv_ z5r)sL<i4<9ztO(5yhOTW!YcoGh|fqL>s=H$`8IZ{T+ptKA)dm1SB#e8OJeTspT{Vi za*LK|u32~~hBJr`L)1}`C;9HK-9Ftcz=R?N^OK?}zWg~(NHopZ_4thz&I|2miO=qW zkMmIVtOSiOzUR+B-RKnHW`p_Y<<Rslv~1U{c;!e%r)l&KmTO6AxMYJcIHW2;&z~c; zfQ3Skg$@Cd=0AHT?YM3jQfx5?@`4vFx2M;sQ@wgCNM;X>X`bG$u0GGYejN~rz93Rz zA#J-GzusK#OOc<`P^>)lgLay}Y08!2*1ft_Ednz3(b_UjgyNEqLqXIDJ-pM+A=RH> zSxpJJbVPcJ>mXvB&WJV#>Q~AuDYbJC4$W$$vBQ)ugA-eKc`1;dpsyqr$aGf6jdFO7 z701CO7xgIb^E3GLuB-CiP1RRyn)@oq7u-oRqs!d$H<O>;gsX$ilrXNmK~mNW7V*7z ziI7Bt70kK7F0CJ_1+4ReCDOickUdt8i_z|7!9Z%S@=)`hrq-LqzNQDYJ*2YQC}P`a zTWGO>w0)ckjozIxZxwZCBb|7&d%R`1)25jIaZP3WWL-j8i+nJel<z@D1_d)YbN5~( zyZUM^4azh*ETFL79v?=+IGwM~T@cQ@_;M<RRze1M>(YFS(=$hU=ZO%_V&v9TiE_OO zyhgpB-sz68bV~Qvc2c`ceFLQ^G<%mHo=u4ek~<v8D0Q+SJK!CnYZNe~&?XA+*JdK; z)7h#q&NGVDJ0h2JKA0WK++qoHbiG8f13ETeps(nGO$Xjd7AWeAo*ZBwDFaV{;Xyr( zNa1qM@1L0uVJIE{O@=e^*ngXC&+-`6p>@@7A3rW0)NP+kAUc45@3%DOr`Cc|9BQwi zq;~}BZ|;0BlIUw%FI308gR(F|Y4}gS0z%6vp*EKsmR@0n)u$z-1fMsfyUapk0CS#w zvfXga!Cmd~taflzl5T0OQKZ5GS5ELftKf!zdlc~4lknl<V8Vf(fKkJyDNdF4(nrb5 zl!y!d+I@<wr1oVy2YF*uvipgl=2+Wewz3jBCyGV+6j-;kD?8rdB3Lx!Yrdd@3ae(K zR+SWv4zW!4h}2<mSsJW-I(BuJ#-Bd(<)8Sm&liJfR>kSEx>WR-&=4l`5efgH&<!<o zA`(0Vb8S*4B3g|ZE-l`fV_RaM>p(uY=vyS?`*tbl@!&;PdB24W(V5j#VRB0XnBYYc zo~%b>E!VVGs|PNt#GIKegP2hHGeus#;G%z9=t0uCv#qFwA<``#T>tj>8gcyeA%$d@ z;HzTT9H#RtJ}ahrr~KCIOA+pTrUm<W=<EnjrBxms(MgKuJhdcIwa|o$Hcp`qDZrnr zslmo6FQB+2+yc=J?m1^66W?o_y$2#_AQ^khAO+Cjgn4f7&BPO1Qs6Ynut=FD`PMIP z-^{~q!+foaesoC$d+i11%Y$IUwV4{T(<#cDu^R$(b`fv%JNa>D&-hLB87Z0Gud=%g z!Ie{?e|J}bk3a|2u1y$%`E`b=wXp?Mn&CW{XCja9&)a7|-acmbNnU_+wC!@@+OEJl zhf=G!kaR0X6c5gW_iMf9jb?BNT2e0H4Ha-6(LJ)Ly{@!Q@D+BHmw@w{Dt+ixlS<A< z1?D};x#y3O6hFPrI4WEES_hIu(rJ=rWm>!qfaBIMx3tN^`mAF!oc>13KfJ>J>9a-t z>j`x%Mtohf5iU$|RJf&MAvoFQLprp9=^Hq>+0G((seNRsB^JYaU%=mTx^saoVtVdv zfn2^DRp^eyPW_2ex1M>YG>cq&^W@qoEgp2XR^_F2v{00llY>LlNNfP*Ql?Rmfqzj{ z=AuJ%fdhfindn39iF2{%&$+1FGN*-EdmSQyyX(G+ydmM-84I@rBNq8NPBlmCckRVr zn4&5dO5+%u5QW#CHWSL^4eRaL3$2&#Qgx4aztkv{pz85-9nw4OHq&0<Y#_W2)yXXH z4O{1t$i!pzb(!Z1?#)G-TQ~-1UtT&y&Nid9bY9GYj79?}`&gL4)fooyIJPsMP&vgV zpL6x=71idqRO0G|bqN|TwPiLZglD!)Lab~E4%ynTU&p3DLY#aEoB*DFcOAsPf)N#g z_^->&yCJks+&B+emX>SJ@S_KG@fgV3<aH6N`a>(%ABJ|@={E;%6&?2Jew1>D#uQP$ zmZW}hX8E$6Me%bbZTZq-KHWGLWwd!(7svoIH=1tE+PCkl=1YjD%pVV3&jm-{+!2x+ zbb+IC=N0$5c1A4o%hX=!j$0(kunwCXmz1TP?hMT*fw7m3CludOP*V3kr&P<09hfMw z`<RM&l)Fpx&|+us0m*Y$gT2B-yE3el3~qcW66}fZg^Ct#jBme?X_0%lTue3$<TGk- zlxuHuUE6Ud=uaEzsXeJ^BD_)-j*8rXQzU=)eqjjOEXkKTb3}5R-`YCAS|cIJZtbrI zUZT<7>*{&f7wfd_qwll;e*<>;@?u!m&9!W^f}^=a?O7+Jr`DXrNwwgyoBpm;6}Tg+ z^wnv%UPHFXv6p$=!VE69z)d8mkm_@F^X4xf55pIGw6)oL4*X<JC(_S(G3c2=n~06o zDrf6rCM3jyn{IPj&7xnTlIsgcV}0gX5!4;%OauWb-30k4=cQ>v`s$?6pJS&Knlf5( zXD>CJ96&_31@~;RJb(+UGk9O((v&){Kwwhk_qr@y4Px|=N=EPn21{ek%T57RpHv-C z*j7BxG3xsTRqbM{sft~=&MY^36MnBcUpp_7>V;$DI-1?OQVE!$Qa$&Y#jiokuKpo^ z7dM&>U1j-~x+5jzFk6qhmNBR-#<c*+yc0n?$3DBqw;_t}5Rm&D=k8dr%NN15K*Zim zY+2e^s*ZaLQl_<>CrizUK~yIevNpM+5#w|e9ZS(3bwr7IZ!)hRRWrW-Lr)<_8yxVn z+q=|rZuTU!P<5Gsq;-ZGi(gY-l&lMs-*9c_%>GBtqfU|Ig`=nsGw7R5Z}X0>8b3c{ zcbV{OciD%x=$uHVKt;yt$E(*m5m2fM3TmjkGVVI3gZjTbXT*Q``s={pzypK2Y&1fm zzA;{G@^)nd?@`uMJ|AZ7{#{1+jClSV60azwf%>v>hDXJ2@y|O64kI)9%nL|-xPojY zMiTmH^0%y3(U3JI49SPVPoUg&@Gp8f;`01o)2zNcya4|3Z&JAaEthF`{S`VTX)P0h zsKU_7K&ay*=MG^d10`g$zHu04_3DlPBn!;U#{YVpXAIfRsE9ogqx;?`Jb983pt1Kg zqyUDhZu}VDUF1G$tCMS6VSe93NQ&zQH#sC^r|uw`s8QLYQ_loh0n@|%{^Zb%*t$9J zL|DW9?k&HRatQvrlmheCIY1n112H6law``jiLFNM(&IE{@O#UW8V=MYsyRHE)^n7T z$B-|c^yGhbbOCF4-zj*aud!?Y*9~R?_>A0K`!f4Gt&|GL6IrU^kk2U1l(}jz#HS$< zii_EaPA8YdHvE>t*i5yQbIds9n8r%0t*Jw^AiL&Y!%pkme~-TCbkg%i|C~Zf$va~Q z`GjkUZ##7vs>`!*u(gisQa<kQli;Cu%iw%&j3GaR8}U*>M_&H;;%h7<P|Uz}YbJ-J z*k{w)8s739I{Qt@Sf_wSelJ8J&BVR4g02YMDR9$iEl(@<`}~x*4zXV27w_$YUm~Q$ z@-9?gXW72*zNEdqi=Lf&R^Jex5iWmfigfVuX~&L3vGa3{Db=jY?auX}$*~jtpPoy7 zi$S)y3=GZ{kIDyKOJpqAZ~w73Gu5uHxi)r>@&eVlMCZn+nD$1qlukvnw77)8xsF1i zUM2Ucc&C!UL01LkIny8mlt)jdMVpDLh1g^Hc@*w!T}j!x-}v`+XD7~es+f6W_J9@4 z3fDw5BTM-_m~pbG<1UEX<%-8ITgQ0Mok{OhK`4qjLvyTA%+XQ)mqYc~s+Q1-xih@@ z=OX>+rG7#K%3GYOvp_ZIjdxQRuUSBT_VYpWpLDhhuQx!9HW$UqQ|lr^R5T#cyA6>U zQ11`m)3+llzG+;=vd#HTh&RCTkYVv=Qm=U(q8Bp485X_Ehk;qX1+Kbt!xu7b6-?wL zW#6awgdx<i{l*GG!_&6BkJx^6MzpIk6<K8^?NDN_pE#ShF@S%Yb8KvhMWXp@bn5M; zFSYV5FY7I88^!L7x;)J_T|k|4BQfQcALq?aB(G-e9|-Fpc}|WVe3g?Z)g^B{=N|K3 zO*K7HA>OD?4==aoO7zby&8@pg@s27@=FZnJ8aHUgg>U^KV=vJVN|?jMHpn0Mpjj}f zM;ZKIq2b&FUVN`xRS)Nl%Bri;<q}<b*W<RlhU1_&UVcH6Gu{^QP`T}lC0<b+_V!Ea zLiEcc$=AZs9gzXG5evG%#LFrj&+lU|9Ceq>djZ9|8E#jbTZmDM^b$eb^KYihm@Gdd znP<)2wuRQcYHi|qP#zAaD$V!Z64D$RIhIFsNCjqx1(VFxQcz+x4@4G{#ySd9pqrzp z!ttLGy^u6B!&Mbc4UQDFEW5DN*Gbz))f{xxOUDoPkPhz8(3+A6bw~7N88j^PuhrH` z4XpS*ig(ePx^&G$YcD}5z*{=9t~4L5JsQ-jAY;LvY|I!in~*nBDWCTV^*oV`p^`H; zR4{fI@r%k{$Atw`WG?UPx}r6fy78+d&b1X)&+Y~Wx~^Zk!=AV&KEP|V?J~n}F60Yo znu<p?X-XPW{N{y|BqH^X;SH6>^-gz&?f1|clh%^OT}vFnH@qsoKPSQ;E3I75E`;lp zd9KSL(*>F8WxHksqW2rEZ7*9mKcO-YoNy=;4-_c8S;_vkDcM2VS0rT*Au=owedk8* zuX-tV{I}GD!xXROrJE549?NHAZaf12Eajl#XCn^_hZ}IrM`xSupGsdRy!GpzW3pCs z)8wm&{zKrE<-X|&JL{HetCt=>5-EQ$ySFxgA$%Ypvr@5sqxu4CjuF3fYWolO&Cb=H zkJi;mcvN|Z*!aPPsk{9$)_cfyJpakSIJjpYc=w%j*J7t?iT~(c)!SJt|D4n0fANZ| zp**cP;|$+*e5FGFD5Mb7Xo}?F2=Q~SCz_oI!97Md29ZSzGvmbI8mE~#8i{Hk+tp>k zn7`GNMsm5J)$p8h_5J=YL+U$}-zh_&Zm&r?=xt}5Yra%Qy^D<g)>cGkvF<aW()F8I zT!YxQF_p&O$Za!vcP;Q+9>zg=e@p4B(HRHFpSSPccja>QwTaSv?@P|Cte%@Kk<~(q zSu&EDBk}yty2{u|iB%<u5+#CL0%za9p3jrA$TjOEw20ltW5kaIEpbjM`A-{SX!8oV zDds`b5o$!Gq}apiOdq!TgI8=p86tHD%6-&sxriP6PFZX%MptXA#E-?Ww55m)17=KC z?Jw<NeR_`g#!I_Ei;rS&^D92n`Wh7N^vr$6EjlcMLSV(G_?}5Bk1TBr80+jwOFSwT zh<6B&C8Kjn8c21$xpVOWAJm*`@~e8e8KV|{%i;Pwe+8SHEyR`u`%*dFEl7^uGKC+r zEOB@%t)*&diQQKv-MZCM4?@{<LGUBs#+Q{^c>*f`%j48OrMXG&o|}N1vIoJ_H~ljQ zhF<<^VQ*%lj84~z5>LNwyGDxdW-+?gTu#9&k%fPRX==G#l2z~bB3>yVXQOb?XWYQ= zTmb6V!HH8^o*ViU<wdRQE~&qH{c+yFzytl(`kfw$-DM5l_7$00JQm3f=VMe0W>2un z2W~C#9GclZ17-Xgh>TOalJQ2QT}qvY=9s;q&;9h$A39TqB>UYF{b3xvO1!rcq;5(n zgz@+SD>?D$v$`>XkQ*#Dmw1*Sat!5ebvFCMk&HL7^!5`Wl{5&<$Af?zgG(MS4(_Rs zJ1esrs?Vjk>>h4Ji*YDxw>$&Kpq&lL6>v(GXV<-KA-+w!EY*I#%{o#u)xGYQ9$jj@ zA-ikt9{To6v;A@v7Xr>a#LFDln&}~Gk%vmivGlo-0;*Y`|5N`8#%tGS-MZT=OzS^n zrTPU=eRY{Djq~?Af8JTiOicrIPB&2?aAC%AbzkT)AY(m1m9foQO$)QED+r*<?7APX zXa$#$;hI&QVa;H9*?cYm1PorK=5mMA%V4bq2}=q!^z~f)fV`U5(xX`aN6d>sbx{`z z)JFN2ocxE6%eYunbs(EdJkUvM!)_`X;H!fd`GfQ5N4VU9-U_tbv;w$~I|drySyZPR zqKO5GEcq)#E4`cimbySXv8fL0=)6ay*M4m=A<*l^6-#n*aO!xy#=?t@E&(!eju*?< zNlYE;bv84M7(A;WJT)_JQ!8Vha?6>piIW+>M7tuq=fVAK84+yY({-lrGL2rdKTsV4 z%@i$;*JeDf4lqz@VEd^v?z!Hj_BgZa$bGf`9U}~V5f!Wk0sNmJoURgKZJqPWD<?jw zHu=;is`Y{{I2hNw?+MMMq_-o9bN3D<UoE1}hRsq8)KOI3K0HRTNh`P6E=_puQY5k^ zqnIy^D$}0mV*`vE!QaC6C3MD)txq6kf%b7bc(1`lsBv!TlwAvuR7Cj?8mz+Q@E&?@ zPf@>|C*`a7Wjy}LXETjr-=@_2Ecrn4>=#|N2)6qn2SS<Q9yNd49u@yr<>^%sq?Q8j zO?y5&q^2=is=HrZEeM>N%<yttu8=EZq#R7&&w5{?Dv1)qX)JK2JM}dtSbW3>BFjmF z-6;ER#+bYYrm;&WI`kwT?hu4)1WjP>#=D%`O0RIQIo)vut;OSf)IHU#F5ikULgSy6 zxTrS~*PzhviufWC(hb?v%v;%fMEMQgO9*{D{&{S+XkjK_5#AkK$ekNuZHq*pC(Eq5 z>l&OQ`~~S2*M;cMT8_uSCbS0wAIHD~_$r_$L@Qxd=D5vyAzc6F>uLT9yY<@c7V|xu z)t7js_KLjmxZHLOq7RQkleR25(T3h=Z)_FwkrzCsbE4}ITqtJWh{%88TYpjsyM&ih zSe&<tjUhf{eZIqJ>G#ZeJSuMJ679Rel0Rg(npb+oOo40W2wK`MNBbuf)$XI4)?Vu8 zc*&GUcyY1N0^SgzExE|s+I@{F+TN$}M!6ZQcSYed5(D1!Ha|g<GGum@;Ggs96&$XX z;L&gB%&J${dmrasq8~jZlFqubMjbWUY2Oqcz&1uFwut#vS67c3mW)4{>y%rkq>#av zjUU%r2t#<BEZ@45%S<~Hb0uz%QLZ2#yb|uH!FOZWWSm0o_!d;%BJXP5x>Nm|;#8oY z@7Q8#>8QkIqgjvNNa@g(@}He}?fSLTbZ*2zgP7)8vD|k~$?*PHN<?EmAu#YoVyV({ zwOv)e?w0ODe0GZH9@AU<o^Lc_m?hUvUJ&_s|D;Y5+*MaB_dHVO%#JZ-h<$@+FtaKo zkM<WOf%7#PrH6|>dNXbiSc54hvDW^JHuW(sX&6FDOwS;#P{{21^bk{(8Q+JjA|3Z; z9O>Z~%~MA38S{ro{7AXn6-J{BcR9I!4GX92@8MiLb1dGQ5;0I9ea_`Z|85mEweBl9 z^>~b=s{ZFv$Q7V&43-E(P~7I0`lN3EfUQcKu1!zTMM9S|MuZYfiEQDEz>6y!8^1!t z{wp|vWQVKIT{t)fD=;}H`|P-9E6t9q5-yha>6`cVsaL5@Y$AvIJ1eJGxO$7F3vRHL z=*=I{%l52_q8DDWN1t!2gMQWvgDwiniuIFv#{vgwEalU4vnh|gJttdYbE!FAeU%li zzfFuos?>08KA%j*?9|6fMDr%~W7b6$$In8{aAU-FVWg=o`E=8(P_a83h10bq$$@j3 zwnRj)P|NU8k9fUQu;u+36%#d)>(65_&cVhHWIw8Xb<PqzL-NQv+r*sfe0PzXF1)p7 z>x6`%9#0%OPwpv7><WLM;wo3fC#N%(<%MyLq6_+ZdM&ssRbP)UD%HNE%w39b+UG^P zkV7(b?Bv|SZ+Y(m&5&Le`j&W)nhT$$T2(_dPzpqy-bC`t=*s<Y@}zVv&=VjT4OfG# z7|^RrAi~IiUK0Osbfqz5m_*)x&JNg<(dx908v1->SVn$pk>KlA@Wt%F6QK@CSh{Py zw}(srJqO}hei9Rq8_YEFL5p;^#=9NKwIOEM5!3_b-_6Mhdnd}ri;K<9(7Wv(bm8lO zK|YO8m;ROO8k>~Uvu^gU7m#T?K69c?72A)WDqmN2818Zml47e$cI9^peRcZnN>zVY zl{=y>G?Rq=Rs6}gnv)VD<JS^>#@ve>mkWrV&@vYTEkV>MQwfqNIlIfC@43JA=&g<j zqxupHxOVL3zr6I3Xwf~Ya#%vv75t5K)~f~a2Dq)wEDK5-L~6keu3+IFUox^(DlZZ! zf9RJrG}5(d#J7!az+$B2TQC@c2G(eXK{#ZQNnLO{vomn&w>yI#3N6ezrogCo?PC4R zcxNVN5AjBLdt+{F^!#XUecN%*su30hL+#Y&ngQ?43Fn5OPu#&`hHlh70U5LEJ-H{w z1O~5o>vnV%1@_JqUEs3Ev(`-A6Xi4YzuETkAlB-V-HEo)*H&ALB(~LIZt}mJxlpq$ zP03k{?Q|w!DzM*HMZ>ChtSL(eAE$V6pH~OLvv_X(jQjX}#W-4}4uU3b^d}e|+^`Pu zE%=)c=CZ`g?gjyPPTw>K+{_~U$`)z|xL5yX%PYV-&&`5u(tccc{s4kcVk)Z_t~>&% zc@(qs2$!ew<Cy3$*D~z#@sg_pl#D1crtc?<eY|u1n;>b^32BML4+yH+sh&M{i(?rb zn6fL~MTKJ>B`IMRxVpu)>{<(lAiKgr^LFF=>7516PnGGxAU{@VkU{2!JAQMIv79#Q ziKh}fKe!cs+Sc%<>uQIhDT2?NKd+7;t#n^E=)?OCCmWj1iRK}UhQ~e=J*v#xA**se zU*==Ci^vJMOsBOu5wZ;M1?plr`Agod3Mr8bjS@hl>39tMi2gBw?4LCIxR-mrdRfq0 z>MtJdu*v;sq7=W#CS`vxtwRgBL^obx-n@&fT(tHv@Ao*6`=P}3=+)GS3Jlfb%;s{J zrgvVm4X?cxW)cAF1KDnA=ok@Kb|uv-C!)!9-^5Ab`H$`sw|Q_1haXz;PQ`rcjCQ){ zQJ{AG3OO1{Qo_oAL6KD-Q<+Y7sor&wO@0K?W8h1RGnln|_;9cd!omTtp&T@>&vy;3 z>}dX*Ts3fwkP+8P%k4gZ%Yj{N$2dMNDXWaQmklvic(CNwqPk6bG?!R|J&-LLKa3(i zdUexU?u5*755^R9lU1IjG&k|-%DpJwb)>V*L2F^K8XVDK-hG^G?K*asmlo35br5<7 zlURPGYGpE`;~Y1t%zL<Nxnoiv=kO%f!35KItMxGP$VLE`q=R6S>3i;jXAETawAT|r zAC}DJ)G7@)8qR}*^DJ}i8ynC=YsY*pg;#U;?94lNVyakzhMfEP^A<ssBd#9?i59u! z#lA}(HP^Cttt!V<&k8x08apt}6smlEm3-;vN#iLdl0!ELDcT#`>VHfuX<Pc(i_)j9 zUWG^yct70H?y%c0NUFg5S#!!&JRDy=9b{iVU;Zz3xiPVylt%eAQDRvB(<mLSwax*l zAw{qOltBrGrwdiY8@yqJqiX4kNG%w@U_ymY8nP5R7JHM{77{=xhl=docM3-oV$uM6 zW!4l+Pftu<7-C`p*jD-zDt6?VLq*n&9=P9YlFxn96*!Wp7GN*o!^qSYC8#XxDb4gR z3~G}nT-0c&rc(P?*E53mOx``(d<s%q-Z+Usy}pjJALXXUN%}N>`6vwf3EuHo^0gbo zx~mg5&)TzU4-}*8>k=ROFh1v}1p9b0=E@=CKMrXLw_<enE?l7m+({Si@zy}La*;+p z3#|!TEZtyg)}u!3pW%bxH}Zw3%&Hv=oHcBrc@K85mcpjoQ?)4q&iS<oWhR%r7>N-X zru-a5ovQw9o8o4XwA9pE1MH07;>X^sCvk~6Rng9r9IoHC3b(*!w5_^AM)Wpkq&gjr zmI0s)kMsOo&!hKzckuI3K~qW#gMxEix*JHJN4X^H9-x}tbd79D*|RXD{j8z@@dkI0 zcIRRm3#r8=mV4gglZz}p{4aa!=%5ieo0nKL{r29VnvQR6G-Yr$e^X}C1(R%9wV>R1 z6>R=SjSfpW#N3A{qIX`vm)SdmwN1`LJ_eT~j4CM+o`dfwHWY10tc5+%3_i0@LuZ3K zRerGKho%;pM_(0cp)F@->}IDl5`m0nP(w=w1_l7h;_T!^JCKGSSF%9A$9rC1Iz8y* zz|GAC!AUsI&R5x&XAY-h;it#+o0T1Kv)URgQuZ^#jf+;4QX5f+58|FT6InJz<MWdp zl2$gpv%`%8fIUsQ)NNYTYoM-fb*GT)o0IkR=^0wp*}195N#wqg>gwV)6J=-QRErxb zbMyRFr97;IFp`{gB6@K_lIUVuU5kpzX>Q7tz8(>t&EXox(Y}NIW()&Xvfxd%vO}oP zw4J{WZMBTh)M^=WR?-Q6^p%S~vBYP@@pq^Pb6zc7ibB3#e>k>733oO4oJ7ilrrW9v zRP|u}l^$n8=o`}Bi4)WputEP@EXU3bFi$D55bXh#$%L{l!1V=(Ge&YNa?(!eB>}By zxa+m99Iq0=?#{A{-H+a^C2sK*s)Y;Xk}YKU7ABUg%=A{eHlgXq7*0NTGT5jtIH*5+ zl@~*a#3i0Rzh-Nz#7oF~r#moXY^yqT+v0hOea}?l8&D|$0or^hhWsfl2<jUvb{*#w z@szOR!L!tK%m=kP|9ngvaHODW#O~EOz#4cS4AR@P?Vx|$TL|;AwYEUHHwW4Exu4v| zn5~CxKG3`Qy{`u>K;ZA`gHdpmHc1(ZeL|U%GdautvAOn_K0r+vCps_Ls|R`0{bDIc z{D#mc9J$cIXsL&fD)>B2Vv0-)iG0p@<rb9=bw+>&RivFS7*AzObR}rKK)s%Xm5Axo zt%e~cEwLZ^58eaDJ^>`$)vhN!yAN11pc7Yv|4Bi*(Zc_%3g2c(xb`zDms}$mkHppz zA9>Z&%DPAa7Ob(J(ZTuq_`&09hiOG9dhlrLVR4*C!B}RhH3{RKX<HUd64YZW@ArVM z1@9mu0daTDgTKRRen_{w9Dt(!^Fxr@9<{`f0zD94Ag$A<dQ-J}`iD1^B`)l<K?b&? zLqr{9#gag5$JcWs@<nbJFYysoi2I=Lhv3URCh!=_;F_gYd6JLb8B>LLEAtI_1&nBP zMTu=Oy*Xn5n#iyA<_Sz$hl8tfr8XMeo0$TIXbfbfDA_8InJZ!UaIwvXh}ayZezevi z9qd`f$L3~JwWp|66Rp`cqlBUPUEVPu-T;WWg5lWPyz?cTdza5qp-ZL%NQ%5K0T@M( z!$RNO;S-EN&VwV%()r}a{h+2v?z<m?_EH^$aYH3fVx;Y2-72S>brs}tA~%e-wTbx$ zq?u9VgBd*uIf)r_*F3OjKn&+?MNo!&QauLa;12X5N`sje0QVlpNu*te%eT5;+rUKy z{;!n+6!zNx7Yh3uv1&DWeZb6^^c|uR$xk1himrfrEY^<{N$<-MHnpew0_$FYTaT?R z1;CGcTbZtT3YPzwZE0YkeF9sFy0~@|(eQevuLT2EWTFlMvE+nevPWVyeoJ|V9VMby z*Hv9+8^?*PYxl@q&ytILP{LG%iNZ0anIr;|(b&cX>qo(Li1~?j1sEN-G0>({T(?IY zY*&<_56oqL??e!b##(0fJRmAn-(5G>T~<~OVV)OrD8cnB{V_MHnX0Ky`v7eQbrK0m z3WX`E*qOi_J#gzkek7IDQ}FRrdxb@s<@U`Y3locSNAih+dpS@2^(RuC1i)f$wv5(f zhDGX*s46O&8!+Ns5+x-hXpQB5x6zDWdd3KbzDp70=B-;Lk%_Uf8H7cA(2fq@rF?bn zMn1yb$XurEN?FJsziC+C!8Hmn_P6`nVbRaQ)NUsWyaf8}x4ef^?X&Tp7nX=`<3Fmu zk(?NjOrtfDsC5omLNPAJ8jI5@a^|EZ0JM}h_SMv=4U$r{0Rp_>B`xdXGutQ=XuVbr zdh3|sCR^OvYR75qucM9Y66R{UrVA#8ZBU9T5vBfw$!4n;J%G|FtK@<&`h1{o6f2z1 zvp^aELII;~LmGU3Ox-?UIBqV?up+d9&qtwnJ`^qS)AD4fe=|)=Fe9(&-2ibv3#YYI z#<(>gy1~J)4o|!Qc_hf^xr!Is0r~zQcS7Lv?C#&L?Bk}8Jp$J066AIUXA;WbdSHPS zCBKe7`8c-3e4n8bn{{idMp9BoYoX_rAF(GoWNIS$=3rfS8KxiI>fZG#d7hJ{id`z- zcqG@h#5^_Cfq<s}_HE}qLS#ttdCDtbQZM$rbTJ9KsLl?b(A&^a=w_in;dJ{S^}NyL zbY>PmuysOF$4UJC<eW=th(}%b*Z`NHQwQA5=%<$)Ag}#TD1JyrK)QC@h}mb<aXMJD z(Imx~Ua(~)UW5KzM2T?TSl1Ez9D9;_+Y4=$yrM`{(1OF-%GghSi}U$jb5n)NhV2gS zwSLS)ef61JUZ;_jZS>|iUi97EY4q74<6I=;l29g%R3$RyWqoX>Isq?E{>^y#Cmplm zIG$tuR}no<WB@j_uDXgC2-{W{+31IcMgx^zpiP6rO5mMF0dB_JxUCCh_1-D=fa zMe`zHz0SIp?O27V-D2qhc}5v+Y-P1aPkF{hEZVH;2$o41oOk8I5V`UE>b?=zm-LE* z@AY;@R6esxO-&sg*qZgVc(sq|UKqg57Wo^JlJYGyqN`ww${<`1vi3qAybhoVjDrui zl)?@-BCGg}r5ikU=15fPy}~z^>b>d|>T_D&-4-?x1YP^=nx<lG3a~S~L_~7y+XKeR zidwFMV*`L)g^ooAo$ngBPc&n+3xF}<l+!9(?pDJ|!^MIf?XbJJYzJZypbgZv-R`x? z<qHxMuda=Juw6(^bISC57P+D2XgUhrozqIr)MnO=8<Mynjio0%O11Ma+%TS=GGBud zpGB>?1VXUAv|WYu1D+h;2>>7R9x@Sq?H&ylb8(1*A9c{Lkx9SOU0N7Sa4hz%QMZyi zbuD@fPY5L|IeB@#*a-aD3g7s%xqP;pe$fa1?7OhLrK-k$f@JTXR}&3ubNRD32_H!} zIhx|n{}nu$XB8hy^L2wtb2g&oZ!xE*N&Y826F0;+R#?SRohkyAR1O~Nq-$I^d@%1` zXT=!il6(&rXa>t4DA;uI4C#y~o}jxvArA#`?+#slwdE-a<|fmXs}Z8y6OX2hf)fuk zVm@QU7EU}asrs`V44ildFls_v-6`$|qfK(dc=lYZKg8_v3m!66_`;qmXm>=V)fNOe zJJBf#b6?)-Kth%4?fHy%SUs3l1HYdYSx-4#Hil&mjVp)6sx&~!2k*3zXfmAxK<&!| z@9twPTvBgW1h73=w#+ndy|W2Anq6Zt8BcGKF&9DGWqH6z@TBVl23`}C7ni4eU=?CD zn8F`IXpt~fIGhA|iH`v+&w~qY{+7kUE>3)2b@bDL1xZ<@lC*N)>C<y_&JL~pXD~xZ zNlAl1%Uco!CK>A3rKj9XxF6*H3+}b~Zad~XB#9B*$!~l=TS$tve=N+EGZSwG+on$s zr`sRzyg&y;l85<?u}2w+%qxAIA>-(ema<2VOtx-$&C>tISiTCZ-0I)FUE!dCt1ebl zQw^NUNuaHowrS8THW!X52c?8C9^9&R<vJv}HPbvQ&j@My@2^ATOq;7H5Tkn0+l??n znX<E1bDVp*G#3lh6-y12-8GF|1}w~G%e$IYy<tP{sn6>3`GVwGm=paHJi(o&4LT)I zGz6zPm*ii`KO7jOxwj}$%|3_0VFQx?!`k)v;LksUtsc>l1Iy`!?BPa5F=7=rs`Yip zGShr30_UuS)5m%>tPIvBP<gQC_j&6goOw|7tL$H=mTUvhuV?dnwAkPrxw9CZ+eR%R z&(+9e!wFh!FF6}@^W$2ui?AQ9#jnS}>ubQ2MAYmC4Lb-Ml89uyfSm)}(AILXt6?7E zIA3m<Zbr*{ZtqhaJ~>}fv3Ap#)Z@o|hW1gAYl(Dg^EkvZo#Fb$nrk4OG`~ag`@xeL zW0E+kqOPvqFsiJ?^+iF<hs{1N!PKH*YSvRZaMr+eBJug%c5rxGxHTv`J>GEEWLB27 zO0AkOes1Bi%xb~NwdINswd%(YwB_{fhoXZ_!t;`|l&e;tolu&Rf@MCQ;MTfa;#TB{ za#~kkfda+9m<dQcs?QEgsyKLMIuaN-DTw<fa<~V;S>dAQ+MWtbaTj(XX%7ou$MsgA z3Pr91RliL6R@U<ddRT72FfPO04hhsF_cp+{f8_SC{76c1hphq{#RX%F%6>#Jtf3wG zn=Yc7J3h9gjadWv1l}KWHLD!BUU?~C(7lsmUOwW%fqAJ|3yDLB&S+;1T%cxz7R7*3 z*=@Pr=C9BiCDaT>F@NA{_}{gcmjyQS6#pY%a~<$Ct2CJj{sXPE4-gQP{S#d_)Z6iV zs|Q>e7*M0HNbKKg0Hv8LI`(@-^vbUMZmCwx1=#c7_sEL5_%4bSa{&&<zlk1K%*A(6 zteA@xbMYSu{Ks;xn2Qy2@gE7Sn2SH#BP-s;ig)oRdt}ACSTPqX=HgEzu;N|(S!!{` zT&$RjKiMoRsm>L1v0^U%Oad$BV#Qqii3I+?n+x2AalHF@ab@mehsXiA&XmFS%Wy2v zYAoOw{LugAPH!p6_sxAF6qi}T-@?z}4{c(;zwGy4Dt}oAe2||f34xre?L|SILKd?v z8q>K^T*6W8?55>Lp;0b!w#@-+m%EUHoqiChu`IGUf+|9H9qTlMIx*~pMeNkTaybWu zog@ccNZ9nZ*L`8BAw1VZ7MF^HN3r`KKMtVg<au<Lmawr5#*(=oi`LRb1<+B<1NBAc z(fR;igUIE1nWe!JcRwZ(JG?2n+JF$bJea#kLA5e^$&CB;>VFc)eBWoHvZaVoiJ6LJ z<y*V$?%;anWR`}t2Xi@t%P+2c&PxWip0quy%Fn%-e~~QMvcTZv_a0gv7Fq5^+b+|y z*AJpOt-aE|M5EVM_M||w;6aDEph3V33}P2lu*F$I_ze+kUEN5Bxu{+XAA{hDca!SV z27O(zgh(WtQvbO$-)cE)VMdPhI(Ru}O!x1k5-lxTH2w4L{GB*JHb(VwD82g$i(|_N zu*=J{4z;~YD$4<LZ?W?PnOK^ilT#{3ez}Wr5X;J4GM~d^2e5~nD>%y^upE)4b~*Km z3-o64;)CTgb8nXC$=1u9DVfC_uO-f{skZ`YwT#8VUbW&S#<Bxht(eT^H~o*Weor!g ze*&bFn!Pw|Kbw;{)wV<>8{eldN)C!}ZuUYUfPH4}bWK{?hgt!dT0qu~*4q?$NRv4_ z<T8%V@)wyHhj|h<i8Dskkiqt`mum;d+L?pZ*roc`1>1_iLe8*&`e7&?mFcxDwcfZV zK4E4~W3hhep4ZgZU#HrZ=g}L6rQ=(99l1oXe>Fyc1#vak#-`}Xf$9gsGRxH71)JWI zv#B9_goLC3#(pS(Eg}_bJv&H@!7K=?UQg%HM3!!{sQ6-ZOzcQ3R16Hrm7rhj{)`gh zS@vCCTsF;dAS?QYp%&q;oZZ{J3(yz;ODO+-@`I!(&z|`48_so@kY#`Zq<tVSGnQ<` zU(?Bx#ATnk8iQc!{UBd@7jU92Em!2z-9<K%*=M%@M84kXG#Yb2l*e8oiOcQ#S1&L( zb$oNzp7Qnsn)5C<rkBHy&Emvrum`4MmOeRH8D6wg5WLPD(i?1BCTW;0Ezi^;^Kvrl zmdO$>5l#-B&jPHi6}49hY+GY=&UUB3Zj`6zE~EAz40o(Gv_iHuUNzm8FgMyq7e(9* zxfv!Tnk4t-Q*<<aA%b+KN!(?b8nB1Tk_d8nT&~7o-i#?r2&gL|1oY;zD;SH5b<x?K zfwA?0H2=;rbOSUzu;BnXEoS^4;Q>W5D>Q0z2oF+}XBDp|58|(W)qK506md*1EpUE% zq$qHNQEj$xq?#~hqTJTn+R<T#Eh1=4ON}x{+1}+}wx`XH$YAI42#Sgd9T_qK`8pz` z5Z=D4MtdC2{S;DNeecs>z2*Bb+Ql`Io^i9jK0X~ldQ-QzkUU!M``Id2rKu;lZee44 zYkT{VD|VMIoeH!XSR-=Gv+^ME;9{w<z}~Rqe?5oq-@f^mt(rXHpHBC4`udX8riRg* zGA6_14T^)LqcBh1#n$&OG!d+{onst=nyVCrcJF?nLNBkDk$Iv~uOHlhM$GrzuD_Ji zf8Md*5%DafuAzoJ$KTe8@0nJ{x68e0&9OsEk|tgn*=#(JR90F_vW!pfYt9ficW}^N zH+<65_*M9}h6ABz%>GeAE|MUjjxE)KuSV$s?u;I_B4_rV1v)$U+Gq2%J{vx_ktYd0 zO%y`DU73&gA*n~R??!VKVg!`?eauh%7b3c)4J%fqLft)ijCb=Y)s2?hZvAI!f37a? zm2pqA*dZJLMvMON6`E&xMS0SYVp0Fq$KR{3LiUXjR{Q_Gmj3(uMa7YuLriWwI{Obw z{jZN-B=8_SXX;m}{rR;1$J2*f5xkWLUY{2K#}(p!;DrIts$&b(kUf7n%T#M2?ccco z{`i%r`C!J8j?cFK-LCvD&vwZWp7=$K=BEE@#?L}w#%E=X`Tl9wbH5)q#;?g!x1^M` z_K(B+A5!_xvKXI$8H?}CK>in7Bt&zDPn5@bd3VF=|7w;8_QEW;hM6M%)>Qqj1Ph=9 z1=x+ltNyE5MsC*R(dW}Ti2E+nznSjCAW(vKjkVMN#ZKBB^8d4{pEWjKAGJ@f@3+VL z6W;Mt5dxiPk$|qHS*(G$o#ghvRJ=b-@75{U?1u<wKC&-oqI2fnT1LKG?ouA({!m#* zTl-r9hlhhbjjI2J7#|uSQ=1j))E*iLC+Y@8RR+vwq<xmuSXd*&(}toj??_Ivqp%BF zCP(weT5ZrwlckG^m2pwn7Y9sIf73W+a`(#F#%&m>kBh9-@tyztIxig0mP#w-^~X6u zqbfav0TYd*8rvB)KW|#>sMnc|(%k*&=j!#ctN$xyS%v#Db+<!kYnHQF9G~iJWx@=l z6YF^M=bP%EEKV>!w76vz7QVebBa+9g3&J~WWcqSubB?lqq495d#rd>;ppo2o+VQ6l z{>Jmd|1@sRBEE+R<@L^*z&2d&pn!e1OQv`;OQ@9JF3s<G=+eNl+IB_x1X0|VFFy$h zc4!Qd&a6^%GTj!+gEZFdtHiBdS`)d=LdToCe8&1b*eI`Oro5|opZ&_SbWqPRV+UgM zX{A*hvk#Aq_aa3fN+4#5M{&=sd7p)7o>@mrx_fnN!{-XJ|7`JOeh_1}zj*Oj<?+4^ z2M9m=Uw(e?U4*2pn>kSdrO@%g%q=T7S7UBn#wysznsL0-Y<6d5Wk^eNv!#oROPqDG zHFwL_@K-vB*FO{lGx2eArNgD$^4Wj!)bS~D=j!WEzeap!6hBZ?r<245FVt-L{L<xK zVX^P$rzss*-h~Z)J$M1l{aTlOhE`TCgM)*uO-&cde8$gS&@tTr>nN%O^Z7cPkAkUj zfBl%BD*hKwbwfcp_>-e=1bI|U3O2nW%RRro$HhABeV-$NGbT`VsA(VXm1{pu0I1b{ zX3V^^AmD*Fds@OssEm6&o)*DnW*(H1miF1TexCC(E9+3ueIt2TTHHR~zTAkA>KqV? z7GGbk++F;;zj!JujR;$%Ds7t~b?B;vOVaiYS(71e%B_EqmYT9Se>JG7yjekC&j&mV zVpdk3xK3ix>*QpkUuA!oNWc6U?CHf{LY{_zzwM@{rx(T-zjx>;XtHh?&ywr;uFvZc zo8PO#G7rTz{e%>iJp!`$_38x~kOdPtVG--Be{b`#t*eYRMSeAmE0TI@v87UwjZ)4X z6#c=?{*t=?V%n$XdsW#!ln(EuzRn$@Spsyk%11woYVcm(-3Oa-_FBVS;{|`dRlM5{ z!dsFP{lbM1bK0P7SZdgwpOXw>=IdA=F<qPAYrv~HD$di_r?|(&C#8)i7+^5^0ygWd z&i=*0>X)q*tkzDB99BXrDW~Y&|5MqU$3y+a|D%zLN;F8eERn5{k|IWy$eMNROOky_ zc4j6d*~z{aSqEd^8OatQJ7XtVhb&_mjC<zuyN`SSx!>P?{QULyw#+%N^E%Jh`aI`N ze~PWHZv6J;k019Z>)lz3x)sPY(j~;2Gnh#0KEeG(X_iPtfYxTSMivMXg+iUygNV3u z>;Y*TbEJaFO?=asq<!Dw1=gWMF034^!y_=7@)w!aoag+vff7ap->~A0mLhLoVyF^- zjXr91Iy%6d1vafH2$xP`yiu11#xRp5%?nyarRL4OcIm6P1J8~zNW<~y&rb;oVK>IZ zS9|qLP5%z&JsST#7mdS;&Dl>kSw~g<ve{oJ9DDLOtnR1?@5OjR%(K{Q%(XM7<<{^2 zw;3QSo14}C{$#*qtOO^I7-?#1o?M9k{28*`;Bi#;-rJVPU~q$mjFMXgNb>Hp{or#H zq6*-Vf3Olv@Bizq{~s!mi!M7?wY7eP@TQwHZ^10dd+0gC)zaQ~9NxPpSoL|~l~KJz z5TnlD{!~jm-hDq2BedI7c)HTAn9Q}7VNfSwVHr-AMtemNNQWNs`zAjGPQ&`xoSK^2 z^bm)`;TMUcV`IJpu-?^+Mpl*A0)hF9rUq;3@G?)0QpTJMNSy9#hcrpdK;q@k(jS3; z6avJo_JR3WhNFQ(i7efOxIM~qC@@ly`w8>*u4M+lkWhJOsI9azOcLLqR98M&Fgh~A z#^^idJpQLW)}X?05$_>6uW)QZ0x?kq8Lkqor}hHcZfH|^enG+A1@x%x6n%0QA}~H7 zq2ts*zmuMXK@wn@2VW%CgU{E2w3y|5zT*y@{Z;Pw7-e3QwT}P}UjSJurwm{4-=O9D zsa{ce*?*We+NJz=&aaYuz5@n8h3rp|It>RA`;Q!iQ)r&X$aAW@I2_yP)YNMhaVOD; z^F?mIzqzRQ)_u7_DKqzv!fmmL&s5>KJJjSOxx$H_j*iz?*km?Pj!o@nFkM}5C=W6i z6AF2C3m^s~*eLZ~TEaknc0hhQbUD&MV@-hkR=HG~!1xQn__fsH2pm8+<<D71N!{ap zA)|@uWcRELOG<sEl2GDen>Ob4%xb>%$aDj@vEiZVrt38Qy~l5T6xTeG!1Q3Dc%5DB z>i?2OSAS(q&G8*(7M9|YlD=bps#b`59yrw6cdGV}CQ`@1V72Gq;2^KUewYND<~PYs zMnqWef<5*`6-em^Z*U0^-Vd;(ALq>h#CKVMF|$fP0aQae4wsiqsV#jQ<o*t{FWb-^ zJMr(iwmpwRbrD6Xcm>U7-FOD+;@!XZCeuo_UO#xF8s+)U#ipyi-UPect&g=n&CZ33 zkoLnW$CqtQ?v1tEVMoQ|&?X2X{<2Tk5l;vpp5^+DmJiAXf0}pOi<003Xh#7)UM7Ga z2yY!otPb&Ug`I+f77UM^Di_GE1lXA+0#g=}Ht8ntiviZ5??Unm3*81>mrP$yEO7ax zKVKM<VXty&RzYLeDW=aqvVRlCs8*joJ~=hK5)}V?smgwA@<D&meptgLkI8Z?!PYzA z9|NUPHU}q@&M@*%zx%W@qE^L)j9)O|ayA18>e_|R=ASEy)Pcc#2lRKf^VG!@Xe>#8 zGx!XM@LJ(8z{hWa!0xi?6wm<;xCAsnB43LaOyU}tj@!!|b;|!IxOjY(EaY}4Tf=z7 z@+7Npj!mr=?}t4+{<sVgCH1B(K0fj2;cpgk$Nd2}NQjC`9yYhv$T-d=#`Z}JKbL-H zNRm7Y)sz2xqU$f8`}g(rS#XtnFjF{GZXD6au(7e3(k4W+WFg#R*&@hCUAbbR!`56M zF)5T{`~EF|c-~`D8kZAp2e!Pv4IUk=;}-v?w=2MDR<!<+z{>Fj868LN{`VJ?9?WRb zx6-=bRPdf4ei!1Ar+)9g0$w2AE{H|(!JXQTnj47(@2wg5{xarnS-Rx07UJRg^XH}U zl^<A0y86D&ASZ4tsflx`;zU#Ffv^Qk`rbGH(Vn~5+|xfAI(n_8T>jdQ|M!OZBMxMU z$b|aP_{(y=#|V6@=q;1wz<`~zb9^%3OGys_Kj%z$jI8=i6-O^|E)rTpIXp6goqAH? zFuBhrT@P!DEp3>L$eb8`)E{*qIXC!dY-EfONwdkaH*_Zv96yFk>`j&$!cIy$1RpD% z#8Xq}Ai`%ku=xmu(UH*(LbeqcGv8HmaBkH8EK*^A?e>tG+lv<=zN@eE7~Oc*K7KN_ zx*g5mTfr5uB$->6sJEy2Bza$>YX1M;+DM?iN1lBv_bD#NpCcB&?0?!x?SBHK-i>+p zJc{#WKKOZ%&)+9blu7X`!PZyF>txK|*oTFMqqYmum-|!KwZs`4-irEeykAf2z~fe@ zZAtim8y}dz4gXO!IWx1w^<g>*BLwm6-1k^t+1Ni$NbIDDe;uhd;1fc@q;T-!*TBsT z$UFKAtQ2Xlv6f~4gP@d3bMfpiNf34s$pPgc)6Xm^5fZ){Ole*`l++ACRH3zGE<qDQ zvu}lAw9K|)1z*(IXuH^f4xc=M?a`A50Y6iB1$M5J#{Yy9OeOQ3f(GZy71C4?7hFz) z)Is<liy?PiIiz8ADR>!{J5HcZZCoi-GS5+(Zt{&%dndcTCbnKQ6>{&v8&*~t{b}c| zmAy=zTcK?$9UVT<j64eSkVg>TKz;#(SCMTjR4s)3s~3UuanYZ)7q!(yVLJWNKK&$s zLeJ{LZ=Hffo?jPZ*+U4QOQn--Ym;ek!^6W~781iuco^jUHq8I3Huy`RCl+bekr47& zf8a8SrYS^{kq3c&t9x@fIr~G)YYwmxu3E=fzHey*CiY+3MA<S0rIKp;{icb(kKZ0V z>11D&A1d^^=W8OdoW)<J;yO);kcQMc5{-p3;u6&HOQR)|A`T9{hkg8M2DL8DVq#+B z3HK%&KV>8N7|IyMs05hvv^%qh(V>5153}N!!QK_|rc@FEHrKsiX>zeyQ88}|L2Jyj z-_5?aw|97cEKE?em?oJ_)&Rp9gsg99SR81><ME~+^pM#fF`<Lzx5#4?!BloKj3Td+ z$3}q1@^sC}OaH^$0!|PsGe-`KUL;qJ$BsS{zwv#&T}!+KP3N_4XMZvyr~WV|AEJ64 z(_p-3T){F6TeRxt&U#wm8d2=^CO)d<ij}t5J%0XbW!{w%Px4BxFos^3E(2XbU_Kpz z^Sfd$pE+KIJm$lK8<kY^eIh`6CeAM_CLyTMxp=eB!qKILiBhkhjZ>$`j0-}=L>Fp+ zk>dXK9BwquJ5fO3dkfR-+L2q!&O%xpqF%3-Ln(HG0gxj57^H$^z5=jkATYFS%W)uq z1=v|O9snyU0ao;@85t{-;+n>L`rpCJKSsH!_<X7h3tOYyCx*x86lg<G(^6%WVpJ{f zmiwytS;Qx2q<rD_Sl;mDIv>1*WVgZ}<tfVRp4i;V->an@Ynu}+>tWd6&~Iz8Z4Aj2 ziRO?Gt>uKV;bHnm_d&L6C;YwX%=miqF+p80#jIz*tvmGJh^J}5x)Pawus|7Xk=Si* zV|GLV57<%?i=5+K$_#jMD3yj8-2V9w=6_S0@((Ww%reA%sQqPumm<(s(RUyC*d#F9 zZ5*(tq~{`mS%!Ng6FJ@Om&PVTZa>;Qtb{39Gu~&-M@qek2}7VNz(FWRa&k@7IQDXI zZ&s)0#^&Z*OWg!Q<!@~6%4B3;N$t6!0231_q5A4~<Mmz__%oP5!m>bp1-H40C+}<M z^YwjNT)}mgo1lu1aX(J$5}oTfjel{qu&5|p@$yHTC3??@H4wo(ghVF^Z0oh6oBLCg zxv8&L*%?|M6sC3j9(fc}Jiiq8TP$AF(92PyCMeNrI2RlHn2jrX3C;af<=3bpJb^!( zj3_W|{gJ>KZ3<vxZzsnC0FOIBhyu$OYQTW|kes)kL@aRLhOYzXEs{s<*%w-nS~RA# ze)6M}k8@$%l5sMcPTQ&{1JQAXR?>5ynq^nq&HnVG+MQ>*1sPWD?FuD+<IF0@MW5<l z7Z(-|=4A@KD@eU`(POeh&Bzavg<qo<D5lA^j4|iZ^aLz<M0mdhuT5g@HN7V>O6!5Y zZ*%f#>X_$;k(>-)ioNu$m6d;*74;!b4i0;}-4|)Ij<cIaudoyPRBYmHGi@lG{#_b? z-w{PCnS@kBl9#N9ohsQz3aTrm_4W0<6$Ax?s<J-wP^j#U5X}FV@A7}3!grp}na^~E z;QCEz|50$O>gcel4mI|NFoteSS2sxsWjV~0_a-{p<V$|Q-l%cx86Dqu`;-q!WUTD1 zIDgEu@AgEqX7C2v$PGqkhJvU4Ia#-CAxJTgGQzj}(pHdco<jL{`eGU@u_)l<)v3sc z_d-0y;%y4IYMRFg*Dl5A?qW-n=3;UkAv#u&_u7t-M4q`qXNVooML~%t`qtKYv$qm{ z=)5Y;@^^o_qbYi#`{f5c`4RB0+fQ{7rgeMuv|u#>_<K#i`$c*kgz4@VOf+Q#`piHq zq(%EiKB*#QV0$X&?6hAee;8h7MTWDWYI-A0{o)v3a<6oU-nP^h;8`s(IX^0D=_9Ky z>EU*WSN@)6XYZIk-@&$7Hex^eMAIj@*raBDBER<XEI5m5p;g1Cp>of>GHrB~-Nb<Q z(+N2eC~hO?m#xwd!~6Rl>})LZx>WV$`ALG;b&16o40L`w=wbhNVeY#RzsK8Y3umn4 z&{6fK6gpd+%*c;K{`yQy2*N1Khq=>s!GYFJK^6CC$!R|U{d~&<5ba17xOu|Xp$L!> zI20@)1)#d5X(_luhO=!dY;^41qzC3-=s*6uk~DX`w`1*qU#rqH)_U#e_^ud@Or#Us ze=@&d?xQurX`!E`tk(Mv{}pk1o_C&yNl;k0V$t}rUDa(t{*aNe$w@}E-YYi;qoQyE z<_(T;xNkUyv5YjO*Vq+!tFWr0C>pxeauw*UCixD7=J!VunfbQ`gy&(o5Bo!-N2Cd+ zJ!3z&!s+#SuCl9pu}uWa<8IleYdsab;J$+Ki&%?4$9ng${AKRfubde%GFE^3=^0o% zj&#`|HNaYOXj8sUY*8}1-rSRozl;=PW*U_PzWbf`m{2P}i1j9V5MHGTrT7edm{v0$ z&kG>=A__7AV9lpSo~zJ4jyp&G@2l!%54FjYy3z5MTTz%QtNO6NCMy>{47>-v*`dw2 zwO+~oD|9!1yQ`H#kcyEZI0vHGwC%TFDMCEgDl^O}RYL4-9Qs38(*W7~ACZemeQ6U5 z?Xw9?y$JMaiAMR(r!SB;92sLwT9=QHry<NUicyEVNQwKijE<QZQvXiK8Y$}*?L*$w z)U?g`kp8~lb-c?BQ$qAVmaJDi(E<#WCy`u^JRQ$FPvbLxTR$v&e$0E^stjCwG*q4$ zB|U;_rns{E-8l$vAyB5zKEfGeB&~v1;?pw$MmyRBXhz`4Htdpt$R&Scfa4NgdjJ0a zzf--=S5jhI_TpzcIx<KXabLD9?%6ZOH~$*KHQ?l`@xeDY0y#%gC5$>qqcJtLTW zKo3f)6zLi+AMO4fzsg&y{7{#oL>koAJ!3rZ2#2|nlFh^Kp6>WViA6!K2ROF$O~>`7 z7_r4vN7v5ZbMg*&4b2W5F5T34+u5bz(_=>c<zh!7D~nrJzlZqqx5M4aDou~29zTBF zq)tKnx5Vg6rnC^P)vWw@Cm@tgH=rn>1;W$yltNTaX7P{mpS$j}25MDBTY2(Y)5cp< zbq_L{4XpM$a=L?X5EZfJlC}|!bEs>*_N>$9DKyt>EliTSdGq^1Qm{ief2@J~?vw<J zB}Sb7-IKW08~ip{&UX#fX3JLNlvNcKsS(rjwd7?235TVCaL2v=9HKT%0xPfjmw~u` z9^K(n{PG(41kk`%Gpl3fZ*a<R;7bG59JLQ}C52gB?}wg=X{_HBNO{%2mMxtHi>ZgW ziy=zdhI@swV6RF?bz!ihhy9S3@fYihiiR^xn+L(^qH7mI1bCC|u1-5ndguqy8R#77 zt8%G{>aAye7I(tFS{HZN3-}qns@7b;nPEDH)}M}#XE5cPsC~Q3sdi6aq(8#8k)zpE zHoPsF_WsS;|F)w$`FAr43mAVigC<I+5Auv>$}T;DCtR6c_gksFS&o0g7Xb_1$w0~? z$FDPP>|f+(*VgQ2VO0!Tk5ztAFQ5sz(gjmW+Hc6=0U?3=?PeFaR5_z1DFV#Co3-~* z5d}O;)O^VOV}KQ%GK*-uqyJH+<Uawq;<4Y%Xm9?9yv*KerC0q`uY=?p{VJ<1X#D72 zv$OYe=I&PaB)6rt#z)1pVa=J*Fxh}CJ6N&t;)hrvqot0cc#iu$IR*(YRO7qKolc*# zOBK2GW36q@qSZXFx1|g1c>WyBTU@Zu_s!DINtCv;Nacq-i77Uyn2CT-;3#4_8Og?% z<ul~8zw{+b^(fvGbT!Cj=agGpFIF#|X}0vzamn(~zXamr%=Z*p@Yg#U5Tze#6{9aI zsc&?w>&h2vRS7cdX&>EIIN$T9p%STd{+@;Ibz6uL{&_A}0MFG++hW5~0|kRG?C;J* z&v?I<0`7Hl=FT&p0dC5c0ar-nk|mFM&oC0Ndqb4&@B+#IGyqYq=o$Gnq5vw9GeXW> z6^QK+b>D=KK0xLg$XCsyUFSr<U7@{6N3v3Os*IO|IHE6*hg^EqE30TD`hbG_^YGZ1 z&%9p2XCB1f-o_qRm=;t;ggV#8EQBATwNJgdi{g=XaMf&P7OpK6c=RUskrMalVROZs zYC}*fcCQ`oQKl*0**yEE*6MDr5*GFF8n_;{`S!1lJc$hR)b#hoZ^K7w*l=ar&p?JD z<|jxvfsL1y%JWI3RFAM`Q@Hk$MjMzINeb>S-Ird}j_AB9`JhF0HRU3wPScPCoO`X% zSVW<3AH)h0tv*!65FMTp<-HL_uA;jP3uvbk9)j{0J^0#L*Iuuk;GW{{PA_wVIOTw0 z-YGuD{N8M?gl>&0!hjuww_PB=CwQXkWE`?bPOkXhHe)*y_)0<H3X&O@k?|}ruBP`b zG5^_k#b#wbGLTO*zdE<!(yxqyNVCv0Eo*&9sE_Ma_HX<Szs5SgrC>-!4N-{~GT1Gb zQm@TNqbp3*uU@m<RsLmTlV2ggc-qjL^Ip$D0RpRC!U+ZF*=GJA{=AisHU0f)ENUI) zF@~P~L&30n3X|WNSB1YUTuZ^)O_trhbI!hQl&V>q?TW(v#5nrnvQS-g+ggmrw!*S6 znIf0^Ubgy&Z=(gY;m@mkL@6$(zi-AsB*h}&i6|2RLdxO6%YfpxL7Q&N;vs2>XW$o> z(bYG`Tn^*HpUMpx8D7QC3&j||s>rodJdH0ngCx^fuLTnFiGsRSckim4#OoLPaMNG9 z7L1B=1n%o!%9Vx?Oz4p?NV%6t8g@IAqx6caJPsCMfxe?Z|5UWepT?IL_?=zytpDn7 zc=B6j;1~tpTxyU+`k|{TA0Ar{H0g>Sz~lmt9bIfh5W?a+MCAk7z`m_pE(eP98Mc)u z3$6p0N}^Cr!)D!V26Av0qBn`##Dj7WeC(my?-(rX!tp*eAu%G@7@5tES6fC@;^rqF zSn%po`IB>qXd>Hp&B=^eS-B`&L5U!A7VWz6`I{u|P2guH4VRAGRlP_aX0m5*Vp0r^ z1Lmc+%!kqYyLLeozGZ6hgQ-G`kg>>YqGlT!QF~=Ix=Ks)J4D&gDEC-&z900C!1t21 zq-#9gu$gD&!+WKyT#j;eA?gf2d9~e22vvUV0!DRq5mBO}f$!dOw{E#O@<q6Z(7htR z#8y+}W>-KLD~=ts67)Nx3&8}V5=r8;qv9jzLjV2b&ayKgDmBYM-}7U2x$?CHdiH)~ z-(|kQ+Od8s+0_8r$1e)(@zC(_AE+Y43Vz=5knSWH;qVg4!p!VPu%#MUJko?g6ADXO zI3E@VQ-w6IiECo~F9VMz3Ph6$0k@FxP4>|VyNNB!7#CFfVZad1N*Gzybh0;wZEfep zil6Ns+e&gAp=M7vU+~Tl9~T@8PN$xXv3X)ss@50a)CVvh&O<_~^y<f{@%YcjC>5aw z?B6P>&RfWZ7qg>X$0%XM5zGGCSehf!Ye!?dnbqk{;{gnF_JbWalzG&eue<4zT;g;z zyzDTPTb!K`;^Z}w?7Y{RZ5fK#Y}k5c=1_?<Yrq)|*d+zGeB*67WjKJv61kSo@lyW> zQiI07Si8RQav&8hudqt>G8(%yOKl&rZ$xQGiOt_qcbEM@L1}<I6JjiG_z_kBu6DRt zWHa8^=Vb3>=awa#OvkqGbzjHwz{B11xEu>xT<A-G(4$Zq-#O;q;Pz7)9LnQ-SFEx- zr~6I69X<dD;pIacG!Uch4rp-f@7gj3wYEI6!YLf^-g$J<dJS*Gk6CF*@WDn7fdoVg zaKfOYz<f|n4Ghei$;X%reuv4HR0mm|o@1i0Pzc)F-zTh0%$;$kD9ck@X?YKaej13% z>h0|nYLM9oO0_wKy#Mi5VT?D0CZ<POvsgMTa1a{2s8mU_4xIX5AO&FXbcmcNusg<n z@2{|bsuM8{j;lT^?GbJmH$6ysQ1na6X!_m3smHXUb0vH;Xp#moC&dqae1uX&9DjhX z8_iZ!%({(!*g|*r<Q*-yuSluYV%9csDz+H>!Y1p%hIc0$w2U$H<iz3t7MgInz=&Be zdo?PxpnsQf6HVOz^<X1#3)x?~dCPYr>(Dg|=O}dL#zl~o{BMzh+?w7M9jX2225$)_ z%`ig9js&^hzuO4U^lGKrKixV3C%b#Kn}x6p*gQZ6gynjD^(2Jf5l&iprj=F9<;!r2 z5-()9UgSNY$2ft)F)xY_^UUkmR==r_`>7fG<*p`A{Ee^-)B!nqP?J|QVvMC9la}A| z$vu=jVGgx8fjK+3uth0-SC)f?;!o!Dl+mBOLEG;dro;G@qj))W1~5Bscdn--zStO% zh`*8>_nS}>6;7V;h1JiHFLgr)`m_*JZo}<bX<C)MqMvP*wJULlEnD@Ni}-w1ga&}U z(jHrfS-YPIQ9yExyZA4=Kaof#Of>cE)!mOl2~}Z^QWqVzHLq+G3JRB@(2Y}wedyV` znUD6vf1p{b1pe2o*#WuRn3y7OIdMBm+Q}Ju;Ad32LLqs))&Fh@c|G_`k$R%>{&h3r z;c~{S<&1-8lbabsug|uNx3Fx`<{qh8Ts7!hgEX8<LiY~Te545riOo*Pvr*3p6mj37 zVHv}I(*s#$J9MMrFE-Wh!;WoUrj^DCF>3R|(?pL6YBqYYX|oGP<!;GMgevE4xZk8C zae)4Xpf>mVD%vNIzv^9S=Ghh+7sQJZo#`(%9pXATDO_%`(ttXq)?AG$KV|QHk;@p+ z`|9BHa?`QwaVrKff~G;5`mEWX-nTVS6|P-TZdmN|#ntgP{z7iL57Zn$|3z;FCJ}!$ z2>t8tv_PsMT@T<0Qiq%ad*i<!PD)?*SN>Y;&Jz2gPRdY4kJ0*dKI0xzikYt6SAyXW zhc!#(Cx7gE^MNoMB=!zqA^m*)fgyFJH$X)cl($sbk?~1a>^Y;=$U{yT$Xy=wcYUg6 zz=N~Vp_Tn`qM%2rucTj5?xz`WJ?_MICmWlFdlB5dmB(wXv+lf;z}GBn$dz~@Lv@-V z<}0;XuTt>!l#hyGQsrXyqet++zmiuI@zxc`*T10FzjQ%nqg$Cm*uo<1-mU&1H1bVv zbTFvDmPp9rx5T*V&VHm0={!`^fs!`q-t}mkLP`?_{Bv!#^<(xnEw!bZhZmi0Ho$~a z`F3FB=+U5j8incZv4TGHk&%&RV}128oz;Av-)j%FT&_7Px7><)v2o4vQj|5c8-&;e zydbuEs(mste^kmqu1OA2w90GV;29V}5aklhY&@rr*v<xx&~)$4{{4yFpLM#54HJ4g zYkGivptg7cvo6JW$m!>F)Yf?dZ}pw^{Cc{op>jfGZz9I-|CYm)qDlz74S&~E9Dfk- z9zS!~w<p!#;iS&K(G_=3vw&_%qm7)rw2du;8RYk+{eQQkCM5ges8d{W-XyG<K<ztc zO>=ZC*u>|z4K=X>eX~_8(ujz3_fZtC8&y(4%_80)k$31rcUspP@4c;JY9nrnEOzvK zwd%dq+*0j0=_KsC`m@^a$klfvWVYS2;W*=X>YaU)TILL^8RHwfX<C^F)_txALG2!A zr)3X+T1<*NpEalB>&M0syz&i_iWoy-5l^>{kCaqPdT0aOCbcI);XeE@MiH0cYf_1? zf?>1T6(`yg{l=yJmfStQU)b8cK5=#&W`<34Iz1?DK$dM`*PY5eG3&++f3glH(a7C= z_*?)@`xbQZ!gP4Y6=Ihddkvk2Pl<_VFN1X8h~%s{qVd$m;4di79gtt@4-9U)T8ojm zd+U)bM>g=RgF7R@VzF1ta>P<xTSkK-@XrTtld8Fi-EaDy{1wUh=&Xf()5LUlTTior zd8m3)YVM-;dlOyVpxI{Y{u%v0&d9qvu*Fqn`6nQ>5H1n##M813K1G|<%>3<5x4gor z?#>@OMvW35&Ri>yPm>ZlosjTk9Wo{i1zlP8eP(pMOH=z{IRzKV9I=x_oEho_G1>Xk z@?6EHTAEKnas_T%=pF-io+fN>L@oD3LFqzqJ@+|5h<-q+{DNwdyj@7uS}?fQwD)FH zGKU5Wt&%WE#rhm+Nm5*nX)#NDilgz}UI?<3ILSOY^hmvLSucFN%>s3dpr+oRcAouP zk=2O1XFVy{=hXy1Q-oG8MnSQCk_V3a-*@}pW!a)Mwx<RrEYJ3r&`0nnk5|iC3RjA! zsmdX*Sd67;h$oDrvo%A_r^S;~aMgH5OJ(Iy953{!pb1xOJ&8u(KNXu+j5Z@C867|R za>5QQnLQS@Gl`7Is7F|`#sjJ4i3s*6s(!T3lI{KpW78DE=d2$G--74evoSJ1s5?q* z+H2o5b@_eEYwlUYT4)bMFNa-tPxW|bNTb5+WXD3-*uIvAYCcM8zjpe_Y_@8)ezk(& z+$sSnKAFLpc^<^M?|){*w5Urj>3SUHFcO*zHg2n5HQO0WQexjfJy~}0c(t31cuQ=2 zvQNAsRJA0iXBe`0y-FCl#3IzR&$2O8<2Qv)_=0HN)xc+Mub*v-A*M|{&xVQ21(<H? z_PxL@#BI}F<P6bdh}Vur+9ffHKB~m>7Wt9t`(u=!wC^4pc@XG|(A8f~%?^^0rn?!2 zkv-Sv|DY(YAM@6>se>7BWME+NApIXp2Zq&Ab#mb|7wT@ozs3Evd$!3l(FrTZX^T-I z(3W)zL(3)Q6O%t$F{_tCO~n(2LK#qvlnpN5{bJ42sA9+OvOMu{uEd=xlSP0$srNH; zv~PhNR|%IFPg3Ng++xIrHq&X>O;y_qJVgSA`T=NZ3nbM~>?rU?FPNQvDX@Zb-?VOR zO~R~IP^^pGcvFd^9bq-;1buSRq&}5J6@$!F>lo8#9O6_T+%P_?di}=16}cU`wTCFz zgPG$82Uly_rQMbk7aJVk_SmN>p&YoG7na8`-oKg;0yArmzuW>a;k&rxhU9tc+0yjw zM)~Kv2IW&!?L!-rv#0YF!XvjpKg;QPMyAFd#b&3e%AdL78lL@Oodn+p(?(6da)hNn zr_amJnk(D-ZIpFlKj++^Kkl_YOQ(B`an7t?vfLkE#2nxnk2We~w=IS;GSW@sr27?k z&o=xsC$gQcE<Wh@3WBfiZ+UYX6vQ1g_&%Rzj2vlum=-8vGH3eeTJA6H$?A^5H^J^` zzxD!)QFZ946#}t3$gn@P%*JjeeBXDX+=}?1J*OlRYep>p6>#opQ=M&65{j`d+XHKx zhlQpcC#(phF3W>5D5%mMfGmgF$MqyjP<|!FrxwPmtV^#sL~bF2&ZQ|@H}>WHu(M5` z*A^2L8w<78tNT<jei$2a%@T*DMjRIz+(V>&`}k4f;D%>~hGNcXT#9{}@9oCAx&gx2 zsz0&@8C~K6RkrzMtgtBE<d=i;*`OH<A>1Eu2l=%M5E0e${q44}6s118pZQQ)N3->z zF`Z-7DX?<G*FQxru?)5<ox9ab{{n@Bgz=;Zr0ChkSD{A*cjTb1%CF=92@L2i?d59I znzOL5bmA@NY~aaVJ|QEavZK(JwRfe_#WK*AkL;#D9+8?EoIp0Bz3)6xK)giJ=l&Ba z)-BWKc&Vlnrh})9VH***3fg}CV`F8qkPs1>3wtCcMp%}SLXFh(%>_B`o~k%+Jw7;9 z=RPfN+F{5`mG7;4w_N}0<@%{~J!WlsVrxrduRLWFJ#{<o#p`?SOxk;@`s-Qm&xjl1 z`kHS;*5%6jN3$q(llKQsbrr|{g{vYKKS6V>E^Q$z3;a@0vr=Z=Gdl;)rO2b!#EpVH zqTNB=%4}lepY|W}PG&Z3>{j)Ll{RIkCtuAbehT|E!$HJbOWy}O(vsV3R?a;ZoQP?g zi%~sQS3IO^a;BE!!A;OfW|X4JU49xG8cwT(L|9a*px_^+w!Hg8gfYVk(#V~^f#e9k z9~BR-VE?waFT_lOG*>fZjws;qH^6z>Tf_|gnqWftUouCww(m*D&u8YcL_1ej9|U`Q z-E#U?2fM^9Jyp?B{_2~uvad5z9OB29{@vmgSs|;Oj>`0Yc`}mv$45yh-Ea-5|B}ro z%;-_EUyASV%!OGW)2)uyk<{hy+~s}gl9M^-QM<VOCV1eb+YUeE-1(rR1%$^HRqavt zi<FwwQfmlr;hpuEZvM*#3w?JFE*`luMzG%9d(pYK@c=pA23nN5M9EH-_+#{-Z7(Qw zb<l%cib(k@tNeQ=dVfmpe#*t>!tv*GKFpMwS_O0!I?i|g{wGt6E05_Zs|r3tAvWAB zzXtCO>+0(M;EJKacsig4)m7%Gv)spd_m-8Qsvmb$LGkPtC{DDSmQ%HX%squR<+qHM z)}vkcey(tx+jn6oF3#dWkkQPi>h$ke6gHE1=+gS}tS{%fX~Uaz6QAv)?PFAApE@c@ z&m!Gv!zcukdAi5Dk>=Srfl(S;GrdV{>&@JDUzJuq;P5d}7cN-6WjE94E!4g%(XbMD zwxT5iOGU`rI6HeDI9xJLo_=KA=P=pm9gA}jz9Qbxr8{vZbrhF*YqLLAgZMMgOD`FO z4d9-*s-`1q>!bR3JHnq>GaG2rmbJ$joCYg)cJlRyF2ii@+c4+mr3XTWN0^iP8Vp_y z!E8!7TBfU`S`jY@>palJXj>o&yJolx{m}0){IE81duTB-g6iliLP1N#1=(xg_bCrE z`X~Z!tgFiwdOt|!+4VVM=rJmwe(uS5<A3R`CHw`|<tw2wqQvf|v#=#{vK*uy^GYvE zMm3$rCn=jkGoN)s=Mc|2H&c}ap&Iw~M})nuq104(4Fg+)*8q8Dy#aLUg_myViaErj zdunnVn;X{$DwK8k*eBac4<pdrn%?_G$%v=9OF|1UC^@$!M3&y5sM)QSohNj9@{jWE zVoRo8?zGDK#o;n}N0hIZ9(+K@mbqU);GemCe&ps4lF<NRwHD9&HA$4sb%pemONvyj zqNo4z`Ap%jA;DEbN&90Gr%AjP`p5fwtl^I}n+SZ$`qFX*8QHC_`PNUhtMcfF?2I%! z?2H`kydP>au~|Qke5p=eMd3j8^ZPJH<m21_+UNk00%Si0j$xcqeB9*BDa*4&{1D>m zq>9k-Cn@3~yTing;08!|EOyK^bxQy9KWNMBf9~oXNcaAj;Dcj1Lp0D?N#bG@k=E?B zbFP`yb)#0F3OxquRTA!2VT4THMAa|<yu|L;W&QFpp0(;r?{wxy)$G%gq@H!1*LjV9 zg7&8{PiAHgh&>xL>f@)oW(nAlGrw&3LPGzMG#}QZJC19tBY49Ta|S)0I6G-|ayfna z8BVA$E6tpOXPyoy9GUKaMeg^f3HxmCE*`*~;XN$4YG=QprmiU`q~|D#ra)-Q3<Mi( zHR&E}D#n@08^mMw(wh415d4PVWP@i^gLRmcAiL+(0LjV6MiJMY`uF5u;kRsA&|X&` zB$^;1toKV<*!A6&SEM#;+k-cb{#KYd&$@Kt*?6_kF0y+t%zp3T&6Z<UPBC4?gds zr&P`j^yjJ>J?HPWqx>U8wu!FAbWfvVGoG10{x6Gj$nYIP;hHE@PPE(eORMw!6<ci$ z@y~RDUNm-Z=h?pR&vVB{btWJ5L1UjXR{3t+4{MYe#I=Q1tv{;0G!Iv&bgD>T8gd+2 zt3oj1gs)dMHT@t}^N&~N4HrU$ZY9ev>0sT&KYs3zGu&3)P}{&wPMSbf8cQFPvxVHg zCsc1>dB4DHvYMLRx1ge8Qt^>s{gZH-A_T9XR@BC&9$=7mDE`16-f<r0E>wPrbBhrm zYzjaWVwwa5$;6oNque2yV$F5kcI-zN;Igk%z^A2P$9niJrsjTE6GR7xdE=vUH16&| zZJzh=4H_&|cH0!aN+zTiDX}>QdV_?v*nikPZ2V%F+`o+Ow^yn7^r0s24Ma~^GgkY6 zjlF5#u3@DWxyKN6oNiMLc_!}kbc~1(GpiDYFRdeno@{xcnua2nP`;5y(%bhN@b+g; z(8GarJ#7=q<$8SR)oc4HFw7vrZ&?b&b+C!0M6*|Chnt?`5#q-7>=>f<K0&;Bno)B8 z!}3J0xXJR?fLrE%=Ilv|2|gxjlBHj|^I-dj6UImyU-#0gbyXK;{ASG5Gqz!Cy*gH1 zVnC?w@H}v6+B$kh-e!1r2;#cGMqyE=N0-^XSp}H9kvWO*z>v-fXP>5N_X8=9zRA98 zsOfh(A4fkm8T+*d3zhRC4!)TX=c5jBTiyrILtAsE-0k$tbf!AfiJX7}jIz<`{=1n) znC;U=XE<)uBH32<2!%f3h3@a*#Sw$n`2)>kC%f_c^<x>=3ndr!kjQNn;5V~3Y~J2p z=c>=}ru-xNzf^8%J+}E7hcYQA6>3WJOO7LvihCWMTiGWqA$h*>ujmNtO6uS<<mRr~ zTj!V1_)_uyw~I>Dwe+UU%dqPX-}f$hfeLQ5+r*B=^>QC0!*w3xBEu#jA>zl=I}-PV zg?C#kZcPQ=Gj05>$m~2(-g{+OS=i*Sd}hW>`sO8neS+;hm0?}%eT5#!iTY{i<6wy_ zZMN7C4iTDZwnl`+&ZhU-?38=_uFgL+2BOXzBB~$UMn3IwW4EOtuTwYgjAWZ(T)EV~ za-cAPfdn()SbAw`M=x1Cs@D+h6o6()WaD4FPT(u9?BB86iP<R#eRyp(ud0Y$e?%B3 z2-5h@T)<cV5x$c8>DoF+^fA!5I%MPuC&iufWD1^Z85YgH(qS`+tgGYo_4UPrQe*M; zclkBJ+AT>)NSr>d^r=>MLyoMMOY^%Yi59K2i&ssKjcuh4SG?lV_AUE*|2fk6sSh&8 zw?JLo)MX%U{3XZ0v0#oZ;`qr{74o#zS~bh9a0|VcX0TxDrDyn8C%G>s;~9f3oO|fW zZ<Vo#2x_9~Kc%IKYao3{i-&1u=56V7AsI$@pXw{Ys5&qEPl0Z<?ucC(Vc>7xrn`y4 zFrU8I>~eg`6+!Vl^1{>d0+Y>o6PiiQZJ1Tug7@zbhF-M@Q=O6e&!1lz{eILRw+SvR z7?wZQtIuz)uCCh-o<t-rxc8>uO=X_U-8xZ8>&g<na^u%7eE9rZPyq-#T(1Thi(@>& z-@F%#Z|+}Pw#l_@1)qJw^M#$6C-gb{zWYOnewBI_N?teFF9ksn-C}5xo>Df{O7nF` zP884kX~52GU5@Equyl~Lo2Tb7QIPQXQ)_b;1v0Wy>bp=;z&Q%nPap*!tbWnNzlHk_ zpp~qDh*UR-4Ny3Z-!y6UYRaBA;}85SS|PuMeolvwV;R_Qtrwv_P`|x}PGMe$CnT<% zj?f_85>@g}jC_xJG~D^~&E`-__|p-6dF=0lGWB-Xq63eCcOs(%{!9L{oItJvmbZG% zwx8b2X(O4_7ofDPI+%M8AP^I|B_7s3BBmzJJw$u_CRnB}Og+|oaNw;-6Ko~KDT_y^ zvZ1EM3h)d%P*d|WO6ox`x}N-9$!>Hx{?#p3-Pu%SU}k0?L5**Qf<kIclh1KIXzwUC ztQu{ip0>4G%F){z%-VG0*NR^=Sl@eNEi~EAn7-Bih2wHifzb;J7op6@gamC0?zJ^V z*_<{OTc7Ll2o8r>WDL!fp4&YduMG-v@lmgChQR_Vr0wK{2Ujj>s>v}G!!oN(V_HH@ z2kLF&cH{})Nlo~hq(*4sldNFy94;e$gaYuQXm2DkD|9mFdm83BW%iaq?n^1<pIFS` zgWLUqLGEzZO2Bt*F;lP=0n~#(qW)zBl-#8!zm~GIoZph4Z#Xy{Hrr;1VQO+L&Y#VH z@kuS7pQpkhJ?u_`S9bnPyx^G6_O~3XdiUD<d2vLYfp;vA974q#5O4=DHY^R`3tSF- zf8tNnWbT#yqckqW`AGN9R~SC{li3kZL_f-1dA&&KX0OV*$VlNL@1}p>y%q~3=!Vbx zpO92OYFAzuB$%wcyEBhbg6P_Dp{75lkKVlzJb)QD((=iWAN@hMuFiXlM4MmsZzVMZ z7wz^A$Z}*-g^!qVo?Biu5W1IccWDZ#d4)eQb*fe_v_vhDU)K5C3+`37R<xGJ)<ne^ za$%r6rWJy?j=U|C6eL4N8+|B<q!m-35X5J8WX1BOs<TW~6a95kA;C-ivah$4I1S;- zl|t$894DYV4FF3fmNeD@<zyUGL_7LIKLgQwfXDKl%u(Qxmw^?DNN3;yj~fuMbtQCu z_Bdf|;o%f<Z@kfThS_>XEG)v>{E0PAleebh29MzVxsD|zkr5M20yK_xMfvXQ;)f%O z_tMxI5pVh&wqL2RTM{n5R^@z2OF?fUxzipKO*9#(wK$n|Yl*HEyzcp$8$IY_+eEQK zdnEWwA}K4d%7p(iAfSA40nL(^myO?jqwVqp%I^ma++!yXk^`xf$IB_VgJhaXx^v9* z?TnU>m9!&xf&yRfuoirXOIcexyos6bdgMHD<IRwSu7s_^w(<(-R1K>Ud;Iv%P(Gk< z)Rw)MbZk<&F6FuDAW5vvhI=baJC4^*L|tK>4FTjGb1gc`1r)_tevbBDM0K{?AZPqL zonP@Hcg+Mi4Q;>hkb@qQp`(&<{na(ks@;kLRYf)&<1R^~K}54O^W>`{czy+j-Da$R z1?cH5kdWI<r}Loz#2DbiEB^|r`tO%-Mv<~XO}n0Lw|X7Y=X)F`s~106b!u^ZQyd9; zptrucS@!Xx4|G3n<`L!Sa@Jp2i80X5v2Ik|x(52Dm0{pcu%VE9$FiEFNSuszWqo~@ z+@X-d?5JR_q9atJ70vY?zo7gOVzA)!&rBfODqfq#@LIvwPVBWM5<r5XbZ_k{ZgIX; z0*VpjR{cbe@_%Yt5AP)D=zQJGl2*dCs~hS*cTK2Rcb9wL$|@G*ark?rhhe2Y)7~Xh z80c_UA9qZJj*<8}>SaZh!xs<O=s)n3Y}iC847Xpo57<HUSIHEJ>kmu^Jh(X`?0*AZ zTuQfcI=Y~^n9X1#+UlqR@YSF*&d$#0T_g8x(LzCio$i{5aGglTHy6oillH)9V~O<d z-qR*MBt8Dsapm}*-*zmbLs9lAPDy+6cP7Y`Peyo|Vh>4?5c_Gh$MnU?<qz2Bj01vX z-vC9>Vg&TbsEcGc7T<e7>cM|h>RTfwE)MFZE&ivYfPA5qt2Y5UH1DW=1I)1Wtsub= z*g%v~DSy9~vfj8dWokTa5;q0CZmI*bRg==-$jDN=VUAsbO~d37dq@K$fG$}}QblB@ z%07|ZQXl@?3xm~|HRwf!x6S8MrsWHbg4EsrXJ5CB1xT|nba?;e;}l^6JLAp|gFiPp zUf!etllyc|DBOM_I@`g?uJlyB(gc*R!?>mA<Uf<4JY<zj93vc=?kBhu8}Sa*RJs+i z+^*;!b=F^8A39kZv3KkUUj^h66l3gIkqNZ$y`K`VJ{gH(bCrU7RJl@juOyeCsJ>7< zD5la9kwRe_(j2-O@ti8yJE!ZnKE`K4;d)y(Ro8$-GGKpki0A>0FZ-Ou3JjJbcy!1l z!-Dr6z>5>p(~1M=S`Lbg@wf*v#{hto0PFa6h-&%L&W<SiSHbP-iV8`gKIJ`^@9#`c zsDq2P?`P+JnoCGnm6lMqB$gOgjf6Co?V-LJo1F=*zvB`CE%h=S2IQf8@$UuAzLm8F zK4$ULeuy>Q9k7~yt#U}cc%VGR#xx-~U)$U)J>dkpvH_j^Y><T*3huU`?YcxhWw!Lg zAS()xI)FfHuYnEWN8$q{K2U%H7^j$f;YZEK^Ui)f+)LtbeYN3axqIq=)CGi~KrXc; zVaIl9bQURc`c6%)%H6{q9D^hI`IfVnzFe#gr+|!F){ljk9MNydAubH*Eb>M<&Lu@f zm7$@R*|!^<XPYhHgRZons-9i{uIz}0ADUj1YbOU%BS8lJ`5Xx_Ge@A<wsI=%U}J{@ zeAc=eM`~=Y1o)CeeUAY&HS*u#AmtKY<=1JMB!~TrKb)MHSnB+vi@70`=6p}cq=I4& zCyAZ5R%~pbrgqm`=op!*xAOH%AAIt^Xg_K)t0_E0fwh|YdaU@^^fc}^xSLla^-(WU z7E14)r(_n=^qqb?3}_^+5{bxCPo)h+7%c#Xs1x(;78v3*7~<+3)l)FULLfpdh0i`< zh;DS0#6rGl>IqO?J$LTH!3+6kI+{oiN*z7j!;j*QGt65u&i(4_OnH=&IXWZb7*U0u zUI)iAC&srmoeBdMig!eox)k_;5{AdfeA<kNTt?ZLhBOko6cw_4;tOOZ<tqQ(O#Mn? z5BYxsg8BSh=>izQM=$_Uij+71o3|851qzozz6zsfaCmx^w4}N-h9wFXu$3X@n`Q%9 zPt^KmXYeS8?~al3X;exF;hum%d2edX(FjD>@XbS`vl6nQam)orbuZU$?G5eU9FM&y zxiw^B8X(R*Yj#gf75*i}v7T5fHS^!)g&;=G=al@e=D4wLbz`J}K>zH&lRT6z05J;i zX<Y(hqyl18eVI!Q#K-`|Snx%O4b0*WX%^3tAAwou&_4c*kvQz}6)?<>42QhL{++0J zW9X}xhnub#%hhl$ZwKT~60tciZ_LiFP&IJy(oj+h$m0aHAL`)uo{;5qQMK*<?XAY9 zFtcExuNy9UboPiWQmXQopO3sgfH9_~y$SUfc^;}Iu^to)&ef=6RIMkm?-Y0KuFl%X zqq|jx*=z}lYFuUVb2Brh(0z0_w}7OpSptdS79Io`8+YUQ0G9tD2eT4NyFmEgy>8Jz z8HpR6P=vAwN+byI$Er}=5H?-O_8lvpTxrOmFHmf7hrkkqjP4hqA|mi4L?We-d6PC+ zs&Tc8k=0x^=>1spM)ye%aSxY+QqiFL(hao6;mWN3Wh@uFLUH3NC!1r^4FPsQ?X~3j zJu$HwG|7Ar5TZ(6GWrwH3Qr%N#B`zV`-4`SMzhQ7Vvf$v2gi1%(t_dFi%2A?_c8(` z4Sp6Q0Yt9~u+}O-)DiUI6#&Oh`GUe4iP}lx$x(Gz0?qsu0OrGRy`_L7{jWrKPmgh& zadAAL(X={%rdVf9O&8`d@g$0PQpyA5xj~I(?!)J#TCSM#_MDJS*VVMZLzKIAUc%uL zCokbzU9BD!CX}^<i-MI`;bd(wXtwLl8{mJ*QLXSmsA`pai{gGM%Lxy;K5T_a=T}#c zf~e2$Vd;k{a|p63lVZjkH0qt=srbLhO@9SsAu#Ag0AtKF_ef=EQpLUd4jc;zr5(U` z61!y>2go4hByOo1p%RcO!-GK{@iLj$({B|o^=wm(jI7&&CjVcwvp5dkH*$B+p>v|~ za5&hMQdeaX!7)<IVX@4DLITzIjH-Q}<$$upl{UFRIUz2u94WxLVYI$B+BzjduAZ+& zSgy5Y0>FQblXg&@;%iM_UT4%U%b>LVQ`d-N7FFT0mD}GRQ?{fewy<>b>sCrb!WsCB z;s#PWNk@NhgAvDHmD&d*7A1}N1-A0S|NNH2fCPtEPakd>{pFhDCVF^ykSw*I{T0T( z8jx~oIycquE>BGCk=K3sfEOYP+jbZbaV8FWcNK!;c9NQh^2CiS<(h;?2L`|uO<VtV zLx25%&_(~I&qDq<#3*Tm7?f3)Qt`>cVj4mTV597dJnTTX8HF^2j#4i;>9pv2;~2U8 z4sesp@D$?PD@(e$g@xT?Ow%=`A@BBpy^{xEbw@dpRE1FmzN=NrV;sO%Iuf0c@5w%p zktoSH+AdUrMpM-|8G#dB?xMF@)8-hr>-j~YIr7t$-u8`DIerP}vM3uOt+k&DPQM$D zTQkrDF?yatyMi=%?bqhMYG>yf9+k}MULj_EMp_Rqa?=g?Bf=QcfGZ}LQZv}PbF`I< zV_xsZ2gBaP`1m6m)21(?j@XA#VGD6Pf!kMvv+|3ifnI57YsWIi9W^Ty+$T}I|IZeJ dfw*>dUe`}9U4C1?_8j<np`b2bB5NM-e*uVtb{_x$ literal 0 HcmV?d00001 diff --git a/reference/api.html b/reference/api.html index 4bd31539..bd6a62bb 100644 --- a/reference/api.html +++ b/reference/api.html @@ -3,13 +3,31 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>API | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/api.html.87969763.js"><link rel="modulepreload" href="/assets/api.html.dd7de804.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container no-sidebar"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><h1 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h1></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/api.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> + <div id="app"><!--[--><div class="theme-container no-sidebar"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><!----><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h1></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/api.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/api/index.html b/reference/api/index.html index 7066bb10..3f21206b 100644 --- a/reference/api/index.html +++ b/reference/api/index.html @@ -3,14 +3,32 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>API | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/index.html.9bf5bab1.js"><link rel="modulepreload" href="/assets/index.html.833852a3.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a aria-current="page" href="/fes.js/reference/api/" class="router-link-active router-link-exact-active nav-link router-link-active" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a aria-current="page" href="/fes.js/reference/api/" class="router-link-active router-link-exact-active nav-link router-link-active" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">API</p><ul class=""><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#基础api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="基础API"><!--[--><!--]--> 基础API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#plugin" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="plugin"><!--[--><!--]--> plugin <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#applypluginstype" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="ApplyPluginsType"><!--[--><!--]--> ApplyPluginsType <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#路由api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="路由API"><!--[--><!--]--> 路由API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#getrouter" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="getRouter"><!--[--><!--]--> getRouter <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#useroute" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="useRoute"><!--[--><!--]--> useRoute <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#userouter" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="useRouter"><!--[--><!--]--> useRouter <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#onbeforerouteupdate" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="onBeforeRouteUpdate"><!--[--><!--]--> onBeforeRouteUpdate <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#onbeforerouteleave" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="onBeforeRouteLeave"><!--[--><!--]--> onBeforeRouteLeave <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#createwebhashhistory" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="createWebHashHistory"><!--[--><!--]--> createWebHashHistory <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#createwebhistory" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="createWebHistory"><!--[--><!--]--> createWebHistory <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#creatememoryhistory" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="createMemoryHistory"><!--[--><!--]--> createMemoryHistory <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#createrouter" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="createRouter"><!--[--><!--]--> createRouter <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#routerlink" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="RouterLink"><!--[--><!--]--> RouterLink <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#uselink" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="useLink"><!--[--><!--]--> useLink <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#routerview" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="RouterView"><!--[--><!--]--> RouterView <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/api/#router-methods" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="Router Methods"><!--[--><!--]--> Router Methods <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h1><p>Fes.js 统一了API的出口,所有运行时API(包含Fes.js内置API和插件提供的API)全部通过<code>@fesjs/fes</code>导出。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> someApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="基础api" tabindex="-1"><a class="header-anchor" href="#基础api" aria-hidden="true">#</a> 基础API</h2><h3 id="plugin" tabindex="-1"><a class="header-anchor" href="#plugin" aria-hidden="true">#</a> plugin</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>主要在插件里面使用,项目代码中一般用不到。</p></div><p>运行时插件接口,是 Fes.js 内置的跑在浏览器里的一套插件体系。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> plugin<span class="token punctuation">,</span> ApplyPluginsType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a aria-current="page" href="/reference/api/" class="router-link-active router-link-exact-active router-link-active" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a aria-current="page" href="/reference/api/" class="router-link-active router-link-exact-active router-link-active" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">API <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/api/#基础api" class="router-link-active router-link-exact-active sidebar-item" aria-label="基础API"><!--[--><!--]--> 基础API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/api/#plugin" class="router-link-active router-link-exact-active sidebar-item" aria-label="plugin"><!--[--><!--]--> plugin <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#applypluginstype" class="router-link-active router-link-exact-active sidebar-item" aria-label="ApplyPluginsType"><!--[--><!--]--> ApplyPluginsType <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#defineroutemeta" class="router-link-active router-link-exact-active sidebar-item" aria-label="defineRouteMeta"><!--[--><!--]--> defineRouteMeta <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#definebuildconfig" class="router-link-active router-link-exact-active sidebar-item" aria-label="defineBuildConfig"><!--[--><!--]--> defineBuildConfig <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#defineruntimeconfig" class="router-link-active router-link-exact-active sidebar-item" aria-label="defineRuntimeConfig"><!--[--><!--]--> defineRuntimeConfig <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/api/#路由api" class="router-link-active router-link-exact-active sidebar-item" aria-label="路由API"><!--[--><!--]--> 路由API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/api/#getrouter" class="router-link-active router-link-exact-active sidebar-item" aria-label="getRouter"><!--[--><!--]--> getRouter <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#gethistory" class="router-link-active router-link-exact-active sidebar-item" aria-label="getHistory"><!--[--><!--]--> getHistory <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#useroute" class="router-link-active router-link-exact-active sidebar-item" aria-label="useRoute"><!--[--><!--]--> useRoute <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#userouter" class="router-link-active router-link-exact-active sidebar-item" aria-label="useRouter"><!--[--><!--]--> useRouter <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#onbeforerouteupdate" class="router-link-active router-link-exact-active sidebar-item" aria-label="onBeforeRouteUpdate"><!--[--><!--]--> onBeforeRouteUpdate <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#onbeforerouteleave" class="router-link-active router-link-exact-active sidebar-item" aria-label="onBeforeRouteLeave"><!--[--><!--]--> onBeforeRouteLeave <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#createwebhashhistory" class="router-link-active router-link-exact-active sidebar-item" aria-label="createWebHashHistory"><!--[--><!--]--> createWebHashHistory <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#createwebhistory" class="router-link-active router-link-exact-active sidebar-item" aria-label="createWebHistory"><!--[--><!--]--> createWebHistory <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#creatememoryhistory" class="router-link-active router-link-exact-active sidebar-item" aria-label="createMemoryHistory"><!--[--><!--]--> createMemoryHistory <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#createrouter" class="router-link-active router-link-exact-active sidebar-item" aria-label="createRouter"><!--[--><!--]--> createRouter <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#routerlink" class="router-link-active router-link-exact-active sidebar-item" aria-label="RouterLink"><!--[--><!--]--> RouterLink <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#uselink" class="router-link-active router-link-exact-active sidebar-item" aria-label="useLink"><!--[--><!--]--> useLink <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#routerview" class="router-link-active router-link-exact-active sidebar-item" aria-label="RouterView"><!--[--><!--]--> RouterView <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/api/#其他-router-methods" class="router-link-active router-link-exact-active sidebar-item" aria-label="其他 Router Methods"><!--[--><!--]--> 其他 Router Methods <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h1><p>Fes.js 统一了API的出口,所有运行时API(包含Fes.js内置API和插件提供的API)全部通过<code>@fesjs/fes</code>导出。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> someApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="基础api" tabindex="-1"><a class="header-anchor" href="#基础api" aria-hidden="true">#</a> 基础API</h2><h3 id="plugin" tabindex="-1"><a class="header-anchor" href="#plugin" aria-hidden="true">#</a> plugin</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>主要在插件里面使用,项目代码中一般用不到。</p></div><p>运行时插件接口,是 Fes.js 内置的跑在浏览器里的一套插件体系。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> plugin<span class="token punctuation">,</span> ApplyPluginsType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token comment">// 注册插件</span> plugin<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span> @@ -32,37 +50,37 @@ plugin<span class="token punctuation">.</span><span class="token function">apply <span class="token literal-property property">async</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h4 id="plugin-register-参数包含" tabindex="-1"><a class="header-anchor" href="#plugin-register-参数包含" aria-hidden="true">#</a> <strong>plugin.register</strong> 参数包含:</h4><ul><li>apply 插件文件导出的内容</li><li>path 插件文件路径</li></ul><h4 id="plugin-applyplugins-参数包含" tabindex="-1"><a class="header-anchor" href="#plugin-applyplugins-参数包含" aria-hidden="true">#</a> <strong>plugin.applyPlugins</strong> 参数包含:</h4><ul><li>key,坑位的 key</li><li>type,执行方式类型,详见 <a href="#applypluginstype">ApplyPluginsType</a></li><li>initialValue,初始值</li><li>args,参数</li><li>async,是否异步执行且返回 Promise</li></ul><h3 id="applypluginstype" tabindex="-1"><a class="header-anchor" href="#applypluginstype" aria-hidden="true">#</a> ApplyPluginsType</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>主要在插件里面使用,项目代码中一般用不到。</p></div><p>运行时插件执行类型,enum 类型,包含三个属性:</p><ul><li>compose,用于合并执行多个函数,函数可决定前序函数的执行时机</li><li>modify,用于修改值</li><li>event,用于执行事件,前面没有依赖关系</li></ul><h2 id="路由api" tabindex="-1"><a class="header-anchor" href="#路由api" aria-hidden="true">#</a> 路由API</h2><p>Fes.js 路由基于 <a href="https://next.router.vuejs.org/introduction.html" target="_blank" rel="noopener noreferrer">Vue Router 4.0<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>,想了解更多的同学可以看看官方文档。</p><h3 id="getrouter" tabindex="-1"><a class="header-anchor" href="#getrouter" aria-hidden="true">#</a> getRouter</h3><p>返回当前 <code>router</code> 实例。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="plugin-register-参数包含" tabindex="-1"><a class="header-anchor" href="#plugin-register-参数包含" aria-hidden="true">#</a> <strong>plugin.register</strong> 参数包含:</h4><ul><li>apply 插件文件导出的内容</li><li>path 插件文件路径</li></ul><h4 id="plugin-applyplugins-参数包含" tabindex="-1"><a class="header-anchor" href="#plugin-applyplugins-参数包含" aria-hidden="true">#</a> <strong>plugin.applyPlugins</strong> 参数包含:</h4><ul><li>key,坑位的 key</li><li>type,执行方式类型,详见 <a href="#applypluginstype">ApplyPluginsType</a></li><li>initialValue,初始值</li><li>args,参数</li><li>async,是否异步执行且返回 Promise</li></ul><h3 id="applypluginstype" tabindex="-1"><a class="header-anchor" href="#applypluginstype" aria-hidden="true">#</a> ApplyPluginsType</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>主要在插件里面使用,项目代码中一般用不到。</p></div><p>运行时插件执行类型,enum 类型,包含三个属性:</p><ul><li>compose,用于合并执行多个函数,函数可决定前序函数的执行时机</li><li>modify,用于修改值</li><li>event,用于执行事件,前面没有依赖关系</li></ul><h3 id="defineroutemeta" tabindex="-1"><a class="header-anchor" href="#defineroutemeta" aria-hidden="true">#</a> defineRouteMeta</h3><p>定义页面的元信息</p><h3 id="definebuildconfig" tabindex="-1"><a class="header-anchor" href="#definebuildconfig" aria-hidden="true">#</a> defineBuildConfig</h3><p>定义构建配置</p><h3 id="defineruntimeconfig" tabindex="-1"><a class="header-anchor" href="#defineruntimeconfig" aria-hidden="true">#</a> defineRuntimeConfig</h3><p>定义运行时配置</p><h2 id="路由api" tabindex="-1"><a class="header-anchor" href="#路由api" aria-hidden="true">#</a> 路由API</h2><p>Fes.js 路由基于 <a href="https://next.router.vuejs.org/introduction.html" target="_blank" rel="noopener noreferrer">Vue Router 4.0<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,想了解更多的同学可以看看官方文档。</p><h3 id="getrouter" tabindex="-1"><a class="header-anchor" href="#getrouter" aria-hidden="true">#</a> getRouter</h3><p>返回当前 <code>router</code> 实例。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">getRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="useroute" tabindex="-1"><a class="header-anchor" href="#useroute" aria-hidden="true">#</a> useRoute</h3><p>返回当前 <code>route</code> 实例,相当于在模板内使用 <code>$route</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="gethistory" tabindex="-1"><a class="header-anchor" href="#gethistory" aria-hidden="true">#</a> getHistory</h3><p>返回当前路由的History</p><h3 id="useroute" tabindex="-1"><a class="header-anchor" href="#useroute" aria-hidden="true">#</a> useRoute</h3><p>返回当前 <code>route</code> 实例,相当于在模板内使用 <code>$route</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token function">useRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="userouter" tabindex="-1"><a class="header-anchor" href="#userouter" aria-hidden="true">#</a> useRouter</h3><p>返回 <code>router</code> 实例,相当于在模板语法中使用 <code>$router</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="userouter" tabindex="-1"><a class="header-anchor" href="#userouter" aria-hidden="true">#</a> useRouter</h3><p>返回 <code>router</code> 实例,相当于在模板语法中使用 <code>$router</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="onbeforerouteupdate" tabindex="-1"><a class="header-anchor" href="#onbeforerouteupdate" aria-hidden="true">#</a> onBeforeRouteUpdate</h3><p>添加导航守卫,在当前路由即将更新时触发。类似于之前的<code>beforeRouteUpdate</code>,但是可用于任何组件。卸载组件时,将移除守卫。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onBeforeRouteUpdate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onbeforerouteupdate" tabindex="-1"><a class="header-anchor" href="#onbeforerouteupdate" aria-hidden="true">#</a> onBeforeRouteUpdate</h3><p>添加导航守卫,在当前路由即将更新时触发。类似于之前的<code>beforeRouteUpdate</code>,但是可用于任何组件。卸载组件时,将移除守卫。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onBeforeRouteUpdate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">onBeforeRouteUpdate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="onbeforerouteleave" tabindex="-1"><a class="header-anchor" href="#onbeforerouteleave" aria-hidden="true">#</a> onBeforeRouteLeave</h3><p>添加导航守卫,在当前路由即将离开时触发。类似于之前的<code>beforeRouteLeave</code>,但可用于任何组件。卸载组件时,将移除守卫。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onBeforeRouteLeave <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onbeforerouteleave" tabindex="-1"><a class="header-anchor" href="#onbeforerouteleave" aria-hidden="true">#</a> onBeforeRouteLeave</h3><p>添加导航守卫,在当前路由即将离开时触发。类似于之前的<code>beforeRouteLeave</code>,但可用于任何组件。卸载组件时,将移除守卫。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onBeforeRouteLeave <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">onBeforeRouteLeave</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="createwebhashhistory" tabindex="-1"><a class="header-anchor" href="#createwebhashhistory" aria-hidden="true">#</a> createWebHashHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://),或当配置服务器不能处理任意URL时这非常有用。注意:如果 SEO 对你很重要,你应该使用 <code>createWebHistory</code>。</p><h3 id="createwebhistory" tabindex="-1"><a class="header-anchor" href="#createwebhistory" aria-hidden="true">#</a> createWebHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。</p><h3 id="creatememoryhistory" tabindex="-1"><a class="header-anchor" href="#creatememoryhistory" aria-hidden="true">#</a> createMemoryHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始,这个位置无处不在。如果用户不在浏览器上下文中,它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。</p><h3 id="createrouter" tabindex="-1"><a class="header-anchor" href="#createrouter" aria-hidden="true">#</a> createRouter</h3><p>创建一个路由器实例,该实例可用于 Vue 应用程序。查看<a href="https://next.router.vuejs.org/api/#routeroptions" target="_blank" rel="noopener noreferrer">路由器选项<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>,了解可以传递的所有属性的列表。</p><h3 id="routerlink" tabindex="-1"><a class="header-anchor" href="#routerlink" aria-hidden="true">#</a> RouterLink</h3><p>使用自定义组件路由器链接来创建链接,而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>可以查看<a href="https://next.router.vuejs.org/api/#router-link-props" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>了解更多 RouterLink 的 Porps。查看<a href="https://next.router.vuejs.org/api/#router-link-s-v-slot" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>了解 RouterLink 的作用域插槽。</p><h3 id="uselink" tabindex="-1"><a class="header-anchor" href="#uselink" aria-hidden="true">#</a> useLink</h3><p>返回的结果跟 RouterLink 的作用域插槽的属性一致,查看<a href="https://next.router.vuejs.org/api/#router-link-s-v-slot" target="_blank" rel="noopener noreferrer">官方API<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>了解更多。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> RouterLink<span class="token punctuation">,</span> useLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="createwebhashhistory" tabindex="-1"><a class="header-anchor" href="#createwebhashhistory" aria-hidden="true">#</a> createWebHashHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://),或当配置服务器不能处理任意URL时这非常有用。注意:如果 SEO 对你很重要,你应该使用 <code>createWebHistory</code>。</p><h3 id="createwebhistory" tabindex="-1"><a class="header-anchor" href="#createwebhistory" aria-hidden="true">#</a> createWebHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。</p><h3 id="creatememoryhistory" tabindex="-1"><a class="header-anchor" href="#creatememoryhistory" aria-hidden="true">#</a> createMemoryHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上,平时一般用不上</p></div><p>创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始,这个位置无处不在。如果用户不在浏览器上下文中,它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。</p><h3 id="createrouter" tabindex="-1"><a class="header-anchor" href="#createrouter" aria-hidden="true">#</a> createRouter</h3><p>创建一个路由器实例,该实例可用于 Vue 应用程序。查看<a href="https://next.router.vuejs.org/api/#routeroptions" target="_blank" rel="noopener noreferrer">路由器选项<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,了解可以传递的所有属性的列表。</p><h3 id="routerlink" tabindex="-1"><a class="header-anchor" href="#routerlink" aria-hidden="true">#</a> RouterLink</h3><p>使用自定义组件路由器链接来创建链接,而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>可以查看<a href="https://next.router.vuejs.org/api/#router-link-props" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>了解更多 RouterLink 的 Porps。查看<a href="https://next.router.vuejs.org/api/#router-link-s-v-slot" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>了解 RouterLink 的作用域插槽。</p><h3 id="uselink" tabindex="-1"><a class="header-anchor" href="#uselink" aria-hidden="true">#</a> useLink</h3><p>返回的结果跟 RouterLink 的作用域插槽的属性一致,查看<a href="https://next.router.vuejs.org/api/#router-link-s-v-slot" target="_blank" rel="noopener noreferrer">官方API<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>了解更多。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> RouterLink<span class="token punctuation">,</span> useLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'AppLink'</span><span class="token punctuation">,</span> @@ -82,11 +100,11 @@ router<span class="token punctuation">.</span><span class="token function">push< <span class="token keyword">return</span> <span class="token punctuation">{</span> isExternalLink <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h3 id="routerview" tabindex="-1"><a class="header-anchor" href="#routerview" aria-hidden="true">#</a> RouterView</h3><p>router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方,以适应你的布局。</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="routerview" tabindex="-1"><a class="header-anchor" href="#routerview" aria-hidden="true">#</a> RouterView</h3><p>router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方,以适应你的布局。</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ Component, route }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Component<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>可以查看<a href="https://next.router.vuejs.org/api/#router-view-props" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>了解更多 RouterView 的 Porps。查看<a href="https://next.router.vuejs.org/api/#router-view-s-v-slot" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>了解 RouterView 的作用域插槽。</p><h3 id="router-methods" tabindex="-1"><a class="header-anchor" href="#router-methods" aria-hidden="true">#</a> Router Methods</h3><p>查看<a href="https://next.router.vuejs.org/api/#router-methods" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>了解更多</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/api/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>可以查看<a href="https://next.router.vuejs.org/api/#router-view-props" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>了解更多 RouterView 的 Porps。查看<a href="https://next.router.vuejs.org/api/#router-view-s-v-slot" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>了解 RouterView 的作用域插槽。</p><h3 id="其他-router-methods" tabindex="-1"><a class="header-anchor" href="#其他-router-methods" aria-hidden="true">#</a> 其他 Router Methods</h3><p>查看<a href="https://next.router.vuejs.org/api/#router-methods" target="_blank" rel="noopener noreferrer">vue-router 官方文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>了解更多。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/api/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/cli.html b/reference/cli.html index 2f86a4ef..abf4abb7 100644 --- a/reference/cli.html +++ b/reference/cli.html @@ -3,13 +3,31 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>命令行接口 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/cli.html.af8c16d8.js"><link rel="modulepreload" href="/assets/cli.html.eb7c8bac.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container no-sidebar"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="命令行接口" tabindex="-1"><a class="header-anchor" href="#命令行接口" aria-hidden="true">#</a> 命令行接口</h1><p>VuePress 命令行接口是由 <a href="https://www.npmjs.com/package/@vuepress/cli" target="_blank" rel="noopener noreferrer">@vuepress/cli<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 包提供的。它是 <a href="https://www.npmjs.com/package/vuepress" target="_blank" rel="noopener noreferrer">vuepress<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 包的依赖之一,当然你也可以单独安装它。</p><p>执行 <code>vuepress --help</code> 来获取下列帮助信息:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>Usage: + <div id="app"><!--[--><div class="theme-container no-sidebar"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><!----><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="命令行接口" tabindex="-1"><a class="header-anchor" href="#命令行接口" aria-hidden="true">#</a> 命令行接口</h1><p>VuePress 命令行接口是由 <a href="https://www.npmjs.com/package/@vuepress/cli" target="_blank" rel="noopener noreferrer">@vuepress/cli<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 包提供的。它是 <a href="https://www.npmjs.com/package/vuepress" target="_blank" rel="noopener noreferrer">vuepress<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 包的依赖之一,当然你也可以单独安装它。</p><p>执行 <code>vuepress --help</code> 来获取下列帮助信息:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>Usage: $ vuepress <span class="token operator"><</span>command<span class="token operator">></span> <span class="token punctuation">[</span>options<span class="token punctuation">]</span> Commands: @@ -25,7 +43,7 @@ For <span class="token function">more</span> info, run any <span class="token bu Options: -v, <span class="token parameter variable">--version</span> Display version number -h, <span class="token parameter variable">--help</span> Display this message -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="dev" tabindex="-1"><a class="header-anchor" href="#dev" aria-hidden="true">#</a> dev</h2><p>启动一个开发服务器,在本地开发你的 VuePress 站点。</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>Usage: +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dev" tabindex="-1"><a class="header-anchor" href="#dev" aria-hidden="true">#</a> dev</h2><p>启动一个开发服务器,在本地开发你的 VuePress 站点。</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>Usage: $ vuepress dev <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span> Options: @@ -41,7 +59,7 @@ Options: --no-watch Disable watching page and config files <span class="token punctuation">(</span>default: <span class="token boolean">true</span><span class="token punctuation">)</span> -v, <span class="token parameter variable">--version</span> Display version number -h, <span class="token parameter variable">--help</span> Display this message -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>通过命令行设置的配置项,会覆盖你配置文件中的同名配置项。</p></div><h2 id="build" tabindex="-1"><a class="header-anchor" href="#build" aria-hidden="true">#</a> build</h2><p>将你的 VuePress 站点构建成静态文件,以便你进行后续<a href="/fes.js/guide/deployment.html" class="">部署</a>。</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>Usage: +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>通过命令行设置的配置项,会覆盖你配置文件中的同名配置项。</p></div><h2 id="build" tabindex="-1"><a class="header-anchor" href="#build" aria-hidden="true">#</a> build</h2><p>将你的 VuePress 站点构建成静态文件,以便你进行后续<a href="/guide/deployment.html" class="">部署</a>。</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>Usage: $ vuepress build <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span> Options: @@ -54,7 +72,7 @@ Options: <span class="token parameter variable">--debug</span> Enable debug mode -v, <span class="token parameter variable">--version</span> Display version number -h, <span class="token parameter variable">--help</span> Display this message -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>通过命令行设置的配置项,会覆盖你配置文件中的同名配置项。</p></div><h2 id="info" tabindex="-1"><a class="header-anchor" href="#info" aria-hidden="true">#</a> info</h2><p>输出当前系统和依赖相关的信息。</p><p>在你想要检查你的环境,或者提交 Issue 时候,可以使用该命令。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/cli.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>通过命令行设置的配置项,会覆盖你配置文件中的同名配置项。</p></div><h2 id="info" tabindex="-1"><a class="header-anchor" href="#info" aria-hidden="true">#</a> info</h2><p>输出当前系统和依赖相关的信息。</p><p>在你想要检查你的环境,或者提交 Issue 时候,可以使用该命令。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/cli.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/cli/index.html b/reference/cli/index.html index 3c532ca1..90590709 100644 --- a/reference/cli/index.html +++ b/reference/cli/index.html @@ -3,46 +3,64 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>命令行工具 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/index.html.cbd2c491.js"><link rel="modulepreload" href="/assets/index.html.4f4b557d.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a aria-current="page" href="/fes.js/reference/cli/" class="router-link-active router-link-exact-active nav-link router-link-active" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a aria-current="page" href="/fes.js/reference/cli/" class="router-link-active router-link-exact-active nav-link router-link-active" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">命令行工具</p><ul class=""><li><!--[--><a aria-current="page" href="/fes.js/reference/cli/#create-fes-app" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="create-fes-app"><!--[--><!--]--> create-fes-app <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/cli/#fes" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="fes"><!--[--><!--]--> fes <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/cli/#fes-dev" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="fes dev"><!--[--><!--]--> fes dev <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/cli/#fes-build" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="fes build"><!--[--><!--]--> fes build <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/cli/#fes-help" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="fes help"><!--[--><!--]--> fes help <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/cli/#fes-info" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="fes info"><!--[--><!--]--> fes info <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/cli/#fes-webpack" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="fes webpack"><!--[--><!--]--> fes webpack <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="命令行工具" tabindex="-1"><a class="header-anchor" href="#命令行工具" aria-hidden="true">#</a> 命令行工具</h1><h2 id="create-fes-app" tabindex="-1"><a class="header-anchor" href="#create-fes-app" aria-hidden="true">#</a> create-fes-app</h2><p>通过 <code>create-fes-app</code> 命令创建项目模板,输入<code>create-fes-app -h</code>则可以看到如下信息:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Usage: create-fes-app <name> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a aria-current="page" href="/reference/cli/" class="router-link-active router-link-exact-active router-link-active" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a aria-current="page" href="/reference/cli/" class="router-link-active router-link-exact-active router-link-active" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">命令行工具 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/cli/#create-fes-app" class="router-link-active router-link-exact-active sidebar-item" aria-label="create-fes-app"><!--[--><!--]--> create-fes-app <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/cli/#fes" class="router-link-active router-link-exact-active sidebar-item" aria-label="fes"><!--[--><!--]--> fes <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/cli/#fes-dev" class="router-link-active router-link-exact-active sidebar-item" aria-label="fes dev"><!--[--><!--]--> fes dev <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/cli/#fes-build" class="router-link-active router-link-exact-active sidebar-item" aria-label="fes build"><!--[--><!--]--> fes build <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/cli/#fes-help" class="router-link-active router-link-exact-active sidebar-item" aria-label="fes help"><!--[--><!--]--> fes help <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/cli/#fes-info" class="router-link-active router-link-exact-active sidebar-item" aria-label="fes info"><!--[--><!--]--> fes info <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/cli/#fes-webpack" class="router-link-active router-link-exact-active sidebar-item" aria-label="fes webpack"><!--[--><!--]--> fes webpack <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="命令行工具" tabindex="-1"><a class="header-anchor" href="#命令行工具" aria-hidden="true">#</a> 命令行工具</h1><h2 id="create-fes-app" tabindex="-1"><a class="header-anchor" href="#create-fes-app" aria-hidden="true">#</a> create-fes-app</h2><p>通过 <code>create-fes-app</code> 命令创建项目模板,输入<code>create-fes-app -h</code>则可以看到如下信息:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: create-fes-app <name> Options: -v, --version Output the current version - -h, --help Display help for command + -h, --help Display help for command -f, --force Overwrite target directory if it exists -m, --merge Merge target directory if it exists -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>可以在本机安装后使用:</p><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">YARN</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 全局安装</span> -<span class="token function">yarn</span> global <span class="token function">add</span> @fesjs/create-fes-app +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>可以在本机安装后使用:</p><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 全局安装</span> +<span class="token function">pnpm</span> global <span class="token function">add</span> @fesjs/create-fes-app <span class="token comment"># 创建模板</span> create-fes-app fes-app -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 全局安装</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 全局安装</span> <span class="token function">npm</span> i <span class="token parameter variable">-g</span> @fesjs/create-fes-app <span class="token comment"># 创建模板</span> create-fes-app fes-app -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><!--]--></div><!--]--></div><p>推荐使用 <code>yarn create</code> 和 <code>npx</code> 方式创建模板,一直使用最新的模板:</p><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">YARN</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> -<span class="token function">yarn</span> create @fesjs/fes-app myapp +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p>推荐使用 <code>pnpm create</code> 和 <code>npx</code> 方式创建模板,一直使用最新的模板:</p><div class="code-group"><div class="code-group__nav"><ul class="code-group__ul"><li class="code-group__li"><button class="code-group__nav-tab code-group__nav-tab-active" ariapressed="true" ariaexpanded="true">PNPM</button></li><li class="code-group__li"><button class="code-group__nav-tab" ariapressed="false" ariaexpanded="false">NPM</button></li></ul></div><!--[--><div class="code-group-item code-group-item__active" aria-selected="true"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> +<span class="token function">pnpm</span> create @fesjs/fes-app myapp <span class="token comment"># 安装依赖</span> -<span class="token function">yarn</span> +<span class="token function">pnpm</span> i <span class="token comment"># 运行</span> -<span class="token function">yarn</span> dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> +<span class="token function">pnpm</span> dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div class="code-group-item" aria-selected="false"><!--[--><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建模板</span> npx @fesjs/create-fes-app myapp <span class="token comment"># 安装依赖</span> -<span class="token function">npm</span> <span class="token function">install</span> +<span class="token function">npm</span> <span class="token function">install</span> <span class="token comment"># 运行</span> <span class="token function">npm</span> run dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><!--]--></div><!--]--></div><h2 id="fes" tabindex="-1"><a class="header-anchor" href="#fes" aria-hidden="true">#</a> fes</h2><p>需要在项目根目录执行 <code>fes</code> 命令,输入<code>fes -h</code>则可以看到如下信息:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Usage: fes <command> [options] +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h2 id="fes" tabindex="-1"><a class="header-anchor" href="#fes" aria-hidden="true">#</a> fes</h2><p>需要在项目根目录执行 <code>fes</code> 命令,输入<code>fes -h</code>则可以看到如下信息:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes <command> [options] 一个好用的前端应用解决方案 @@ -58,7 +76,7 @@ Commands: webpack [options] inspect webpack configurations Run fes <command> --help for detailed usage of given command. -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="fes-dev" tabindex="-1"><a class="header-anchor" href="#fes-dev" aria-hidden="true">#</a> fes dev</h3><p>启动本地开发服务器进行项目的开发调试。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Usage: fes dev [options] +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="fes-dev" tabindex="-1"><a class="header-anchor" href="#fes-dev" aria-hidden="true">#</a> fes dev</h3><p>启动本地开发服务器进行项目的开发调试。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes dev [options] start a local http service for development @@ -66,23 +84,23 @@ Options: --port http service port, like 8080 --https whether to turn on the https service -h, --help display help for command -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes dev <span class="token parameter variable">--port</span><span class="token operator">=</span><span class="token number">8080</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="fes-build" tabindex="-1"><a class="header-anchor" href="#fes-build" aria-hidden="true">#</a> fes build</h3><p>编译构建 web 产物。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Usage: fes build [options] +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes dev <span class="token parameter variable">--port</span><span class="token operator">=</span><span class="token number">8080</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-build" tabindex="-1"><a class="header-anchor" href="#fes-build" aria-hidden="true">#</a> fes build</h3><p>编译构建 web 产物。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes build [options] build application for production Options: -h, --help display help for command -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>比如:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>fes build -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="fes-help" tabindex="-1"><a class="header-anchor" href="#fes-help" aria-hidden="true">#</a> fes help</h3><p>打印帮助文档。 比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes <span class="token builtin class-name">help</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="fes-info" tabindex="-1"><a class="header-anchor" href="#fes-info" aria-hidden="true">#</a> fes info</h3><p>打印当前项目的有用的环境信息,用来帮助定位问题。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Usage: fes info [options] +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>fes build +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-help" tabindex="-1"><a class="header-anchor" href="#fes-help" aria-hidden="true">#</a> fes help</h3><p>打印帮助文档。 比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes <span class="token builtin class-name">help</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-info" tabindex="-1"><a class="header-anchor" href="#fes-info" aria-hidden="true">#</a> fes info</h3><p>打印当前项目的有用的环境信息,用来帮助定位问题。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes info [options] print debugging information about your environment Options: -h, --help display help for command -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes info -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="fes-webpack" tabindex="-1"><a class="header-anchor" href="#fes-webpack" aria-hidden="true">#</a> fes webpack</h3><p>查看项目使用的 webpack 配置。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>Usage: fes webpack [options] +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes info +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-webpack" tabindex="-1"><a class="header-anchor" href="#fes-webpack" aria-hidden="true">#</a> fes webpack</h3><p>查看项目使用的 webpack 配置。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes webpack [options] inspect webpack configurations @@ -93,8 +111,8 @@ Options: --plugins list all plugin names --verbose show full function definitions in output -h, --help display help for command -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>比如:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes webpack -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/cli/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes webpack +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/cli/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/config/index.html b/reference/config/index.html index 694e45c4..33560b06 100644 --- a/reference/config/index.html +++ b/reference/config/index.html @@ -3,88 +3,72 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> - <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>配置 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> + <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title> | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/index.html.a2d6e9e6.js"><link rel="modulepreload" href="/assets/index.html.1e4e9bb2.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a aria-current="page" href="/fes.js/reference/config/" class="router-link-active router-link-exact-active nav-link router-link-active" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a aria-current="page" href="/fes.js/reference/config/" class="router-link-active router-link-exact-active nav-link router-link-active" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><p class="sidebar-heading sidebar-item">配置</p><ul class=""><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#alias" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="alias"><!--[--><!--]--> alias <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#analyze" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="analyze"><!--[--><!--]--> analyze <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#autoprefixer" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="autoprefixer"><!--[--><!--]--> autoprefixer <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#base" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="base"><!--[--><!--]--> base <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#chainwebpack" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="chainWebpack"><!--[--><!--]--> chainWebpack <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#cssloader" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="cssLoader"><!--[--><!--]--> cssLoader <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#copy" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="copy"><!--[--><!--]--> copy <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#define" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="define"><!--[--><!--]--> define <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#devserver" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="devServer"><!--[--><!--]--> devServer <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#devtool" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="devtool"><!--[--><!--]--> devtool <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#dynamicimport" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="dynamicImport"><!--[--><!--]--> dynamicImport <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#exportstatic" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="exportStatic"><!--[--><!--]--> exportStatic <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#externals" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="externals"><!--[--><!--]--> externals <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#extrababelplugins" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="extraBabelPlugins"><!--[--><!--]--> extraBabelPlugins <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#extrababelpresets" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="extraBabelPresets"><!--[--><!--]--> extraBabelPresets <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#extrapostcssplugins" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="extraPostCSSPlugins"><!--[--><!--]--> extraPostCSSPlugins <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#html" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="html"><!--[--><!--]--> html <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#inlinelimit" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="inlineLimit"><!--[--><!--]--> inlineLimit <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#lessloader" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="lessLoader"><!--[--><!--]--> lessLoader <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#mock" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="mock"><!--[--><!--]--> mock <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#mountelementid" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="mountElementId"><!--[--><!--]--> mountElementId <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#nodemodulestransform" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="nodeModulesTransform"><!--[--><!--]--> nodeModulesTransform <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#outputpath" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="outputPath"><!--[--><!--]--> outputPath <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#plugins" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="plugins"><!--[--><!--]--> plugins <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#postcssloader" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="postcssLoader"><!--[--><!--]--> postcssLoader <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#proxy" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="proxy"><!--[--><!--]--> proxy <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#publicpath" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="publicPath"><!--[--><!--]--> publicPath <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#router" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="router"><!--[--><!--]--> router <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#singular" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="singular"><!--[--><!--]--> singular <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#targets" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="targets"><!--[--><!--]--> targets <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#terseroptions" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="terserOptions"><!--[--><!--]--> terserOptions <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#vueloader" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="vueLoader"><!--[--><!--]--> vueLoader <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/config/#更多配置项" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="更多配置项"><!--[--><!--]--> 更多配置项 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h1><p>以下配置项通过字母排序。</p><h2 id="alias" tabindex="-1"><a class="header-anchor" href="#alias" aria-hidden="true">#</a> alias</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置别名,对引用路径进行映射。</p></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a aria-current="page" href="/reference/config/" class="router-link-active router-link-exact-active router-link-active" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a aria-current="page" href="/reference/config/" class="router-link-active router-link-exact-active router-link-active" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading"> <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/config/#配置文件" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置文件"><!--[--><!--]--> 配置文件 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/config/#配置文件解析" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置文件解析"><!--[--><!--]--> 配置文件解析 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#配置智能提示" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置智能提示"><!--[--><!--]--> 配置智能提示 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/config/#共享配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="共享配置"><!--[--><!--]--> 共享配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/config/#alias" class="router-link-active router-link-exact-active sidebar-item" aria-label="alias"><!--[--><!--]--> alias <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#autoprefixer" class="router-link-active router-link-exact-active sidebar-item" aria-label="autoprefixer"><!--[--><!--]--> autoprefixer <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#base" class="router-link-active router-link-exact-active sidebar-item" aria-label="base"><!--[--><!--]--> base <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#define" class="router-link-active router-link-exact-active sidebar-item" aria-label="define"><!--[--><!--]--> define <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#dynamicimport" class="router-link-active router-link-exact-active sidebar-item" aria-label="dynamicImport"><!--[--><!--]--> dynamicImport <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#inlinelimit" class="router-link-active router-link-exact-active sidebar-item" aria-label="inlineLimit"><!--[--><!--]--> inlineLimit <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#mock" class="router-link-active router-link-exact-active sidebar-item" aria-label="mock"><!--[--><!--]--> mock <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#mountelementid" class="router-link-active router-link-exact-active sidebar-item" aria-label="mountElementId"><!--[--><!--]--> mountElementId <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#outputpath" class="router-link-active router-link-exact-active sidebar-item" aria-label="outputPath"><!--[--><!--]--> outputPath <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#plugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="plugins"><!--[--><!--]--> plugins <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#proxy" class="router-link-active router-link-exact-active sidebar-item" aria-label="proxy"><!--[--><!--]--> proxy <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#publicpath" class="router-link-active router-link-exact-active sidebar-item" aria-label="publicPath"><!--[--><!--]--> publicPath <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#router" class="router-link-active router-link-exact-active sidebar-item" aria-label="router"><!--[--><!--]--> router <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#singular" class="router-link-active router-link-exact-active sidebar-item" aria-label="singular"><!--[--><!--]--> singular <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#targets" class="router-link-active router-link-exact-active sidebar-item" aria-label="targets"><!--[--><!--]--> targets <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#terseroptions" class="router-link-active router-link-exact-active sidebar-item" aria-label="terserOptions"><!--[--><!--]--> terserOptions <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#title" class="router-link-active router-link-exact-active sidebar-item" aria-label="title"><!--[--><!--]--> title <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/config/#webpack-专属配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="webpack 专属配置"><!--[--><!--]--> webpack 专属配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/config/#analyze" class="router-link-active router-link-exact-active sidebar-item" aria-label="analyze"><!--[--><!--]--> analyze <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#chainwebpack" class="router-link-active router-link-exact-active sidebar-item" aria-label="chainWebpack"><!--[--><!--]--> chainWebpack <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#cssloader" class="router-link-active router-link-exact-active sidebar-item" aria-label="cssLoader"><!--[--><!--]--> cssLoader <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#copy" class="router-link-active router-link-exact-active sidebar-item" aria-label="copy"><!--[--><!--]--> copy <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#devserver" class="router-link-active router-link-exact-active sidebar-item" aria-label="devServer"><!--[--><!--]--> devServer <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#devtool" class="router-link-active router-link-exact-active sidebar-item" aria-label="devtool"><!--[--><!--]--> devtool <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#exportstatic" class="router-link-active router-link-exact-active sidebar-item" aria-label="exportStatic"><!--[--><!--]--> exportStatic <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#externals" class="router-link-active router-link-exact-active sidebar-item" aria-label="externals"><!--[--><!--]--> externals <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#extrababelplugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="extraBabelPlugins"><!--[--><!--]--> extraBabelPlugins <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#extrababelpresets" class="router-link-active router-link-exact-active sidebar-item" aria-label="extraBabelPresets"><!--[--><!--]--> extraBabelPresets <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#extrapostcssplugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="extraPostCSSPlugins"><!--[--><!--]--> extraPostCSSPlugins <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#html" class="router-link-active router-link-exact-active sidebar-item" aria-label="html"><!--[--><!--]--> html <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#lessloader" class="router-link-active router-link-exact-active sidebar-item" aria-label="lessLoader"><!--[--><!--]--> lessLoader <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#nodemodulestransform" class="router-link-active router-link-exact-active sidebar-item" aria-label="nodeModulesTransform"><!--[--><!--]--> nodeModulesTransform <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#postcssloader" class="router-link-active router-link-exact-active sidebar-item" aria-label="postcssLoader"><!--[--><!--]--> postcssLoader <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#vueloader" class="router-link-active router-link-exact-active sidebar-item" aria-label="vueLoader"><!--[--><!--]--> vueLoader <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/config/#vite-专属配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="Vite 专属配置"><!--[--><!--]--> Vite 专属配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/config/#viteoption" class="router-link-active router-link-exact-active sidebar-item" aria-label="viteOption"><!--[--><!--]--> viteOption <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#vitevueplugin" class="router-link-active router-link-exact-active sidebar-item" aria-label="viteVuePlugin"><!--[--><!--]--> viteVuePlugin <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#vitevuejsx" class="router-link-active router-link-exact-active sidebar-item" aria-label="viteVueJsx"><!--[--><!--]--> viteVueJsx <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#vitelegacy" class="router-link-active router-link-exact-active sidebar-item" aria-label="viteLegacy"><!--[--><!--]--> viteLegacy <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/config/#vitehtml" class="router-link-active router-link-exact-active sidebar-item" aria-label="viteHtml"><!--[--><!--]--> viteHtml <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/config/#更多配置项" class="router-link-active router-link-exact-active sidebar-item" aria-label="更多配置项"><!--[--><!--]--> 更多配置项 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h2 id="配置文件" tabindex="-1"><a class="header-anchor" href="#配置文件" aria-hidden="true">#</a> 配置文件</h2><p>Fes.js 内置了比较通用的构建方式,如果没有个性化需求,不需要修改构建相关的配置。</p><h3 id="配置文件解析" tabindex="-1"><a class="header-anchor" href="#配置文件解析" aria-hidden="true">#</a> 配置文件解析</h3><p>Fes.js 会自动解析项目根目录下的 <code>.fes.js</code> 文件。</p><p>最基础的配置文件是这样的:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>可以通过环境变量 <code>FES_ENV</code> 进行环境差异化配置,当我们运行 <code>FES_ENV=prod fes dev</code> 时,Fes.js 会找到 <code>.fes.js</code> 和 <code>.fes.prod.js</code>(可选) 的配置文件进行 <code>deepmerge</code>。</p><h3 id="配置智能提示" tabindex="-1"><a class="header-anchor" href="#配置智能提示" aria-hidden="true">#</a> 配置智能提示</h3><p>可以通过 <code>defineBuildConfig</code> 工具函数获取类型提示:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineBuildConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineBuildConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="共享配置" tabindex="-1"><a class="header-anchor" href="#共享配置" aria-hidden="true">#</a> 共享配置</h2><h3 id="alias" tabindex="-1"><a class="header-anchor" href="#alias" aria-hidden="true">#</a> alias</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置别名,对引用路径进行映射。</p></li><li><p>示例:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">'src/assets/styles/main'</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>然后 <code>import('main')</code>,实际上是 <code>import('src/assets/styles/main')</code>。</p><h2 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> analyze</h2><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span> - <span class="token literal-property property">analyzerMode</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_MODE</span> <span class="token operator">||</span> <span class="token string">'server'</span><span class="token punctuation">,</span> - <span class="token literal-property property">analyzerPort</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_PORT</span> <span class="token operator">||</span> <span class="token number">8888</span><span class="token punctuation">,</span> - <span class="token literal-property property">openAnalyzer</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_OPEN</span> <span class="token operator">!==</span> <span class="token string">'none'</span><span class="token punctuation">,</span> - <span class="token comment">// generate stats file while ANALYZE_DUMP exist</span> - <span class="token literal-property property">generateStatsFile</span><span class="token operator">:</span> <span class="token operator">!</span><span class="token operator">!</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span><span class="token punctuation">,</span> - <span class="token literal-property property">statsFilename</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span> <span class="token operator">||</span> <span class="token string">'stats.json'</span><span class="token punctuation">,</span> - <span class="token literal-property property">logLevel</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_LOG_LEVEL</span> <span class="token operator">||</span> <span class="token string">'info'</span><span class="token punctuation">,</span> - <span class="token literal-property property">defaultSizes</span><span class="token operator">:</span> <span class="token string">'parsed'</span> <span class="token comment">// stat // gzip</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li><p>详情:</p><p>构建结果分析,当配置 <code>process.env.ANALYZE</code> 时开启,例如执行<code>ANALYZE=1 fes build</code></p></li></ul><h2 id="autoprefixer" tabindex="-1"><a class="header-anchor" href="#autoprefixer" aria-hidden="true">#</a> autoprefixer</h2><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span> - <span class="token literal-property property">flexbox</span><span class="token operator">:</span> <span class="token string">'no-2009'</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li><p>详情:</p><p><a href="https://github.com/postcss/autoprefixer#options" target="_blank" rel="noopener noreferrer">postcss autoprefixer 插件<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 配置。</p></li></ul><h2 id="base" tabindex="-1"><a class="header-anchor" href="#base" aria-hidden="true">#</a> base</h2><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>''</code></p></li><li><p>详情:</p><p>设置路由前缀,通常用于部署到非根目录。比如你有路由 <code>/pageA</code>、<code>/pageB</code>,然后设置了 <code>base</code> 为 <code>/manage/</code>,那么就可以通过 <code>/manage/pageA</code>、<code>/manage/pageB</code> 访问到它们。</p></li></ul><h2 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h2><ul><li><p>类型:<code>function</code></p></li><li><p>默认值:<code>null</code></p></li><li><p>详情:</p><p>通过 <a href="https://github.com/neutrinojs/webpack-chain" target="_blank" rel="noopener noreferrer">webpack-chain<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 的 API 修改 webpack 配置。</p></li></ul><p>示例:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">memo<span class="token punctuation">,</span> <span class="token punctuation">{</span> env<span class="token punctuation">,</span> webpack <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token comment">// 删除 fes 内置插件</span> - memo<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token string">'src/assets/styles/main'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="cssloader" tabindex="-1"><a class="header-anchor" href="#cssloader" aria-hidden="true">#</a> cssLoader</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>''</code></p></li><li><p>详情:</p><p>设置 <a href="https://github.com/webpack-contrib/css-loader#options" target="_blank" rel="noopener noreferrer">css-loader 配置项<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p></li></ul><h2 id="copy" tabindex="-1"><a class="header-anchor" href="#copy" aria-hidden="true">#</a> copy</h2><ul><li><p>类型: <code>Array(string) || Array(object)</code></p></li><li><p>默认值: <code>[]</code></p></li><li><p>详情:</p><p>设置要复制到输出目录的文件、文件夹。</p><p>配置约定 <code>from-to</code> 规则, 其中 <code>from</code> 是相对于 <code>cwd</code> 的路径,<code>to</code> 是相对于输出路径的路径。</p></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">copy</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">from</span><span class="token operator">:</span> <span class="token string">'/src/assets/images'</span><span class="token punctuation">,</span> - <span class="token literal-property property">to</span><span class="token operator">:</span> <span class="token string">'assets/images'</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>上面示例中,实现了将 <code>cwd</code> 路径中的 <code>/src/assets/images</code> 文件夹,在编译完成后,<code>copy</code> 到输出路径下的 <code>assets/images</code> 文件夹。</p><h2 id="define" tabindex="-1"><a class="header-anchor" href="#define" aria-hidden="true">#</a> define</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>用于提供给代码中可用的变量。</p></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">define</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">__DEV__</span><span class="token operator">:</span> <span class="token string">'development'</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>然后你代码里写 <code>console.log(__DEV__)</code>,会被编译成 <code>console.log('development')</code>。</p><h2 id="devserver" tabindex="-1"><a class="header-anchor" href="#devserver" aria-hidden="true">#</a> devServer</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置开发服务器。支持以下子配置项:</p><ul><li>port,端口号,默认 <code>8000</code></li><li>host,默认 <code>localhost</code></li><li>https,是否启用 https server,同时也会开启 HTTP/2</li></ul><p>启用 port 和 host 也可以通过环境变量 <code>PORT</code> 和 <code>HOST</code> 临时指定。</p></li></ul><h2 id="devtool" tabindex="-1"><a class="header-anchor" href="#devtool" aria-hidden="true">#</a> devtool</h2><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>cheap-module-source-map</code> in dev, <code>undefined</code> in build</p></li><li><p>详情:</p><p>用户配置 sourcemap 类型。详见 <a href="https://webpack.js.org/configuration/devtool/#devtool" target="_blank" rel="noopener noreferrer"> webpack#devtool 配置<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p></li></ul><h2 id="dynamicimport" tabindex="-1"><a class="header-anchor" href="#dynamicimport" aria-hidden="true">#</a> dynamicImport</h2><ul><li><p>类型: <code>boolean</code></p></li><li><p>默认值: false</p></li><li><p>详情:</p><p>路由是否按需加载</p></li></ul><h2 id="exportstatic" tabindex="-1"><a class="header-anchor" href="#exportstatic" aria-hidden="true">#</a> exportStatic</h2><ul><li>类型: <code>object</code></li><li>默认值: <code>{}</code></li><li>详情:</li></ul><p>配置 <code>html</code> 的输出形式,默认只输出 <code>index.html</code>。</p><p>如果开启 <code>exportStatic</code>,则会针对每个路由输出 <code>html</code> 文件。</p><p>比如以下路由,</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>/ -/users -/list -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>不开启 <code>exportStatic</code> 时,输出,</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>- index.html -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>设置 <code>exportStatic: {}</code> 后,输出,</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>- index.html -- users.html -- list.html -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="externals" tabindex="-1"><a class="header-anchor" href="#externals" aria-hidden="true">#</a> externals</h2><ul><li><p>类型:<code>object</code></p></li><li><p>默认值:<code>{}</code></p></li><li><p>详情:</p><p>设置哪些模块可以不被打包,通过 <code><script></code> 或其他方式引入。</p></li></ul><p>示例:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">vue</span><span class="token operator">:</span> <span class="token string">'window.Vue'</span><span class="token punctuation">,</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="extrababelplugins" tabindex="-1"><a class="header-anchor" href="#extrababelplugins" aria-hidden="true">#</a> extraBabelPlugins</h2><ul><li>类型: <code>array</code></li><li>默认值: <code>[]</code></li><li>详情:</li></ul><p>配置额外的 <code>babel</code> 插件。</p><ul><li>示例:</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">extraBabelPlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span> - <span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">libraryName</span><span class="token operator">:</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">,</span> <span class="token literal-property property">libraryDirectory</span><span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">'css'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token punctuation">]</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="extrababelpresets" tabindex="-1"><a class="header-anchor" href="#extrababelpresets" aria-hidden="true">#</a> extraBabelPresets</h2><ul><li>类型: <code>array</code></li><li>默认值: <code>[]</code></li><li>详情:</li></ul><p>配置额外的 <code>babel</code> 插件集。</p><h2 id="extrapostcssplugins" tabindex="-1"><a class="header-anchor" href="#extrapostcssplugins" aria-hidden="true">#</a> extraPostCSSPlugins</h2><ul><li><p>类型: <code>array</code></p></li><li><p>默认值: <code>[]</code></p></li><li><p>详情:</p><p>设置额外的 <a href="https://github.com/postcss/postcss/blob/master/docs/plugins.md" target="_blank" rel="noopener noreferrer">postcss 插件<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p></li></ul><h2 id="html" tabindex="-1"><a class="header-anchor" href="#html" aria-hidden="true">#</a> html</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>设置<a href="https://github.com/jantimon/html-webpack-plugin#options" target="_blank" rel="noopener noreferrer">html-webpack-plugin<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p></li></ul><h2 id="inlinelimit" tabindex="-1"><a class="header-anchor" href="#inlinelimit" aria-hidden="true">#</a> inlineLimit</h2><ul><li><p>类型: <code>number</code></p></li><li><p>默认值: <code>8192</code>(8k)</p></li><li><p>详情:</p><p>配置图片文件是否走 base64 编译的阈值。默认是 <code>8192</code> 字节,小于它会被编译为 base64 编码,否则会生成单独的文件。</p></li></ul><h2 id="lessloader" tabindex="-1"><a class="header-anchor" href="#lessloader" aria-hidden="true">#</a> lessLoader</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>设置 <a href="https://github.com/webpack-contrib/less-loader" target="_blank" rel="noopener noreferrer">less-loader 配置项<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p></li></ul><h2 id="mock" tabindex="-1"><a class="header-anchor" href="#mock" aria-hidden="true">#</a> mock</h2><ul><li><p>类型: <code>object || boolean</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置 mock 属性。</p><ul><li>当 mock 为 <code>boolean</code> 类型时,<code>true</code> 表示打开 mock,<code>false</code> 表示关闭 mock。</li><li>当 mock 为 <code>object</code> 类型时,默认打开 mock。也可以通过子属性 <code>prefix</code> 添加过滤条件,满足条件的走 mock 文件。</li></ul></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/api/auth'</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>然后所有以 <code>/api/users</code> 开始的请求,就能进入 mock.js 文件处理。</p><h2 id="mountelementid" tabindex="-1"><a class="header-anchor" href="#mountelementid" aria-hidden="true">#</a> mountElementId</h2><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>app</code></p></li><li><p>详情:</p><p>指定渲染到的 HTML 元素 id。</p></li></ul><h2 id="nodemodulestransform" tabindex="-1"><a class="header-anchor" href="#nodemodulestransform" aria-hidden="true">#</a> nodeModulesTransform</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{ exclude: [] }</code></p></li><li><p>详情:</p><p>默认编译所有 <code>node_modules</code> 下的包,可以通过配置 <code>exclude</code> 来跳过某些包,以提高编译速度。</p></li></ul><h2 id="outputpath" tabindex="-1"><a class="header-anchor" href="#outputpath" aria-hidden="true">#</a> outputPath</h2><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>dist</code></p></li><li><p>详情:</p><p>指定输出路径。</p></li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不允许设定为 <code>src</code>、<code>public</code>、<code>pages</code> 等约定目录。</p></div><h2 id="plugins" tabindex="-1"><a class="header-anchor" href="#plugins" aria-hidden="true">#</a> plugins</h2><ul><li><p>类型: <code>Array(string)</code></p></li><li><p>默认值: <code>[]</code></p></li><li><p>详情:</p><p>配置额外的 <code>fes</code> 插件。 数组项为指向插件的路径,可以是 npm 依赖、相对路径或绝对路径。如果是相对路径,则会从项目根目录开始找。</p></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span> - <span class="token comment">// npm 依赖</span> - <span class="token string">'fes-plugin-hello'</span><span class="token punctuation">,</span> - <span class="token comment">// 相对路径</span> - <span class="token string">'./plugin'</span><span class="token punctuation">,</span> - <span class="token comment">// 绝对路径</span> - <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>__dirname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/plugin.js</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> - <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="postcssloader" tabindex="-1"><a class="header-anchor" href="#postcssloader" aria-hidden="true">#</a> postcssLoader</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>设置 <a href="https://github.com/postcss/postcss-loader#options" target="_blank" rel="noopener noreferrer">postcss-loader 配置项<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p></li></ul><h2 id="proxy" tabindex="-1"><a class="header-anchor" href="#proxy" aria-hidden="true">#</a> proxy</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置代理能力。</p></li><li><p>示例:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后 <code>import('main')</code>,实际上是 <code>import('src/assets/styles/main')</code>。</p><h3 id="autoprefixer" tabindex="-1"><a class="header-anchor" href="#autoprefixer" aria-hidden="true">#</a> autoprefixer</h3><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> + <span class="token literal-property property">flexbox</span><span class="token operator">:</span> <span class="token string">'no-2009'</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><p>详情:</p><p><a href="https://github.com/postcss/autoprefixer#options" target="_blank" rel="noopener noreferrer">postcss autoprefixer 插件<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 配置。</p></li></ul><h3 id="base" tabindex="-1"><a class="header-anchor" href="#base" aria-hidden="true">#</a> base</h3><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>''</code></p></li><li><p>详情:</p><p>设置路由前缀,通常用于部署到非根目录。比如你有路由 <code>/pageA</code>、<code>/pageB</code>,然后设置了 <code>base</code> 为 <code>/manage/</code>,那么就可以通过 <code>/manage/pageA</code>、<code>/manage/pageB</code> 访问到它们。</p></li></ul><div class="custom-container warning"><p class="custom-container-title">2.1.x 已废弃</p><p>2.1.x 版本请使用 router.base 代替</p></div><h3 id="define" tabindex="-1"><a class="header-anchor" href="#define" aria-hidden="true">#</a> define</h3><ul><li>类型: <code>object</code></li><li>默认值: <code>{}</code></li><li>详情: 用于提供给代码中可用的变量。</li><li>示例:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">define</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">__DEV__</span><span class="token operator">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后你代码里写 <code>console.log(__DEV__)</code>,会被编译成 <code>console.log('development')</code>。</p><h3 id="dynamicimport" tabindex="-1"><a class="header-anchor" href="#dynamicimport" aria-hidden="true">#</a> dynamicImport</h3><ul><li><p>类型: <code>boolean</code></p></li><li><p>默认值: false</p></li><li><p>详情:</p><p>路由是否按需加载</p></li></ul><h3 id="inlinelimit" tabindex="-1"><a class="header-anchor" href="#inlinelimit" aria-hidden="true">#</a> inlineLimit</h3><ul><li><p>类型: <code>number</code></p></li><li><p>默认值: <code>8192</code>(8k)</p></li><li><p>详情:</p><p>配置图片文件是否走 base64 编译的阈值。默认是 <code>8192</code> 字节,小于它会被编译为 base64 编码,否则会生成单独的文件。</p></li></ul><h3 id="mock" tabindex="-1"><a class="header-anchor" href="#mock" aria-hidden="true">#</a> mock</h3><ul><li><p>类型: <code>object || boolean</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置 mock 属性。</p><ul><li>当 mock 为 <code>boolean</code> 类型时,<code>true</code> 表示打开 mock,<code>false</code> 表示关闭 mock。</li><li>当 mock 为 <code>object</code> 类型时,默认打开 mock。也可以通过子属性 <code>prefix</code> 添加过滤条件,满足条件的走 mock 文件。</li></ul></li><li><p>示例:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/api/auth'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后所有以 <code>/api/users</code> 开始的请求,就能进入 mock.js 文件处理,<a href="../../guide/mock">mock.js 示例</a>。</p><h3 id="mountelementid" tabindex="-1"><a class="header-anchor" href="#mountelementid" aria-hidden="true">#</a> mountElementId</h3><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>app</code></p></li><li><p>详情:</p><p>指定渲染到的 HTML 元素 id。</p></li></ul><h3 id="outputpath" tabindex="-1"><a class="header-anchor" href="#outputpath" aria-hidden="true">#</a> outputPath</h3><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>dist</code></p></li><li><p>详情:</p><p>指定输出路径。</p></li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不允许设定为 <code>src</code>、<code>public</code>、<code>pages</code> 等约定目录。</p></div><h3 id="plugins" tabindex="-1"><a class="header-anchor" href="#plugins" aria-hidden="true">#</a> plugins</h3><ul><li><p>类型: <code>Array(string)</code></p></li><li><p>默认值: <code>[]</code></p></li><li><p>详情:</p><p>配置额外的 <code>fes</code> 插件。 数组项为指向插件的路径,可以是 npm 依赖、相对路径或绝对路径。如果是相对路径,则会从项目根目录开始找。</p></li><li><p>示例:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token comment">// npm 依赖</span> + <span class="token string">'fes-plugin-hello'</span><span class="token punctuation">,</span> + <span class="token comment">// 相对路径</span> + <span class="token string">'./plugin'</span><span class="token punctuation">,</span> + <span class="token comment">// 绝对路径</span> + <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>__dirname<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/plugin.js</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="proxy" tabindex="-1"><a class="header-anchor" href="#proxy" aria-hidden="true">#</a> proxy</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置代理能力。</p></li><li><p>示例:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'/v2'</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token string-property property">'target'</span><span class="token operator">:</span> <span class="token string">'https://api.douban.com/'</span><span class="token punctuation">,</span> - <span class="token string-property property">'changeOrigin'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>然后访问 <code>/v2/movie/in_theaters_proxy</code> 就能访问到 <a href="http://api.douban.com/v2/movie/in_theaters_proxy" target="_blank" rel="noopener noreferrer">http://api.douban.com/v2/movie/in_theaters_proxy<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 的数据。</p><h2 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h2><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>/</code></p></li><li><p>详情:</p><p>配置 webpack 的 publicPath。当打包的时候,webpack 会在静态文件路径前面添加 <code>publicPath</code> 的值,当你需要修改静态文件地址时,比如使用 CDN 部署,把 <code>publicPath</code> 的值设为 CDN 的值就可以。</p></li></ul><h2 id="router" tabindex="-1"><a class="header-anchor" href="#router" aria-hidden="true">#</a> router</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{ mode: 'hash' }</code></p></li><li><p>详情:</p><p>配置路由,具体请查看指南中关于路由的介绍</p></li></ul><h2 id="singular" tabindex="-1"><a class="header-anchor" href="#singular" aria-hidden="true">#</a> singular</h2><ul><li><p>类型: <code>boolean</code></p></li><li><p>默认值: <code>false</code></p></li><li><p>详情:</p><p>配置是否启用单数模式的目录。 比如 <code>src/pages</code> 的约定在开启后为 <code>src/page</code> 目录,@fesjs/fes-plugins 插件也遵照此配置的约定。</p></li></ul><h2 id="targets" tabindex="-1"><a class="header-anchor" href="#targets" aria-hidden="true">#</a> targets</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置需要兼容的浏览器最低版本,会自动引入 polyfill 和做语法转换。</p></li></ul><h2 id="terseroptions" tabindex="-1"><a class="header-anchor" href="#terseroptions" aria-hidden="true">#</a> terserOptions</h2><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> defaultTerserOptions <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">'https://api.douban.com/'</span><span class="token punctuation">,</span> + <span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后访问 <code>/v2/movie/in_theaters_proxy</code> 就能访问到 <a href="http://api.douban.com/v2/movie/in_theaters_proxy" target="_blank" rel="noopener noreferrer">http://api.douban.com/v2/movie/in_theaters_proxy<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 的数据。</p><h3 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h3><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>/</code></p></li><li><p>详情:</p><p>静态资源 publicPath。当打包的时候在静态文件路径前面添加 <code>publicPath</code> 的值,当你需要修改静态文件地址时,比如使用 CDN 部署,把 <code>publicPath</code> 的值设为 CDN 的值就可以。</p></li></ul><h3 id="router" tabindex="-1"><a class="header-anchor" href="#router" aria-hidden="true">#</a> router</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{ mode: 'hash', base: '/' }</code></p></li><li><p>详情:</p><p>配置路由,具体请查看指南中关于路由的介绍</p></li></ul><h3 id="singular" tabindex="-1"><a class="header-anchor" href="#singular" aria-hidden="true">#</a> singular</h3><ul><li><p>类型: <code>boolean</code></p></li><li><p>默认值: <code>false</code></p></li><li><p>详情:</p><p>配置是否启用单数模式的目录。 比如 <code>src/pages</code> 的约定在开启后为 <code>src/page</code> 目录,@fesjs/fes-plugins 插件也遵照此配置的约定。</p></li></ul><h3 id="targets" tabindex="-1"><a class="header-anchor" href="#targets" aria-hidden="true">#</a> targets</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置需要兼容的浏览器最低版本,会自动引入 polyfill 和做语法转换。</p></li></ul><h3 id="terseroptions" tabindex="-1"><a class="header-anchor" href="#terseroptions" aria-hidden="true">#</a> terserOptions</h3><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> defaultTerserOptions <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">compress</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// turn off flags with small gains to speed up minification</span> <span class="token literal-property property">arrows</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> @@ -114,13 +98,50 @@ <span class="token comment">// required features to drop conditional branches</span> <span class="token literal-property property">conditionals</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">dead_code</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> - <span class="token literal-property property">evaluate</span><span class="token operator">:</span> <span class="token boolean">true</span> + <span class="token literal-property property">evaluate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">mangle</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">safari10</span><span class="token operator">:</span> <span class="token boolean">true</span> - <span class="token punctuation">}</span> + <span class="token literal-property property">safari10</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><p>详情:</p><p>配置 <a href="https://github.com/terser/terser#minify-options" target="_blank" rel="noopener noreferrer">压缩器 terser 的配置项<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></p></li></ul><h3 id="title" tabindex="-1"><a class="header-anchor" href="#title" aria-hidden="true">#</a> title</h3><ul><li><p>类型: <code>string</code></p></li><li><p>详情:</p><p>html 页面标题</p></li></ul><h2 id="webpack-专属配置" tabindex="-1"><a class="header-anchor" href="#webpack-专属配置" aria-hidden="true">#</a> webpack 专属配置</h2><h3 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> analyze</h3><ul><li>类型: <code>object</code></li><li>默认值:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> + <span class="token literal-property property">analyzerMode</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_MODE</span> <span class="token operator">||</span> <span class="token string">'server'</span><span class="token punctuation">,</span> + <span class="token literal-property property">analyzerPort</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_PORT</span> <span class="token operator">||</span> <span class="token number">8888</span><span class="token punctuation">,</span> + <span class="token literal-property property">openAnalyzer</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_OPEN</span> <span class="token operator">!==</span> <span class="token string">'none'</span><span class="token punctuation">,</span> + <span class="token comment">// generate stats file while ANALYZE_DUMP exist</span> + <span class="token literal-property property">generateStatsFile</span><span class="token operator">:</span> <span class="token operator">!</span><span class="token operator">!</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span><span class="token punctuation">,</span> + <span class="token literal-property property">statsFilename</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_DUMP</span> <span class="token operator">||</span> <span class="token string">'stats.json'</span><span class="token punctuation">,</span> + <span class="token literal-property property">logLevel</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">ANALYZE_LOG_LEVEL</span> <span class="token operator">||</span> <span class="token string">'info'</span><span class="token punctuation">,</span> + <span class="token literal-property property">defaultSizes</span><span class="token operator">:</span> <span class="token string">'parsed'</span> <span class="token comment">// stat // gzip</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><ul><li><p>详情:</p><p>配置 <a href="https://github.com/terser/terser#minify-options" target="_blank" rel="noopener noreferrer">压缩器 terser 的配置项<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></p></li></ul><h2 id="vueloader" tabindex="-1"><a class="header-anchor" href="#vueloader" aria-hidden="true">#</a> vueLoader</h2><ul><li><p>类型: <code>object</code></p></li><li><p>默认值:<code>{}</code></p></li><li><p>详情:</p><p>配置 <a href="https://vue-loader.vuejs.org/zh/options.html" target="_blank" rel="noopener noreferrer">Vue Loader<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></p></li></ul><h2 id="更多配置项" tabindex="-1"><a class="header-anchor" href="#更多配置项" aria-hidden="true">#</a> 更多配置项</h2><p>Fes.js 允许插件注册配置,如果你使用插件,肯定会在插件里找到更多配置项。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/config/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li><p>详情:</p><p>构建结果分析,当配置 <code>p<wbr>rocess.env.ANALYZE</code> 时开启,例如执行<code>ANALYZE=1 fes build</code></p></li></ul><h3 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h3><ul><li><p>类型:<code>function</code></p></li><li><p>默认值:<code>null</code></p></li><li><p>详情:</p><p>通过 <a href="https://github.com/neutrinojs/webpack-chain" target="_blank" rel="noopener noreferrer">webpack-chain<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 的 API 修改 webpack 配置。</p></li></ul><p>示例:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token parameter">memo<span class="token punctuation">,</span> <span class="token punctuation">{</span> env<span class="token punctuation">,</span> webpack <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 删除 fes 内置插件</span> + memo<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="cssloader" tabindex="-1"><a class="header-anchor" href="#cssloader" aria-hidden="true">#</a> cssLoader</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>''</code></p></li><li><p>详情:</p><p>设置 <a href="https://github.com/webpack-contrib/css-loader#options" target="_blank" rel="noopener noreferrer">css-loader 配置项<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</p></li></ul><h3 id="copy" tabindex="-1"><a class="header-anchor" href="#copy" aria-hidden="true">#</a> copy</h3><ul><li><p>类型: <code>Array(string) || Array(object)</code></p></li><li><p>默认值: <code>[]</code></p></li><li><p>详情:</p><p>设置要复制到输出目录的文件、文件夹。</p><p>配置约定 <code>from-to</code> 规则, 其中 <code>from</code> 是相对于 <code>cwd</code> 的路径,<code>to</code> 是相对于输出路径的路径。</p></li><li><p>示例:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">copy</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">from</span><span class="token operator">:</span> <span class="token string">'/src/assets/images'</span><span class="token punctuation">,</span> + <span class="token literal-property property">to</span><span class="token operator">:</span> <span class="token string">'assets/images'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>上面示例中,实现了将 <code>cwd</code> 路径中的 <code>/src/assets/images</code> 文件夹,在编译完成后,<code>copy</code> 到输出路径下的 <code>assets/images</code> 文件夹。</p><h3 id="devserver" tabindex="-1"><a class="header-anchor" href="#devserver" aria-hidden="true">#</a> devServer</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>配置开发服务器。支持以下子配置项:</p><ul><li>port,端口号,默认 <code>8000</code></li><li>host,默认 <code>localhost</code></li><li>https,是否启用 https server,同时也会开启 HTTP/2</li></ul><p>启用 port 和 host 也可以通过环境变量 <code>PORT</code> 和 <code>HOST</code> 临时指定。</p></li></ul><h3 id="devtool" tabindex="-1"><a class="header-anchor" href="#devtool" aria-hidden="true">#</a> devtool</h3><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>cheap-module-source-map</code> in dev, <code>undefined</code> in build</p></li><li><p>详情:</p><p>用户配置 sourcemap 类型。详见 <a href="https://webpack.js.org/configuration/devtool/#devtool" target="_blank" rel="noopener noreferrer"> webpack#devtool 配置<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</p></li></ul><h3 id="exportstatic" tabindex="-1"><a class="header-anchor" href="#exportstatic" aria-hidden="true">#</a> exportStatic</h3><ul><li>类型: <code>object</code></li><li>默认值: <code>{}</code></li><li>详情:</li></ul><p>配置 <code>html</code> 的输出形式,默认只输出 <code>index.html</code>。</p><p>如果开启 <code>exportStatic</code>,则会针对每个路由输出 <code>html</code> 文件。</p><p>比如以下路由,</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>/ +/users +/list +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>不开启 <code>exportStatic</code> 时,输出,</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>- index.html +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>设置 <code>exportStatic: {}</code> 后,输出,</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>- index.html +- users.html +- list.html +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="externals" tabindex="-1"><a class="header-anchor" href="#externals" aria-hidden="true">#</a> externals</h3><ul><li><p>类型:<code>object</code></p></li><li><p>默认值:<code>{}</code></p></li><li><p>详情:</p><p>设置哪些模块可以不被打包,通过 <code><script></code> 或其他方式引入。</p></li></ul><p>示例:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">externals</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">vue</span><span class="token operator">:</span> <span class="token string">'window.Vue'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="extrababelplugins" tabindex="-1"><a class="header-anchor" href="#extrababelplugins" aria-hidden="true">#</a> extraBabelPlugins</h3><ul><li>类型: <code>array</code></li><li>默认值: <code>[]</code></li><li>详情:</li></ul><p>配置额外的 <code>babel</code> 插件。</p><ul><li>示例:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">extraBabelPlugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">libraryName</span><span class="token operator">:</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">,</span> <span class="token literal-property property">libraryDirectory</span><span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">'css'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="extrababelpresets" tabindex="-1"><a class="header-anchor" href="#extrababelpresets" aria-hidden="true">#</a> extraBabelPresets</h3><ul><li>类型: <code>array</code></li><li>默认值: <code>[]</code></li><li>详情:</li></ul><p>配置额外的 <code>babel</code> 插件集。</p><h3 id="extrapostcssplugins" tabindex="-1"><a class="header-anchor" href="#extrapostcssplugins" aria-hidden="true">#</a> extraPostCSSPlugins</h3><ul><li><p>类型: <code>array</code></p></li><li><p>默认值: <code>[]</code></p></li><li><p>详情:</p><p>设置额外的 <a href="https://github.com/postcss/postcss/blob/master/docs/plugins.md" target="_blank" rel="noopener noreferrer">postcss 插件<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</p></li></ul><h3 id="html" tabindex="-1"><a class="header-anchor" href="#html" aria-hidden="true">#</a> html</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>设置<a href="https://github.com/jantimon/html-webpack-plugin#options" target="_blank" rel="noopener noreferrer">html-webpack-plugin<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</p></li></ul><h3 id="lessloader" tabindex="-1"><a class="header-anchor" href="#lessloader" aria-hidden="true">#</a> lessLoader</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>设置 <a href="https://github.com/webpack-contrib/less-loader" target="_blank" rel="noopener noreferrer">less-loader 配置项<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</p></li></ul><h3 id="nodemodulestransform" tabindex="-1"><a class="header-anchor" href="#nodemodulestransform" aria-hidden="true">#</a> nodeModulesTransform</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{ exclude: [] }</code></p></li><li><p>详情:</p><p>默认编译所有 <code>node_modules</code> 下的包,可以通过配置 <code>exclude</code> 来跳过某些包,以提高编译速度。</p></li></ul><h3 id="postcssloader" tabindex="-1"><a class="header-anchor" href="#postcssloader" aria-hidden="true">#</a> postcssLoader</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值: <code>{}</code></p></li><li><p>详情:</p><p>设置 <a href="https://github.com/postcss/postcss-loader#options" target="_blank" rel="noopener noreferrer">postcss-loader 配置项<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</p></li></ul><h3 id="vueloader" tabindex="-1"><a class="header-anchor" href="#vueloader" aria-hidden="true">#</a> vueLoader</h3><ul><li><p>类型: <code>object</code></p></li><li><p>默认值:<code>{}</code></p></li><li><p>详情:</p><p>配置 <a href="https://vue-loader.vuejs.org/zh/options.html" target="_blank" rel="noopener noreferrer">Vue Loader<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></p></li></ul><h2 id="vite-专属配置" tabindex="-1"><a class="header-anchor" href="#vite-专属配置" aria-hidden="true">#</a> Vite 专属配置</h2><h3 id="viteoption" tabindex="-1"><a class="header-anchor" href="#viteoption" aria-hidden="true">#</a> viteOption</h3><ul><li><p>类型: <code>object</code></p></li><li><p>详情:</p><p>Vite 的配置,详情请看 <a href="https://cn.vitejs.dev/config/" target="_blank" rel="noopener noreferrer">Vite Config<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></p></li></ul><h3 id="vitevueplugin" tabindex="-1"><a class="header-anchor" href="#vitevueplugin" aria-hidden="true">#</a> viteVuePlugin</h3><ul><li><p>类型: <code>object</code></p></li><li><p>详情:</p><p>自定义 <a href="https://github.com/vitejs/vite/tree/main/packages/plugin-vue" target="_blank" rel="noopener noreferrer">@vitejs/plugin-vue<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 的配置。</p></li></ul><h3 id="vitevuejsx" tabindex="-1"><a class="header-anchor" href="#vitevuejsx" aria-hidden="true">#</a> viteVueJsx</h3><ul><li><p>类型: <code>object</code></p></li><li><p>详情:</p><p>自定义 <a href="https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx" target="_blank" rel="noopener noreferrer">@vitejs/plugin-vue-jsx<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 的配置。</p></li></ul><h3 id="vitelegacy" tabindex="-1"><a class="header-anchor" href="#vitelegacy" aria-hidden="true">#</a> viteLegacy</h3><ul><li><p>类型: <code>object</code></p></li><li><p>详情:</p><p>自定义 <a href="https://github.com/vitejs/vite/tree/main/packages/plugin-legacy" target="_blank" rel="noopener noreferrer">@vitejs/plugin-legacy<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 的配置。</p></li></ul><h3 id="vitehtml" tabindex="-1"><a class="header-anchor" href="#vitehtml" aria-hidden="true">#</a> viteHtml</h3><ul><li><p>类型: <code>object</code></p></li><li><p>详情:</p><p>自定义 <a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noopener noreferrer">vite-plugin-html<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 的配置。</p></li></ul><h2 id="更多配置项" tabindex="-1"><a class="header-anchor" href="#更多配置项" aria-hidden="true">#</a> 更多配置项</h2><p>Fes.js 允许插件注册配置,如果你使用插件,肯定会在插件里找到更多配置项。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/config/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/dev/api.html b/reference/plugin/dev/api.html index edc88dbe..f5fb508f 100644 --- a/reference/plugin/dev/api.html +++ b/reference/plugin/dev/api.html @@ -3,191 +3,192 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>插件 API | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/api.html.06ea97fd.js"><link rel="modulepreload" href="/assets/api.html.ad50f750.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link router-link-active sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#属性" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="属性"><!--[--><!--]--> 属性 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#api-paths" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="api.paths"><!--[--><!--]--> api.paths <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#api-cwd" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="api.cwd"><!--[--><!--]--> api.cwd <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#api-pkg" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="api.pkg"><!--[--><!--]--> api.pkg <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#api-configinstance" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="api.configInstance"><!--[--><!--]--> api.configInstance <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#userconfig" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="userConfig"><!--[--><!--]--> userConfig <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#config" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="config"><!--[--><!--]--> config <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#env" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="env"><!--[--><!--]--> env <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#args" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="args"><!--[--><!--]--> args <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#核心方法" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="核心方法"><!--[--><!--]--> 核心方法 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#describe" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="describe"><!--[--><!--]--> describe <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#register" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="register"><!--[--><!--]--> register <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#applyplugins" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="applyPlugins"><!--[--><!--]--> applyPlugins <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#registermethod" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="registerMethod"><!--[--><!--]--> registerMethod <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#registercommand" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="registerCommand"><!--[--><!--]--> registerCommand <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#registerpresets" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="registerPresets"><!--[--><!--]--> registerPresets <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#registerplugins" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="registerPlugins"><!--[--><!--]--> registerPlugins <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#hasplugins" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="hasPlugins"><!--[--><!--]--> hasPlugins <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#haspresets" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="hasPresets"><!--[--><!--]--> hasPresets <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#skipplugins" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="skipPlugins"><!--[--><!--]--> skipPlugins <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#扩展方法" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="扩展方法"><!--[--><!--]--> 扩展方法 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addpluginexports" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addPluginExports"><!--[--><!--]--> addPluginExports <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addcoreexports" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addCoreExports"><!--[--><!--]--> addCoreExports <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addruntimeplugin" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addRuntimePlugin"><!--[--><!--]--> addRuntimePlugin <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addruntimepluginkey" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addRuntimePluginKey"><!--[--><!--]--> addRuntimePluginKey <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addentryimportsahead" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addEntryImportsAhead"><!--[--><!--]--> addEntryImportsAhead <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addentryimports" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addEntryImports"><!--[--><!--]--> addEntryImports <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addentrycodeahead" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addEntryCodeAhead"><!--[--><!--]--> addEntryCodeAhead <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addentrycode" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addEntryCode"><!--[--><!--]--> addEntryCode <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addhtmlheadscripts" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addHTMLHeadScripts"><!--[--><!--]--> addHTMLHeadScripts <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addbeforemiddlewares" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addBeforeMiddlewares"><!--[--><!--]--> addBeforeMiddlewares <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addmiddlewares" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addMiddlewares"><!--[--><!--]--> addMiddlewares <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#addtmpgeneratewatcherpaths" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="addTmpGenerateWatcherPaths"><!--[--><!--]--> addTmpGenerateWatcherPaths <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#chainwebpack" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="chainWebpack"><!--[--><!--]--> chainWebpack <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#copytmpfiles" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="copyTmpFiles"><!--[--><!--]--> copyTmpFiles <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#getport" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="getPort"><!--[--><!--]--> getPort <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#gethostname" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="getHostname"><!--[--><!--]--> getHostname <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#getserver" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="getServer"><!--[--><!--]--> getServer <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#getroutes" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="getRoutes"><!--[--><!--]--> getRoutes <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#getroutesjson" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="getRoutesJSON"><!--[--><!--]--> getRoutesJSON <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#modifyroutes" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="modifyRoutes"><!--[--><!--]--> modifyRoutes <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#modifybundleconfigopts" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="modifyBundleConfigOpts"><!--[--><!--]--> modifyBundleConfigOpts <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#modifybundleconfig" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="modifyBundleConfig"><!--[--><!--]--> modifyBundleConfig <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#modifybabelopts" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="modifyBabelOpts"><!--[--><!--]--> modifyBabelOpts <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#modifybabelpresetopts" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="modifyBabelPresetOpts"><!--[--><!--]--> modifyBabelPresetOpts <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#modifypaths" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="modifyPaths"><!--[--><!--]--> modifyPaths <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#modifydefaultconfig" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="modifyDefaultConfig"><!--[--><!--]--> modifyDefaultConfig <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#modifyconfig" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="modifyConfig"><!--[--><!--]--> modifyConfig <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#modifypublicpathstr" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="modifyPublicPathStr"><!--[--><!--]--> modifyPublicPathStr <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#onpluginready" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="onPluginReady"><!--[--><!--]--> onPluginReady <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#onstart" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="onStart"><!--[--><!--]--> onStart <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#onexit" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="onExit"><!--[--><!--]--> onExit <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#ongeneratefiles" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="onGenerateFiles"><!--[--><!--]--> onGenerateFiles <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#restartserver" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="restartServer"><!--[--><!--]--> restartServer <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/api.html#writetmpfile" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="writeTmpFile"><!--[--><!--]--> writeTmpFile <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="插件-api" tabindex="-1"><a class="header-anchor" href="#插件-api" aria-hidden="true">#</a> 插件 API</h1><h2 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h2><h3 id="api-paths" tabindex="-1"><a class="header-anchor" href="#api-paths" aria-hidden="true">#</a> api.paths</h3><p>一些关键的路径:</p><ul><li>cwd,执行命令的绝对路径</li><li>absNodeModulesPath,nodeModule的绝对路径</li><li>absOutputPath,输出 <code>build</code> 产物的绝对路径</li><li>absSrcPath,<code>src</code> 目录的绝对路径</li><li>absPagesPath,<code>pages</code>目录的绝对路径</li><li>absTmpPath,<code>.fes</code>临时文件目录的绝对路径</li></ul><h3 id="api-cwd" tabindex="-1"><a class="header-anchor" href="#api-cwd" aria-hidden="true">#</a> api.cwd</h3><p>执行命令的绝对路径</p><h3 id="api-pkg" tabindex="-1"><a class="header-anchor" href="#api-pkg" aria-hidden="true">#</a> api.pkg</h3><p><code>package.json</code>的内容</p><h3 id="api-configinstance" tabindex="-1"><a class="header-anchor" href="#api-configinstance" aria-hidden="true">#</a> api.configInstance</h3><p><code>config</code>实例</p><h3 id="userconfig" tabindex="-1"><a class="header-anchor" href="#userconfig" aria-hidden="true">#</a> userConfig</h3><p>用户配置</p><h3 id="config" tabindex="-1"><a class="header-anchor" href="#config" aria-hidden="true">#</a> config</h3><p>插件配置可被修改,此为最终的配置</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> env</h3><p>process.env</p><h3 id="args" tabindex="-1"><a class="header-anchor" href="#args" aria-hidden="true">#</a> args</h3><p>环境变量</p><h2 id="核心方法" tabindex="-1"><a class="header-anchor" href="#核心方法" aria-hidden="true">#</a> 核心方法</h2><h3 id="describe" tabindex="-1"><a class="header-anchor" href="#describe" aria-hidden="true">#</a> describe</h3><p>注册阶段执行,用于描述插件或插件集的 id、key、配置信息、启用方式等。</p><p>用法:<strong>describe({ id?: string, key?: string, config?: { default, schema, onChange } }, enableBy?)</strong></p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code> api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="router-link-active sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/dev/api.html#属性" class="router-link-active router-link-exact-active sidebar-item" aria-label="属性"><!--[--><!--]--> 属性 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/dev/api.html#api-paths" class="router-link-active router-link-exact-active sidebar-item" aria-label="api.paths"><!--[--><!--]--> api.paths <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#api-cwd" class="router-link-active router-link-exact-active sidebar-item" aria-label="api.cwd"><!--[--><!--]--> api.cwd <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#api-pkg" class="router-link-active router-link-exact-active sidebar-item" aria-label="api.pkg"><!--[--><!--]--> api.pkg <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#api-configinstance" class="router-link-active router-link-exact-active sidebar-item" aria-label="api.configInstance"><!--[--><!--]--> api.configInstance <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#userconfig" class="router-link-active router-link-exact-active sidebar-item" aria-label="userConfig"><!--[--><!--]--> userConfig <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#config" class="router-link-active router-link-exact-active sidebar-item" aria-label="config"><!--[--><!--]--> config <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#env" class="router-link-active router-link-exact-active sidebar-item" aria-label="env"><!--[--><!--]--> env <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#args" class="router-link-active router-link-exact-active sidebar-item" aria-label="args"><!--[--><!--]--> args <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#核心方法" class="router-link-active router-link-exact-active sidebar-item" aria-label="核心方法"><!--[--><!--]--> 核心方法 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/dev/api.html#describe" class="router-link-active router-link-exact-active sidebar-item" aria-label="describe"><!--[--><!--]--> describe <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#register" class="router-link-active router-link-exact-active sidebar-item" aria-label="register"><!--[--><!--]--> register <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#applyplugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="applyPlugins"><!--[--><!--]--> applyPlugins <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#registermethod" class="router-link-active router-link-exact-active sidebar-item" aria-label="registerMethod"><!--[--><!--]--> registerMethod <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#registercommand" class="router-link-active router-link-exact-active sidebar-item" aria-label="registerCommand"><!--[--><!--]--> registerCommand <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#registerpresets" class="router-link-active router-link-exact-active sidebar-item" aria-label="registerPresets"><!--[--><!--]--> registerPresets <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#registerplugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="registerPlugins"><!--[--><!--]--> registerPlugins <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#hasplugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="hasPlugins"><!--[--><!--]--> hasPlugins <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#haspresets" class="router-link-active router-link-exact-active sidebar-item" aria-label="hasPresets"><!--[--><!--]--> hasPresets <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#skipplugins" class="router-link-active router-link-exact-active sidebar-item" aria-label="skipPlugins"><!--[--><!--]--> skipPlugins <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#扩展方法" class="router-link-active router-link-exact-active sidebar-item" aria-label="扩展方法"><!--[--><!--]--> 扩展方法 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/dev/api.html#addpluginexports" class="router-link-active router-link-exact-active sidebar-item" aria-label="addPluginExports"><!--[--><!--]--> addPluginExports <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addcoreexports" class="router-link-active router-link-exact-active sidebar-item" aria-label="addCoreExports"><!--[--><!--]--> addCoreExports <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addruntimeplugin" class="router-link-active router-link-exact-active sidebar-item" aria-label="addRuntimePlugin"><!--[--><!--]--> addRuntimePlugin <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addruntimepluginkey" class="router-link-active router-link-exact-active sidebar-item" aria-label="addRuntimePluginKey"><!--[--><!--]--> addRuntimePluginKey <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addentryimportsahead" class="router-link-active router-link-exact-active sidebar-item" aria-label="addEntryImportsAhead"><!--[--><!--]--> addEntryImportsAhead <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addentryimports" class="router-link-active router-link-exact-active sidebar-item" aria-label="addEntryImports"><!--[--><!--]--> addEntryImports <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addentrycodeahead" class="router-link-active router-link-exact-active sidebar-item" aria-label="addEntryCodeAhead"><!--[--><!--]--> addEntryCodeAhead <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addentrycode" class="router-link-active router-link-exact-active sidebar-item" aria-label="addEntryCode"><!--[--><!--]--> addEntryCode <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addhtmlheadscripts" class="router-link-active router-link-exact-active sidebar-item" aria-label="addHTMLHeadScripts"><!--[--><!--]--> addHTMLHeadScripts <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addbeforemiddlewares" class="router-link-active router-link-exact-active sidebar-item" aria-label="addBeforeMiddlewares"><!--[--><!--]--> addBeforeMiddlewares <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addmiddlewares" class="router-link-active router-link-exact-active sidebar-item" aria-label="addMiddlewares"><!--[--><!--]--> addMiddlewares <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#addtmpgeneratewatcherpaths" class="router-link-active router-link-exact-active sidebar-item" aria-label="addTmpGenerateWatcherPaths"><!--[--><!--]--> addTmpGenerateWatcherPaths <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#chainwebpack" class="router-link-active router-link-exact-active sidebar-item" aria-label="chainWebpack"><!--[--><!--]--> chainWebpack <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#copytmpfiles" class="router-link-active router-link-exact-active sidebar-item" aria-label="copyTmpFiles"><!--[--><!--]--> copyTmpFiles <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#getport" class="router-link-active router-link-exact-active sidebar-item" aria-label="getPort"><!--[--><!--]--> getPort <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#gethostname" class="router-link-active router-link-exact-active sidebar-item" aria-label="getHostname"><!--[--><!--]--> getHostname <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#getserver" class="router-link-active router-link-exact-active sidebar-item" aria-label="getServer"><!--[--><!--]--> getServer <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#getroutes" class="router-link-active router-link-exact-active sidebar-item" aria-label="getRoutes"><!--[--><!--]--> getRoutes <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#getroutesjson" class="router-link-active router-link-exact-active sidebar-item" aria-label="getRoutesJSON"><!--[--><!--]--> getRoutesJSON <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifyroutes" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyRoutes"><!--[--><!--]--> modifyRoutes <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifybundleconfigopts" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyBundleConfigOpts"><!--[--><!--]--> modifyBundleConfigOpts <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifybundleconfig" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyBundleConfig"><!--[--><!--]--> modifyBundleConfig <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifybabelopts" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyBabelOpts"><!--[--><!--]--> modifyBabelOpts <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifybabelpresetopts" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyBabelPresetOpts"><!--[--><!--]--> modifyBabelPresetOpts <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifypaths" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyPaths"><!--[--><!--]--> modifyPaths <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifydefaultconfig" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyDefaultConfig"><!--[--><!--]--> modifyDefaultConfig <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifyconfig" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyConfig"><!--[--><!--]--> modifyConfig <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#modifypublicpathstr" class="router-link-active router-link-exact-active sidebar-item" aria-label="modifyPublicPathStr"><!--[--><!--]--> modifyPublicPathStr <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#onpluginready" class="router-link-active router-link-exact-active sidebar-item" aria-label="onPluginReady"><!--[--><!--]--> onPluginReady <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#onstart" class="router-link-active router-link-exact-active sidebar-item" aria-label="onStart"><!--[--><!--]--> onStart <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#onexit" class="router-link-active router-link-exact-active sidebar-item" aria-label="onExit"><!--[--><!--]--> onExit <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#ongeneratefiles" class="router-link-active router-link-exact-active sidebar-item" aria-label="onGenerateFiles"><!--[--><!--]--> onGenerateFiles <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#restartserver" class="router-link-active router-link-exact-active sidebar-item" aria-label="restartServer"><!--[--><!--]--> restartServer <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/api.html#writetmpfile" class="router-link-active router-link-exact-active sidebar-item" aria-label="writeTmpFile"><!--[--><!--]--> writeTmpFile <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="插件-api" tabindex="-1"><a class="header-anchor" href="#插件-api" aria-hidden="true">#</a> 插件 API</h1><h2 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h2><h3 id="api-paths" tabindex="-1"><a class="header-anchor" href="#api-paths" aria-hidden="true">#</a> api.paths</h3><p>一些关键的路径:</p><ul><li>cwd,执行命令的绝对路径</li><li>absNodeModulesPath,nodeModule 的绝对路径</li><li>absOutputPath,输出 <code>build</code> 产物的绝对路径</li><li>absSrcPath,<code>src</code> 目录的绝对路径</li><li>absPagesPath,<code>pages</code>目录的绝对路径</li><li>absTmpPath,<code>.fes</code>临时文件目录的绝对路径</li></ul><h3 id="api-cwd" tabindex="-1"><a class="header-anchor" href="#api-cwd" aria-hidden="true">#</a> api.cwd</h3><p>执行命令的绝对路径</p><h3 id="api-pkg" tabindex="-1"><a class="header-anchor" href="#api-pkg" aria-hidden="true">#</a> api.pkg</h3><p><code>package.json</code>的内容</p><h3 id="api-configinstance" tabindex="-1"><a class="header-anchor" href="#api-configinstance" aria-hidden="true">#</a> api.configInstance</h3><p><code>config</code>实例</p><h3 id="userconfig" tabindex="-1"><a class="header-anchor" href="#userconfig" aria-hidden="true">#</a> userConfig</h3><p>用户配置</p><h3 id="config" tabindex="-1"><a class="header-anchor" href="#config" aria-hidden="true">#</a> config</h3><p>插件配置可被修改,此为最终的配置</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> env</h3><p>p<wbr>rocess.env</p><h3 id="args" tabindex="-1"><a class="header-anchor" href="#args" aria-hidden="true">#</a> args</h3><p>环境变量</p><h2 id="核心方法" tabindex="-1"><a class="header-anchor" href="#核心方法" aria-hidden="true">#</a> 核心方法</h2><h3 id="describe" tabindex="-1"><a class="header-anchor" href="#describe" aria-hidden="true">#</a> describe</h3><p>注册阶段执行,用于描述插件或插件集的 id、key、配置信息、启用方式等。</p><p>用法:<strong>describe({ id?: string, key?: string, config?: { default, schema, onChange } }, enableBy?)</strong></p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'esbuild'</span><span class="token punctuation">,</span> <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">schema</span><span class="token punctuation">(</span><span class="token parameter">joi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> joi<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> + <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">enableBy</span><span class="token operator">:</span> api<span class="token punctuation">.</span>EnableBy<span class="token punctuation">.</span>config<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>注:</p><ul><li><code>config.default</code> 为配置的默认值,用户没有配置时取这个</li><li><code>config.schema</code> 用于声明配置的类型,基于 <a href="https://hapi.dev/module/joi" target="_blank" rel="noopener noreferrer">joi<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>,如果你希望用户进行配置,这个是必须的,否则用户的配置无效</li><li><code>config.onChange</code> 是 <code>dev</code> 阶段配置被修改后的处理机制,默认会重启 dev 进程,也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件,还可以通过函数的格式自定义</li><li><code>enableBy</code> 为启用方式,默认是注册启用,可更改为 <code>api.EnableBy.config</code>,还可以用自定义函数的方式决定其启用时机(动态生效)</li></ul><h3 id="register" tabindex="-1"><a class="header-anchor" href="#register" aria-hidden="true">#</a> register</h3><p>为 api.applyPlugins 注册可供其使用的 hook。</p><p>用法:<strong>register({ key: string, fn: Function, pluginId?: string, before?: string, stage?: number })</strong></p><p>参数:</p><ul><li>key:唯一id</li><li>fn:hook函数,当执行<code>api.applyPlugins</code>时,此函数被执行。</li><li>pluginId:插件id,如果配置了插件id,则只有此插件未被禁用时,才会执行。</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 可同步</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注:</p><ul><li><code>config.default</code> 为配置的默认值,用户没有配置时取这个</li><li><code>config.schema</code> 用于声明配置的类型,基于 <a href="https://hapi.dev/module/joi" target="_blank" rel="noopener noreferrer">joi<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,如果你希望用户进行配置,这个是必须的,否则用户的配置无效</li><li><code>config.onChange</code> 是 <code>dev</code> 阶段配置被修改后的处理机制,默认会重启 dev 进程,也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件,还可以通过函数的格式自定义</li><li><code>enableBy</code> 为启用方式,默认是注册启用,可更改为 <code>api.EnableBy.config</code>,还可以用自定义函数的方式决定其启用时机(动态生效)</li></ul><h3 id="register" tabindex="-1"><a class="header-anchor" href="#register" aria-hidden="true">#</a> register</h3><p>为 api.applyPlugins 注册可供其使用的 hook。</p><p>用法:<strong>register({ key: string, fn: Function, pluginId?: string, before?: string, stage?: number })</strong></p><p>参数:</p><ul><li>key:唯一 id</li><li>fn:hook 函数,当执行<code>api.applyPlugins</code>时,此函数被执行。</li><li>pluginId:插件 id,如果配置了插件 id,则只有此插件未被禁用时,才会执行。</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 可同步</span> api<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> - <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token string">'a'</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> + <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token string">'a'</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 可异步</span> api<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> - <span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token keyword">await</span> <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token keyword">return</span> <span class="token string">'b'</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> + <span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">await</span> <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token string">'b'</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>注意:</p><ul><li>fn 支持同步和异步,异步通过 Promise,返回值为 Promise 即为异步</li><li>fn 里的内容需结合 <code>api.appyPlugins</code> 的 <code>type</code> 参数来看,如果是 <code>api.ApplyPluginsType.add</code>,需有返回值,这些返回值最终会被合成一个数组。如果是 <code>api.ApplyPluginsType.modify</code>,需对第一个参数做修改,并返回它,它会作为下个hook的参数。 如果是 <code>api.ApplyPluginsType.event</code>,无需返回值</li><li>stage 和 before 都是用于调整执行顺序的,参考 tapable</li><li>stage 默认是 0,设为 -1 或更少会提前执行,设为 1 或更多会后置执行</li></ul><h3 id="applyplugins" tabindex="-1"><a class="header-anchor" href="#applyplugins" aria-hidden="true">#</a> applyPlugins</h3><p>取得 register 注册的 hooks 执行后的数据。</p><p>用法:<strong>applyPlugins({ key: string, type: api.ApplyPluginsType, initialValue?: any, args?: any })</strong></p><p>参数:</p><ul><li>key:唯一id</li><li>type:hook的类型。</li><li>initialValue:初始值。</li><li>args:参数,hook函数执行时,args会作为参数传入。</li></ul><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token keyword">await</span> api<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> - <span class="token literal-property property">type</span><span class="token operator">:</span> api<span class="token punctuation">.</span>ApplyPluginsType<span class="token punctuation">.</span>add<span class="token punctuation">,</span> - <span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意:</p><ul><li>fn 支持同步和异步,异步通过 Promise,返回值为 Promise 即为异步</li><li>fn 里的内容需结合 <code>api.appyPlugins</code> 的 <code>type</code> 参数来看,如果是 <code>api.ApplyPluginsType.add</code>,需有返回值,这些返回值最终会被合成一个数组。如果是 <code>api.ApplyPluginsType.modify</code>,需对第一个参数做修改,并返回它,它会作为下个 hook 的参数。 如果是 <code>api.ApplyPluginsType.event</code>,无需返回值</li><li>stage 和 before 都是用于调整执行顺序的,参考 tapable</li><li>stage 默认是 0,设为 -1 或更少会提前执行,设为 1 或更多会后置执行</li></ul><h3 id="applyplugins" tabindex="-1"><a class="header-anchor" href="#applyplugins" aria-hidden="true">#</a> applyPlugins</h3><p>取得 register 注册的 hooks 执行后的数据。</p><p>用法:<strong>applyPlugins({ key: string, type: api.ApplyPluginsType, initialValue?: any, args?: any })</strong></p><p>参数:</p><ul><li>key:唯一 id</li><li>type:hook 的类型。</li><li>initialValue:初始值。</li><li>args:参数,hook 函数执行时,args 会作为参数传入。</li></ul><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token keyword">await</span> api<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span> + <span class="token literal-property property">type</span><span class="token operator">:</span> api<span class="token punctuation">.</span>ApplyPluginsType<span class="token punctuation">.</span>add<span class="token punctuation">,</span> + <span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['a', 'b']</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="api-applypluginstype" tabindex="-1"><a class="header-anchor" href="#api-applypluginstype" aria-hidden="true">#</a> api.ApplyPluginsType</h4><p>编译时插件hook执行类型,enum 类型,包含三个属性:</p><ul><li>compose,用于合并执行多个函数,函数可决定前序函数的执行时机</li><li>modify,用于修改值</li><li>event,用于执行事件,前面没有依赖关系</li></ul><h3 id="registermethod" tabindex="-1"><a class="header-anchor" href="#registermethod" aria-hidden="true">#</a> registerMethod</h3><p>往 <code>api</code> 上注册方法。如果有提供 <code>fn</code>,则执行 <code>fn</code> 定义的函数。</p><p>用法:<strong>registerMethod({ name: string, fn?: Function, exitsError?: boolean })</strong></p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code> api<span class="token punctuation">.</span><span class="token function">registerMethod</span><span class="token punctuation">(</span><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="api-applypluginstype" tabindex="-1"><a class="header-anchor" href="#api-applypluginstype" aria-hidden="true">#</a> api.ApplyPluginsType</h4><p>编译时插件 hook 执行类型,enum 类型,包含三个属性:</p><ul><li>compose,用于合并执行多个函数,函数可决定前序函数的执行时机</li><li>modify,用于修改值</li><li>event,用于执行事件,前面没有依赖关系</li></ul><h3 id="registermethod" tabindex="-1"><a class="header-anchor" href="#registermethod" aria-hidden="true">#</a> registerMethod</h3><p>往 <code>api</code> 上注册方法。如果有提供 <code>fn</code>,则执行 <code>fn</code> 定义的函数。</p><p>用法:<strong>registerMethod({ name: string, fn?: Function, exitsError?: boolean })</strong></p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerMethod</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'writeTmpFile'</span><span class="token punctuation">,</span> - <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> - path<span class="token punctuation">,</span> - content - <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token function">assert</span><span class="token punctuation">(</span> - api<span class="token punctuation">.</span>stage <span class="token operator">>=</span> api<span class="token punctuation">.</span>ServiceStage<span class="token punctuation">.</span>pluginReady<span class="token punctuation">,</span> - <span class="token string">'api.writeTmpFile() should not execute in register stage.'</span> - <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> path<span class="token punctuation">,</span> content <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token function">assert</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>stage <span class="token operator">>=</span> api<span class="token punctuation">.</span>ServiceStage<span class="token punctuation">.</span>pluginReady<span class="token punctuation">,</span> <span class="token string">'api.writeTmpFile() should not execute in register stage.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> absPath <span class="token operator">=</span> <span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath<span class="token punctuation">,</span> path<span class="token punctuation">)</span><span class="token punctuation">;</span> api<span class="token punctuation">.</span>utils<span class="token punctuation">.</span>mkdirp<span class="token punctuation">.</span><span class="token function">sync</span><span class="token punctuation">(</span><span class="token function">dirname</span><span class="token punctuation">(</span>absPath<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">existsSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token function">readFileSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span> <span class="token operator">!==</span> content<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">writeFileSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">,</span> content<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>然后在插件中可以使用:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="registercommand" tabindex="-1"><a class="header-anchor" href="#registercommand" aria-hidden="true">#</a> registerCommand</h3><p>注册命令,基于 <a href="https://github.com/tj/commander.js/" target="_blank" rel="noopener noreferrer">commander<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 实现的机制。</p><p>用法:<strong>registerCommand({ command: string, description: string, fn: Function, options?: Object })</strong></p><p>参数:</p><ul><li>command</li><li>description,描述文字,输入 <code>--help</code> 会打印</li><li>fn,命令执行的函数,参数有: <ul><li>rawArgv,原始参数</li><li>args,参数</li><li>options,执行命令时附带的的参数配置</li><li>program,commander对象</li></ul></li><li>options,参数配置,基于 <a href="https://github.com/tj/commander.js/" target="_blank" rel="noopener noreferrer">commander<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 。</li></ul><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后在插件中可以使用:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="registercommand" tabindex="-1"><a class="header-anchor" href="#registercommand" aria-hidden="true">#</a> registerCommand</h3><p>注册命令,基于 <a href="https://github.com/tj/commander.js/" target="_blank" rel="noopener noreferrer">commander<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 实现的机制。</p><p>用法:<strong>registerCommand({ command: string, description: string, fn: Function, options?: Object })</strong></p><p>参数:</p><ul><li>command</li><li>description,描述文字,输入 <code>--help</code> 会打印</li><li>fn,命令执行的函数,参数有: <ul><li>rawArgv,原始参数</li><li>args,参数</li><li>options,执行命令时附带的的参数配置</li><li>program,commander 对象</li></ul></li><li>options,参数配置,基于 <a href="https://github.com/tj/commander.js/" target="_blank" rel="noopener noreferrer">commander<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 。</li></ul><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'webpack'</span><span class="token punctuation">,</span> <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect webpack configurations'</span><span class="token punctuation">,</span> - <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rule <ruleName>'</span><span class="token punctuation">,</span> - <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific module rule'</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugin <pluginName>'</span><span class="token punctuation">,</span> - <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific plugin'</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rules'</span><span class="token punctuation">,</span> - <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all module rule names'</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugins'</span><span class="token punctuation">,</span> - <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all plugin names'</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--verbose'</span><span class="token punctuation">,</span> - <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'show full function definitions in output'</span> - <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> rawArgv<span class="token punctuation">,</span> args<span class="token punctuation">,</span> options<span class="token punctuation">,</span> program<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p>当项目引入此插件后,使用:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>fes webpack -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="registerpresets" tabindex="-1"><a class="header-anchor" href="#registerpresets" aria-hidden="true">#</a> registerPresets</h3><p>注册插件集,参数为路径数组。</p><p>用法:<strong>registerPresets(presets: string[])</strong></p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPresets</span><span class="token punctuation">(</span><span class="token punctuation">[</span> - <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> - require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> -<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="registerplugins" tabindex="-1"><a class="header-anchor" href="#registerplugins" aria-hidden="true">#</a> registerPlugins</h3><p>注册插件,参数为路径数组。</p><p>用法:<strong>registerPlugins(plugins: string[])</strong></p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span> - <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> - require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> -<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="hasplugins" tabindex="-1"><a class="header-anchor" href="#hasplugins" aria-hidden="true">#</a> hasPlugins</h3><p>判断是否有注册某个插件,插件的 id 规则:</p><ul><li>id 默认为包名</li><li>内置插件以 <code>@@</code> 为前缀,比如 <code>@@/registerMethod</code></li></ul><p>用法:<strong>hasPlugins(pluginIds: string[])</strong></p><p>例如</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册 @fesjs/plugin-locale</span> + <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rule <ruleName>'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific module rule'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugin <pluginName>'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific plugin'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rules'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all module rule names'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugins'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all plugin names'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--verbose'</span><span class="token punctuation">,</span> + <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'show full function definitions in output'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> rawArgv<span class="token punctuation">,</span> args<span class="token punctuation">,</span> options<span class="token punctuation">,</span> program <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当项目引入此插件后,使用:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes webpack +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="registerpresets" tabindex="-1"><a class="header-anchor" href="#registerpresets" aria-hidden="true">#</a> registerPresets</h3><p>注册插件集,参数为路径数组。</p><p>用法:<strong>registerPresets(presets: string[])</strong></p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPresets</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="registerplugins" tabindex="-1"><a class="header-anchor" href="#registerplugins" aria-hidden="true">#</a> registerPlugins</h3><p>注册插件,参数为路径数组。</p><p>用法:<strong>registerPlugins(plugins: string[])</strong></p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="hasplugins" tabindex="-1"><a class="header-anchor" href="#hasplugins" aria-hidden="true">#</a> hasPlugins</h3><p>判断是否有注册某个插件,插件的 id 规则:</p><ul><li>id 默认为包名</li><li>内置插件以 <code>@@</code> 为前缀,比如 <code>@@/registerMethod</code></li></ul><p>用法:<strong>hasPlugins(pluginIds: string[])</strong></p><p>例如</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册 @fesjs/plugin-locale</span> api<span class="token punctuation">.</span><span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/plugin-locale'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用,只能判断在他之前是否有注册某个插件。</p></div><h3 id="haspresets" tabindex="-1"><a class="header-anchor" href="#haspresets" aria-hidden="true">#</a> hasPresets</h3><p>判断是否有注册某个插件集。</p><p>用法:<strong>hasPresets(presetIds: string[])</strong></p><p>例如</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用,只能判断在他之前是否有注册某个插件。</p></div><h3 id="haspresets" tabindex="-1"><a class="header-anchor" href="#haspresets" aria-hidden="true">#</a> hasPresets</h3><p>判断是否有注册某个插件集。</p><p>用法:<strong>hasPresets(presetIds: string[])</strong></p><p>例如</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册</span> api<span class="token punctuation">.</span><span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/preset-xxx'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用,只能判断在他之前是否有注册某个插件集。</p></div><h3 id="skipplugins" tabindex="-1"><a class="header-anchor" href="#skipplugins" aria-hidden="true">#</a> skipPlugins</h3><p>声明哪些插件需要被禁用,参数为插件 id 的数组。</p><p>用法:<strong>hasPresets(presetIds: string[])</strong></p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 禁用 plugin-model 插件</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用,只能判断在他之前是否有注册某个插件集。</p></div><h3 id="skipplugins" tabindex="-1"><a class="header-anchor" href="#skipplugins" aria-hidden="true">#</a> skipPlugins</h3><p>声明哪些插件需要被禁用,参数为插件 id 的数组。</p><p>用法:<strong>hasPresets(presetIds: string[])</strong></p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 禁用 plugin-model 插件</span> api<span class="token punctuation">.</span><span class="token function">skipPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/plugin-model'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="扩展方法" tabindex="-1"><a class="header-anchor" href="#扩展方法" aria-hidden="true">#</a> 扩展方法</h2><p>通过 api.registerMethod() 扩展的方法。</p><h3 id="addpluginexports" tabindex="-1"><a class="header-anchor" href="#addpluginexports" aria-hidden="true">#</a> addPluginExports</h3><p>把插件需要导出的运行时 API 写入<code>@fesjs/fes</code>。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addPluginExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="扩展方法" tabindex="-1"><a class="header-anchor" href="#扩展方法" aria-hidden="true">#</a> 扩展方法</h2><p>通过 api.registerMethod() 扩展的方法。</p><h3 id="addpluginexports" tabindex="-1"><a class="header-anchor" href="#addpluginexports" aria-hidden="true">#</a> addPluginExports</h3><p>把插件需要导出的运行时 API 写入<code>@fesjs/fes</code>。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addPluginExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">specifiers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'access'</span><span class="token punctuation">,</span> <span class="token string">'useAccess'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token literal-property property">source</span><span class="token operator">:</span> absoluteFilePath - <span class="token punctuation">}</span> + <span class="token literal-property property">source</span><span class="token operator">:</span> absoluteFilePath<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>这样用户使用时:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access<span class="token punctuation">,</span> useAccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="addcoreexports" tabindex="-1"><a class="header-anchor" href="#addcoreexports" aria-hidden="true">#</a> addCoreExports</h3><p>提供给其他插件运行时需要的 API。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addCoreExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这样用户使用时:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access<span class="token punctuation">,</span> useAccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addcoreexports" tabindex="-1"><a class="header-anchor" href="#addcoreexports" aria-hidden="true">#</a> addCoreExports</h3><p>提供给其他插件运行时需要的 API。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addCoreExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">specifiers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'getRoutes'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token literal-property property">source</span><span class="token operator">:</span> absCoreFilePath - <span class="token punctuation">}</span> + <span class="token literal-property property">source</span><span class="token operator">:</span> absCoreFilePath<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>使用:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getHistory<span class="token punctuation">,</span> destroyRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@@/core/coreExports'</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="addruntimeplugin" tabindex="-1"><a class="header-anchor" href="#addruntimeplugin" aria-hidden="true">#</a> addRuntimePlugin</h3><p>添加运行时插件,返回值格式为表示文件路径的字符串。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePlugin</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./runtime'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="addruntimepluginkey" tabindex="-1"><a class="header-anchor" href="#addruntimepluginkey" aria-hidden="true">#</a> addRuntimePluginKey</h3><p>添加插件提供的运行时配置的 key,返回值格式为字符串。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePluginKey</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'some'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>则用户可以:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// app.js</span> -<span class="token keyword">const</span> <span class="token function-variable function">some</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token punctuation">{</span> - - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="addentryimportsahead" tabindex="-1"><a class="header-anchor" href="#addentryimportsahead" aria-hidden="true">#</a> addEntryImportsAhead</h3><p>在入口文件现有 import 的前面添加 import。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImportsAhead</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'anypackage'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="addentryimports" tabindex="-1"><a class="header-anchor" href="#addentryimports" aria-hidden="true">#</a> addEntryImports</h3><p>在入口文件现有 import 的后面添加 import。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImport</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token punctuation">[</span> - <span class="token punctuation">{</span> - <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'/modulePath/xxx.js'</span><span class="token punctuation">,</span> - <span class="token literal-property property">specifier</span><span class="token operator">:</span> <span class="token string">'moduleName'</span><span class="token punctuation">,</span> - <span class="token punctuation">}</span> - <span class="token punctuation">]</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getHistory<span class="token punctuation">,</span> destroyRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@@/core/coreExports'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addruntimeplugin" tabindex="-1"><a class="header-anchor" href="#addruntimeplugin" aria-hidden="true">#</a> addRuntimePlugin</h3><p>添加运行时插件,返回值格式为表示文件路径的字符串。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePlugin</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./runtime'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addruntimepluginkey" tabindex="-1"><a class="header-anchor" href="#addruntimepluginkey" aria-hidden="true">#</a> addRuntimePluginKey</h3><p>添加插件提供的运行时配置的 key,返回值格式为字符串。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePluginKey</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'some'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>则用户可以:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span> +<span class="token keyword">const</span> <span class="token function-variable function">some</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addentryimportsahead" tabindex="-1"><a class="header-anchor" href="#addentryimportsahead" aria-hidden="true">#</a> addEntryImportsAhead</h3><p>在入口文件现有 import 的前面添加 import。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImportsAhead</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'anypackage'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addentryimports" tabindex="-1"><a class="header-anchor" href="#addentryimports" aria-hidden="true">#</a> addEntryImports</h3><p>在入口文件现有 import 的后面添加 import。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImport</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'/modulePath/xxx.js'</span><span class="token punctuation">,</span> + <span class="token literal-property property">specifier</span><span class="token operator">:</span> <span class="token string">'moduleName'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="addentrycodeahead" tabindex="-1"><a class="header-anchor" href="#addentrycodeahead" aria-hidden="true">#</a> addEntryCodeAhead</h3><p>在入口文件最前面(import 之后)添加代码。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCodeAhead</span><span class="token punctuation">(</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addentrycodeahead" tabindex="-1"><a class="header-anchor" href="#addentrycodeahead" aria-hidden="true">#</a> addEntryCodeAhead</h3><p>在入口文件最前面(import 之后)添加代码。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCodeAhead</span><span class="token punctuation">(</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>globalCSSFile <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">file</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">require('</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">winPath</span><span class="token punctuation">(</span><span class="token function">relative</span><span class="token punctuation">(</span>absTmpPath<span class="token punctuation">,</span> file<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">');</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="addentrycode" tabindex="-1"><a class="header-anchor" href="#addentrycode" aria-hidden="true">#</a> addEntryCode</h3><p>在入口文件最后添加代码。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCode</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">console.log('works!')</span><span class="token template-punctuation string">`</span></span> -<span class="token punctuation">}</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="addhtmlheadscripts" tabindex="-1"><a class="header-anchor" href="#addhtmlheadscripts" aria-hidden="true">#</a> addHTMLHeadScripts</h3><p>在 HTML 头部添加脚本。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addHTMLHeadScripts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token punctuation">[</span> - <span class="token punctuation">{</span> - <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> - <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> - <span class="token comment">// ...attrs</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">]</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addentrycode" tabindex="-1"><a class="header-anchor" href="#addentrycode" aria-hidden="true">#</a> addEntryCode</h3><p>在入口文件最后添加代码。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCode</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">console.log('works!')</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="addbeforemiddlewares" tabindex="-1"><a class="header-anchor" href="#addbeforemiddlewares" aria-hidden="true">#</a> addBeforeMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之前的中间件,返回值格式为 <code>express</code> 中间件。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addBeforeMiddlewares</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'end'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> - <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addhtmlheadscripts" tabindex="-1"><a class="header-anchor" href="#addhtmlheadscripts" aria-hidden="true">#</a> addHTMLHeadScripts</h3><p>在 HTML 头部添加脚本。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addHTMLHeadScripts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token comment">// ...attrs</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="addmiddlewares" tabindex="-1"><a class="header-anchor" href="#addmiddlewares" aria-hidden="true">#</a> addMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之后的中间件,返回值格式为 <code>express</code> 中间件。</p><h3 id="addtmpgeneratewatcherpaths" tabindex="-1"><a class="header-anchor" href="#addtmpgeneratewatcherpaths" aria-hidden="true">#</a> addTmpGenerateWatcherPaths</h3><p>添加重新生成临时文件的监听路径。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addTmpGenerateWatcherPaths</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span> - <span class="token string">'./app.js'</span><span class="token punctuation">,</span> -<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h3><p>通过 [webpack-chain] 的方式修改 webpack 配置。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addbeforemiddlewares" tabindex="-1"><a class="header-anchor" href="#addbeforemiddlewares" aria-hidden="true">#</a> addBeforeMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之前的中间件,返回值格式为 <code>express</code> 中间件。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addBeforeMiddlewares</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'end'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addmiddlewares" tabindex="-1"><a class="header-anchor" href="#addmiddlewares" aria-hidden="true">#</a> addMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之后的中间件,返回值格式为 <code>express</code> 中间件。</p><h3 id="addtmpgeneratewatcherpaths" tabindex="-1"><a class="header-anchor" href="#addtmpgeneratewatcherpaths" aria-hidden="true">#</a> addTmpGenerateWatcherPaths</h3><p>添加重新生成临时文件的监听路径。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addTmpGenerateWatcherPaths</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string">'./app.js'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h3><p>通过 [webpack-chain] 的方式修改 webpack 配置。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> memo<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'vue-i18n'</span><span class="token punctuation">,</span> <span class="token string">'vue-i18n/dist/vue-i18n.esm-bundler.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="copytmpfiles" tabindex="-1"><a class="header-anchor" href="#copytmpfiles" aria-hidden="true">#</a> copyTmpFiles</h3><p>批量写临时文件。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code> api<span class="token punctuation">.</span><span class="token function">copyTmpFiles</span><span class="token punctuation">(</span><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="copytmpfiles" tabindex="-1"><a class="header-anchor" href="#copytmpfiles" aria-hidden="true">#</a> copyTmpFiles</h3><p>批量写临时文件。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">copyTmpFiles</span><span class="token punctuation">(</span><span class="token punctuation">{</span> namespace<span class="token punctuation">,</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> - <span class="token literal-property property">ignore</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'.tpl'</span><span class="token punctuation">]</span> + <span class="token literal-property property">ignore</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'.tpl'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>参数:</p><ul><li>namespace:复制到临时文件夹下的目标目录</li><li>path:需要复制的文件目录</li><li>ignore:需要排除的文件</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用,通常放在 api.onGenerateFiles() 里,这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理,如果内容一致,不会做写的操作,以减少触发 <code>webpack</code> 的重新编译</p></div><h3 id="getport" tabindex="-1"><a class="header-anchor" href="#getport" aria-hidden="true">#</a> getPort</h3><p>获取端口号,dev 时有效。</p><h3 id="gethostname" tabindex="-1"><a class="header-anchor" href="#gethostname" aria-hidden="true">#</a> getHostname</h3><p>获取 hostname,dev 时有效。</p><h3 id="getserver" tabindex="-1"><a class="header-anchor" href="#getserver" aria-hidden="true">#</a> getServer</h3><p>获取 devServer,dev 时有效。</p><h3 id="getroutes" tabindex="-1"><a class="header-anchor" href="#getroutes" aria-hidden="true">#</a> getRoutes</h3><p>获取 <code>api.modifyRoutes</code> 修改过后的路由信息。</p><h3 id="getroutesjson" tabindex="-1"><a class="header-anchor" href="#getroutesjson" aria-hidden="true">#</a> getRoutesJSON</h3><p>获取格式化后的路由信息</p><h3 id="modifyroutes" tabindex="-1"><a class="header-anchor" href="#modifyroutes" aria-hidden="true">#</a> modifyRoutes</h3><p>修改路由。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 把BaseLayout插入到路由配置中,作为根路由</span> -api<span class="token punctuation">.</span><span class="token function">modifyRoutes</span><span class="token punctuation">(</span><span class="token parameter">routes</span> <span class="token operator">=></span> <span class="token punctuation">[</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>参数:</p><ul><li>namespace:复制到临时文件夹下的目标目录</li><li>path:需要复制的文件目录</li><li>ignore:需要排除的文件</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用,通常放在 api.onGenerateFiles() 里,这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理,如果内容一致,不会做写的操作,以减少触发 <code>webpack</code> 的重新编译</p></div><h3 id="getport" tabindex="-1"><a class="header-anchor" href="#getport" aria-hidden="true">#</a> getPort</h3><p>获取端口号,dev 时有效。</p><h3 id="gethostname" tabindex="-1"><a class="header-anchor" href="#gethostname" aria-hidden="true">#</a> getHostname</h3><p>获取 hostname,dev 时有效。</p><h3 id="getserver" tabindex="-1"><a class="header-anchor" href="#getserver" aria-hidden="true">#</a> getServer</h3><p>获取 devServer,dev 时有效。</p><h3 id="getroutes" tabindex="-1"><a class="header-anchor" href="#getroutes" aria-hidden="true">#</a> getRoutes</h3><p>获取 <code>api.modifyRoutes</code> 修改过后的路由信息。</p><h3 id="getroutesjson" tabindex="-1"><a class="header-anchor" href="#getroutesjson" aria-hidden="true">#</a> getRoutesJSON</h3><p>获取格式化后的路由信息</p><h3 id="modifyroutes" tabindex="-1"><a class="header-anchor" href="#modifyroutes" aria-hidden="true">#</a> modifyRoutes</h3><p>修改路由。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 把BaseLayout插入到路由配置中,作为根路由</span> +api<span class="token punctuation">.</span><span class="token function">modifyRoutes</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">routes</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> - <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">winPath</span><span class="token punctuation">(</span> - <span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">,</span> absFilePath<span class="token punctuation">)</span> - <span class="token punctuation">)</span><span class="token punctuation">,</span> - <span class="token literal-property property">children</span><span class="token operator">:</span> routes - <span class="token punctuation">}</span> + <span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">winPath</span><span class="token punctuation">(</span><span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">,</span> absFilePath<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">children</span><span class="token operator">:</span> routes<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="modifybundleconfigopts" tabindex="-1"><a class="header-anchor" href="#modifybundleconfigopts" aria-hidden="true">#</a> modifyBundleConfigOpts</h3><p>修改获取 bundleConfig 的函数参数。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfigOpts</span><span class="token punctuation">(</span><span class="token parameter">memo</span> <span class="token operator">=></span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybundleconfigopts" tabindex="-1"><a class="header-anchor" href="#modifybundleconfigopts" aria-hidden="true">#</a> modifyBundleConfigOpts</h3><p>修改获取 bundleConfig 的函数参数。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfigOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> memo<span class="token punctuation">.</span>miniCSSExtractPluginPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - memo<span class="token punctuation">.</span>miniCSSExtractPluginLoaderPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span> - <span class="token string">'mini-css-extract-plugin/dist/loader'</span><span class="token punctuation">,</span> - <span class="token punctuation">)</span><span class="token punctuation">;</span> + memo<span class="token punctuation">.</span>miniCSSExtractPluginLoaderPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin/dist/loader'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> memo<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="modifybundleconfig" tabindex="-1"><a class="header-anchor" href="#modifybundleconfig" aria-hidden="true">#</a> modifyBundleConfig</h3><p>修改 bundle 配置。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">bundleConfig</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybundleconfig" tabindex="-1"><a class="header-anchor" href="#modifybundleconfig" aria-hidden="true">#</a> modifyBundleConfig</h3><p>修改 bundle 配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">bundleConfig</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// do something</span> <span class="token keyword">return</span> bundleConfig<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="modifybabelopts" tabindex="-1"><a class="header-anchor" href="#modifybabelopts" aria-hidden="true">#</a> modifyBabelOpts</h3><p>修改 babel 配置项。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">babelOpts</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybabelopts" tabindex="-1"><a class="header-anchor" href="#modifybabelopts" aria-hidden="true">#</a> modifyBabelOpts</h3><p>修改 babel 配置项。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">babelOpts</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>babelPluginImport<span class="token punctuation">)</span> <span class="token punctuation">{</span> api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>babelPluginImport<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> babelOpts<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> config<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> @@ -195,40 +196,33 @@ api<span class="token punctuation">.</span><span class="token function">modifyRo <span class="token punctuation">}</span> <span class="token keyword">return</span> babelOpts<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="modifybabelpresetopts" tabindex="-1"><a class="header-anchor" href="#modifybabelpresetopts" aria-hidden="true">#</a> modifyBabelPresetOpts</h3><p>修改 babel 插件的配置。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelPresetOpts</span><span class="token punctuation">(</span><span class="token parameter">opts</span> <span class="token operator">=></span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybabelpresetopts" tabindex="-1"><a class="header-anchor" href="#modifybabelpresetopts" aria-hidden="true">#</a> modifyBabelPresetOpts</h3><p>修改 babel 插件的配置。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelPresetOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">opts</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> - <span class="token operator">...</span>opts<span class="token punctuation">,</span> - <span class="token keyword">import</span><span class="token operator">:</span> <span class="token punctuation">(</span>opts<span class="token punctuation">.</span>import <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span> - <span class="token punctuation">{</span> <span class="token literal-property property">libraryName</span><span class="token operator">:</span> <span class="token string">'ant-design-vue'</span><span class="token punctuation">,</span> <span class="token literal-property property">libraryDirectory</span><span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token operator">...</span>opts<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="modifypaths" tabindex="-1"><a class="header-anchor" href="#modifypaths" aria-hidden="true">#</a> modifyPaths</h3><p>修改 paths 对象。</p><h3 id="modifydefaultconfig" tabindex="-1"><a class="header-anchor" href="#modifydefaultconfig" aria-hidden="true">#</a> modifyDefaultConfig</h3><p>修改默认配置。 例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyDefaultConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token punctuation">{</span> - <span class="token operator">...</span>memo<span class="token punctuation">,</span> - <span class="token operator">...</span>defaultOptions<span class="token punctuation">,</span> - <span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifypaths" tabindex="-1"><a class="header-anchor" href="#modifypaths" aria-hidden="true">#</a> modifyPaths</h3><p>修改 paths 对象。</p><h3 id="modifydefaultconfig" tabindex="-1"><a class="header-anchor" href="#modifydefaultconfig" aria-hidden="true">#</a> modifyDefaultConfig</h3><p>修改默认配置。 例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyDefaultConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>memo<span class="token punctuation">,</span> + <span class="token operator">...</span>defaultOptions<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="modifyconfig" tabindex="-1"><a class="header-anchor" href="#modifyconfig" aria-hidden="true">#</a> modifyConfig</h3><p>修改最终配置。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> <span class="token punctuation">{</span> - <span class="token operator">...</span>memo<span class="token punctuation">,</span> - <span class="token operator">...</span>defaultOptions<span class="token punctuation">,</span> - <span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifyconfig" tabindex="-1"><a class="header-anchor" href="#modifyconfig" aria-hidden="true">#</a> modifyConfig</h3><p>修改最终配置。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + <span class="token operator">...</span>memo<span class="token punctuation">,</span> + <span class="token operator">...</span>defaultOptions<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="modifypublicpathstr" tabindex="-1"><a class="header-anchor" href="#modifypublicpathstr" aria-hidden="true">#</a> modifyPublicPathStr</h3><p>修改 publicPath 字符串。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyPublicPathStr</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token keyword">return</span> api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>publicPath <span class="token operator">||</span> <span class="token string">'/'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifypublicpathstr" tabindex="-1"><a class="header-anchor" href="#modifypublicpathstr" aria-hidden="true">#</a> modifyPublicPathStr</h3><p>修改 publicPath 字符串。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyPublicPathStr</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">return</span> api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>publicPath <span class="token operator">||</span> <span class="token string">'/'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="onpluginready" tabindex="-1"><a class="header-anchor" href="#onpluginready" aria-hidden="true">#</a> onPluginReady</h3><p>在插件初始化完成触发。在 onStart 之前,此时还没有 config 和 paths,他们尚未解析好。</p><h3 id="onstart" tabindex="-1"><a class="header-anchor" href="#onstart" aria-hidden="true">#</a> onStart</h3><p>在命令注册函数执行前触发。可以使用 config 和 paths。</p><h3 id="onexit" tabindex="-1"><a class="header-anchor" href="#onexit" aria-hidden="true">#</a> onExit</h3><p>dev 退出时触发。</p><h3 id="ongeneratefiles" tabindex="-1"><a class="header-anchor" href="#ongeneratefiles" aria-hidden="true">#</a> onGenerateFiles</h3><p>生成临时文件,触发时机在 webpack 编译之前。</p><h3 id="restartserver" tabindex="-1"><a class="header-anchor" href="#restartserver" aria-hidden="true">#</a> restartServer</h3><p>重启 devServer,dev 时有效。</p><h3 id="writetmpfile" tabindex="-1"><a class="header-anchor" href="#writetmpfile" aria-hidden="true">#</a> writeTmpFile</h3><p>写临时文件。</p><p>例如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onpluginready" tabindex="-1"><a class="header-anchor" href="#onpluginready" aria-hidden="true">#</a> onPluginReady</h3><p>在插件初始化完成触发。在 onStart 之前,此时还没有 config 和 paths,他们尚未解析好。</p><h3 id="onstart" tabindex="-1"><a class="header-anchor" href="#onstart" aria-hidden="true">#</a> onStart</h3><p>在命令注册函数执行前触发。可以使用 config 和 paths。</p><h3 id="onexit" tabindex="-1"><a class="header-anchor" href="#onexit" aria-hidden="true">#</a> onExit</h3><p>dev 退出时触发。</p><h3 id="ongeneratefiles" tabindex="-1"><a class="header-anchor" href="#ongeneratefiles" aria-hidden="true">#</a> onGenerateFiles</h3><p>生成临时文件,触发时机在 webpack 编译之前。</p><h3 id="restartserver" tabindex="-1"><a class="header-anchor" href="#restartserver" aria-hidden="true">#</a> restartServer</h3><p>重启 devServer,dev 时有效。</p><h3 id="writetmpfile" tabindex="-1"><a class="header-anchor" href="#writetmpfile" aria-hidden="true">#</a> writeTmpFile</h3><p>写临时文件。</p><p>例如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> absoluteFilePath<span class="token punctuation">,</span> - <span class="token literal-property property">content</span><span class="token operator">:</span> Mustache<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span> - <span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime/core.tpl'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> - <span class="token punctuation">{</span> - <span class="token constant">REPLACE_ROLES</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span> - <span class="token punctuation">}</span> - <span class="token punctuation">)</span> + <span class="token literal-property property">content</span><span class="token operator">:</span> Mustache<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime/core.tpl'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token constant">REPLACE_ROLES</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>参数:</p><ul><li>path:相对于临时文件夹的路径</li><li>content:文件内容</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用,通常放在 api.onGenerateFiles() 里,这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理,如果内容一致,不会做写的操作,以减少触发 webpack 的重新编译</p></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/dev/api.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/dev/" class="nav-link router-link-active" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>参数:</p><ul><li>path:相对于临时文件夹的路径</li><li>content:文件内容</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用,通常放在 api.onGenerateFiles() 里,这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理,如果内容一致,不会做写的操作,以减少触发 webpack 的重新编译</p></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/dev/api.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/dev/" class="router-link-active" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/dev/index.html b/reference/plugin/dev/index.html index ec17d066..0eebf358 100644 --- a/reference/plugin/dev/index.html +++ b/reference/plugin/dev/index.html @@ -3,29 +3,47 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>插件介绍 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/index.html.d2f518d0.js"><link rel="modulepreload" href="/assets/index.html.b99c3eab.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item active">插件开发</p><ul class=""><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/#开始" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="开始"><!--[--><!--]--> 开始 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/#创建插件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="创建插件"><!--[--><!--]--> 创建插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/dev/#发布到-npm" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="发布到 npm"><!--[--><!--]--> 发布到 npm <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="插件介绍" tabindex="-1"><a class="header-anchor" href="#插件介绍" aria-hidden="true">#</a> 插件介绍</h1><h2 id="开始" tabindex="-1"><a class="header-anchor" href="#开始" aria-hidden="true">#</a> 开始</h2><p>一个插件是一个 <code>npm</code> 包,它能够为 Fes.js 创建的项目添加额外的功能,这些功能包括:</p><ul><li>项目的 webpack 配置。</li><li>修改项目的 babel 配置。</li><li>添加新的 fes 命令 - 例如 <code>@fes/plugin-jest</code> 添加了 <code>fes test</code> 命令,允许开发者运行单元测试。</li><li>集成 Vue 的插件。</li><li>修改路由配置</li><li>提供运行时 API</li><li>...</li></ul><p>插件的入口是一个函数,函数会以 API 对象作为第一个参数:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">api</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/dev/" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/dev/#开始" class="router-link-active router-link-exact-active sidebar-item" aria-label="开始"><!--[--><!--]--> 开始 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/#创建插件" class="router-link-active router-link-exact-active sidebar-item" aria-label="创建插件"><!--[--><!--]--> 创建插件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/dev/#发布到-npm" class="router-link-active router-link-exact-active sidebar-item" aria-label="发布到 npm"><!--[--><!--]--> 发布到 npm <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="插件介绍" tabindex="-1"><a class="header-anchor" href="#插件介绍" aria-hidden="true">#</a> 插件介绍</h1><h2 id="开始" tabindex="-1"><a class="header-anchor" href="#开始" aria-hidden="true">#</a> 开始</h2><p>一个插件是一个 <code>npm</code> 包,它能够为 Fes.js 创建的项目添加额外的功能,这些功能包括:</p><ul><li>项目的 webpack 配置。</li><li>修改项目的 babel 配置。</li><li>添加新的 fes 命令 - 例如 <code>@fes/plugin-jest</code> 添加了 <code>fes test</code> 命令,允许开发者运行单元测试。</li><li>集成 Vue 的插件。</li><li>修改路由配置</li><li>提供运行时 API</li><li>...</li></ul><p>插件的入口是一个函数,函数会以 API 对象作为第一个参数:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">api</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'esbuild'</span><span class="token punctuation">,</span> <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">schema</span><span class="token punctuation">(</span><span class="token parameter">joi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> joi<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> + <span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">enableBy</span><span class="token operator">:</span> api<span class="token punctuation">.</span>EnableBy<span class="token punctuation">.</span>config<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>API 对象是构建流程管理 Service 类的实例,api 提供一些有用的方法帮助你开发插件。</p><p><code>api.describe</code>用来描述插件:</p><ul><li><strong>key</strong>, 插件的 <code>key</code>,可以理解为插件的名称,在 <code>.fes.js</code> 中用 <code>key</code> 配置此插件。</li><li><strong>config</strong>,插件的配置信息: <ul><li>schema,定义配置的类型</li><li>default,默认配置</li></ul></li><li><strong>enableBy</strong>, 是否开启插件,可配置某些场景下禁用插件。</li></ul><h2 id="创建插件" tabindex="-1"><a class="header-anchor" href="#创建插件" aria-hidden="true">#</a> 创建插件</h2><h5 id="第一步-安装create-fes-app" tabindex="-1"><a class="header-anchor" href="#第一步-安装create-fes-app" aria-hidden="true">#</a> 第一步:安装<code>create-fes-app</code></h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @fesjs/create-fes-app -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h5 id="第二步-创建插件项目" tabindex="-1"><a class="header-anchor" href="#第二步-创建插件项目" aria-hidden="true">#</a> 第二步:创建插件项目</h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>create-fes-app pluginName -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>在询问<code>Pick an template</code>时选择<code>Plugin</code>!</p><h5 id="第三步-进入插件目录-安装依赖" tabindex="-1"><a class="header-anchor" href="#第三步-进入插件目录-安装依赖" aria-hidden="true">#</a> 第三步:进入插件目录 & 安装依赖</h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> pluginName <span class="token operator">&</span> <span class="token function">yarn</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h5 id="第四步-启动编译" tabindex="-1"><a class="header-anchor" href="#第四步-启动编译" aria-hidden="true">#</a> 第四步:启动编译</h5><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">yarn</span> dev -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h5 id="第五步-使用插件api完成你的插件-可以参考其他插件理解api用法和场景" tabindex="-1"><a class="header-anchor" href="#第五步-使用插件api完成你的插件-可以参考其他插件理解api用法和场景" aria-hidden="true">#</a> 第五步:使用插件API完成你的插件!(可以参考其他插件理解api用法和场景)</h5><h2 id="发布到-npm" tabindex="-1"><a class="header-anchor" href="#发布到-npm" aria-hidden="true">#</a> 发布到 npm</h2><p>以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被 Fes.js 自动注册为插件或插件集。</p><p>所以编写好的插件想发布到 npm 供其他人使用,包名必须是 <code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/dev/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>API 对象是构建流程管理 Service 类的实例,api 提供一些有用的方法帮助你开发插件。</p><p><code>api.describe</code>用来描述插件:</p><ul><li><strong>key</strong>, 插件的 <code>key</code>,可以理解为插件的名称,在 <code>.fes.js</code> 中用 <code>key</code> 配置此插件。</li><li><strong>config</strong>,插件的配置信息: <ul><li>schema,定义配置的类型</li><li>default,默认配置</li></ul></li><li><strong>enableBy</strong>, 是否开启插件,可配置某些场景下禁用插件。</li></ul><h2 id="创建插件" tabindex="-1"><a class="header-anchor" href="#创建插件" aria-hidden="true">#</a> 创建插件</h2><h5 id="第一步-安装create-fes-app" tabindex="-1"><a class="header-anchor" href="#第一步-安装create-fes-app" aria-hidden="true">#</a> 第一步:安装<code>create-fes-app</code></h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @fesjs/create-fes-app +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第二步-创建插件项目" tabindex="-1"><a class="header-anchor" href="#第二步-创建插件项目" aria-hidden="true">#</a> 第二步:创建插件项目</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>create-fes-app pluginName +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>在询问<code>Pick an template</code>时选择<code>Plugin</code>!</p><h5 id="第三步-进入插件目录-安装依赖" tabindex="-1"><a class="header-anchor" href="#第三步-进入插件目录-安装依赖" aria-hidden="true">#</a> 第三步:进入插件目录 & 安装依赖</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> pluginName <span class="token operator">&</span> <span class="token function">pnpm</span> i +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第四步-启动编译" tabindex="-1"><a class="header-anchor" href="#第四步-启动编译" aria-hidden="true">#</a> 第四步:启动编译</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> dev +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" tabindex="-1"><a class="header-anchor" href="#第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" aria-hidden="true">#</a> 第五步:使用插件 API 完成你的插件!(可以参考其他插件理解 api 用法和场景)</h5><h2 id="发布到-npm" tabindex="-1"><a class="header-anchor" href="#发布到-npm" aria-hidden="true">#</a> 发布到 npm</h2><p>以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被 Fes.js 自动注册为插件或插件集。</p><p>所以编写好的插件想发布到 npm 供其他人使用,包名必须是 <code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/dev/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/reference/plugin/dev/api.html" class="" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/index.html b/reference/plugin/index.html index 99355303..921c6f26 100644 --- a/reference/plugin/index.html +++ b/reference/plugin/index.html @@ -3,13 +3,31 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>介绍 | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/index.html.2877eae5.js"><link rel="modulepreload" href="/assets/index.html.4b24c667.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a aria-current="page" href="/fes.js/reference/plugin/" class="router-link-active router-link-exact-active nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a aria-current="page" href="/fes.js/reference/plugin/" class="router-link-active router-link-exact-active nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a aria-current="page" href="/fes.js/reference/plugin/" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-heading sidebar-item active" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><ul class=""><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/#插件列表" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="插件列表"><!--[--><!--]--> 插件列表 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/#架构" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="架构"><!--[--><!--]--> 架构 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h1><h2 id="插件列表" tabindex="-1"><a class="header-anchor" href="#插件列表" aria-hidden="true">#</a> 插件列表</h2><table><thead><tr><th>插件</th><th>介绍</th></tr></thead><tbody><tr><td><a href="/fes.js/reference/plugin/plugins/access.html" class="">@fesjs/plugin-access</a></td><td>提供对页面资源的权限控制能力</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/enums.html" class="">@fesjs/plugin-enums</a></td><td>提供统一的枚举存取及丰富的函数来处理枚举</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/icon.html" class="">@fesjs/plugin-icon</a></td><td>svg 文件自动注册为组件</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/jest.html" class="">@fesjs/plugin-jest</a></td><td>基于 <code>Jest</code>,提供单元测试、覆盖测试能力</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/layout.html" class=""> @fesjs/plugin-layout</a></td><td>简单的配置即可拥有布局,包括导航以及侧边栏</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/locale.html" class="">@fesjs/plugin-locale</a></td><td>基于 <code>Vue I18n</code>,提供国际化能力</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/model.html" class="">@fesjs/plugin-model</a></td><td>简易的数据管理方案</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/request.html" class="">@fesjs/plugin-request</a></td><td>基于 <code>Axios</code> 封装的 request,内置防止重复请求、请求节流、错误处理等功能</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/vuex.html" class="">@fesjs/plugin-vuex</a></td><td>基于 <code>Vuex</code>, 提供状态管理能力</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="">@fesjs/plugin-qiankun</a></td><td>基于 <code>qiankun</code>,提供微服务能力</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/sass.html" class="">@fesjs/plugin-sass</a></td><td>样式支持sass</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/editor.html" class="">@fesjs/plugin-monaco-editor</a></td><td>提供代码编辑器能力, 基于<code>monaco-editor</code>(VS Code使用的代码编辑器)</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/windicss.html" class="">@fesjs/plugin-windicss</a></td><td>基于 <code>windicss</code>,提供原子化 CSS 能力</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/pinia.html" class="">@fesjs/plugin-pinia</a></td><td>基于 <code>pinia</code>,提供状态管理</td></tr><tr><td><a href="/fes.js/reference/plugin/plugins/watermark.html" class="">@fesjs/plugin-watermark</a></td><td>水印</td></tr></tbody></table><h2 id="架构" tabindex="-1"><a class="header-anchor" href="#架构" aria-hidden="true">#</a> 架构</h2><img src="/fes.js/framework.png" alt="架构"><p>Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a aria-current="page" href="/reference/plugin/" class="router-link-active router-link-exact-active router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a aria-current="page" href="/reference/plugin/" class="router-link-active router-link-exact-active router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a aria-current="page" href="/reference/plugin/" class="router-link-active router-link-exact-active router-link-active sidebar-item sidebar-heading active" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/#插件列表" class="router-link-active router-link-exact-active sidebar-item" aria-label="插件列表"><!--[--><!--]--> 插件列表 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/#架构" class="router-link-active router-link-exact-active sidebar-item" aria-label="架构"><!--[--><!--]--> 架构 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h1><h2 id="插件列表" tabindex="-1"><a class="header-anchor" href="#插件列表" aria-hidden="true">#</a> 插件列表</h2><table><thead><tr><th>插件</th><th>介绍</th></tr></thead><tbody><tr><td><a href="/reference/plugin/plugins/access.html" class="">@fesjs/plugin-access</a></td><td>提供对页面资源的权限控制能力</td></tr><tr><td><a href="/reference/plugin/plugins/enums.html" class="">@fesjs/plugin-enums</a></td><td>提供统一的枚举存取及丰富的函数来处理枚举</td></tr><tr><td><a href="/reference/plugin/plugins/icon.html" class="">@fesjs/plugin-icon</a></td><td>svg 文件自动注册为组件</td></tr><tr><td><a href="/reference/plugin/plugins/jest.html" class="">@fesjs/plugin-jest</a></td><td>基于 <code>Jest</code>,提供单元测试、覆盖测试能力</td></tr><tr><td><a href="/reference/plugin/plugins/layout.html" class="">@fesjs/plugin-layout</a></td><td>简单的配置即可拥有布局,包括导航以及侧边栏</td></tr><tr><td><a href="/reference/plugin/plugins/locale.html" class="">@fesjs/plugin-locale</a></td><td>基于 <code>Vue I18n</code>,提供国际化能力</td></tr><tr><td><a href="/reference/plugin/plugins/model.html" class="">@fesjs/plugin-model</a></td><td>简易的数据管理方案</td></tr><tr><td><a href="/reference/plugin/plugins/request.html" class="">@fesjs/plugin-request</a></td><td>基于 <code>Axios</code> 封装的 request,内置防止重复请求、请求节流、错误处理等功能</td></tr><tr><td><a href="/reference/plugin/plugins/vuex.html" class="">@fesjs/plugin-vuex</a></td><td>基于 <code>Vuex</code>, 提供状态管理能力</td></tr><tr><td><a href="/reference/plugin/plugins/qiankun.html" class="">@fesjs/plugin-qiankun</a></td><td>基于 <code>qiankun</code>,提供微服务能力</td></tr><tr><td><a href="/reference/plugin/plugins/sass.html" class="">@fesjs/plugin-sass</a></td><td>样式支持sass</td></tr><tr><td><a href="/reference/plugin/plugins/editor.html" class="">@fesjs/plugin-monaco-editor</a></td><td>提供代码编辑器能力, 基于<code>monaco-editor</code>(VS Code使用的代码编辑器)</td></tr><tr><td><a href="/reference/plugin/plugins/windicss.html" class="">@fesjs/plugin-windicss</a></td><td>基于 <code>windicss</code>,提供原子化 CSS 能力</td></tr><tr><td><a href="/reference/plugin/plugins/pinia.html" class="">@fesjs/plugin-pinia</a></td><td>基于 <code>pinia</code>,提供状态管理</td></tr><tr><td><a href="/reference/plugin/plugins/watermark.html" class="">@fesjs/plugin-watermark</a></td><td>水印</td></tr><tr><td><a href="/reference/plugin/plugins/swc.html" class="">@fesjs/plugin-swc</a></td><td>swc</td></tr></tbody></table><h2 id="架构" tabindex="-1"><a class="header-anchor" href="#架构" aria-hidden="true">#</a> 架构</h2><!--  --><img src="/framework.png" alt="架构"><p>Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/README.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/access.html b/reference/plugin/plugins/access.html index 6f9661ec..63267412 100644 --- a/reference/plugin/plugins/access.html +++ b/reference/plugin/plugins/access.html @@ -3,47 +3,65 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-access | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/access.html.1a82486a.js"><link rel="modulepreload" href="/assets/access.html.ccef700f.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#资源" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="资源"><!--[--><!--]--> 资源 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#匹配规则" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="匹配规则"><!--[--><!--]--> 匹配规则 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#角色" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="角色"><!--[--><!--]--> 角色 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#编译时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#roles" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="roles"><!--[--><!--]--> roles <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#运行时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#unaccesshandler" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="unAccessHandler"><!--[--><!--]--> unAccessHandler <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#nofoundhandler" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="noFoundHandler"><!--[--><!--]--> noFoundHandler <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#access" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="access"><!--[--><!--]--> access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#useaccess" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="useAccess"><!--[--><!--]--> useAccess <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#v-access" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="v-access"><!--[--><!--]--> v-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/access.html#组件-access" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="组件 Access"><!--[--><!--]--> 组件 Access <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-access" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-access" aria-hidden="true">#</a> @fesjs/plugin-access</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>对于前端应用来说,权限就是页面、页面元素是否可见。</p><h3 id="资源" tabindex="-1"><a class="header-anchor" href="#资源" aria-hidden="true">#</a> 资源</h3><p>Fes.js 把页面、页面元素统一叫做资源,用资源 ID 来识别区分他们:</p><ul><li><p>页面的资源 ID 默认是页面的路由 <code>path</code> 。比如页面 <code>pages/a.vue</code> 的路由 <code>path</code> 是 <code>/a</code>。当页面访问 <code>/a</code> 时会渲染当前页面,<code>/a</code> 也就是页面的 <code>accessId</code>。</p></li><li><p>页面元素的资源 ID 没有默认值,需要自定义。</p></li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>access</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess1 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>access</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-access</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess2 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/access.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/access.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/access.html#资源" class="router-link-active router-link-exact-active sidebar-item" aria-label="资源"><!--[--><!--]--> 资源 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#匹配规则" class="router-link-active router-link-exact-active sidebar-item" aria-label="匹配规则"><!--[--><!--]--> 匹配规则 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#角色" class="router-link-active router-link-exact-active sidebar-item" aria-label="角色"><!--[--><!--]--> 角色 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#编译时配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/access.html#roles" class="router-link-active router-link-exact-active sidebar-item" aria-label="roles"><!--[--><!--]--> roles <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#运行时配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/access.html#unaccesshandler" class="router-link-active router-link-exact-active sidebar-item" aria-label="unAccessHandler"><!--[--><!--]--> unAccessHandler <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#nofoundhandler" class="router-link-active router-link-exact-active sidebar-item" aria-label="noFoundHandler"><!--[--><!--]--> noFoundHandler <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#ignoreaccess" class="router-link-active router-link-exact-active sidebar-item" aria-label="ignoreAccess"><!--[--><!--]--> ignoreAccess <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/access.html#access" class="router-link-active router-link-exact-active sidebar-item" aria-label="access"><!--[--><!--]--> access <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#useaccess" class="router-link-active router-link-exact-active sidebar-item" aria-label="useAccess"><!--[--><!--]--> useAccess <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#v-access" class="router-link-active router-link-exact-active sidebar-item" aria-label="v-access"><!--[--><!--]--> v-access <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/access.html#组件-access" class="router-link-active router-link-exact-active sidebar-item" aria-label="组件 Access"><!--[--><!--]--> 组件 Access <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-access" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-access" aria-hidden="true">#</a> @fesjs/plugin-access</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>对于前端应用来说,权限就是页面、页面元素是否可见。</p><h3 id="资源" tabindex="-1"><a class="header-anchor" href="#资源" aria-hidden="true">#</a> 资源</h3><p>Fes.js 把页面、页面元素统一叫做资源,用资源 ID 来识别区分他们:</p><ul><li>页面的资源 ID 默认是页面的路由 <code>path</code> 。比如页面 <code>pages/a.vue</code> 的路由 <code>path</code> 是 <code>/a</code>。当页面访问 <code>/a</code> 时会渲染当前页面,<code>/a</code> 也就是页面的 <code>accessId</code>。</li><li>页面元素的资源 ID 没有默认值,需要自定义。</li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>access</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>access</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-access</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>accessOnepicess2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> - <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="匹配规则" tabindex="-1"><a class="header-anchor" href="#匹配规则" aria-hidden="true">#</a> 匹配规则</h3><h4 id="全等匹配" tabindex="-1"><a class="header-anchor" href="#全等匹配" aria-hidden="true">#</a> 全等匹配</h4><p>资源的匹配规则默认是使用全等匹配,比如页面 <code>pages/a.vue</code> 对应路由 <code>path</code> 是 <code>/a</code>,则 <code>/a</code> 就是页面的资源ID。如果我们设置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>access<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/a'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>由于权限列表中包含<code>/a</code>,则表示拥有此页面权限。</p><h4 id="模糊匹配" tabindex="-1"><a class="header-anchor" href="#模糊匹配" aria-hidden="true">#</a> 模糊匹配</h4><p>页面<code>@id.vue</code>会映射为动态路由<code>/:id</code>,想匹配此页面有两种办法:</p><ul><li><strong>access.setAccess(['/:id'])</strong></li><li><strong>access.setAccess(['/*'])</strong></li></ul><p>第二种是模糊匹配,<code>*</code>表示任意路径。比如角色<code>admin</code>需要全部权限,则可以:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">access</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">roles</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">admin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"*"</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="角色" tabindex="-1"><a class="header-anchor" href="#角色" aria-hidden="true">#</a> 角色</h3><p>通常我们会用角色来控制权限,相应的Fes.js 用角色定义一组资源。当访问 Fes.js 应用时,使用插件提供的 API 设置用户的角色,角色对应的资源才可见,非角色对应的资源不可见。</p><p>当然有时候业务比较复杂,角色对应的权限是动态的。不要怕!插件提供粒度更细的 API 来设置当前用户能访问的资源。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> - <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-access"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> + <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="匹配规则" tabindex="-1"><a class="header-anchor" href="#匹配规则" aria-hidden="true">#</a> 匹配规则</h3><h4 id="全等匹配" tabindex="-1"><a class="header-anchor" href="#全等匹配" aria-hidden="true">#</a> 全等匹配</h4><p>资源的匹配规则默认是使用全等匹配,比如页面 <code>pages/a.vue</code> 对应路由 <code>path</code> 是 <code>/a</code>,则 <code>/a</code> 就是页面的资源 ID。如果我们设置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>access<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/a'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>由于权限列表中包含<code>/a</code>,则表示拥有此页面权限。</p><h4 id="模糊匹配" tabindex="-1"><a class="header-anchor" href="#模糊匹配" aria-hidden="true">#</a> 模糊匹配</h4><p>页面<code>@id.vue</code>会映射为动态路由<code>/:id</code>,想匹配此页面有两种办法:</p><ul><li><strong>access.setAccess(['/:id'])</strong></li><li><strong>access.setAccess(['/*'])</strong></li></ul><p>第二种是模糊匹配,<code>*</code>表示任意路径。比如角色<code>admin</code>需要全部权限,则可以:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">access</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">roles</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">admin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"/"</span><span class="token punctuation">,</span> <span class="token string">"/onepiece"</span><span class="token punctuation">,</span> <span class="token string">'/store'</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span> + <span class="token literal-property property">admin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'*'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="角色" tabindex="-1"><a class="header-anchor" href="#角色" aria-hidden="true">#</a> 角色</h3><p>通常我们会用角色来控制权限,相应的 Fes.js 用角色定义一组资源。当访问 Fes.js 应用时,使用插件提供的 API 设置用户的角色,角色对应的资源才可见,非角色对应的资源不可见。</p><p>当然有时候业务比较复杂,角色对应的权限是动态的。不要怕!插件提供粒度更细的 API 来设置当前用户能访问的资源。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-access"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="roles" tabindex="-1"><a class="header-anchor" href="#roles" aria-hidden="true">#</a> roles</h3><ul><li><p><strong>类型</strong>:对象</p></li><li><p><strong>默认值</strong>:<code>{}</code></p></li><li><p><strong>详情</strong>:</p><p>角色预定义列表。<code>key</code> 是角色 Id ,<code>value</code>是角色 Id 对应的资源列表。</p></li></ul><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><p>在 <code>app.js</code> 中配置</p><h3 id="unaccesshandler" tabindex="-1"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 <code>unAccessHandler</code> 函数。</p></li><li><p><strong>参数</strong></p><ul><li>router:createRouter 创建的路由实例</li><li>to: 准备进入的路由</li><li>from:离开的路由</li><li>next: <a 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">next函数<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li></ul></li></ul><p>比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">access</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">roles</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">admin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token string">'/onepiece'</span><span class="token punctuation">,</span> <span class="token string">'/store'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="roles" tabindex="-1"><a class="header-anchor" href="#roles" aria-hidden="true">#</a> roles</h3><ul><li><p><strong>类型</strong>:对象</p></li><li><p><strong>默认值</strong>:<code>{}</code></p></li><li><p><strong>详情</strong>:</p><p>角色预定义列表。<code>key</code> 是角色 Id ,<code>value</code>是角色 Id 对应的资源列表。</p></li></ul><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><p>在 <code>app.js</code> 中配置</p><h3 id="unaccesshandler" tabindex="-1"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 <code>unAccessHandler</code> 函数。</p></li><li><p><strong>参数</strong></p><ul><li>router:createRouter 创建的路由实例</li><li>to: 准备进入的路由</li><li>from:离开的路由</li><li>next: <a 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">next 函数<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></li></ul></li></ul><p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> to<span class="token punctuation">,</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/404'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> @@ -54,67 +72,68 @@ accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/403'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不存在,则会调用 <code>noFoundHandler</code> 函数。</p></li><li><p><strong>参数</strong></p><ul><li>router:createRouter 创建的路由实例</li><li>to: 准备进入的路由</li><li>from:离开的路由</li><li>next: <a 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">next函数<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li></ul></li></ul><p>比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不存在,则会调用 <code>noFoundHandler</code> 函数。</p></li><li><p><strong>参数</strong></p><ul><li>router:createRouter 创建的路由实例</li><li>to: 准备进入的路由</li><li>from:离开的路由</li><li>next: <a 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">next 函数<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></li></ul></li></ul><p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="access" tabindex="-1"><a class="header-anchor" href="#access" aria-hidden="true">#</a> access</h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h4 id="access-hasaccess" tabindex="-1"><a class="header-anchor" href="#access-hasaccess" aria-hidden="true">#</a> access.hasAccess</h4><ul><li><p><strong>类型</strong>:( accessId: string | number ) => Promise<boolean></p></li><li><p><strong>详情</strong>: 判断某个资源是否可见。</p></li><li><p><strong>参数</strong>:</p><ul><li>accessId,资源Id</li></ul></li><li><p><strong>返回值</strong>:是否有权限</p></li></ul><h4 id="access-isdataready" tabindex="-1"><a class="header-anchor" href="#access-isdataready" aria-hidden="true">#</a> access.isDataReady</h4><ul><li><p><strong>类型</strong>:() => boolean</p></li><li><p><strong>详情</strong>:可以用异步数据来设置权限,<code>isDataReady</code> 用来判断异步数据是否已经加载完毕。</p></li><li><p><strong>参数</strong>:null</p></li><li><p><strong>返回值</strong>:Boolean</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> -console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>access<span class="token punctuation">.</span><span class="token function">isDataReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="access-setrole" tabindex="-1"><a class="header-anchor" href="#access-setrole" aria-hidden="true">#</a> access.setRole</h4><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>:设置当前的角色。</p></li><li><p><strong>参数</strong>:</p><ul><li>roleId,角色Id,有两种类型: <ul><li>String,对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li><li>Promise,Promise resolve 的结果应对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li></ul></li></ul></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> -access<span class="token punctuation">.</span><span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="access-setaccess" tabindex="-1"><a class="header-anchor" href="#access-setaccess" aria-hidden="true">#</a> access.setAccess</h4><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>:设置当前的角色。</p></li><li><p><strong>参数</strong>:</p><ul><li>accessIds,资源Id数组,有两种类型: <ul><li>Array,数组项对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li><li>Promise,Promise resolve 的结果应该是<code>Array<accessId></code>。</li></ul></li></ul></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> -access<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/a'</span><span class="token punctuation">,</span> <span class="token string">'/b'</span><span class="token punctuation">,</span> <span class="token string">'/c'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="access-getaccess" tabindex="-1"><a class="header-anchor" href="#access-getaccess" aria-hidden="true">#</a> access.getAccess</h4><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>:返回当前可见的资源列表。</p></li><li><p><strong>参数</strong>:null</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="ignoreaccess" tabindex="-1"><a class="header-anchor" href="#ignoreaccess" aria-hidden="true">#</a> ignoreAccess</h3><ul><li><p><strong>类型</strong>:<code>Array<string></code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>配置需要忽略权限校验的页面。</p></li></ul><p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token literal-property property">ignoreAccess</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/login'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="access" tabindex="-1"><a class="header-anchor" href="#access" aria-hidden="true">#</a> access</h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="access-hasaccess" tabindex="-1"><a class="header-anchor" href="#access-hasaccess" aria-hidden="true">#</a> access.hasAccess</h4><ul><li><strong>类型</strong>:( accessId: string | number ) => Promise<boolean></li><li><strong>详情</strong>: 判断某个资源是否可见。</li><li><strong>参数</strong>: <ul><li>accessId,资源 Id</li></ul></li><li><strong>返回值</strong>:是否有权限</li></ul><h4 id="access-isdataready" tabindex="-1"><a class="header-anchor" href="#access-isdataready" aria-hidden="true">#</a> access.isDataReady</h4><ul><li><strong>类型</strong>:() => boolean</li><li><strong>详情</strong>:可以用异步数据来设置权限,<code>isDataReady</code> 用来判断异步数据是否已经加载完毕。</li><li><strong>参数</strong>:null</li><li><strong>返回值</strong>:Boolean</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>access<span class="token punctuation">.</span><span class="token function">isDataReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="access-setrole" tabindex="-1"><a class="header-anchor" href="#access-setrole" aria-hidden="true">#</a> access.setRole</h4><ul><li><strong>类型</strong>:函数</li><li><strong>详情</strong>:设置当前的角色。</li><li><strong>参数</strong>: <ul><li>roleId,角色 Id,有两种类型: <ul><li>String,对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li><li>Promise,Promise resolve 的结果应对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li></ul></li></ul></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +access<span class="token punctuation">.</span><span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="access-setaccess" tabindex="-1"><a class="header-anchor" href="#access-setaccess" aria-hidden="true">#</a> access.setAccess</h4><ul><li><strong>类型</strong>:函数</li><li><strong>详情</strong>:设置当前的角色。</li><li><strong>参数</strong>: <ul><li>accessIds,资源 Id 数组,有两种类型: <ul><li>Array,数组项对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li><li>Promise,Promise resolve 的结果应该是<code>Array<accessId></code>。</li></ul></li></ul></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +access<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/a'</span><span class="token punctuation">,</span> <span class="token string">'/b'</span><span class="token punctuation">,</span> <span class="token string">'/c'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="access-getaccess" tabindex="-1"><a class="header-anchor" href="#access-getaccess" aria-hidden="true">#</a> access.getAccess</h4><ul><li><strong>类型</strong>:函数</li><li><strong>详情</strong>:返回当前可见的资源列表。</li><li><strong>参数</strong>:null</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> access<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="useaccess" tabindex="-1"><a class="header-anchor" href="#useaccess" aria-hidden="true">#</a> useAccess</h3><ul><li><p><strong>类型</strong>:<a href="(https://v3.cn.vuejs.org/guide/composition-api-introduction.html)">composition</a> 函数</p></li><li><p><strong>详情</strong>:判断某个资源是否可见。</p></li><li><p><strong>参数</strong>:</p><ul><li>accessId,资源Id</li></ul></li><li><p><strong>返回值</strong>:<code>ref</code></p></li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="useaccess" tabindex="-1"><a class="header-anchor" href="#useaccess" aria-hidden="true">#</a> useAccess</h3><ul><li><strong>类型</strong>:<a href="(https://v3.cn.vuejs.org/guide/composition-api-introduction.html)">composition</a> 函数</li><li><strong>详情</strong>:判断某个资源是否可见。</li><li><strong>参数</strong>: <ul><li>accessId,资源 Id</li></ul></li><li><strong>返回值</strong>:<code>ref</code></li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessOnepicess<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>accessOnepicess<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">import</span> <span class="token punctuation">{</span> useAccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> accessOnepicess <span class="token operator">=</span> <span class="token function">useAccess</span><span class="token punctuation">(</span><span class="token string">'/onepiece1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> - accessOnepicess - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> + accessOnepicess<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="v-access" tabindex="-1"><a class="header-anchor" href="#v-access" aria-hidden="true">#</a> v-access</h3><p>在指令 <code>v-access</code> 中传入 <code>accessId</code>,则当 <code>accessId</code> 拥有权限时显示DOM,当没有权限时隐藏此DOM。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-access</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="v-access" tabindex="-1"><a class="header-anchor" href="#v-access" aria-hidden="true">#</a> v-access</h3><p>在指令 <code>v-access</code> 中传入 <code>accessId</code>,则当 <code>accessId</code> 拥有权限时显示 DOM,当没有权限时隐藏此 DOM。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-access</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>accessOnepicess<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> - <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> + <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="组件-access" tabindex="-1"><a class="header-anchor" href="#组件-access" aria-hidden="true">#</a> 组件 Access</h3><p>组件 <code>Access</code> 中传入 <code>accessId</code>,则当 <code>accessId</code> 拥有权限时渲染此组件,当没有权限时隐藏此组件。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="组件-access" tabindex="-1"><a class="header-anchor" href="#组件-access" aria-hidden="true">#</a> 组件 Access</h3><p>组件 <code>Access</code> 中传入 <code>accessId</code>,则当 <code>accessId</code> 拥有权限时渲染此组件,当没有权限时隐藏此组件。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>access</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>access</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> - <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> + <span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/access.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/access.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><!----><span class="next"><a href="/reference/plugin/plugins/enums.html" class="" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/editor.html b/reference/plugin/plugins/editor.html index 7f54955c..64fd1451 100644 --- a/reference/plugin/plugins/editor.html +++ b/reference/plugin/plugins/editor.html @@ -3,64 +3,76 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-monaco-editor | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/editor.html.0d361fe8.js"><link rel="modulepreload" href="/assets/editor.html.45b1bf75.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/editor.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/editor.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/editor.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/editor.html#编译时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/editor.html#filename" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="filename"><!--[--><!--]--> filename <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/editor.html#publicpath" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="publicPath"><!--[--><!--]--> publicPath <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/editor.html#languages" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="languages"><!--[--><!--]--> languages <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/editor.html#api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/editor.html#monaco" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="monaco"><!--[--><!--]--> monaco <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/editor.html#组件-monacoeditor" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="组件 MonacoEditor"><!--[--><!--]--> 组件 MonacoEditor <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-monaco-editor" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-monaco-editor" aria-hidden="true">#</a> @fesjs/plugin-monaco-editor</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>我们会遇到需要编辑代码的场景,比如编辑<code>json</code>、<code>javascript</code>、<code>python</code>等等,<a href="https://github.com/Microsoft/monaco-editor" target="_blank" rel="noopener noreferrer">Monaco Editor<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 是一个好用而且强大的的代码编辑器库,引入<code>Monaco Editor</code>有一定的成本,插件实现了胶水代码,提供轻松引入的能力。目前内置的 <code>Monaco Editor</code> 版本是 <code>1.9.1</code>。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/editor.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/editor.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/editor.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/editor.html#编译时配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/editor.html#filename" class="router-link-active router-link-exact-active sidebar-item" aria-label="filename"><!--[--><!--]--> filename <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/editor.html#publicpath" class="router-link-active router-link-exact-active sidebar-item" aria-label="publicPath"><!--[--><!--]--> publicPath <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/editor.html#languages" class="router-link-active router-link-exact-active sidebar-item" aria-label="languages"><!--[--><!--]--> languages <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/editor.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/editor.html#monaco" class="router-link-active router-link-exact-active sidebar-item" aria-label="monaco"><!--[--><!--]--> monaco <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/editor.html#组件-monacoeditor" class="router-link-active router-link-exact-active sidebar-item" aria-label="组件 MonacoEditor"><!--[--><!--]--> 组件 MonacoEditor <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-monaco-editor" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-monaco-editor" aria-hidden="true">#</a> @fesjs/plugin-monaco-editor</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>我们会遇到需要编辑代码的场景,比如编辑<code>json</code>、<code>javascript</code>、<code>python</code>等等,<a href="https://github.com/Microsoft/monaco-editor" target="_blank" rel="noopener noreferrer">Monaco Editor<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 是 一个好用而且强大的的代码编辑器库,引入<code>Monaco Editor</code>有一定的成本,插件实现了胶水代码,提供轻松引入的能力。目前内置的 <code>Monaco Editor</code> 版本是 <code>1.9.1</code>。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-monaco-editor"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-monaco-editor"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'typescript'</span><span class="token punctuation">,</span> <span class="token string">'html'</span><span class="token punctuation">,</span> <span class="token string">'json'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>我们通过 <code>monaco-editor-webpack-plugin</code> 集成 <code>Monaco Editor</code> 的 <code>ESM</code>版本,所以编辑时其实就是 <code>monaco-editor-webpack-plugin</code> 的配置,具体配置项参考<a href="https://github.com/Microsoft/monaco-editor-webpack-plugin" target="_blank" rel="noopener noreferrer">文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。</p><h3 id="filename" tabindex="-1"><a class="header-anchor" href="#filename" aria-hidden="true">#</a> filename</h3><ul><li><strong>类型</strong>:自定义 worker 脚本名称</li><li><strong>默认值</strong>:<code>'[name].worker.js'</code></li></ul><h3 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h3><ul><li><strong>类型</strong>:自定义 worker 脚本的路径</li><li><strong>默认值</strong>:<code>''</code></li></ul><h3 id="languages" tabindex="-1"><a class="header-anchor" href="#languages" aria-hidden="true">#</a> languages</h3><ul><li><p><strong>类型</strong>:需要支持的语言类型</p></li><li><p><strong>默认值</strong>:<code>['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']</code></p></li><li><p><strong>详情</strong>:默认是全部,但是编译后包体积会非常大,建议用到什么语言则配置什么语言。特别某些语言依赖其他语言,例如<code>javascript</code>依赖<code>typescript</code>,需要使用<code>javascript</code>时需要配置为:</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'typescript'</span><span class="token punctuation">,</span> <span class="token string">'html'</span><span class="token punctuation">,</span> <span class="token string">'json'</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>我们通过 <code>monaco-editor-webpack-plugin</code> 集成 <code>Monaco Editor</code> 的 <code>ESM</code>版本,所以编辑时其实就是 <code>monaco-editor-webpack-plugin</code> 的配置,具体配置项参考<a href="https://github.com/Microsoft/monaco-editor-webpack-plugin" target="_blank" rel="noopener noreferrer">文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p><h3 id="filename" tabindex="-1"><a class="header-anchor" href="#filename" aria-hidden="true">#</a> filename</h3><ul><li><p><strong>类型</strong>:自定义worker脚本名称</p></li><li><p><strong>默认值</strong>:<code>'[name].worker.js'</code></p></li></ul><h3 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h3><ul><li><p><strong>类型</strong>:自定义worker脚本的路径</p></li><li><p><strong>默认值</strong>:<code>''</code></p></li></ul><h3 id="languages" tabindex="-1"><a class="header-anchor" href="#languages" aria-hidden="true">#</a> languages</h3><ul><li><p><strong>类型</strong>:需要支持的语言类型</p></li><li><p><strong>默认值</strong>:<code>['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']</code></p></li><li><p><strong>详情</strong>:默认是全部,但是编译后包体积会非常大,建议用到什么语言则配置什么语言。特别某些语言依赖其他语言,例如<code>javascript</code>依赖<code>typescript</code>,需要使用<code>javascript</code>时需要配置为:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'typescript'</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="monaco" tabindex="-1"><a class="header-anchor" href="#monaco" aria-hidden="true">#</a> monaco</h3><p>编辑器的全局对象,提供扩展语言,自定义主题等等API,具体用法请查看<a href="https://microsoft.github.io/monaco-editor/" target="_blank" rel="noopener noreferrer">monaco<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>官方文档。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> monaco <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + <span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'typescript'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="monaco" tabindex="-1"><a class="header-anchor" href="#monaco" aria-hidden="true">#</a> monaco</h3><p>编辑器的全局对象,提供扩展语言,自定义主题等等 API,具体用法请查看<a href="https://microsoft.github.io/monaco-editor/" target="_blank" rel="noopener noreferrer">monaco<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>官方文档。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> monaco <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> monaco<span class="token punctuation">.</span>editor<span class="token punctuation">.</span><span class="token function">defineTheme</span><span class="token punctuation">(</span><span class="token string">'myCoolTheme'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'vs'</span><span class="token punctuation">,</span> - <span class="token literal-property property">inherit</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> - <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span> - <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-info'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'808080'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-error'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'ff0000'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontStyle</span><span class="token operator">:</span> <span class="token string">'bold'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-notice'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'FFA500'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-date'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'008800'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">]</span> + <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'vs'</span><span class="token punctuation">,</span> + <span class="token literal-property property">inherit</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> + <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-info'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'808080'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-error'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'ff0000'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontStyle</span><span class="token operator">:</span> <span class="token string">'bold'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-notice'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'FFA500'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-date'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'008800'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="组件-monacoeditor" tabindex="-1"><a class="header-anchor" href="#组件-monacoeditor" aria-hidden="true">#</a> 组件 MonacoEditor</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MonacoEditor</span> - <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span> - <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span> - <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400px<span class="token punctuation">"</span></span> - <span class="token attr-name">check</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MonacoEditor</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="组件-monacoeditor" tabindex="-1"><a class="header-anchor" href="#组件-monacoeditor" aria-hidden="true">#</a> 组件 MonacoEditor</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MonacoEditor</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400px<span class="token punctuation">"</span></span> <span class="token attr-name">check</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MonacoEditor</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">import</span> <span class="token punctuation">{</span> MonacoEditor <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> - MonacoEditor + MonacoEditor<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> json <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> - json + json<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h4 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> props</h4><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>theme</td><td>编辑器的主题,使用其他主题需要先使用<code>monaco.editor.defineTheme</code>定义主题</td><td>string</td><td><code>defaultTheme</code></td></tr><tr><td>language</td><td>编辑器的语言</td><td>string</td><td>-</td></tr><tr><td>height</td><td>编辑器的高度</td><td>string</td><td><code>100%</code></td></tr><tr><td>width</td><td>编辑器的宽度</td><td>string</td><td><code>100%</code></td></tr><tr><td>modelValue(v-model)</td><td>编辑器的代码</td><td>string</td><td>-</td></tr><tr><td>readOnly</td><td>是否只读</td><td>boolean</td><td><code>false</code></td></tr><tr><td>options</td><td>编辑器的配置对象</td><td>object</td><td><code>{}</code></td></tr><tr><td>check</td><td>是否检查代码,如果检查不通过则不更新数据,目前只支持<code>json</code></td><td>boolean</td><td><code>false</code></td></tr></tbody></table><h4 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> events</h4><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>onload</td><td>编辑器初始化后触发</td><td>({monaco, editor, editorModel}) => void</td></tr><tr><td>scrollChange</td><td>滚动时触发</td><td>(e) => void</td></tr></tbody></table><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/editor.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> props</h4><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>theme</td><td>编辑器的主题,使用其他主题需要先使用<code>monaco.editor.defineTheme</code>定义主题</td><td>string</td><td><code>defaultTheme</code></td></tr><tr><td>language</td><td>编辑器的语言</td><td>string</td><td>-</td></tr><tr><td>height</td><td>编辑器的高度</td><td>string</td><td><code>100%</code></td></tr><tr><td>width</td><td>编辑器的宽度</td><td>string</td><td><code>100%</code></td></tr><tr><td>modelValue(v-model)</td><td>编辑器的代码</td><td>string</td><td>-</td></tr><tr><td>readOnly</td><td>是否只读</td><td>boolean</td><td><code>false</code></td></tr><tr><td>options</td><td>编辑器的配置对象</td><td>object</td><td><code>{}</code></td></tr><tr><td>check</td><td>是否检查代码,如果检查不通过则不更新数据,目前只支持<code>json</code></td><td>boolean</td><td><code>false</code></td></tr></tbody></table><h4 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> events</h4><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>onload</td><td>编辑器初始化后触发</td><td>({monaco, editor, editorModel}) => void</td></tr><tr><td>scrollChange</td><td>滚动时触发</td><td>(e) => void</td></tr></tbody></table></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/editor.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/sass.html" class="" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/pinia.html" class="" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/enums.html b/reference/plugin/plugins/enums.html index 04c12275..e7337fe2 100644 --- a/reference/plugin/plugins/enums.html +++ b/reference/plugin/plugins/enums.html @@ -3,40 +3,57 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-enums | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/enums.html.2b56cb9b.js"><link rel="modulepreload" href="/assets/enums.html.9eba9e94.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#静态配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="静态配置"><!--[--><!--]--> 静态配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#动态配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="动态配置"><!--[--><!--]--> 动态配置 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#场景使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="场景使用"><!--[--><!--]--> 场景使用 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#get" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="get"><!--[--><!--]--> get <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#push" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="push"><!--[--><!--]--> push <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#remove" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="remove"><!--[--><!--]--> remove <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#concat" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="concat"><!--[--><!--]--> concat <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#convert" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="convert"><!--[--><!--]--> convert <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#extend配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="extend配置"><!--[--><!--]--> extend配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/enums.html#dir规则" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="dir规则"><!--[--><!--]--> dir规则 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-enums" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-enums" aria-hidden="true">#</a> @fesjs/plugin-enums</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>日常业务开发中,有很多场景会使用到枚举值,比如select-options、table-column。</p><p>该插件提供统一的枚举存取及丰富的函数来处理枚举。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#静态配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="静态配置"><!--[--><!--]--> 静态配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#动态配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="动态配置"><!--[--><!--]--> 动态配置 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#场景使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="场景使用"><!--[--><!--]--> 场景使用 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#get" class="router-link-active router-link-exact-active sidebar-item" aria-label="get"><!--[--><!--]--> get <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#push" class="router-link-active router-link-exact-active sidebar-item" aria-label="push"><!--[--><!--]--> push <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#remove" class="router-link-active router-link-exact-active sidebar-item" aria-label="remove"><!--[--><!--]--> remove <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#concat" class="router-link-active router-link-exact-active sidebar-item" aria-label="concat"><!--[--><!--]--> concat <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#convert" class="router-link-active router-link-exact-active sidebar-item" aria-label="convert"><!--[--><!--]--> convert <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#extend-配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="extend 配置"><!--[--><!--]--> extend 配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/enums.html#dir-规则" class="router-link-active router-link-exact-active sidebar-item" aria-label="dir 规则"><!--[--><!--]--> dir 规则 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-enums" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-enums" aria-hidden="true">#</a> @fesjs/plugin-enums</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>日常业务开发中,有很多场景会使用到枚举值,比如 select-options、table-column。</p><p>该插件提供统一的枚举存取及丰富的函数来处理枚举。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-enums"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-enums"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="静态配置" tabindex="-1"><a class="header-anchor" href="#静态配置" aria-hidden="true">#</a> 静态配置</h3><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 配置格式:[[key, value], ...]</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="静态配置" tabindex="-1"><a class="header-anchor" href="#静态配置" aria-hidden="true">#</a> 静态配置</h3><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 配置格式:[[key, value], ...]</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">enums</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'无效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'有效的'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="动态配置" tabindex="-1"><a class="header-anchor" href="#动态配置" aria-hidden="true">#</a> 动态配置</h3><p>在业务代码中</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> enums <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + <span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'无效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'有效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="动态配置" tabindex="-1"><a class="header-anchor" href="#动态配置" aria-hidden="true">#</a> 动态配置</h3><p>在业务代码中</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> enums <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token comment">// 动态添加</span> enums<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'无效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'有效的'</span><span class="token punctuation">]</span><span class="token punctuation">]</span> enums<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span> <span class="token comment">// 有效的</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="场景使用" tabindex="-1"><a class="header-anchor" href="#场景使用" aria-hidden="true">#</a> 场景使用</h2><ul><li><p>动态添加的枚举项支持数组和对象</p></li><li><p>枚举项为对象时,可以指定keyName和valueName属性名</p></li><li><p>导出枚举值,可指定取值的路径</p></li><li><p>导出枚举可扩展属性</p></li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="场景使用" tabindex="-1"><a class="header-anchor" href="#场景使用" aria-hidden="true">#</a> 场景使用</h2><ul><li><p>动态添加的枚举项支持数组和对象</p></li><li><p>枚举项为对象时,可以指定 keyName 和 valueName 属性名</p></li><li><p>导出枚举值,可指定取值的路径</p></li><li><p>导出枚举可扩展属性</p></li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 遍历枚举status --></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in enumsGet('status')<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> - {{item.value}}:{{item.key}} - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in enumsGet('status')<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ item.value }}:{{ item.key }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 遍历枚举扩展后的roles --></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in roles<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> - {{item.name}}:{{item.disabled}} - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in roles<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ item.name }}:{{ item.disabled }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 获取枚举roles为2的英文名 --></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{enumsGet('roles', '2', { dir: 'eName' })}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{ enumsGet('roles', '2', { dir: 'eName' }) }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> @@ -45,52 +62,55 @@ enums<span class="token punctuation">.</span><span class="token function">get</s <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 动态添加枚举,枚举项是对象,并指定key的属性名为id</span> - enums<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'roles'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> - <span class="token punctuation">{</span> - <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> - <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'系统管理员'</span><span class="token punctuation">,</span> - <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'System'</span><span class="token punctuation">,</span> - <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">,</span> <span class="token string">'3'</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">{</span> - <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> - <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'业务管理员'</span><span class="token punctuation">,</span> - <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'Business'</span><span class="token punctuation">,</span> - <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">{</span> - <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span> - <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'普通用户'</span><span class="token punctuation">,</span> - <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'User'</span><span class="token punctuation">,</span> - <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span> - <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">keyName</span><span class="token operator">:</span> <span class="token string">'id'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + enums<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span> + <span class="token string">'roles'</span><span class="token punctuation">,</span> + <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span> + <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'系统管理员'</span><span class="token punctuation">,</span> + <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'System'</span><span class="token punctuation">,</span> + <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">,</span> <span class="token string">'3'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span> + <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'业务管理员'</span><span class="token punctuation">,</span> + <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'Business'</span><span class="token punctuation">,</span> + <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span> + <span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'普通用户'</span><span class="token punctuation">,</span> + <span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'User'</span><span class="token punctuation">,</span> + <span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> <span class="token literal-property property">keyName</span><span class="token operator">:</span> <span class="token string">'id'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 导出定制格式的roles,扩展枚举项新的属性name、disabled</span> <span class="token keyword">const</span> roles <span class="token operator">=</span> enums<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'roles'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> - <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'cName'</span> <span class="token comment">// 指定取值路径,取属性cName的值</span> + <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'cName'</span><span class="token punctuation">,</span> <span class="token comment">// 指定取值路径,取属性cName的值</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span> <span class="token comment">// 传入函数,获取结果值</span> - <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>value<span class="token punctuation">.</span>perm<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">i</span> <span class="token operator">=></span> i <span class="token operator">>=</span> <span class="token number">2</span><span class="token punctuation">)</span> - <span class="token punctuation">}</span> - <span class="token punctuation">]</span> + <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>value<span class="token punctuation">.</span>perm<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token operator">=></span> i <span class="token operator">>=</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">enumsGet</span><span class="token operator">:</span> enums<span class="token punctuation">.</span>get<span class="token punctuation">,</span> - roles + roles<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="get" tabindex="-1"><a class="header-anchor" href="#get" aria-hidden="true">#</a> get</h3><ul><li><p><code>get(name: string)</code> 获取指定名字的枚举</p></li><li><p><code>get(name: string, key: string)</code> 获取指定名字及键枚举默认值</p></li><li><p><code>get(name: string, opt: {extend: Array<Object>})</code> 获取指定名字的自定义格式枚举,<a href="#extend%E9%85%8D%E7%BD%AE">查看extend配置</a></p></li><li><p><code>get(name: string, key: string, opt: {dir: string})</code> 获取指定名字及键枚举<a href="#dir%E8%A7%84%E5%88%99">dir规则</a>的值</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">)</span> -<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="get" tabindex="-1"><a class="header-anchor" href="#get" aria-hidden="true">#</a> get</h3><ul><li><p><code>get(name: string)</code> 获取指定名字的枚举</p></li><li><p><code>get(name: string, key: string)</code> 获取指定名字及键枚举默认值</p></li><li><p><code>get(name: string, opt: {extend: Array<Object>})</code> 获取指定名字的自定义格式枚举,<a href="#extend%E9%85%8D%E7%BD%AE">查看 extend 配置</a></p></li><li><p><code>get(name: string, key: string, opt: {dir: string})</code> 获取指定名字及键枚举<a href="#dir%E8%A7%84%E5%88%99">dir 规则</a>的值</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> @@ -99,12 +119,12 @@ enums<span class="token punctuation">.</span><span class="token function">get</s <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span> - <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token parameter">item</span> <span class="token operator">=></span> item <span class="token operator">===</span> <span class="token string">'0'</span> - <span class="token punctuation">}</span> - <span class="token punctuation">]</span> -<span class="token punctuation">}</span><span class="token punctuation">)</span> -<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">}</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="push" tabindex="-1"><a class="header-anchor" href="#push" aria-hidden="true">#</a> push</h3><p>动态添加枚举,重复添加会覆盖</p><ul><li><code>push(name: string, _enum: Array<Array>)</code></li><li><code>push(name: string, _enum: Array<Object>, opt?: Object)</code><ul><li>opt.keyName 指定key的取值属性,默认是key</li><li>opt.valueName 指定value的取值属性</li></ul></li></ul><p>枚举项为数组,枚举项的[0]解析为key,枚举项的[1]解析为value</p><p>枚举项为对象时,根据opt配置keyName、valueName取枚举项属性值分别作为key和value,<code>如果valueName未设置则value就是枚举项</code></p><h3 id="remove" tabindex="-1"><a class="header-anchor" href="#remove" aria-hidden="true">#</a> remove</h3><ul><li>remove(name: string)</li></ul><p>移除指定的枚举</p><h3 id="concat" tabindex="-1"><a class="header-anchor" href="#concat" aria-hidden="true">#</a> concat</h3><p>基于现有的枚举,连接上新的枚举后返回新的枚举</p><ul><li><code>concat(name: string, _enum: Array<Array|Object>, opt?: Object))</code><ul><li>opt.keyName 指定key的取值属性,默认是key</li><li>opt.valueName 指定value的取值属性</li><li>opt.before 是否添加在现有的之前,默认是false</li><li>opt.extend:返回的枚举<a href="#extend%E9%85%8D%E7%BD%AE">extend配置</a></li></ul></li></ul><h3 id="convert" tabindex="-1"><a class="header-anchor" href="#convert" aria-hidden="true">#</a> convert</h3><p>将传入的枚举格式转换为{key, value}的形式</p><ul><li><code>convert(name: string, _enum: Array<Array|Object>, opt?: Object))</code><ul><li>opt.keyName 指定key的取值属性,默认是key</li><li>opt.valueName 指定value的取值属性</li></ul></li></ul><h3 id="extend配置" tabindex="-1"><a class="header-anchor" href="#extend配置" aria-hidden="true">#</a> extend配置</h3><p>扩展枚举项属性的配置</p><ul><li><code>extend: Array<Object></code><ul><li><code>key</code> 指定扩展的属性名</li><li><code>dir</code> 指定该属性的取值路径</li><li><code>transfer(item: {key: any, value: any})</code> 转换函数,参数未枚举项,返回就是该属性的值</li></ul></li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>同时设置<a href="#dir%E8%A7%84%E5%88%99">dir</a>和transfer,transfer优先</p></div><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> + <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="push" tabindex="-1"><a class="header-anchor" href="#push" aria-hidden="true">#</a> push</h3><p>动态添加枚举,重复添加会覆盖</p><ul><li><code>push(name: string, _enum: Array<Array>)</code></li><li><code>push(name: string, _enum: Array<Object>, opt?: Object)</code><ul><li>opt.keyName 指定 key 的取值属性,默认是 key</li><li>opt.valueName 指定 value 的取值属性</li></ul></li></ul><p>枚举项为数组,枚举项的[0]解析为 key,枚举项的[1]解析为 value</p><p>枚举项为对象时,根据 opt 配置 keyName、valueName 取枚举项属性值分别作为 key 和 value,<code>如果valueName未设置则value就是枚举项</code></p><h3 id="remove" tabindex="-1"><a class="header-anchor" href="#remove" aria-hidden="true">#</a> remove</h3><ul><li>remove(name: string)</li></ul><p>移除指定的枚举</p><h3 id="concat" tabindex="-1"><a class="header-anchor" href="#concat" aria-hidden="true">#</a> concat</h3><p>基于现有的枚举,连接上新的枚举后返回新的枚举</p><ul><li><code>concat(name: string, _enum: Array<Array|Object>, opt?: Object))</code><ul><li>opt.keyName 指定 key 的取值属性,默认是 key</li><li>opt.valueName 指定 value 的取值属性</li><li>opt.before 是否添加在现有的之前,默认是 false</li><li>opt.extend:返回的枚举<a href="#extend%E9%85%8D%E7%BD%AE">extend 配置</a></li></ul></li></ul><h3 id="convert" tabindex="-1"><a class="header-anchor" href="#convert" aria-hidden="true">#</a> convert</h3><p>将传入的枚举格式转换为{key, value}的形式</p><ul><li><code>convert(name: string, _enum: Array<Array|Object>, opt?: Object))</code><ul><li>opt.keyName 指定 key 的取值属性,默认是 key</li><li>opt.valueName 指定 value 的取值属性</li></ul></li></ul><h3 id="extend-配置" tabindex="-1"><a class="header-anchor" href="#extend-配置" aria-hidden="true">#</a> extend 配置</h3><p>扩展枚举项属性的配置</p><ul><li><code>extend: Array<Object></code> _ <code>key</code> 指定扩展的属性名 _ <code>dir</code> 指定该属性的取值路径 * <code>transfer(item: {key: any, value: any})</code> 转换函数,参数未枚举项,返回就是该属性的值<div class="custom-container tip"><p class="custom-container-title">提示</p><p>同时设置<a href="#dir%E8%A7%84%E5%88%99">dir</a>和 transfer,transfer 优先</p></div></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> @@ -112,11 +132,11 @@ enums<span class="token punctuation">.</span><span class="token function">get</s <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span> - <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">'0'</span> - <span class="token punctuation">}</span> - <span class="token punctuation">]</span> -<span class="token punctuation">}</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="dir规则" tabindex="-1"><a class="header-anchor" href="#dir规则" aria-hidden="true">#</a> dir规则</h3><p>dir是指定枚举项value的取值方式,规则如下:</p><ul><li>对象属性 <code>A</code>、<code>A.B</code></li><li>数组 <code>[0]</code>、<code>[0][1]</code></li><li>混合 <code>A[0]</code>、<code>[0].A</code>、<code>A[0].B</code></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 假如枚举项value的结构如下</span> + <span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dir-规则" tabindex="-1"><a class="header-anchor" href="#dir-规则" aria-hidden="true">#</a> dir 规则</h3><p>dir 是指定枚举项 value 的取值方式,规则如下:</p><ul><li>对象属性 <code>A</code>、<code>A.B</code></li><li>数组 <code>[0]</code>、<code>[0][1]</code></li><li>混合 <code>A[0]</code>、<code>[0].A</code>、<code>A[0].B</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 假如枚举项value的结构如下</span> <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'aring'</span><span class="token punctuation">,</span> @@ -136,7 +156,7 @@ dir value <span class="token string">'age'</span> <span class="token operator">=></span> <span class="token number">18</span> <span class="token string">'role[0]'</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'管理员'</span><span class="token punctuation">}</span> <span class="token string">'role[1].id'</span> <span class="token operator">=></span> <span class="token number">2</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>枚举项value如果是基本类型,则规则不生效,value就是当前值</p></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/enums.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>枚举项 value 如果是基本类型,则规则不生效,value 就是当前值</p></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/enums.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/access.html" class="" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/icon.html" class="" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/icon.html b/reference/plugin/plugins/icon.html index 6b0f1f31..772b0ba0 100644 --- a/reference/plugin/plugins/icon.html +++ b/reference/plugin/plugins/icon.html @@ -3,20 +3,38 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-icon | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/icon.html.09e6d802.js"><link rel="modulepreload" href="/assets/icon.html.1ef9becf.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/icon.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/icon.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/icon.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/icon.html#使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="使用"><!--[--><!--]--> 使用 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/icon.html#属性" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="属性"><!--[--><!--]--> 属性 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-icon" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-icon" aria-hidden="true">#</a> @fesjs/plugin-icon</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>提供以 <code>component</code> 的方式,直接使用 svg icon 的能力。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/icon.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/icon.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/icon.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/icon.html#使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="使用"><!--[--><!--]--> 使用 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/icon.html#属性" class="router-link-active router-link-exact-active sidebar-item" aria-label="属性"><!--[--><!--]--> 属性 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-icon" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-icon" aria-hidden="true">#</a> @fesjs/plugin-icon</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>提供以 <code>component</code> 的方式,直接使用 svg icon 的能力。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-icon"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-icon"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><p>新建 <code>src/icons</code> 目录,将 svg 文件放入其中,在 <code>component</code> 中引用:</p><div class="language-jsx ext-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fes-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconName<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h3><table><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">说明</th><th style="text-align:left;">类型</th></tr></thead><tbody><tr><td style="text-align:left;">type</td><td style="text-align:left;">svg 文件名</td><td style="text-align:left;"><code>string</code></td></tr><tr><td style="text-align:left;">spin</td><td style="text-align:left;">是否无限旋转</td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;">rotate</td><td style="text-align:left;">旋转角度</td><td style="text-align:left;"><code>number</code></td></tr></tbody></table><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/icon.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><p>新建 <code>src/icons</code> 目录,将 svg 文件放入其中,在 <code>component</code> 中引用:</p><div class="language-jsx line-numbers-mode" data-ext="jsx"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fes-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconName<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h3><table><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">说明</th><th style="text-align:left;">类型</th></tr></thead><tbody><tr><td style="text-align:left;">type</td><td style="text-align:left;">svg 文件名</td><td style="text-align:left;"><code>string</code></td></tr><tr><td style="text-align:left;">spin</td><td style="text-align:left;">是否无限旋转</td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;">rotate</td><td style="text-align:left;">旋转角度</td><td style="text-align:left;"><code>number</code></td></tr></tbody></table></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/icon.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/enums.html" class="" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/jest.html" class="" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/jest.html b/reference/plugin/plugins/jest.html index 06647aa4..1d3d14bd 100644 --- a/reference/plugin/plugins/jest.html +++ b/reference/plugin/plugins/jest.html @@ -3,33 +3,50 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-jest | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/jest.html.da327ef6.js"><link rel="modulepreload" href="/assets/jest.html.b6be70f6.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/jest.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/jest.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/jest.html#约定" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="约定"><!--[--><!--]--> 约定 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/jest.html#命令" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="命令"><!--[--><!--]--> 命令 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/jest.html#配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/jest.html#args-变量" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="args 变量"><!--[--><!--]--> args 变量 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/jest.html#配置文件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置文件"><!--[--><!--]--> 配置文件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/jest.html#优先级" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="优先级"><!--[--><!--]--> 优先级 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-jest" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-jest" aria-hidden="true">#</a> @fesjs/plugin-jest</h1><p>集成 <a href="https://www.jestjs.cn/" target="_blank" rel="noopener noreferrer">Jest<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 测试框架,目前只支持单元测试和覆盖测试。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/jest.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/jest.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/jest.html#约定" class="router-link-active router-link-exact-active sidebar-item" aria-label="约定"><!--[--><!--]--> 约定 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/jest.html#命令" class="router-link-active router-link-exact-active sidebar-item" aria-label="命令"><!--[--><!--]--> 命令 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/jest.html#配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/jest.html#args-变量" class="router-link-active router-link-exact-active sidebar-item" aria-label="args 变量"><!--[--><!--]--> args 变量 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/jest.html#配置文件" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置文件"><!--[--><!--]--> 配置文件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/jest.html#优先级" class="router-link-active router-link-exact-active sidebar-item" aria-label="优先级"><!--[--><!--]--> 优先级 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-jest" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-jest" aria-hidden="true">#</a> @fesjs/plugin-jest</h1><p>集成 <a href="https://www.jestjs.cn/" target="_blank" rel="noopener noreferrer">Jest<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 测试框架,目前只支持单元测试和覆盖测试。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-jest"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-jest"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="约定" tabindex="-1"><a class="header-anchor" href="#约定" aria-hidden="true">#</a> 约定</h2><ul><li>项目根目录下 <code>tests</code> 和 <code>__tests__</code> 文件夹中的 <code>js</code> 或者 <code>jsx</code> 文件为测试文件。</li><li>需要覆盖测试的文件范围是<code>src/index.{js,jsx,ts,tsx,vue}</code></li></ul><p>例如测试文件 <code>add.js</code>:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>fes-template +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="约定" tabindex="-1"><a class="header-anchor" href="#约定" aria-hidden="true">#</a> 约定</h2><ul><li>项目根目录下 <code>tests</code> 和 <code>__tests__</code> 文件夹中的 <code>js</code> 或者 <code>jsx</code> 文件为测试文件。</li><li>需要覆盖测试的文件范围是<code>src/index.{js,jsx,ts,tsx,vue}</code></li></ul><p>例如测试文件 <code>add.js</code>:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>fes-template ├── __tests__ │ └── add.js └── src ├── .fes └── utils └── sum.js -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>内容如下:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">'@/utils/sum'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>内容如下:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">'@/utils/sum'</span><span class="token punctuation">;</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'adds 1 + 2 to equal 3'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">expect</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="命令" tabindex="-1"><a class="header-anchor" href="#命令" aria-hidden="true">#</a> 命令</h2><p>在 <code>fes</code> 上注册 <code>test</code> 命令:</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>$ fes <span class="token builtin class-name">test</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><p>插件实现 Jest 的全部配置,具体请查看 <a href="https://www.jestjs.cn/docs/configuration#reference" target="_blank" rel="noopener noreferrer">文档-configuration<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。 也可以使用 <code>-h</code> 打印配置帮助信息:</p><h3 id="args-变量" tabindex="-1"><a class="header-anchor" href="#args-变量" aria-hidden="true">#</a> args 变量</h3><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code>$ fes <span class="token builtin class-name">test</span> <span class="token parameter variable">-h</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>打印配置帮助信息:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>$ fes test -h +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="命令" tabindex="-1"><a class="header-anchor" href="#命令" aria-hidden="true">#</a> 命令</h2><p>在 <code>fes</code> 上注册 <code>test</code> 命令:</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>$ fes <span class="token builtin class-name">test</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><p>插件实现 Jest 的全部配置,具体请查看 <a href="https://www.jestjs.cn/docs/configuration#reference" target="_blank" rel="noopener noreferrer">文档-configuration<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。 也可以使用 <code>-h</code> 打印配置帮助信息:</p><h3 id="args-变量" tabindex="-1"><a class="header-anchor" href="#args-变量" aria-hidden="true">#</a> args 变量</h3><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>$ fes <span class="token builtin class-name">test</span> <span class="token parameter variable">-h</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>打印配置帮助信息:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>$ fes test -h Usage: fes test [options] run unit tests with jest @@ -315,8 +332,8 @@ Options: Disable using --no-watchman. -h, --help display help for command -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br><span class="line-number">134</span><br><span class="line-number">135</span><br><span class="line-number">136</span><br><span class="line-number">137</span><br><span class="line-number">138</span><br><span class="line-number">139</span><br><span class="line-number">140</span><br><span class="line-number">141</span><br><span class="line-number">142</span><br><span class="line-number">143</span><br><span class="line-number">144</span><br><span class="line-number">145</span><br><span class="line-number">146</span><br><span class="line-number">147</span><br><span class="line-number">148</span><br><span class="line-number">149</span><br><span class="line-number">150</span><br><span class="line-number">151</span><br><span class="line-number">152</span><br><span class="line-number">153</span><br><span class="line-number">154</span><br><span class="line-number">155</span><br><span class="line-number">156</span><br><span class="line-number">157</span><br><span class="line-number">158</span><br><span class="line-number">159</span><br><span class="line-number">160</span><br><span class="line-number">161</span><br><span class="line-number">162</span><br><span class="line-number">163</span><br><span class="line-number">164</span><br><span class="line-number">165</span><br><span class="line-number">166</span><br><span class="line-number">167</span><br><span class="line-number">168</span><br><span class="line-number">169</span><br><span class="line-number">170</span><br><span class="line-number">171</span><br><span class="line-number">172</span><br><span class="line-number">173</span><br><span class="line-number">174</span><br><span class="line-number">175</span><br><span class="line-number">176</span><br><span class="line-number">177</span><br><span class="line-number">178</span><br><span class="line-number">179</span><br><span class="line-number">180</span><br><span class="line-number">181</span><br><span class="line-number">182</span><br><span class="line-number">183</span><br><span class="line-number">184</span><br><span class="line-number">185</span><br><span class="line-number">186</span><br><span class="line-number">187</span><br><span class="line-number">188</span><br><span class="line-number">189</span><br><span class="line-number">190</span><br><span class="line-number">191</span><br><span class="line-number">192</span><br><span class="line-number">193</span><br><span class="line-number">194</span><br><span class="line-number">195</span><br><span class="line-number">196</span><br><span class="line-number">197</span><br><span class="line-number">198</span><br><span class="line-number">199</span><br><span class="line-number">200</span><br><span class="line-number">201</span><br><span class="line-number">202</span><br><span class="line-number">203</span><br><span class="line-number">204</span><br><span class="line-number">205</span><br><span class="line-number">206</span><br><span class="line-number">207</span><br><span class="line-number">208</span><br><span class="line-number">209</span><br><span class="line-number">210</span><br><span class="line-number">211</span><br><span class="line-number">212</span><br><span class="line-number">213</span><br><span class="line-number">214</span><br><span class="line-number">215</span><br><span class="line-number">216</span><br><span class="line-number">217</span><br><span class="line-number">218</span><br><span class="line-number">219</span><br><span class="line-number">220</span><br><span class="line-number">221</span><br><span class="line-number">222</span><br><span class="line-number">223</span><br><span class="line-number">224</span><br><span class="line-number">225</span><br><span class="line-number">226</span><br><span class="line-number">227</span><br><span class="line-number">228</span><br><span class="line-number">229</span><br><span class="line-number">230</span><br><span class="line-number">231</span><br><span class="line-number">232</span><br><span class="line-number">233</span><br><span class="line-number">234</span><br><span class="line-number">235</span><br><span class="line-number">236</span><br><span class="line-number">237</span><br><span class="line-number">238</span><br><span class="line-number">239</span><br><span class="line-number">240</span><br><span class="line-number">241</span><br><span class="line-number">242</span><br><span class="line-number">243</span><br><span class="line-number">244</span><br><span class="line-number">245</span><br><span class="line-number">246</span><br><span class="line-number">247</span><br><span class="line-number">248</span><br><span class="line-number">249</span><br><span class="line-number">250</span><br><span class="line-number">251</span><br><span class="line-number">252</span><br><span class="line-number">253</span><br><span class="line-number">254</span><br><span class="line-number">255</span><br><span class="line-number">256</span><br><span class="line-number">257</span><br><span class="line-number">258</span><br><span class="line-number">259</span><br><span class="line-number">260</span><br><span class="line-number">261</span><br><span class="line-number">262</span><br><span class="line-number">263</span><br><span class="line-number">264</span><br><span class="line-number">265</span><br><span class="line-number">266</span><br><span class="line-number">267</span><br><span class="line-number">268</span><br><span class="line-number">269</span><br><span class="line-number">270</span><br><span class="line-number">271</span><br><span class="line-number">272</span><br><span class="line-number">273</span><br><span class="line-number">274</span><br><span class="line-number">275</span><br><span class="line-number">276</span><br><span class="line-number">277</span><br><span class="line-number">278</span><br><span class="line-number">279</span><br><span class="line-number">280</span><br><span class="line-number">281</span><br><span class="line-number">282</span><br><span class="line-number">283</span><br><span class="line-number">284</span><br><span class="line-number">285</span><br><span class="line-number">286</span><br></div></div><p>比如覆盖测试:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>fes test --coverage -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h3 id="配置文件" tabindex="-1"><a class="header-anchor" href="#配置文件" aria-hidden="true">#</a> 配置文件</h3><p>除了插件内置的默认配置之外,插件遵循 <code>Jest</code>的配置文件规范,约定项目根目录下的 <code>jest.config.js</code> 为用户配置文件,约定 <code>packages.json</code> 的 <code>jest</code> 属性内容也是配置。</p><h3 id="优先级" tabindex="-1"><a class="header-anchor" href="#优先级" aria-hidden="true">#</a> 优先级</h3><p><code>args</code> 配置 > <code>package.json</code>中的 <code>jest</code> > <code>jest.config.js</code> > 默认配置</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/jest.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如覆盖测试:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>fes test --coverage +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="配置文件" tabindex="-1"><a class="header-anchor" href="#配置文件" aria-hidden="true">#</a> 配置文件</h3><p>除了插件内置的默认配置之外,插件遵循 <code>Jest</code>的配置文件规范,约定项目根目录下的 <code>jest.config.js</code> 为用户配置文件,约定 <code>packages.json</code> 的 <code>jest</code> 属性内容也是配置。</p><h3 id="优先级" tabindex="-1"><a class="header-anchor" href="#优先级" aria-hidden="true">#</a> 优先级</h3><p><code>args</code> 配置 > <code>package.json</code>中的 <code>jest</code> > <code>jest.config.js</code> > 默认配置</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/jest.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/icon.html" class="" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/layout.html" class="" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/layout.html b/reference/plugin/plugins/layout.html index 9fbf33fd..e15e212b 100644 --- a/reference/plugin/plugins/layout.html +++ b/reference/plugin/plugins/layout.html @@ -3,58 +3,67 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-layout | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/layout.html.18970df4.js"><link rel="modulepreload" href="/assets/layout.html.737f0d05.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#布局类型" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="布局类型"><!--[--><!--]--> 布局类型 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#side" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="side"><!--[--><!--]--> side <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#top" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="top"><!--[--><!--]--> top <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#mixin" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="mixin"><!--[--><!--]--> mixin <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#页面禁用布局" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="页面禁用布局"><!--[--><!--]--> 页面禁用布局 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#keep-alive" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="keep-alive"><!--[--><!--]--> keep-alive <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#编译时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#footer" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="footer"><!--[--><!--]--> footer <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#theme" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="theme"><!--[--><!--]--> theme <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#navigation" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="navigation"><!--[--><!--]--> navigation <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#fixedheader" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="fixedHeader"><!--[--><!--]--> fixedHeader <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#fixedsidebar" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="fixedSideBar"><!--[--><!--]--> fixedSideBar <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#title" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="title"><!--[--><!--]--> title <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#logo" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="logo"><!--[--><!--]--> logo <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#multitabs" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="multiTabs"><!--[--><!--]--> multiTabs <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#menus" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="menus"><!--[--><!--]--> menus <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#menusconfig" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="menusConfig"><!--[--><!--]--> menusConfig <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#运行时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#menus-1" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="menus"><!--[--><!--]--> menus <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#header" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="header"><!--[--><!--]--> header <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#sidebar" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="sidebar"><!--[--><!--]--> sidebar <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#logo-1" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="logo"><!--[--><!--]--> logo <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#customheader" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="customHeader"><!--[--><!--]--> customHeader <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#unaccesshandler" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="unAccessHandler"><!--[--><!--]--> unAccessHandler <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#nofoundhandler" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="noFoundHandler"><!--[--><!--]--> noFoundHandler <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#logourl" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="logoUrl"><!--[--><!--]--> logoUrl <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/layout.html#其他运行时配置-4-1-0" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="其他运行时配置 (> 4.1.0)"><!--[--><!--]--> 其他运行时配置 (> 4.1.0) <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-layout" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-layout" aria-hidden="true">#</a> @fesjs/plugin-layout</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>为了进一步降低研发成本,我们尝试将布局通过 fes 插件的方式内置,只需通过简单的配置即可拥有布局,包括导航以及侧边栏。从而做到用户无需关心布局。</p><ul><li><p>侧边栏菜单数据根据路由中的配置自动生成。</p></li><li><p>布局,提供 <code>side</code>、 <code>top</code>、<code>mixin</code> 三种布局。</p></li><li><p>主题,提供 <code>light</code>、<code>dark</code> 两种主题。</p></li><li><p>默认实现对路由的 404、403 处理。</p></li><li><p>搭配 <a href="/fes.js/reference/plugin/plugins/access.html" class="">@fesjs/plugin-access</a> 插件使用,可以完成对路由的权限控制。</p></li><li><p>搭配 <a href="/fes.js/reference/plugin/plugins/locale.html" class="">@fesjs/plugin-locale</a> 插件使用,提供切换语言的能力。</p></li><li><p>支持自定义头部区域。</p></li><li><p>菜单支持配置icon</p></li><li><p>菜单标题支持国际化</p></li><li><p>可配置页面是否需要 layout。</p></li></ul><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#布局类型" class="router-link-active router-link-exact-active sidebar-item" aria-label="布局类型"><!--[--><!--]--> 布局类型 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#side" class="router-link-active router-link-exact-active sidebar-item" aria-label="side"><!--[--><!--]--> side <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#top" class="router-link-active router-link-exact-active sidebar-item" aria-label="top"><!--[--><!--]--> top <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#mixin" class="router-link-active router-link-exact-active sidebar-item" aria-label="mixin"><!--[--><!--]--> mixin <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#left-right" class="router-link-active router-link-exact-active sidebar-item" aria-label="left-right"><!--[--><!--]--> left-right <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#页面个性化" class="router-link-active router-link-exact-active sidebar-item" aria-label="页面个性化"><!--[--><!--]--> 页面个性化 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#页面缓存" class="router-link-active router-link-exact-active sidebar-item" aria-label="页面缓存"><!--[--><!--]--> 页面缓存 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#处理嵌套路由" class="router-link-active router-link-exact-active sidebar-item" aria-label="处理嵌套路由"><!--[--><!--]--> 处理嵌套路由 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#footer" class="router-link-active router-link-exact-active sidebar-item" aria-label="footer"><!--[--><!--]--> footer <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#theme" class="router-link-active router-link-exact-active sidebar-item" aria-label="theme"><!--[--><!--]--> theme <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#navigation" class="router-link-active router-link-exact-active sidebar-item" aria-label="navigation"><!--[--><!--]--> navigation <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#isfixedheader" class="router-link-active router-link-exact-active sidebar-item" aria-label="isFixedHeader"><!--[--><!--]--> isFixedHeader <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#isfixedsidebar" class="router-link-active router-link-exact-active sidebar-item" aria-label="isFixedSidebar"><!--[--><!--]--> isFixedSidebar <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#title" class="router-link-active router-link-exact-active sidebar-item" aria-label="title"><!--[--><!--]--> title <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#logo" class="router-link-active router-link-exact-active sidebar-item" aria-label="logo"><!--[--><!--]--> logo <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#multitabs" class="router-link-active router-link-exact-active sidebar-item" aria-label="multiTabs"><!--[--><!--]--> multiTabs <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#menus" class="router-link-active router-link-exact-active sidebar-item" aria-label="menus"><!--[--><!--]--> menus <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#menuprops" class="router-link-active router-link-exact-active sidebar-item" aria-label="menuProps"><!--[--><!--]--> menuProps <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#sidewidth" class="router-link-active router-link-exact-active sidebar-item" aria-label="sideWidth"><!--[--><!--]--> sideWidth <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#rendercustom" class="router-link-active router-link-exact-active sidebar-item" aria-label="renderCustom"><!--[--><!--]--> renderCustom <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#unaccesshandler" class="router-link-active router-link-exact-active sidebar-item" aria-label="unAccessHandler"><!--[--><!--]--> unAccessHandler <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#nofoundhandler" class="router-link-active router-link-exact-active sidebar-item" aria-label="noFoundHandler"><!--[--><!--]--> noFoundHandler <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#usetabtitle" class="router-link-active router-link-exact-active sidebar-item" aria-label="useTabTitle"><!--[--><!--]--> useTabTitle <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/layout.html#_4-x-升级到-5-x" class="router-link-active router-link-exact-active sidebar-item" aria-label="4.x 升级到 5.x"><!--[--><!--]--> 4.x 升级到 5.x <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-layout" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-layout" aria-hidden="true">#</a> @fesjs/plugin-layout</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>为了进一步降低研发成本,我们将布局利用 <code>fes.js</code> 插件的方式内置,只需通过简单的配置即可拥有布局,包括导航以及侧边栏。从而做到用户无需关心布局。</p><ul><li>侧边栏菜单数据根据路由中的配置自动生成。</li><li>布局,提供 <code>side</code>、 <code>top</code>、<code>mixin</code>、<code>left-right</code> 四种布局。</li><li>主题,提供 <code>light</code>、<code>dark</code> 两种主题。</li><li>默认实现对路由的 404、403 处理。</li><li>搭配 <a href="/reference/plugin/plugins/access.html" class="">@fesjs/plugin-access</a> 插件使用,可以完成对路由的权限控制。</li><li>搭配 <a href="/reference/plugin/plugins/locale.html" class="">@fesjs/plugin-locale</a> 插件使用,提供切换语言的能力。</li><li>支持自定义头部或者侧边栏区域。</li><li>菜单支持配置 icon。</li><li>菜单标题支持国际化。</li><li>可配置页面是否需要 layout。</li></ul><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-layout"</span><span class="token operator">:</span> <span class="token string">"^4.0.0"</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="布局类型" tabindex="-1"><a class="header-anchor" href="#布局类型" aria-hidden="true">#</a> 布局类型</h2><p>配置参数是 <code>navigation</code>, 布局有三种类型 <code>side</code>、<code>mixin</code> 和 <code>top</code>, 默认是 <code>side</code>:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">navigation</span><span class="token operator">:</span> <span class="token string">'side'</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-layout"</span><span class="token operator">:</span> <span class="token string">"^5.0.0"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="side" tabindex="-1"><a class="header-anchor" href="#side" aria-hidden="true">#</a> side</h3><img src="/fes.js/side.png" alt="side"><h3 id="top" tabindex="-1"><a class="header-anchor" href="#top" aria-hidden="true">#</a> top</h3><img src="/fes.js/top.png" alt="top"><h3 id="mixin" tabindex="-1"><a class="header-anchor" href="#mixin" aria-hidden="true">#</a> mixin</h3><img src="/fes.js/mixin.png" alt="mixin"><h3 id="页面禁用布局" tabindex="-1"><a class="header-anchor" href="#页面禁用布局" aria-hidden="true">#</a> 页面禁用布局</h3><p>布局是默认开启的,但是可能某些页面不需要展示布局样式,比如登录页面。我们只需要在页面的<code>.vue</code>中添加如下配置:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> -{ - "layout": false -} -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>config</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>如果只是不想展示<code>sidebar</code>,则:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code><config lang="json"> -{ - "layout": { - "sidebar": false - } -} -</config> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><code>layout</code>的可选配置有:</p><ul><li><p><strong>sidebar</strong>: 左侧区域,从v4.0.0开始,之前名称叫<code>side</code></p></li><li><p><strong>header</strong>: 头部区域,从v4.0.0开始,之前名称叫<code>top</code></p></li><li><p><strong>logo</strong>:logo和标题区域。</p></li></ul><h2 id="keep-alive" tabindex="-1"><a class="header-anchor" href="#keep-alive" aria-hidden="true">#</a> keep-alive</h2><p>从 4.0.7 开始支持配置路由页面缓存:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code><config lang="json"> -{ - "keep-alive": true -} -</config> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="布局类型" tabindex="-1"><a class="header-anchor" href="#布局类型" aria-hidden="true">#</a> 布局类型</h2><p>配置参数是 <code>navigation</code>, 布局有三种类型 <code>side</code>、<code>mixin</code> 、<code>top</code> 和 <code>left-right</code>, 默认是 <code>side</code>。</p><h3 id="side" tabindex="-1"><a class="header-anchor" href="#side" aria-hidden="true">#</a> side</h3><!--  --><img src="/side.png" alt="side"><h3 id="top" tabindex="-1"><a class="header-anchor" href="#top" aria-hidden="true">#</a> top</h3><!--  --><img src="/top.png" alt="top"><h3 id="mixin" tabindex="-1"><a class="header-anchor" href="#mixin" aria-hidden="true">#</a> mixin</h3><!--  --><img src="/mixin.png" alt="mixin"><h3 id="left-right" tabindex="-1"><a class="header-anchor" href="#left-right" aria-hidden="true">#</a> left-right</h3><!--  --><img src="/left-right.png" alt="left-right"><h3 id="页面个性化" tabindex="-1"><a class="header-anchor" href="#页面个性化" aria-hidden="true">#</a> 页面个性化</h3><p>可以为页面单独设置布局类型:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMete <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">navigation</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当设置为 <code>null</code> 时,页面不使用布局。</p><h2 id="页面缓存" tabindex="-1"><a class="header-anchor" href="#页面缓存" aria-hidden="true">#</a> 页面缓存</h2><p>支持配置页面缓存,通过<a href="/guide/route.html#%E6%89%A9%E5%B1%95%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF" class="">定义路由元信息</a>开启缓存:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRouteMete <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token function">defineRouteMeta</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token string-property property">'keep-alive'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="处理嵌套路由" tabindex="-1"><a class="header-anchor" href="#处理嵌套路由" aria-hidden="true">#</a> 处理嵌套路由</h3><p>Fes.js 里约定目录下有 <code>layout.vue</code> 时会生成嵌套路由,以 <code>layout.vue</code> 为该目录的公共父组件,layout.vue 中必须实现 <code><RouterView/></code>。如果嵌套路由下的页面设置了 <code>keep-alive</code>,则需要用 <code><Page/></code> 替换 <code><RouterView/></code>,<code><Page/></code>实现了页面缓存。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Page</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Page</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> Page <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> + Page<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h4 id="编译时配置方式" tabindex="-1"><a class="header-anchor" href="#编译时配置方式" aria-hidden="true">#</a> 编译时配置方式</h4><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 标题</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Fes.js"</span><span class="token punctuation">,</span> <span class="token comment">// 底部文字</span> <span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token string">'Created by MumbleFE'</span><span class="token punctuation">,</span> <span class="token comment">// 主题light</span> - <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token string">'dark'</span> - <span class="token comment">// 是否开启 tabs</span> - <span class="token literal-property property">multiTabs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> - <span class="token comment">// 布局类型</span> - <span class="token literal-property property">navigation</span><span class="token operator">:</span> <span class="token string">'side'</span><span class="token punctuation">,</span> - <span class="token comment">// 是否固定头部</span> - <span class="token literal-property property">fixedHeader</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> - <span class="token comment">// 是否固定sidebar</span> - <span class="token literal-property property">fixedSideBar</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> - <span class="token comment">// sidebar的宽度</span> - <span class="token literal-property property">sideWidth</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> + <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token string">'dark'</span><span class="token punctuation">,</span> <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> @@ -64,45 +73,42 @@ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'simpleList'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token literal-property property">menuConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">defaultExpandAll</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> - <span class="token literal-property property">expandedKeys</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token literal-property property">accordion</span><span class="token operator">:</span> <span class="token boolean">false</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h3 id="footer" tabindex="-1"><a class="header-anchor" href="#footer" aria-hidden="true">#</a> footer</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:页面底部的文字。</p></li></ul><h3 id="theme" tabindex="-1"><a class="header-anchor" href="#theme" aria-hidden="true">#</a> theme</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>dark</code></p></li><li><p><strong>详情</strong>:主题,可选有 <code>dark</code>、<code>light</code></p></li></ul><h3 id="navigation" tabindex="-1"><a class="header-anchor" href="#navigation" aria-hidden="true">#</a> navigation</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>side</code></p></li><li><p><strong>详情</strong>:页面布局类型,可选有 <code>side</code>、 <code>top</code>、 <code>mixin</code></p></li></ul><h3 id="fixedheader" tabindex="-1"><a class="header-anchor" href="#fixedheader" aria-hidden="true">#</a> fixedHeader</h3><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:是否固定头部,不跟随页面滚动。</p></li></ul><h3 id="fixedsidebar" tabindex="-1"><a class="header-anchor" href="#fixedsidebar" aria-hidden="true">#</a> fixedSideBar</h3><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:是否固定sidebar,不跟随页面滚动。</p></li></ul><h3 id="title" tabindex="-1"><a class="header-anchor" href="#title" aria-hidden="true">#</a> title</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>name</code> in package.json</p></li><li><p><strong>详情</strong>:产品名,会显示在 Logo 旁边。</p></li></ul><h3 id="logo" tabindex="-1"><a class="header-anchor" href="#logo" aria-hidden="true">#</a> logo</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:默认提供 fes.js 的 Logo</p></li><li><p><strong>详情</strong>:Logo的链接</p></li></ul><h3 id="multitabs" tabindex="-1"><a class="header-anchor" href="#multitabs" aria-hidden="true">#</a> multiTabs</h3><ul><li><p><strong>类型</strong>:<code>boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:是否开启多页。</p></li></ul><h3 id="menus" tabindex="-1"><a class="header-anchor" href="#menus" aria-hidden="true">#</a> menus</h3><ul><li><p><strong>类型</strong>:<code>Array</code></p></li><li><p><strong>默认值</strong>:<code>[]</code></p></li><li><p><strong>详情</strong>:菜单配置,子项具体配置如下:</p><ul><li><p><strong>name</strong>:菜单的名称。通过匹配 <code>name</code> 和路由元信息 <a href="/fes.js/guide/route.html#%E6%89%A9%E5%B1%95%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF" class="">meta</a> 中的 <code>name</code>,把菜单和路由关联起来,然后使用路由元信息补充菜单配置,比如 <code>title</code>、<code>path</code> 等。</p></li><li><p><strong>path</strong>:菜单的路径,可配置第三方地址。</p></li><li><p><strong>match</strong>:额外匹配的路径,当前路由命中匹配规则时,此菜单高亮。 (v4.0.0+)</p></li></ul></li></ul><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>{ +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="运行时配置方式" tabindex="-1"><a class="header-anchor" href="#运行时配置方式" aria-hidden="true">#</a> 运行时配置方式</h4><p>在 <code>app.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> UserCenter <span class="token keyword">from</span> <span class="token string">'@/components/UserCenter'</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span> + <span class="token function-variable function">renderCustom</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span>UserCenter <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> + <span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在<code>fes.js</code>中,运行时配置有定义对象和函数两种方式,当使用函数配置<code>layout</code>时,<code>layoutConfig</code>是编译时配置结果,<code>initialState</code>是 <code>beforeRender.action</code>执行后创建的应用初始状态数据。<br> 。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">layout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">layoutConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span> initialState <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token function-variable function">renderCustom</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span>UserCenter <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> + <span class="token function-variable function">menus</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> menusRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span>layoutConfig<span class="token punctuation">.</span>menus<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token function">watch</span><span class="token punctuation">(</span> + <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> initialState<span class="token punctuation">.</span>userName<span class="token punctuation">,</span> + <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + menusRef<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> menusRef<span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最终配置结果是运行时配置跟编译时配置合并的结果,运行时配置优先于编译时配置。</p><p>实际上运行配置能做的事情更多,推荐用运行时配置方式。</p><h3 id="footer" tabindex="-1"><a class="header-anchor" href="#footer" aria-hidden="true">#</a> footer</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:页面底部的文字。</p></li></ul><h3 id="theme" tabindex="-1"><a class="header-anchor" href="#theme" aria-hidden="true">#</a> theme</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>dark</code></p></li><li><p><strong>详情</strong>:主题,可选有 <code>dark</code>、<code>light</code></p></li></ul><h3 id="navigation" tabindex="-1"><a class="header-anchor" href="#navigation" aria-hidden="true">#</a> navigation</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>side</code></p></li><li><p><strong>详情</strong>:页面布局类型,可选有 <code>side</code>、 <code>top</code>、 <code>mixin</code></p></li></ul><h3 id="isfixedheader" tabindex="-1"><a class="header-anchor" href="#isfixedheader" aria-hidden="true">#</a> isFixedHeader</h3><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:是否固定头部,不跟随页面滚动。</p></li></ul><h3 id="isfixedsidebar" tabindex="-1"><a class="header-anchor" href="#isfixedsidebar" aria-hidden="true">#</a> isFixedSidebar</h3><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:是否固定 sidebar,不跟随页面滚动。</p></li></ul><h3 id="title" tabindex="-1"><a class="header-anchor" href="#title" aria-hidden="true">#</a> title</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:默认为 <a href="/reference/config/#title" class="">编译时配置 title</a></p></li><li><p><strong>详情</strong>:产品名。</p></li></ul><h3 id="logo" tabindex="-1"><a class="header-anchor" href="#logo" aria-hidden="true">#</a> logo</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:默认提供 <code>fes.js</code> 的 Logo</p></li><li><p><strong>详情</strong>:Logo 的链接</p></li></ul><h3 id="multitabs" tabindex="-1"><a class="header-anchor" href="#multitabs" aria-hidden="true">#</a> multiTabs</h3><ul><li><p><strong>类型</strong>:<code>boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:是否开启多页。</p></li></ul><h3 id="menus" tabindex="-1"><a class="header-anchor" href="#menus" aria-hidden="true">#</a> menus</h3><ul><li><p><strong>类型</strong>:<code>[] | () => Ref<[]> | () => []</code></p></li><li><p><strong>默认值</strong>:<code>[]</code></p></li><li><p><strong>详情</strong>:菜单配置</p><p>子项具体配置如下:</p><ul><li><p><strong>name</strong>:菜单的名称。通过匹配 <code>name</code> 和路由元信息 <a href="/guide/route.html#%E6%89%A9%E5%B1%95%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF" class="">meta</a> 中的 <code>name</code>,把菜单和路由关联起来, 然后使用路由元信息补充菜单配置,比如 <code>title</code>、<code>path</code> 等。</p></li><li><p><strong>path</strong>:菜单的路径,可配置第三方地址。</p></li><li><p><strong>match (v4.0.0+)</strong>:额外匹配的路径,当前路由命中匹配规则时,此菜单高亮。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>{ path: '/product', match: ['/product/*', '/product/create'] } -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li><p><strong>title</strong>:菜单的标题,如果同时使用<a href="/fes.js/reference/plugin/plugins/locale.html" class="">国际化插件</a>,而且<code>title</code>的值以<code>$</code>开头,则使用<code>$</code>后面的内容去匹配语言设置。</p></li><li><p><strong>icon</strong>: 菜单的图标,只有一级标题展示图标。</p><ul><li>图标使用<a href="https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html" target="_blank" rel="noopener noreferrer">fes-design icon<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>,在这里使用组件名称。</li></ul></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span> - <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">"AppstoreOutlined"</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p><strong>title</strong>:菜单的标题。</p><ul><li><p>如果同时使用<a href="/reference/plugin/plugins/locale.html" class="">国际化插件</a>,而且<code>title</code>的值以<code>$</code>开头,则使用<code>$</code>后面的内容去匹配语言设置。</p></li><li><p>title支持配置函数,对应 Fes Design 中 Menu 组件的<code>label</code>插槽。仅在运行时配置中支持。</p></li></ul></li><li><p><strong>icon</strong>: 菜单的图标,只一级标题展示图标。</p><ul><li><p>图标使用<a href="https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html" target="_blank" rel="noopener noreferrer">fes-design icon<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,编译时配置使用组件名称,我们会自动引入组件。</p></li><li><p>图标使用本地或者远程 svg 图片。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> + <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'/wine-outline.svg'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><pre><code>- 图标使用本地或者远程svg图片。 -</code></pre><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span> - <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">"/wine-outline.svg"</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li><strong>children</strong>:子菜单配置。</li></ul><h3 id="menusconfig" tabindex="-1"><a class="header-anchor" href="#menusconfig" aria-hidden="true">#</a> menusConfig</h3><ul><li><p><strong>类型</strong>:<code>Object</code></p></li><li><p><strong>默认值</strong>:<code>{}</code></p></li><li><p><strong>详情</strong>:菜单的配置:</p><ul><li><p><strong>defaultExpandAll</strong>:是否默认展开全部菜单。</p></li><li><p><strong>expandedKeys</strong>:配置默认展开的菜单,需要传子项是菜单路径的数组。</p></li><li><p><strong>accordion</strong>:是否只保持一个子菜单的展开。</p></li></ul></li></ul><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><p>在 <code>app.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> UserCenter <span class="token keyword">from</span> <span class="token string">'@/components/UserCenter'</span><span class="token punctuation">;</span> -<span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span> - <span class="token literal-property property">customHeader</span><span class="token operator">:</span> <span class="token operator"><</span>UserCenter <span class="token operator">/</span><span class="token operator">></span> -<span class="token punctuation">}</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="menus-1" tabindex="-1"><a class="header-anchor" href="#menus-1" aria-hidden="true">#</a> menus</h3><ul><li><p><strong>类型</strong>:<code>(defaultMenus: [] )=> Ref | []</code></p></li><li><p><strong>详情</strong>:运行时修改菜单,入参是默认菜单配置(.fes.js中的menu配置),需要返回一个<code>Ref</code>或者数组。</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ClusterOutlined <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes-design/icon'</span> -<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">layout</span> <span class="token operator">=</span> <span class="token parameter">layoutConfig</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token operator">...</span>layoutConfig<span class="token punctuation">,</span> - <span class="token literal-property property">customHeader</span><span class="token operator">:</span> <span class="token operator"><</span>UserCenter <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> - <span class="token function-variable function">menus</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">defaultMenuData</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token keyword">const</span> menusRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span>defaultMenuData<span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> layoutConfig<span class="token punctuation">.</span>initialState<span class="token punctuation">.</span>userName<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - menusRef<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> - <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span><span class="token punctuation">,</span> - <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token operator"><</span>ClusterOutlined <span class="token operator">/</span><span class="token operator">></span> - <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token keyword">return</span> menusRef<span class="token punctuation">;</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><code>layoutConfig.initialState</code> 是 <code>beforeRender.action</code>执行后创建的应用初始状态数据。</p><p>如果菜单需要根据某些状态动态改变,则返回<code>Ref</code>,否则只需要返回数组。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在运行时配置菜单中的icon,需要传组件本身,而不是组件的名称。</p></div><h3 id="header" tabindex="-1"><a class="header-anchor" href="#header" aria-hidden="true">#</a> header</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:是否显示 header 区域。</p></li></ul><h3 id="sidebar" tabindex="-1"><a class="header-anchor" href="#sidebar" aria-hidden="true">#</a> sidebar</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:是否显示 sidebar 区域。</p></li></ul><h3 id="logo-1" tabindex="-1"><a class="header-anchor" href="#logo-1" aria-hidden="true">#</a> logo</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:是否显示 logo 区域。</p></li></ul><h3 id="customheader" tabindex="-1"><a class="header-anchor" href="#customheader" aria-hidden="true">#</a> customHeader</h3><ul><li><p><strong>类型</strong>:Vue Component</p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:top的区域部分位置提供组件自定义功能。</p></li></ul><h3 id="unaccesshandler" tabindex="-1"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 <code>unAccessHandler</code> 函数。</p></li><li><p><strong>参数</strong></p><ul><li>router:createRouter 创建的路由实例</li><li>to: 准备进入的路由</li><li>from:离开的路由</li><li>next: <a 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">next函数<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li></ul></li></ul><p>比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li></ul></li><li><p><strong>children</strong>:子菜单配置。</p></li></ul></li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>函数类型仅在运行时可用,可以实现动态变更菜单。</p></div><h3 id="menuprops" tabindex="-1"><a class="header-anchor" href="#menuprops" aria-hidden="true">#</a> menuProps</h3><ul><li><p><strong>类型</strong>:<code>Object</code></p></li><li><p><strong>默认值</strong>:<code>{}</code></p></li><li><p><strong>详情</strong>:菜单的配置:</p><ul><li><p><strong>defaultExpandAll</strong>:是否默认展开全部菜单。</p></li><li><p><strong>expandedKeys</strong>:配置默认展开的菜单,需要传子项是菜单路径的数组。</p></li><li><p><strong>accordion</strong>:是否只保持一个子菜单的展开。</p></li></ul></li></ul><h3 id="sidewidth" tabindex="-1"><a class="header-anchor" href="#sidewidth" aria-hidden="true">#</a> sideWidth</h3><ul><li><p><strong>类型</strong>:<code>Number</code></p></li><li><p><strong>默认值</strong>:<code>200</code></p></li><li><p><strong>详情</strong>:sidebar 的宽度</p></li></ul><h3 id="rendercustom" tabindex="-1"><a class="header-anchor" href="#rendercustom" aria-hidden="true">#</a> renderCustom</h3><ul><li><p><strong>类型</strong>: <code>()=> VNodes</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>: 自定义区域内容,仅运行时。</p></li></ul><h3 id="unaccesshandler" tabindex="-1"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3><ul><li><p><strong>类型</strong>:<code>({ to, from, next})=> void</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:仅运行时,当进入某个路由时,如果路由对应的页面不属于可见资源列表,则会暂停进入,调用 <code>unAccessHandler</code> 函数。</p></li><li><p><strong>参数</strong></p><ul><li>router:createRouter 创建的路由实例</li><li>to: 准备进入的路由</li><li>from:离开的路由</li><li>next: <a 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">next 函数<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></li></ul></li></ul><p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> to<span class="token punctuation">,</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/404'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> @@ -113,20 +119,27 @@ accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/403'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>默认值</strong>:null</p></li><li><p><strong>详情</strong>:</p><p>当进入某个路由时,如果路由对应的页面不存在,则会调用 <code>noFoundHandler</code> 函数。</p></li><li><p><strong>参数</strong></p><ul><li>router:createRouter 创建的路由实例</li><li>to: 准备进入的路由</li><li>from:离开的路由</li><li>next: <a 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">next函数<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></li></ul></li></ul><p>比如:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3><ul><li><p><strong>类型</strong>:<code>({ to, from, next})=> void</code></p></li><li><p><strong>默认值</strong>:<code>null</code></p></li><li><p><strong>详情</strong>:仅运行时,当进入某个路由时,如果路由对应的页面不存在,则会调用 <code>noFoundHandler</code> 函数。</p></li><li><p><strong>参数</strong></p><ul><li>router:createRouter 创建的路由实例</li><li>to: 准备进入的路由</li><li>from:离开的路由</li><li>next: <a 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">next 函数<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></li></ul></li></ul><p>比如:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> layout <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="usetabtitle" tabindex="-1"><a class="header-anchor" href="#usetabtitle" aria-hidden="true">#</a> useTabTitle</h3><p>类型定义如下:</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">useTabTitle</span><span class="token punctuation">(</span>title<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> Ref<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>当使用多页签模式时,在页面中使用 <code>useTabTitle</code> 可以自定义页面标签:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> useRoute<span class="token punctuation">,</span> useTabTitle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="logourl" tabindex="-1"><a class="header-anchor" href="#logourl" aria-hidden="true">#</a> logoUrl</h3><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:默认提供 fes.js 的 Logo</p></li><li><p><strong>详情</strong>:Logo的链接。</p></li></ul><h3 id="其他运行时配置-4-1-0" tabindex="-1"><a class="header-anchor" href="#其他运行时配置-4-1-0" aria-hidden="true">#</a> 其他运行时配置 (> 4.1.0)</h3><p>编译时配置的内容同样支持在运行时配置,但是<code>logo</code>除外,用<code>logoUrl</code>替代。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/layout.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +<span class="token keyword">const</span> titleRef <span class="token operator">=</span> <span class="token function">useTabTitle</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">详情-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>route<span class="token punctuation">.</span>params<span class="token operator">?.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">//如果要更新</span> +titleRef<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"changed"</span> +</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_4-x-升级到-5-x" tabindex="-1"><a class="header-anchor" href="#_4-x-升级到-5-x" aria-hidden="true">#</a> 4.x 升级到 5.x</h2><ol><li>个性化 layout 配置改为使用传入 navigation</li><li>customHeader 改为 renderCustom</li><li>fixedHeader 改为 isFixedHeader</li><li>menusConfig 改为 menuProps</li><li>fixedSideBar 改为 isFixedSidebar</li><li>去掉运行时 logo、header、sidebar 三个区域显示配置,请改为使用 navigation: left-right</li></ol></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/layout.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/jest.html" class="" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/locale.html" class="" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/locale.html b/reference/plugin/plugins/locale.html index 0b07fc08..763d053f 100644 --- a/reference/plugin/plugins/locale.html +++ b/reference/plugin/plugins/locale.html @@ -3,74 +3,91 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-locale | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/locale.html.669c5454.js"><link rel="modulepreload" href="/assets/locale.html.a0788058.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/locale.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/locale.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/locale.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/locale.html#配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/locale.html#约定式配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="约定式配置"><!--[--><!--]--> 约定式配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/locale.html#编译时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/locale.html#运行时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/locale.html#api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/locale.html#locale-1" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="locale"><!--[--><!--]--> locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/locale.html#usei18n" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="useI18n"><!--[--><!--]--> useI18n <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-locale" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-locale" aria-hidden="true">#</a> @fesjs/plugin-locale</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>国际化插件,基于 <a href="https://github.com/intlify/vue-i18n-next" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>,用于解决 i18n 问题。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/locale.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/locale.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/locale.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/locale.html#配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/locale.html#约定式配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="约定式配置"><!--[--><!--]--> 约定式配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/locale.html#编译时配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/locale.html#运行时配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/locale.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/locale.html#locale-1" class="router-link-active router-link-exact-active sidebar-item" aria-label="locale"><!--[--><!--]--> locale <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/locale.html#usei18n" class="router-link-active router-link-exact-active sidebar-item" aria-label="useI18n"><!--[--><!--]--> useI18n <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-locale" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-locale" aria-hidden="true">#</a> @fesjs/plugin-locale</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>国际化插件,基于 <a href="https://github.com/intlify/vue-i18n-next" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,用于解决 i18n 问题。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-locale"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-locale"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="约定式配置" tabindex="-1"><a class="header-anchor" href="#约定式配置" aria-hidden="true">#</a> 约定式配置</h3><p>Fes.js 约定如下目录,项目就拥有了 <code>zh-CN</code> 与 <code>en-US</code> 国际化语言切换:</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>src +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="约定式配置" tabindex="-1"><a class="header-anchor" href="#约定式配置" aria-hidden="true">#</a> 约定式配置</h3><p>Fes.js 约定如下目录,项目就拥有了 <code>zh-CN</code> 与 <code>en-US</code> 国际化语言切换:</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>src ├── locales │ ├── zh-CN.js │ └── en-US.js └── pages │ └── index.vue └── app.js -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>多语言文件的命名规范:<code><lang>-<COUNTRY>.js</code></p><p>多语言文件的内容规范:键值组成的字面量,如下:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// src/locales/zh-CN.js</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>多语言文件的命名规范:<code><lang>-<COUNTRY>.js</code></p><p>多语言文件的内容规范:键值组成的字面量,如下:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// src/locales/zh-CN.js</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">menu</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">'接口'</span> + <span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">'接口'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">overview</span><span class="token operator">:</span> <span class="token string">'概述'</span><span class="token punctuation">,</span> <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">internationalization</span><span class="token operator">:</span> <span class="token string">'国际化,基于'</span><span class="token punctuation">,</span> <span class="token literal-property property">achieve</span><span class="token operator">:</span> <span class="token string">'实现。'</span><span class="token punctuation">,</span> - <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token string">'UI组件'</span> - <span class="token punctuation">}</span> + <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token string">'UI组件'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// src/locales/en-US.js</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// src/locales/en-US.js</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">menu</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">'interface'</span> + <span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">'interface'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">overview</span><span class="token operator">:</span> <span class="token string">'Overview'</span><span class="token punctuation">,</span> <span class="token literal-property property">i18n</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">internationalization</span><span class="token operator">:</span> <span class="token string">'internationalization,base on'</span><span class="token punctuation">,</span> <span class="token literal-property property">achieve</span><span class="token operator">:</span> <span class="token string">'to achieve.'</span><span class="token punctuation">,</span> - <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token string">'UI components'</span> - <span class="token punctuation">}</span> + <span class="token literal-property property">ui</span><span class="token operator">:</span> <span class="token string">'UI components'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>想了解更多语言信息配置、匹配规则,请参考 <a href="https://vue-i18n.intlify.dev/guide/essentials/syntax.html" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 文档。</p><h3 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h3><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>默认配置为:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>想了解更多语言信息配置、匹配规则,请参考 <a href="https://vue-i18n.intlify.dev/guide/essentials/syntax.html" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 文档。</p><h3 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h3><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时,通过此配置生成运行时的代码,在配置文件<code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>默认配置为:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'zh-CN'</span><span class="token punctuation">,</span> <span class="token comment">// default locale</span> <span class="token literal-property property">fallbackLocale</span><span class="token operator">:</span> <span class="token string">'zh-CN'</span><span class="token punctuation">,</span> <span class="token comment">// set fallback locale</span> <span class="token literal-property property">baseNavigator</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启浏览器语言检测</span> <span class="token literal-property property">legacy</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 用户是否需要 Legacy API 模式</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>所有配置项如下:</p><h4 id="locale" tabindex="-1"><a class="header-anchor" href="#locale" aria-hidden="true">#</a> locale</h4><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>zh-CN</code></p></li><li><p><strong>详情</strong>:当前的语言。</p></li></ul><h4 id="fallbacklocale" tabindex="-1"><a class="header-anchor" href="#fallbacklocale" aria-hidden="true">#</a> fallbackLocale</h4><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>zh-CN</code></p></li><li><p><strong>详情</strong>:兜底的语言,如果当前语言找不到配置,则使用默认语言,需要保证默认语言配置文件存在。</p></li></ul><h4 id="basenavigator" tabindex="-1"><a class="header-anchor" href="#basenavigator" aria-hidden="true">#</a> baseNavigator</h4><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:开启浏览器语言检测。</p></li></ul><p>默认情况下,当前语言环境的识别按照:<code>localStorage</code> 中 <code>fes_locale</code> 值 > 浏览器检测 > <code>default</code> 设置的默认语言 > <code>zh-CN</code> 中文。</p><h4 id="legacy" tabindex="-1"><a class="header-anchor" href="#legacy" aria-hidden="true">#</a> legacy</h4><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:用户是否需要 Legacy API 模式</p></li></ul><h3 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h3><p>暂无。</p><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="locale-1" tabindex="-1"><a class="header-anchor" href="#locale-1" aria-hidden="true">#</a> locale</h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h4 id="locale-messages" tabindex="-1"><a class="header-anchor" href="#locale-messages" aria-hidden="true">#</a> locale.messages</h4><ul><li><p><strong>类型</strong>:<code>Object</code></p></li><li><p><strong>详情</strong>:当前的配置的语言信息。</p></li></ul><h4 id="locale-setlocale" tabindex="-1"><a class="header-anchor" href="#locale-setlocale" aria-hidden="true">#</a> locale.setLocale</h4><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>详情</strong>:设置当前的语言。</p></li><li><p><strong>参数</strong>:</p><ul><li>locale,语言的名称,应该是符合 <code><lang>-<COUNTRY></code> 规范的名称。</li></ul></li><li><p><strong>返回值</strong>:<code>null</code></p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>所有配置项如下:</p><h4 id="locale" tabindex="-1"><a class="header-anchor" href="#locale" aria-hidden="true">#</a> locale</h4><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>zh-CN</code></p></li><li><p><strong>详情</strong>:当前的语言。</p></li></ul><h4 id="fallbacklocale" tabindex="-1"><a class="header-anchor" href="#fallbacklocale" aria-hidden="true">#</a> fallbackLocale</h4><ul><li><p><strong>类型</strong>:<code>String</code></p></li><li><p><strong>默认值</strong>:<code>zh-CN</code></p></li><li><p><strong>详情</strong>:兜底的语言,如果当前语言找不到配置,则使用默认语言,需要保证默认语言配置文件存在。</p></li></ul><h4 id="basenavigator" tabindex="-1"><a class="header-anchor" href="#basenavigator" aria-hidden="true">#</a> baseNavigator</h4><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>true</code></p></li><li><p><strong>详情</strong>:开启浏览器语言检测。</p></li></ul><p>默认情况下,当前语言环境的识别按照:<code>localStorage</code> 中 <code>fes_locale</code> 值 > 浏览器检测 > <code>default</code> 设置的默认语言 > <code>zh-CN</code> 中文。</p><h4 id="legacy" tabindex="-1"><a class="header-anchor" href="#legacy" aria-hidden="true">#</a> legacy</h4><ul><li><p><strong>类型</strong>:<code>Boolean</code></p></li><li><p><strong>默认值</strong>:<code>false</code></p></li><li><p><strong>详情</strong>:用户是否需要 Legacy API 模式</p></li></ul><h3 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h3><p>暂无。</p><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="locale-1" tabindex="-1"><a class="header-anchor" href="#locale-1" aria-hidden="true">#</a> locale</h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="locale-messages" tabindex="-1"><a class="header-anchor" href="#locale-messages" aria-hidden="true">#</a> locale.messages</h4><ul><li><strong>类型</strong>:<code>Object</code></li><li><strong>详情</strong>:当前的配置的语言信息。</li></ul><h4 id="locale-setlocale" tabindex="-1"><a class="header-anchor" href="#locale-setlocale" aria-hidden="true">#</a> locale.setLocale</h4><ul><li><strong>类型</strong>:<code>Function</code></li><li><strong>详情</strong>:设置当前的语言。</li><li><strong>参数</strong>: <ul><li>locale,语言的名称,应该是符合 <code><lang>-<COUNTRY></code> 规范的名称。</li></ul></li><li><strong>返回值</strong>:<code>null</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> locale<span class="token punctuation">.</span><span class="token function">setLocale</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'en-US'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="locale-addlocale" tabindex="-1"><a class="header-anchor" href="#locale-addlocale" aria-hidden="true">#</a> locale.addLocale</h4><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>详情</strong>:手动添加语言配置。</p></li><li><p><strong>参数</strong>:</p><ul><li>locale,语言的名称,符合 <code><lang>-<COUNTRY></code> 规范的名称。</li><li>messages, 语言信息。</li></ul></li><li><p><strong>返回值</strong>:<code>null</code></p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="locale-addlocale" tabindex="-1"><a class="header-anchor" href="#locale-addlocale" aria-hidden="true">#</a> locale.addLocale</h4><ul><li><strong>类型</strong>:<code>Function</code></li><li><strong>详情</strong>:手动添加语言配置。</li><li><strong>参数</strong>: <ul><li>locale,语言的名称,符合 <code><lang>-<COUNTRY></code> 规范的名称。</li><li>messages, 语言信息。</li></ul></li><li><strong>返回值</strong>:<code>null</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> locale<span class="token punctuation">.</span><span class="token function">addLocale</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">locale</span><span class="token operator">:</span> <span class="token string">'ja-JP'</span><span class="token punctuation">,</span> <span class="token literal-property property">messages</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token string">'テスト'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="locale-getalllocales" tabindex="-1"><a class="header-anchor" href="#locale-getalllocales" aria-hidden="true">#</a> locale.getAllLocales</h4><ul><li><p><strong>类型</strong>:<code>Function</code></p></li><li><p><strong>详情</strong>:获取当前获得所有国际化文件的列表,默认会在 locales 文件夹下寻找类似 <code>en-US.js</code> 文件。</p></li><li><p><strong>参数</strong>:null</p></li><li><p><strong>返回值</strong>:<code>Array</code></p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="locale-getalllocales" tabindex="-1"><a class="header-anchor" href="#locale-getalllocales" aria-hidden="true">#</a> locale.getAllLocales</h4><ul><li><strong>类型</strong>:<code>Function</code></li><li><strong>详情</strong>:获取当前获得所有国际化文件的列表,默认会在 locales 文件夹下寻找类似 <code>en-US.js</code> 文件。</li><li><strong>参数</strong>:null</li><li><strong>返回值</strong>:<code>Array</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> locale <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>locale<span class="token punctuation">.</span><span class="token function">getAllLocales</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="usei18n" tabindex="-1"><a class="header-anchor" href="#usei18n" aria-hidden="true">#</a> useI18n</h3><p>Composition API, 只能在 <code>setup</code> 函数中使用,更多细节参考 <a href="https://vue-i18n.intlify.dev/api/composition.html#usei18n" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。 举个 🌰:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>{{ t('language') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>message: {{ t('hello') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="usei18n" tabindex="-1"><a class="header-anchor" href="#usei18n" aria-hidden="true">#</a> useI18n</h3><p>Composition API, 只能在 <code>setup</code> 函数中使用,更多细节参考 <a href="https://vue-i18n.intlify.dev/api/composition.html#usei18n" target="_blank" rel="noopener noreferrer">Vue I18n<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>。 举个 🌰:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>{{ t('language') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>message: {{ t('hello') }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> @@ -85,7 +102,7 @@ console<span class="token punctuation">.</span><span class="token function">log< <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p><code>useI18n()</code>返回结果是 <a href="https://vue-i18n.intlify.dev/api/composition.html#composer" target="_blank" rel="noopener noreferrer">Composer<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>,提供类似 <code>t</code>、<code>n</code>、<code>d</code> 等转换函数,在模板中使用。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/locale.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code>useI18n()</code>返回结果是 <a href="https://vue-i18n.intlify.dev/api/composition.html#composer" target="_blank" rel="noopener noreferrer">Composer<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,提供类似 <code>t</code>、<code>n</code>、<code>d</code> 等转换函数,在模板中使用。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/locale.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/layout.html" class="" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/model.html" class="" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/login.html b/reference/plugin/plugins/login.html new file mode 100644 index 00000000..212ea8a8 --- /dev/null +++ b/reference/plugin/plugins/login.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html lang="zh-CN"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> + <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-login | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/login.html.5cb3e152.js"><link rel="modulepreload" href="/assets/login.html.3b52bc00.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> + </head> + <body> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/login.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/login.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/login.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/login.html#运行时配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-login" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-login" aria-hidden="true">#</a> @fesjs/plugin-login</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>管理自定义 login 页面,包括 login 页面权限问题,跳转登陆问题。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-login"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRuntimeConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineRuntimeConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">login</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">loginPath</span><span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token comment">// 登陆页面路径,默认 /login,也可以用路由的 name</span> + <span class="token function">hasLogin</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 进入页面前判断是否登陆的逻辑,每次跳转非登陆页面都会检测,直到为 true,支持异步</span> + <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/login.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/watermark.html" class="" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/swc.html" class="" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> + </body> +</html> diff --git a/reference/plugin/plugins/model.html b/reference/plugin/plugins/model.html index 28abe18c..41ce9821 100644 --- a/reference/plugin/plugins/model.html +++ b/reference/plugin/plugins/model.html @@ -3,46 +3,64 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-model | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/model.html.17d86d37.js"><link rel="modulepreload" href="/assets/model.html.a33983f1.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#model-文件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="Model 文件"><!--[--><!--]--> Model 文件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#在组件中使用-model" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="在组件中使用 Model"><!--[--><!--]--> 在组件中使用 Model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#initialstate" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="@@initialState"><!--[--><!--]--> @@initialState <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#usemodel" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="useModel"><!--[--><!--]--> useModel <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-model" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-model" aria-hidden="true">#</a> @fesjs/plugin-model</h1><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 package.json 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/model.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/model.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/model.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/model.html#model-文件" class="router-link-active router-link-exact-active sidebar-item" aria-label="Model 文件"><!--[--><!--]--> Model 文件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/model.html#在组件中使用-model" class="router-link-active router-link-exact-active sidebar-item" aria-label="在组件中使用 Model"><!--[--><!--]--> 在组件中使用 Model <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/model.html#initialstate" class="router-link-active router-link-exact-active sidebar-item" aria-label="@@initialState"><!--[--><!--]--> @@initialState <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/model.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/model.html#usemodel" class="router-link-active router-link-exact-active sidebar-item" aria-label="useModel"><!--[--><!--]--> useModel <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-model" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-model" aria-hidden="true">#</a> @fesjs/plugin-model</h1><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 package.json 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新,提供 <code>reactive</code> 、 <code>ref</code> 等API把数据变成响应式的。我们使用<code>Provide / Inject</code>特性,在应用实例中共享响应式数据。</p><p>我们约定<code>src/models</code> 目录下的文件为项目定义的 <code>model</code> 文件。每个文件需要默认导出一个 <code>function</code>。</p><p>文件名则对应最终 <code>model</code> 的 <code>name</code>,你可以通过插件提供的 <code>API</code> 来消费 <code>model</code> 中的数据。</p><h3 id="model-文件" tabindex="-1"><a class="header-anchor" href="#model-文件" aria-hidden="true">#</a> Model 文件</h3><p><strong>src/models/useAuthModel.js</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span> - -<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useAuthModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - - <span class="token keyword">const</span> <span class="token function-variable function">signin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> - <span class="token comment">// todo</span> - <span class="token punctuation">}</span> - - <span class="token keyword">const</span> <span class="token function-variable function">signout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> - <span class="token comment">// todo</span> - <span class="token punctuation">}</span> - - <span class="token keyword">return</span> <span class="token punctuation">{</span> - user<span class="token punctuation">,</span> - signin<span class="token punctuation">,</span> - signout - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="在组件中使用-model" tabindex="-1"><a class="header-anchor" href="#在组件中使用-model" aria-hidden="true">#</a> 在组件中使用 Model</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> -<span class="token keyword">import</span> <span class="token punctuation">{</span> useModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span> -<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> - <span class="token keyword">const</span> <span class="token punctuation">{</span> user<span class="token punctuation">,</span> signin<span class="token punctuation">,</span> signout <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">"useAuthModel"</span><span class="token punctuation">)</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动 UI 更新,提供 <code>reactive</code> 、 <code>ref</code> 等 API 把数据变成响应式的。我们使用<code>Provide / Inject</code>特性,在应用实例中共享响应式数据。</p><p>我们约定<code>src/models</code> 目录下的文件为项目定义的 <code>model</code> 文件。每个文件需要默认导出一个 <code>function</code>。</p><p>文件名则对应最终 <code>model</code> 的 <code>name</code>,你可以通过插件提供的 <code>API</code> 来消费 <code>model</code> 中的数据。</p><h3 id="model-文件" tabindex="-1"><a class="header-anchor" href="#model-文件" aria-hidden="true">#</a> Model 文件</h3><p><strong>src/models/useAuthModel.js</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span> + +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useAuthModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">const</span> <span class="token function-variable function">signin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// todo</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token keyword">const</span> <span class="token function-variable function">signout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token comment">// todo</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + + <span class="token keyword">return</span> <span class="token punctuation">{</span> + user<span class="token punctuation">,</span> + signin<span class="token punctuation">,</span> + signout<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="在组件中使用-model" tabindex="-1"><a class="header-anchor" href="#在组件中使用-model" aria-hidden="true">#</a> 在组件中使用 Model</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +<span class="token keyword">import</span> <span class="token punctuation">{</span> useModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> <span class="token punctuation">{</span> user<span class="token punctuation">,</span> signin<span class="token punctuation">,</span> signout <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">'useAuthModel'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="initialstate" tabindex="-1"><a class="header-anchor" href="#initialstate" aria-hidden="true">#</a> @@initialState</h3><p>在<code>beforeRender</code>的返回的内容会写入<code>@@initialState</code></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> beforeRender <span class="token operator">=</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="initialstate" tabindex="-1"><a class="header-anchor" href="#initialstate" aria-hidden="true">#</a> @@initialState</h3><p>在<code>beforeRender</code>的返回的内容会写入<code>@@initialState</code></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> beforeRender <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token operator"><</span>PageLoading <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> <span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> setRole <span class="token punctuation">}</span> <span class="token operator">=</span> access<span class="token punctuation">;</span> @@ -51,14 +69,14 @@ <span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 初始化应用的全局状态,可以通过 useModel('@@initialState') 获取,具体用法看@/components/UserCenter 文件</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'harrywan'</span> + <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'harrywan'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>然后我们可以在其他组件中使用:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{initialState.userName}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后我们可以在其他组件中使用:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ initialState.userName }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">import</span> <span class="token punctuation">{</span> useModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> @@ -67,14 +85,13 @@ <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> initialState <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">'@@initialState'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> - initialState + initialState<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scope</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> -</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="usemodel" tabindex="-1"><a class="header-anchor" href="#usemodel" aria-hidden="true">#</a> useModel</h3><p><strong>useModel(name)</strong></p><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>: 获取 Model 数据,也就是 Model 文件默认导出函数执行的结果。</p></li><li><p><strong>参数</strong>:</p><ul><li>name,传入 Model 文件名</li></ul></li></ul><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/model.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scope</span><span class="token punctuation">></span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="usemodel" tabindex="-1"><a class="header-anchor" href="#usemodel" aria-hidden="true">#</a> useModel</h3><p><strong>useModel(name)</strong></p><ul><li><strong>类型</strong>:函数</li><li><strong>详情</strong>: 获取 Model 数据, 也就是 Model 文件默认导出函数执行的结果。</li><li><strong>参数</strong>: <ul><li>name,传入 Model 文件名</li></ul></li></ul></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/model.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/locale.html" class="" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/request.html" class="" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/pinia.html b/reference/plugin/plugins/pinia.html index 542de860..2373a49d 100644 --- a/reference/plugin/plugins/pinia.html +++ b/reference/plugin/plugins/pinia.html @@ -3,42 +3,60 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-pinia | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/pinia.html.eb251b6e.js"><link rel="modulepreload" href="/assets/pinia.html.ca207361.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/pinia.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/pinia.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/pinia.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/pinia.html#api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/pinia.html#pinia" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="pinia"><!--[--><!--]--> pinia <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/pinia.html#使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="使用"><!--[--><!--]--> 使用 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/pinia.html#定义-store" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="定义 store"><!--[--><!--]--> 定义 store <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/pinia.html#setup" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="setup"><!--[--><!--]--> setup <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/pinia.html#非setup" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="非setup"><!--[--><!--]--> 非setup <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-pinia" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-pinia" aria-hidden="true">#</a> @fesjs/plugin-pinia</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>集成 <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener noreferrer">pinia<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> ,提供状态管理的能力,封装一些胶水代码,可以直接定义store 使用。</p><p>为了防止 <code>Fes.js</code> 与 <code>pinia</code> 提供的 API 冲突,<code>Fes.js</code>不提供任何 <code>pinia</code> 的API,相关API直接从 <code>pinia</code> 导出:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p>约定 <code>plugin</code> 定义放在 <code>stores</code> 目录下,文件名包含plugin被解析为插件,无需额外配置,定义即可用。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>└── src + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/pinia.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/pinia.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/pinia.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/pinia.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/pinia.html#pinia" class="router-link-active router-link-exact-active sidebar-item" aria-label="pinia"><!--[--><!--]--> pinia <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/pinia.html#使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="使用"><!--[--><!--]--> 使用 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/pinia.html#定义-store" class="router-link-active router-link-exact-active sidebar-item" aria-label="定义 store"><!--[--><!--]--> 定义 store <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/pinia.html#setup" class="router-link-active router-link-exact-active sidebar-item" aria-label="setup"><!--[--><!--]--> setup <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/pinia.html#非-setup" class="router-link-active router-link-exact-active sidebar-item" aria-label="非 setup"><!--[--><!--]--> 非 setup <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-pinia" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-pinia" aria-hidden="true">#</a> @fesjs/plugin-pinia</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>集成 <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener noreferrer">pinia<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> ,提供状态管理的能力,封装一些胶水代码,可以直接定义 store 使用。</p><p>为了防止 <code>Fes.js</code> 与 <code>pinia</code> 提供的 API 冲突,<code>Fes.js</code>不提供任何 <code>pinia</code> 的 API,相关 API 直接从 <code>pinia</code> 导出:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>约定 <code>plugin</code> 定义放在 <code>stores</code> 目录下,文件名包含 plugin 被解析为插件,无需额外配置,定义即可用。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>└── src ├── pages │ └── index.vue - └── stores - │ ├── plugin-logger.js + └── stores + │ ├── plugin-logger.js │ ├── user.js └── app.js -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-pinia"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-pinia"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> <span class="token property">"pinia"</span><span class="token operator">:</span> <span class="token string">"^2.0.11"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="pinia" tabindex="-1"><a class="header-anchor" href="#pinia" aria-hidden="true">#</a> pinia</h3><p><code>createPinia</code>执行后创建的实例。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> pinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><h3 id="定义-store" tabindex="-1"><a class="header-anchor" href="#定义-store" aria-hidden="true">#</a> 定义 store</h3><p>我们在 <code>src/store/main.js</code>中:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="pinia" tabindex="-1"><a class="header-anchor" href="#pinia" aria-hidden="true">#</a> pinia</h3><p><code>createPinia</code>执行后创建的实例。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> pinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><h3 id="定义-store" tabindex="-1"><a class="header-anchor" href="#定义-store" aria-hidden="true">#</a> 定义 store</h3><p>我们在 <code>src/store/main.js</code>中:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'pinia'</span><span class="token punctuation">;</span> <span class="token comment">// useStore could be anything like useUser, useCart</span> <span class="token comment">// the first argument is a unique id of the store across your application</span> <span class="token keyword">export</span> <span class="token keyword">const</span> useStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token comment">// other options...</span> -<span class="token punctuation">}</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="setup" tabindex="-1"><a class="header-anchor" href="#setup" aria-hidden="true">#</a> setup</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/store/main'</span> + <span class="token comment">// other options...</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="setup" tabindex="-1"><a class="header-anchor" href="#setup" aria-hidden="true">#</a> setup</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/store/main'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> - <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="非setup" tabindex="-1"><a class="header-anchor" href="#非setup" aria-hidden="true">#</a> 非setup</h3><p>比如在app.js中:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> pinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="非-setup" tabindex="-1"><a class="header-anchor" href="#非-setup" aria-hidden="true">#</a> 非 setup</h3><p>比如在 app.js 中:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> pinia <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> beforeRender <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token operator"><</span>PageLoading <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> @@ -49,14 +67,14 @@ <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useStore</span><span class="token punctuation">(</span>pinia<span class="token punctuation">)</span><span class="token punctuation">;</span> store<span class="token punctuation">.</span><span class="token function">$patch</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">'李雷'</span><span class="token punctuation">,</span> - <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">'admin'</span> + <span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/pinia.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/pinia.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/editor.html" class="" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/watermark.html" class="" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/qiankun.html b/reference/plugin/plugins/qiankun.html index 93139752..5e791d4f 100644 --- a/reference/plugin/plugins/qiankun.html +++ b/reference/plugin/plugins/qiankun.html @@ -3,19 +3,37 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-qiankun | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/qiankun.html.03151319.js"><link rel="modulepreload" href="/assets/qiankun.html.fd060b60.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#主应用配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="主应用配置"><!--[--><!--]--> 主应用配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#第一步-注册子应用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="第一步:注册子应用"><!--[--><!--]--> 第一步:注册子应用 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#第二步-装载子应用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="第二步:装载子应用"><!--[--><!--]--> 第二步:装载子应用 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#子应用配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="子应用配置"><!--[--><!--]--> 子应用配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#第一步-插件注册" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="第一步:插件注册"><!--[--><!--]--> 第一步:插件注册 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#第二步-配置运行时生命周期钩子-可选" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="第二步:配置运行时生命周期钩子(可选)"><!--[--><!--]--> 第二步:配置运行时生命周期钩子(可选) <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#父子应用通讯" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="父子应用通讯"><!--[--><!--]--> 父子应用通讯 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#配合-usemodel-使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配合 useModel 使用"><!--[--><!--]--> 配合 useModel 使用 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#基于-props-传递" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="基于 props 传递"><!--[--><!--]--> 基于 props 传递 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#microapp" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="MicroApp"><!--[--><!--]--> MicroApp <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#microappwithmemohistory" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="MicroAppWithMemoHistory"><!--[--><!--]--> MicroAppWithMemoHistory <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-qiankun" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-qiankun" aria-hidden="true">#</a> @fesjs/plugin-qiankun</h1><p>Fes.js plugin for <a href="https://qiankun.umijs.org/" target="_blank" rel="noopener noreferrer">qiankun<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>,参考<a href="https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp" target="_blank" rel="noopener noreferrer">@umijs/plugin-qiankun<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 实现,喜欢 React 的同学推荐直接用 Umi。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#主应用配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="主应用配置"><!--[--><!--]--> 主应用配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#第一步-注册子应用" class="router-link-active router-link-exact-active sidebar-item" aria-label="第一步:注册子应用"><!--[--><!--]--> 第一步:注册子应用 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#第二步-装载子应用" class="router-link-active router-link-exact-active sidebar-item" aria-label="第二步:装载子应用"><!--[--><!--]--> 第二步:装载子应用 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#子应用配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="子应用配置"><!--[--><!--]--> 子应用配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#第一步-插件注册" class="router-link-active router-link-exact-active sidebar-item" aria-label="第一步:插件注册"><!--[--><!--]--> 第一步:插件注册 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#第二步-配置运行时生命周期钩子-可选" class="router-link-active router-link-exact-active sidebar-item" aria-label="第二步:配置运行时生命周期钩子(可选)"><!--[--><!--]--> 第二步:配置运行时生命周期钩子(可选) <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#父子应用通讯" class="router-link-active router-link-exact-active sidebar-item" aria-label="父子应用通讯"><!--[--><!--]--> 父子应用通讯 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#配合-usemodel-使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="配合 useModel 使用"><!--[--><!--]--> 配合 useModel 使用 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#基于-props-传递" class="router-link-active router-link-exact-active sidebar-item" aria-label="基于 props 传递"><!--[--><!--]--> 基于 props 传递 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#microapp" class="router-link-active router-link-exact-active sidebar-item" aria-label="MicroApp"><!--[--><!--]--> MicroApp <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/qiankun.html#microappwithmemohistory" class="router-link-active router-link-exact-active sidebar-item" aria-label="MicroAppWithMemoHistory"><!--[--><!--]--> MicroAppWithMemoHistory <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-qiankun" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-qiankun" aria-hidden="true">#</a> @fesjs/plugin-qiankun</h1><p>Fes.js plugin for <a href="https://qiankun.umijs.org/" target="_blank" rel="noopener noreferrer">qiankun<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,参考<a href="https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp" target="_blank" rel="noopener noreferrer">@umijs/plugin-qiankun<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 实现,喜欢 React 的同学推荐直接用 Umi。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-qiankun"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-qiankun"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>有一种痛叫接手老项目,技术栈老旧,内容多,还要继续维护~</p><p>可能目前迁移、升级老项目最好的解决方案就是微前端。<code>plugin-qiankun</code> 是基于 <code>qiankun</code> 实现的 Fes.js 微前端解决方案。</p><h2 id="主应用配置" tabindex="-1"><a class="header-anchor" href="#主应用配置" aria-hidden="true">#</a> 主应用配置</h2><h3 id="第一步-注册子应用" tabindex="-1"><a class="header-anchor" href="#第一步-注册子应用" aria-hidden="true">#</a> 第一步:注册子应用</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>有一种痛叫接手老项目,技术栈老旧,内容多,还要继续维护~</p><p>可能目前迁移、升级老项目最好的解决方案就是微前端。<code>plugin-qiankun</code> 是基于 <code>qiankun</code> 实现的 Fes.js 微前端解决方案。</p><h2 id="主应用配置" tabindex="-1"><a class="header-anchor" href="#主应用配置" aria-hidden="true">#</a> 主应用配置</h2><h3 id="第一步-注册子应用" tabindex="-1"><a class="header-anchor" href="#第一步-注册子应用" aria-hidden="true">#</a> 第一步:注册子应用</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 注册子应用信息</span> @@ -23,7 +41,7 @@ <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'app1'</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span> <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'//localhost:8001'</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span> - <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">// 传递给子应用的数据</span> + <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 传递给子应用的数据</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'app2'</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span> @@ -33,60 +51,62 @@ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="第二步-装载子应用" tabindex="-1"><a class="header-anchor" href="#第二步-装载子应用" aria-hidden="true">#</a> 第二步:装载子应用</h3><h4 id="使用路由绑定的方式" tabindex="-1"><a class="header-anchor" href="#使用路由绑定的方式" aria-hidden="true">#</a> 使用路由绑定的方式</h4><div class="custom-container warning"><p class="custom-container-title">注意</p><p>主应用和子应用需要自行适配路由路径!!!待完善...</p></div><p>假设我们的系统之前有这样的一些路由:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当使用 <code>vite</code> 构建时需注意,<strong>name</strong> 必须跟子应用 <code>package.json</code>的 <code>name</code>保持一致。</p><h3 id="第二步-装载子应用" tabindex="-1"><a class="header-anchor" href="#第二步-装载子应用" aria-hidden="true">#</a> 第二步:装载子应用</h3><h4 id="使用路由绑定的方式" tabindex="-1"><a class="header-anchor" href="#使用路由绑定的方式" aria-hidden="true">#</a> 使用路由绑定的方式</h4><div class="custom-container warning"><p class="custom-container-title">注意</p><p>主应用和子应用需要自行适配路由路径!!!待完善...</p></div><p>假设我们的系统之前有这样的一些路由:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> - <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span> - <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/src/.fes/plugin-layout/index.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> - <span class="token string-property property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span> - <span class="token punctuation">{</span> - <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/onepiece"</span><span class="token punctuation">,</span> - <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/onepiece'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> - <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span><span class="token punctuation">,</span> - <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span><span class="token punctuation">,</span> - <span class="token string-property property">"title"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> - <span class="token punctuation">]</span> - <span class="token punctuation">}</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>我们现在想在 <code>/son</code> 加载子应用 <code>app1</code>,只需要增加这样一些配置即可:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> + <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/src/.fes/plugin-layout/index.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/onepiece'</span><span class="token punctuation">,</span> + <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/onepiece'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>我们现在想在 <code>/son</code> 加载子应用 <code>app1</code>,只需要增加这样一些配置即可:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> - <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span> - <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/src/.fes/plugin-layout/index.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> - <span class="token string-property property">"children"</span><span class="token operator">:</span> <span class="token punctuation">[</span> - <span class="token punctuation">{</span> - <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/onepiece"</span><span class="token punctuation">,</span> - <span class="token string-property property">"component"</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/onepiece'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> - <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span><span class="token punctuation">,</span> - <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span><span class="token punctuation">,</span> - <span class="token string-property property">"title"</span><span class="token operator">:</span> <span class="token string">"onepiece"</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">{</span> - <span class="token string-property property">"path"</span><span class="token operator">:</span> <span class="token string">"/son"</span><span class="token punctuation">,</span> - <span class="token string-property property">"meta"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"son"</span><span class="token punctuation">,</span> - <span class="token string-property property">"title"</span><span class="token operator">:</span> <span class="token string">"子应用"</span><span class="token punctuation">,</span> - <span class="token string-property property">"microApp"</span><span class="token operator">:</span> <span class="token string">"app1"</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> - <span class="token punctuation">]</span> - <span class="token punctuation">}</span><span class="token punctuation">]</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><p>当前我们依然提倡约定路由的方式,在<code>src/pages</code> 目录新建 <code>son.vue</code>:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span><span class="token punctuation">></span></span> + <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> + <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/src/.fes/plugin-layout/index.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/onepiece'</span><span class="token punctuation">,</span> + <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/onepiece'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">{</span> + <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/son'</span><span class="token punctuation">,</span> + <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'son'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在<code>src/pages</code> 目录新建 <code>son.vue</code>:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span><span class="token punctuation">></span></span> { "name": "son", "title": "子应用", "microApp": "app1" } <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>config</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="使用-microapp-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microapp-组件的方式" aria-hidden="true">#</a> 使用 <code><MicroApp /></code> 组件的方式</h4><div class="custom-container tip"><p class="custom-container-title">提示</p><p>建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上,否则很容易出现子应用加载了,但是页面没有渲染出来的情况。</p></div><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="使用-microapp-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microapp-组件的方式" aria-hidden="true">#</a> 使用 <code><MicroApp /></code> 组件的方式</h4><div class="custom-container tip"><p class="custom-container-title">提示</p><p>建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上,否则很容易出现子应用加载了,但是页面没有渲染出来的情况。</p></div><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> @@ -94,36 +114,43 @@ <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> - <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">"app1"</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'app1'</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> - name - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> + name<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h4 id="使用-microappwithmemohistory-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microappwithmemohistory-组件的方式" aria-hidden="true">#</a> 使用 <code><MicroAppWithMemoHistory /></code> 组件的方式</h4><p>如果我们的路由使用 <code>history</code> 模式,那么在使用乾坤时还算方便,主应用和子应用的路由根据base可以很方便的匹配起来,而且不存在冲突。但是当我们使用 <code>hash</code> 模式时,就问题很大,主应用和子应用的路由必须一样才可以匹配上,用起来贼不方便。而且不能在一个页面上同时加载多个子应用,路由存在冲突!这时候,<code><MicroAppWithMemoHistory /></code> 出现了,完美解决上面的问题。</p><p><code><MicroAppWithMemoHistory /></code> 相比 <code><MicroApp /></code> ,需要多传入 <code>url</code> 参数,用于指定加载子应用什么路由页面。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="使用-microappwithmemohistory-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microappwithmemohistory-组件的方式" aria-hidden="true">#</a> 使用 <code><MicroAppWithMemoHistory /></code> 组件的方式</h4><p>如果我们的路由使用 <code>history</code> 模式,那么在使用乾坤时还算方便,主应用和子应用的路由根据 base 可以很方便的匹配起来,而且不存在冲突。但是当我们使用 <code>hash</code> 模式时,就问题很大,主应用和子应用的路由必须一样才可以匹配上,用起来贼不方便。而且不能在一个页面上同时加载多个子应用,路由存在冲突!这时候,<code><MicroAppWithMemoHistory /></code> 出现了,完美解决上面的问题。</p><p><code><MicroAppWithMemoHistory /></code> 相比 <code><MicroApp /></code> ,需要多传入 <code>url</code> 参数,用于指定加载子应用什么路由页面。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> - <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">"app1"</span> - <span class="token keyword">return</span> <span class="token punctuation">{</span> - name - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> + <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'app1'</span><span class="token punctuation">;</span> + <span class="token keyword">return</span> <span class="token punctuation">{</span> + name<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="子应用配置" tabindex="-1"><a class="header-anchor" href="#子应用配置" aria-hidden="true">#</a> 子应用配置</h2><h3 id="第一步-插件注册" tabindex="-1"><a class="header-anchor" href="#第一步-插件注册" aria-hidden="true">#</a> 第一步:插件注册</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="子应用配置" tabindex="-1"><a class="header-anchor" href="#子应用配置" aria-hidden="true">#</a> 子应用配置</h2><h3 id="第一步-插件注册" tabindex="-1"><a class="header-anchor" href="#第一步-插件注册" aria-hidden="true">#</a> 第一步:插件注册</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">micro</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="第二步-配置运行时生命周期钩子-可选" tabindex="-1"><a class="header-anchor" href="#第二步-配置运行时生命周期钩子-可选" aria-hidden="true">#</a> 第二步:配置运行时生命周期钩子(可选)</h3><p>插件会自动为你创建好 <code>qiankun</code> 子应用需要的生命周期钩子,但是如果你想在生命周期期间加一些自定义逻辑,可以在子应用的 <code>src/app.js</code> 里导出 <code>qiankun</code> 对象,并实现每一个生命周期钩子,其中钩子函数的入参 <code>props</code> 由主应用自动注入。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> qiankun <span class="token operator">=</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果使用 <code>vite</code> 构建,当执行 <code>dev</code> 时需要额外配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">micro</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">useDevMode</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="第二步-配置运行时生命周期钩子-可选" tabindex="-1"><a class="header-anchor" href="#第二步-配置运行时生命周期钩子-可选" aria-hidden="true">#</a> 第二步:配置运行时生命周期钩子(可选)</h3><p>插件会自动为你创建好 <code>qiankun</code> 子应用需要的生命周期钩子,但是如果你想在生命周期期间加一些自定义逻辑,可以在子应用的 <code>src/app.js</code> 里导出 <code>qiankun</code> 对象,并实现每一个生命周期钩子,其中钩子函数的入参 <code>props</code> 由主应用自动注入。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> qiankun <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// 应用加载之前</span> <span class="token keyword">async</span> <span class="token function">bootstrap</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 bootstrap'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span> @@ -133,7 +160,7 @@ console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 mount'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 当 props 更新时触发</span> - <span class="token keyword">async</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token keyword">async</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 update'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// 应用卸载之后触发</span> @@ -141,14 +168,13 @@ console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'app1 unmount'</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="父子应用通讯" tabindex="-1"><a class="header-anchor" href="#父子应用通讯" aria-hidden="true">#</a> 父子应用通讯</h2><p>有两种方式实现</p><h3 id="配合-usemodel-使用" tabindex="-1"><a class="header-anchor" href="#配合-usemodel-使用" aria-hidden="true">#</a> 配合 <a href="/fes.js/reference/plugin/plugins/model.html" class="">useModel</a> 使用</h3><p>确保已经安装了 <code>@fesjs/plugin-model</code>:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="父子应用通讯" tabindex="-1"><a class="header-anchor" href="#父子应用通讯" aria-hidden="true">#</a> 父子应用通讯</h2><p>有两种方式实现</p><h3 id="配合-usemodel-使用" tabindex="-1"><a class="header-anchor" href="#配合-usemodel-使用" aria-hidden="true">#</a> 配合 <a href="/reference/plugin/plugins/model.html" class="">useModel</a> 使用</h3><p>确保已经安装了 <code>@fesjs/plugin-model</code>:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="主应用传递-props" tabindex="-1"><a class="header-anchor" href="#主应用传递-props" aria-hidden="true">#</a> 主应用传递 props</h4><ul><li>如果使用 <code>MicroApp</code> 组件模式消费子应用,直接通过 props 传递即可:</li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="主应用传递-props" tabindex="-1"><a class="header-anchor" href="#主应用传递-props" aria-hidden="true">#</a> 主应用传递 props</h4><ul><li>如果使用 <code>MicroApp</code> 组件模式消费子应用,直接通过 props 传递即可:</li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token attr-name">:user</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> @@ -156,35 +182,35 @@ <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> - <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">"app1"</span> - <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'app1'</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> name<span class="token punctuation">,</span> - user - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> + user<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><ul><li>如果使用路由绑定式消费子应用,那么约定<code>src/models/qiankunStateForMicro.js</code> 的模型数据将作为 <code>props</code> 船体给子应用,如:</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>如果使用路由绑定式消费子应用,那么约定<code>src/models/qiankunStateForMicro.js</code> 的模型数据将作为 <code>props</code> 船体给子应用,如:</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> - state + state<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h4 id="子应用消费-props" tabindex="-1"><a class="header-anchor" href="#子应用消费-props" aria-hidden="true">#</a> 子应用消费 props</h4><p>子应用中会自动生成一个全局名为 <code>qiankunStateFromMain</code> 的 <code>model</code>, 可以在任意组件中获取主应用透传的 <code>props</code> 的值。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="子应用消费-props" tabindex="-1"><a class="header-anchor" href="#子应用消费-props" aria-hidden="true">#</a> 子应用消费 props</h4><p>子应用中会自动生成一个全局名为 <code>qiankunStateFromMain</code> 的 <code>model</code>, 可以在任意组件中获取主应用透传的 <code>props</code> 的值。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> + <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> mainState <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">'qiankunStateFromMain'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> - mainState + mainState<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="基于-props-传递" tabindex="-1"><a class="header-anchor" href="#基于-props-传递" aria-hidden="true">#</a> 基于 props 传递</h3><ul><li>主应用使用 props 的模式传递数据(参考主应用装载子应用配置一节)</li><li>子应用在生命周期钩子中获取 props 消费数据(参考子应用运行时配置一节)</li></ul><h3 id="microapp" tabindex="-1"><a class="header-anchor" href="#microapp" aria-hidden="true">#</a> MicroApp</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称,传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称,配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr></tbody></table><h3 id="microappwithmemohistory" tabindex="-1"><a class="header-anchor" href="#microappwithmemohistory" aria-hidden="true">#</a> MicroAppWithMemoHistory</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称,传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称,配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr><tr><td>url</td><td>子应用的路由地址</td><td>String</td><td>-</td></tr></tbody></table><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/qiankun.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="基于-props-传递" tabindex="-1"><a class="header-anchor" href="#基于-props-传递" aria-hidden="true">#</a> 基于 props 传递</h3><ul><li>主应用使用 props 的模式传递数据(参考主应用装载子应用配置一节)</li><li>子应用在生命周期钩子中获取 props 消费数据(参考子应用运行时配置一节)</li></ul><h3 id="microapp" tabindex="-1"><a class="header-anchor" href="#microapp" aria-hidden="true">#</a> MicroApp</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称,传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称,配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr></tbody></table><h3 id="microappwithmemohistory" tabindex="-1"><a class="header-anchor" href="#microappwithmemohistory" aria-hidden="true">#</a> MicroAppWithMemoHistory</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称,传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称,配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr><tr><td>url</td><td>子应用的路由地址</td><td>String</td><td>-</td></tr></tbody></table></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/qiankun.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/vuex.html" class="" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/windicss.html" class="" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/request.html b/reference/plugin/plugins/request.html index b49d1920..c4e5d819 100644 --- a/reference/plugin/plugins/request.html +++ b/reference/plugin/plugins/request.html @@ -3,67 +3,90 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-request | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/request.html.08c691d1.js"><link rel="modulepreload" href="/assets/request.html.d16e6c85.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#构建时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="构建时配置"><!--[--><!--]--> 构建时配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#运行时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="使用"><!--[--><!--]--> 使用 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#发起一个普通-post-请求" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="发起一个普通 post 请求"><!--[--><!--]--> 发起一个普通 post 请求 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#merge-重复请求" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="merge 重复请求"><!--[--><!--]--> merge 重复请求 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#请求节流-即将废弃" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="请求节流(即将废弃)"><!--[--><!--]--> 请求节流(即将废弃) <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#请求缓存" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="请求缓存"><!--[--><!--]--> 请求缓存 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#结合-use-使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="结合 use 使用"><!--[--><!--]--> 结合 use 使用 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#配置拦截器" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置拦截器"><!--[--><!--]--> 配置拦截器 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#request" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="request"><!--[--><!--]--> request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/request.html#userequest" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="useRequest"><!--[--><!--]--> useRequest <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-request" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-request" aria-hidden="true">#</a> @fesjs/plugin-request</h1><p>基于 axios 封装的 request,内置防止重复请求、请求节流、错误处理等功能。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/request.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/request.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/request.html#运行时配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="运行时配置"><!--[--><!--]--> 运行时配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/request.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/request.html#request" class="router-link-active router-link-exact-active sidebar-item" aria-label="request"><!--[--><!--]--> request <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/request.html#userequest" class="router-link-active router-link-exact-active sidebar-item" aria-label="useRequest"><!--[--><!--]--> useRequest <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/request.html#使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="使用"><!--[--><!--]--> 使用 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/request.html#发起一个普通-post-请求" class="router-link-active router-link-exact-active sidebar-item" aria-label="发起一个普通 post 请求"><!--[--><!--]--> 发起一个普通 post 请求 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/request.html#merge-重复请求" class="router-link-active router-link-exact-active sidebar-item" aria-label="merge 重复请求"><!--[--><!--]--> merge 重复请求 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/request.html#请求缓存" class="router-link-active router-link-exact-active sidebar-item" aria-label="请求缓存"><!--[--><!--]--> 请求缓存 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/request.html#结合-use-使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="结合 use 使用"><!--[--><!--]--> 结合 use 使用 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-request" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-request" aria-hidden="true">#</a> @fesjs/plugin-request</h1><p>基于 axios 封装的 request,内置防止重复请求、请求缓存、错误处理等功能。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="构建时配置" tabindex="-1"><a class="header-anchor" href="#构建时配置" aria-hidden="true">#</a> 构建时配置</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> - <span class="token literal-property property">request</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">dataField</span><span class="token operator">:</span> <span class="token string">'result'</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="datafield" tabindex="-1"><a class="header-anchor" href="#datafield" aria-hidden="true">#</a> dataField</h4><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>''</code></p></li><li><p>详情:</p><p><code>dataField</code> 对应接口统一格式中的数据字段,比如接口如果统一的规范是 <code>{ success: boolean, result: any}</code> ,那么就不需要配置,这样你通过 <code>useRequest</code> 消费的时候会生成一个默认的 <code>formatResult</code>,直接返回 <code>result</code> 中的数据,方便使用。如果你的后端接口不符合这个规范,可以自行配置 <code>dataField</code>。配置为 <code>''</code>(空字符串)的时候不做处理。</p></li></ul><h4 id="base-即将废弃" tabindex="-1"><a class="header-anchor" href="#base-即将废弃" aria-hidden="true">#</a> base(即将废弃)</h4><ul><li><p>类型: <code>string</code></p></li><li><p>默认值: <code>''</code></p></li><li><p>详情:</p><p><code>base</code> 接口前缀。</p></li></ul><div class="custom-container warning"><p class="custom-container-title">即将废弃</p><p>这个字段将在下个版本废弃,推荐使用 <a href="https://github.com/axios/axios" target="_blank" rel="noopener noreferrer">axios baseURL<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>。</p></div><h3 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h3><p>在 <code>app.js</code> 中进行运行时配置。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token punctuation">{</span> - <span class="token comment">// 格式化 response.data (只有 response.data 类型为 object 才会调用)</span> - <span class="token function-variable function">responseDataAdaptor</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - data<span class="token punctuation">.</span>code <span class="token operator">=</span> data<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">'200'</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">:</span> data<span class="token punctuation">.</span>code<span class="token punctuation">;</span> - <span class="token keyword">return</span> data<span class="token punctuation">;</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token comment">// 关闭 response data 校验(只判断 xhr status)</span> - <span class="token literal-property property">closeResDataCheck</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> - <span class="token comment">// 请求拦截器 http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8</span> - <span class="token literal-property property">requestInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token comment">// 响应拦截器</span> - <span class="token literal-property property">responseInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token comment">// 错误处理</span> - <span class="token comment">// 内部以 reponse.data.code === '0' 判断请求是否成功</span> - <span class="token comment">// 若使用其他字段判断,可以使用 responseDataAdaptor 对响应数据进行格式</span> - <span class="token literal-property property">errorHandler</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token number">11199</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token comment">// 特殊 code 处理逻辑</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token number">404</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token keyword">default</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token comment">// 异常统一处理</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token comment">// 其他 axios 配置</span> - <span class="token operator">...</span>otherConfigs -<span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h4 id="skiperrorhandler" tabindex="-1"><a class="header-anchor" href="#skiperrorhandler" aria-hidden="true">#</a> skipErrorHandler</h4><ul><li><p>类型: <code>boolean | string | number | array<string | number></code></p></li><li><p>默认值: ``</p></li><li><p>详情:</p><p>指定当前请求的某些错误状态不走 <code>errorHandler</code>,单独进行处理。如果设置为 <code>true</code>,当前请求的错误处理都不走 <code>errorHandler</code>。</p></li><li><p>示列:</p></li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><p>入口文件的全局配置,具体请求的配置参数会覆盖全局配置,支持 <a href="https://axios-http.com/zh/docs/req_config" target="_blank" rel="noopener noreferrer">axios<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 所有的参数。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineRuntimeConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> -<span class="token function">request</span><span class="token punctuation">(</span><span class="token string">'/api/login'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token literal-property property">skipErrorHandler</span><span class="token operator">:</span> <span class="token string">'110'</span> -<span class="token punctuation">}</span><span class="token punctuation">)</span> - <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token comment">// do something</span> - <span class="token punctuation">}</span><span class="token punctuation">)</span> - <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> - <span class="token comment">// 这里处理 code 为 110 的异常</span> - <span class="token comment">// 此时 errorHandler[110] 函数不会生效,也不会执行 errorHandler.default</span> - <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><h3 id="发起一个普通-post-请求" tabindex="-1"><a class="header-anchor" href="#发起一个普通-post-请求" aria-hidden="true">#</a> 发起一个普通 post 请求</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineRuntimeConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> + <span class="token literal-property property">request</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token comment">// API 前缀</span> + <span class="token literal-property property">baseURL</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> + <span class="token function">dataHandler</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 处理响应内容异常</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">!==</span> <span class="token string">'0'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">'10000'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + FMesseage<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>code <span class="token operator">===</span> <span class="token string">'20000'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + FMesseage<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'hello world'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + <span class="token comment">// 响应数据格式化</span> + <span class="token keyword">return</span> data<span class="token operator">?.</span>result <span class="token operator">?</span> data<span class="token punctuation">.</span>result <span class="token operator">:</span> data<span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token comment">// http 异常,和插件异常</span> + <span class="token function">errorHandler</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status<span class="token punctuation">)</span><span class="token punctuation">;</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>headers<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>request<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 请求已经成功发起,但没有收到响应</span> + <span class="token comment">// `error.request` 在浏览器中是 XMLHttpRequest 的实例,</span> + <span class="token comment">// 而在node.js中是 http.ClientRequest 的实例</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>request<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// 插件异常</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + <span class="token comment">// 发送请求时出了点问题</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Error'</span><span class="token punctuation">,</span> error<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>config<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token comment">// 请求拦截器</span> + <span class="token literal-property property">requestInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token comment">// 响应拦截器</span> + <span class="token literal-property property">responseInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> + <span class="token comment">// 支持其他 axios 配置</span> + <span class="token operator">...</span>otherConfigs<span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="request" tabindex="-1"><a class="header-anchor" href="#request" aria-hidden="true">#</a> request</h3><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>:请求后端接口</p></li><li><p><strong>参数</strong>:</p><ul><li>url: 后端接口 url</li><li>data: 参数</li><li>options: 配置支持 <a href="https://axios-http.com/zh/docs/req_config" target="_blank" rel="noopener noreferrer">axios<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a> 所有的参数,和插件扩展参数。</li></ul></li><li><p><strong>返回值</strong>: Promise</p></li></ul><h3 id="userequest" tabindex="-1"><a class="header-anchor" href="#userequest" aria-hidden="true">#</a> useRequest</h3><p>request 的封装,返回响应式 <code>loading</code>、<code>error</code>、 <code>data</code></p><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><h3 id="发起一个普通-post-请求" tabindex="-1"><a class="header-anchor" href="#发起一个普通-post-请求" aria-hidden="true">#</a> 发起一个普通 post 请求</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token string">'/api/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span> - <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span> + <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// do something</span> @@ -71,17 +94,17 @@ <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// 处理异常</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="merge-重复请求" tabindex="-1"><a class="header-anchor" href="#merge-重复请求" aria-hidden="true">#</a> merge 重复请求</h3><p>连续发送多个请求,会被合并成一个请求,不会报 <code>REPEAT</code> 接口错误。</p><p>当发生 <code>REPEAT</code> 请求异常,并且确保自身代码合理的情况下,可以使用该配置。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="merge-重复请求" tabindex="-1"><a class="header-anchor" href="#merge-重复请求" aria-hidden="true">#</a> merge 重复请求</h3><p>连续发送多个请求,会被合并成一个请求,不会报 <code>REPEAT</code> 接口错误。</p><p>当发生 <code>REPEAT</code> 请求异常,并且确保自身代码合理的情况下,可以使用该配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token function">request</span><span class="token punctuation">(</span> <span class="token string">'/api/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span> - <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span> + <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> - <span class="token literal-property property">mergeRequest</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 在一个请求没有回来前,重复发送的请求会合并成一个请求</span> - <span class="token punctuation">}</span> + <span class="token literal-property property">mergeRequest</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 在一个请求没有回来前,重复发送的请求会合并成一个请求</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// do something</span> @@ -89,20 +112,20 @@ <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// 处理异常</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="请求节流-即将废弃" tabindex="-1"><a class="header-anchor" href="#请求节流-即将废弃" aria-hidden="true">#</a> 请求节流(即将废弃)</h3><div class="custom-container warning"><p class="custom-container-title">即将废弃</p><p>因为 request 的请求总会有一个 promise 结果,要么成功,要么失败,和防抖、节流的语义不一致,防抖、节流只是函数的不执行</p></div><h3 id="请求缓存" tabindex="-1"><a class="header-anchor" href="#请求缓存" aria-hidden="true">#</a> 请求缓存</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="请求缓存" tabindex="-1"><a class="header-anchor" href="#请求缓存" aria-hidden="true">#</a> 请求缓存</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token function">request</span><span class="token punctuation">(</span> <span class="token string">'/api/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span> - <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span> + <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">cache</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">cacheType</span><span class="token operator">:</span> <span class="token string">'ram'</span><span class="token punctuation">,</span> <span class="token comment">// ram: 内存,session: sessionStorage,local:localStorage</span> - <span class="token literal-property property">cacheTime</span><span class="token operator">:</span> <span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">3</span> <span class="token comment">// 缓存时间:默认3min</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> + <span class="token literal-property property">cacheTime</span><span class="token operator">:</span> <span class="token number">1000</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">// 缓存时间:默认3min</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// do something</span> @@ -110,58 +133,23 @@ <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// 处理异常</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>若 <code>cache</code> 传 <code>true</code>,则默认使用 <code>ram</code> 缓存类型,缓存时间 3min。</p><h3 id="结合-use-使用" tabindex="-1"><a class="header-anchor" href="#结合-use-使用" aria-hidden="true">#</a> 结合 use 使用</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRequest <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>若 <code>cache</code> 传 <code>true</code>,则默认使用 <code>ram</code> 缓存类型,缓存时间 3min。</p><h3 id="结合-use-使用" tabindex="-1"><a class="header-anchor" href="#结合-use-使用" aria-hidden="true">#</a> 结合 use 使用</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRequest <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> loading<span class="token punctuation">,</span> data<span class="token punctuation">,</span> error <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useRequest</span><span class="token punctuation">(</span><span class="token string">'/api/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'robby'</span><span class="token punctuation">,</span> - <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span> + <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> loading<span class="token punctuation">,</span> data<span class="token punctuation">,</span> - error + error<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="配置拦截器" tabindex="-1"><a class="header-anchor" href="#配置拦截器" aria-hidden="true">#</a> 配置拦截器</h3><p>函数的参数格式:<a href="http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8" target="_blank" rel="noopener noreferrer">传送门<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>;</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token punctuation">{</span> - <span class="token literal-property property">requestInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span> - <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token comment">// 在发送请求之前做些什么</span> - <span class="token keyword">return</span> config<span class="token punctuation">;</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">[</span> - <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token comment">// 在发送请求之前做些什么</span> - <span class="token keyword">return</span> config<span class="token punctuation">;</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token comment">// 对请求错误做些什么</span> - <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> - <span class="token punctuation">]</span> - <span class="token punctuation">]</span><span class="token punctuation">,</span> - <span class="token comment">// 响应拦截器</span> - <span class="token literal-property property">responseInterceptors</span><span class="token operator">:</span> <span class="token punctuation">[</span> - <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token comment">// 对响应数据做点什么</span> - <span class="token keyword">return</span> response<span class="token punctuation">;</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token punctuation">[</span> - <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token comment">// 对响应数据做点什么</span> - <span class="token keyword">return</span> response<span class="token punctuation">;</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> - <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token comment">// 对响应错误做点什么</span> - <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> - <span class="token punctuation">]</span> - <span class="token punctuation">]</span> -<span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="request" tabindex="-1"><a class="header-anchor" href="#request" aria-hidden="true">#</a> request</h3><ul><li><p><strong>类型</strong>:函数</p></li><li><p><strong>详情</strong>:请求后端接口</p></li><li><p><strong>参数</strong>:</p><ul><li>url: 后端接口 url</li><li>data: 参数</li><li>options: 配置( 支持 axios 所有配置)</li></ul></li><li><p><strong>返回值</strong>: Promise</p></li></ul><h3 id="userequest" tabindex="-1"><a class="header-anchor" href="#userequest" aria-hidden="true">#</a> useRequest</h3><p>request 的封装,返回响应式 <code>loading</code>、<code>error</code>、 <code>data</code></p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/request.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/request.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/model.html" class="" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/vuex.html" class="" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/sass.html b/reference/plugin/plugins/sass.html index d847969f..148dc4ee 100644 --- a/reference/plugin/plugins/sass.html +++ b/reference/plugin/plugins/sass.html @@ -3,21 +3,38 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-sass | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/sass.html.9236bc5e.js"><link rel="modulepreload" href="/assets/sass.html.be3aee7e.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/sass.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/sass.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/sass.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/sass.html#global-css" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="global css"><!--[--><!--]--> global css <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/sass.html#vue-单文件组件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="Vue 单文件组件"><!--[--><!--]--> Vue 单文件组件 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-sass" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-sass" aria-hidden="true">#</a> @fesjs/plugin-sass</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>Fes.js 默认只支持 <code>less</code>,通过此插件扩展支持 <code>sass</code></p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/sass.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/sass.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/sass.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/sass.html#global-css" class="router-link-active router-link-exact-active sidebar-item" aria-label="global css"><!--[--><!--]--> global css <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/sass.html#vue-单文件组件" class="router-link-active router-link-exact-active sidebar-item" aria-label="Vue 单文件组件"><!--[--><!--]--> Vue 单文件组件 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-sass" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-sass" aria-hidden="true">#</a> @fesjs/plugin-sass</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>Fes.js 默认只支持 <code>less</code>,通过此插件扩展支持 <code>sass</code>。</p><div class="custom-container tip"><p class="custom-container-title">webpack 构建 sass 插件</p><p>如果使用 Vite 构建,直接装 <code>sass</code> 依赖即可,不需要安装此插件。</p></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-sass"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> - <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-sass"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="global-css" tabindex="-1"><a class="header-anchor" href="#global-css" aria-hidden="true">#</a> global css</h2><p>添加 <code>src/global.scss</code> 和 <code>src/global.sass</code> 为全局CSS入口,添加一些通用样式内容。</p><h2 id="vue-单文件组件" tabindex="-1"><a class="header-anchor" href="#vue-单文件组件" aria-hidden="true">#</a> Vue 单文件组件</h2><p>Vue 单文件组件的 <code><style></style></code> 添加 <code>lang='scss'</code>,例如:</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scss<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> -</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/sass.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="global-css" tabindex="-1"><a class="header-anchor" href="#global-css" aria-hidden="true">#</a> global css</h2><p>添加 <code>src/global.scss</code> 和 <code>src/global.sass</code> 为全局 CSS 入口,添加一些通用样式内容。</p><h2 id="vue-单文件组件" tabindex="-1"><a class="header-anchor" href="#vue-单文件组件" aria-hidden="true">#</a> Vue 单文件组件</h2><p>Vue 单文件组件的 <code><style></style></code> 添加 <code>lang='scss'</code>,例如:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scss<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/sass.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/windicss.html" class="" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/editor.html" class="" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/swc.html b/reference/plugin/plugins/swc.html new file mode 100644 index 00000000..cacd2c5b --- /dev/null +++ b/reference/plugin/plugins/swc.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html lang="zh-CN"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> + <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-swc | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/swc.html.1459de3d.js"><link rel="modulepreload" href="/assets/swc.html.86a67f1f.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> + </head> + <body> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/swc.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/swc.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/swc.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/swc.html#编译时配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-swc" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-swc" aria-hidden="true">#</a> @fesjs/plugin-swc</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>webpack 启用 swc,构建速度更快!</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> + <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-swc"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>传对象时使用swc进行编译和压缩,<a href="https://swc.rs/docs/configuration/swcrc" target="_blank" rel="noopener noreferrer">loader配置<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>,默认usage模式。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">swc</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token punctuation">{</span> + <span class="token literal-property property">coreJs</span><span class="token operator">:</span> <span class="token string">'3.27'</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/swc.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/login.html" class="" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> + </body> +</html> diff --git a/reference/plugin/plugins/vuex.html b/reference/plugin/plugins/vuex.html index d5049d27..e6366cf6 100644 --- a/reference/plugin/plugins/vuex.html +++ b/reference/plugin/plugins/vuex.html @@ -3,39 +3,57 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-vuex | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/vuex.html.1794fc22.js"><link rel="modulepreload" href="/assets/vuex.html.3e9bd488.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html#配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html#场景使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="场景使用"><!--[--><!--]--> 场景使用 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html#vuex插件" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="vuex插件"><!--[--><!--]--> vuex插件 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html#api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html#store" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="store"><!--[--><!--]--> store <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html#mutation-types" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="MUTATION_TYPES"><!--[--><!--]--> MUTATION_TYPES <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html#getter-types" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="GETTER_TYPES"><!--[--><!--]--> GETTER_TYPES <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/vuex.html#action-types" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="ACTION_TYPES"><!--[--><!--]--> ACTION_TYPES <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-vuex" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-vuex" aria-hidden="true">#</a> @fesjs/plugin-vuex</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>集成vuex插件</p><p>增强vuex,导出所有的<code>mutations</code>、<code>actions</code>和<code>getter</code>的事件类型,编辑器提示</p><p>约定模式,module和plugin定义放在stores目录下,文件名包含plugin被解析为插件,无需额外配置,定义即可用。</p><div class="language-text ext-text line-numbers-mode"><pre class="language-text"><code>└── src + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html#配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html#场景使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="场景使用"><!--[--><!--]--> 场景使用 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html#vuex-插件" class="router-link-active router-link-exact-active sidebar-item" aria-label="vuex 插件"><!--[--><!--]--> vuex 插件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html#store" class="router-link-active router-link-exact-active sidebar-item" aria-label="store"><!--[--><!--]--> store <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html#mutation-types" class="router-link-active router-link-exact-active sidebar-item" aria-label="MUTATION_TYPES"><!--[--><!--]--> MUTATION_TYPES <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html#getter-types" class="router-link-active router-link-exact-active sidebar-item" aria-label="GETTER_TYPES"><!--[--><!--]--> GETTER_TYPES <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/vuex.html#action-types" class="router-link-active router-link-exact-active sidebar-item" aria-label="ACTION_TYPES"><!--[--><!--]--> ACTION_TYPES <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-vuex" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-vuex" aria-hidden="true">#</a> @fesjs/plugin-vuex</h1><div class="custom-container tip"><p class="custom-container-title">提示</p><p>vue3+ 官方推荐使用<a href="./pinia">pinia</a>,不在推荐使用 vuex。</p></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>集成 vuex 插件</p><p>增强 vuex,导出所有的<code>mutations</code>、<code>actions</code>和<code>getter</code>的事件类型,编辑器提示</p><p>约定模式,module 和 plugin 定义放在 stores 目录下,文件名包含 plugin 被解析为插件,无需额外配置,定义即可用。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>└── src ├── pages │ └── index.vue - └── stores + └── stores │ └── foo │ │ └── bar.js │ ├── counter.js - │ ├── plugin-logger.js + │ ├── plugin-logger.js │ ├── user.js └── app.js -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>为了防止<code>fesjs</code>与<code>vuex</code>的export冲突,fesjs不提供导出vuex的任何api。你可以直接使用vuex的api</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>为了防止<code>fesjs</code>与<code>vuex</code>的 export 冲突,fesjs 不提供导出 vuex 的任何 api。你可以直接使用 vuex 的 api</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div></div><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-vuex"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-vuex"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><p>在 <code>.fes.js</code> 中配置:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">vuex</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">strict</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 开启严格模式</span> - <span class="token punctuation">}</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="场景使用" tabindex="-1"><a class="header-anchor" href="#场景使用" aria-hidden="true">#</a> 场景使用</h2><p>先定义在stores下定义user模块,包含嵌套模块</p><p>stores/user.js</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> + <span class="token literal-property property">strict</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启严格模式</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="场景使用" tabindex="-1"><a class="header-anchor" href="#场景使用" aria-hidden="true">#</a> 场景使用</h2><p>先定义在 stores 下定义 user 模块,包含嵌套模块</p><p>stores/user.js</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">namespaced</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'aring'</span><span class="token punctuation">,</span> - <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span> + <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">login</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> @@ -45,52 +63,54 @@ <span class="token function">reslove</span><span class="token punctuation">(</span><span class="token string">'OK'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">province</span><span class="token operator">:</span> <span class="token string">'广东省'</span><span class="token punctuation">,</span> <span class="token literal-property property">city</span><span class="token operator">:</span> <span class="token string">'深圳市'</span><span class="token punctuation">,</span> - <span class="token literal-property property">zone</span><span class="token operator">:</span> <span class="token string">'南山区'</span> + <span class="token literal-property property">zone</span><span class="token operator">:</span> <span class="token string">'南山区'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">address</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> state<span class="token punctuation">.</span>province <span class="token operator">+</span> state<span class="token punctuation">.</span>city <span class="token operator">+</span> state<span class="token punctuation">.</span>zone<span class="token punctuation">;</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><p>stores/foo/bar.js</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>stores/foo/bar.js</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">namespaced</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> - <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span> + <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> state<span class="token punctuation">.</span>count<span class="token operator">++</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">doubleCount</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> state<span class="token punctuation">.</span>count <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function">asyncIncrement</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'increment'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>导出的<code>mutations</code>、<code>actions</code>和<code>getter</code>的事件类型,将会按文件命名;</p><p>如<code>ACTION_TYPES.user.login</code>指向user模块中actions的login方法</p><p>如<code>GETTER_TYPES.user.address</code>指向user模块中嵌套的address getter</p><p>如<code>MUTATION_TYPES.fooBar.increment</code>指向foo/bar模块中mutations的increment方法</p></div><p>在vue文件中使用store</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>导出的<code>mutations</code>、<code>actions</code>和<code>getter</code>的事件类型,将会按文件命名;</p><p>如<code>ACTION_TYPES.user.login</code>指向 user 模块中 actions 的 login 方法</p><p>如<code>GETTER_TYPES.user.address</code>指向 user 模块中嵌套的 address getter</p><p>如<code>MUTATION_TYPES.fooBar.increment</code>指向 foo/bar 模块中 mutations 的 increment 方法</p></div><p>在 vue 文件中使用 store</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Vuex<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>login<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>async login<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fooBarIncrement<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>foo/bar:{{fooBarDoubleCount}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{address}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fooBarIncrement<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>foo/bar:{{ fooBarDoubleCount }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{ address }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>config</span><span class="token punctuation">></span></span> @@ -121,15 +141,14 @@ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">fooBarIncrement</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token constant">MUTATION_TYPES</span><span class="token punctuation">.</span>fooBar<span class="token punctuation">.</span>increment<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// foo/bar目录会解析成驼峰fooBar</span> - <span class="token literal-property property">fooBarDoubleCount</span><span class="token operator">:</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token constant">GETTER_TYPES</span><span class="token punctuation">.</span>fooBar<span class="token punctuation">.</span>doubleCount<span class="token punctuation">]</span><span class="token punctuation">)</span> + <span class="token literal-property property">fooBarDoubleCount</span><span class="token operator">:</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token constant">GETTER_TYPES</span><span class="token punctuation">.</span>fooBar<span class="token punctuation">.</span>doubleCount<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> - <span class="token punctuation">}</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> - -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>由于该插件注册在onAppCreated中,如果在onAppCreated及之前使用useStore时,获取不到vuex实例</p><p><code>fesjs</code>导出了vuex实例<code>store</code>,如在app.js文件中</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> store<span class="token punctuation">,</span> <span class="token constant">GETTER_TYPES</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> -console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token constant">GETTER_TYPES</span><span class="token punctuation">.</span>user<span class="token punctuation">.</span>address<span class="token punctuation">]</span><span class="token punctuation">)</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div><h2 id="vuex插件" tabindex="-1"><a class="header-anchor" href="#vuex插件" aria-hidden="true">#</a> vuex插件</h2><p>stores文件夹下的文件名包含plugin被解析为插件,vuex插件写法参考<a href="https://next.vuex.vuejs.org/guide/plugins.html" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a></p><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="store" tabindex="-1"><a class="header-anchor" href="#store" aria-hidden="true">#</a> store</h3><ul><li>类型 <code>Object</code></li><li>vuex实例</li></ul><h3 id="mutation-types" tabindex="-1"><a class="header-anchor" href="#mutation-types" aria-hidden="true">#</a> MUTATION_TYPES</h3><ul><li>类型 <code>Object</code></li><li>mutation的所有事件类型</li></ul><h3 id="getter-types" tabindex="-1"><a class="header-anchor" href="#getter-types" aria-hidden="true">#</a> GETTER_TYPES</h3><ul><li>类型 <code>Object</code></li><li>getter的所有方法名</li></ul><h3 id="action-types" tabindex="-1"><a class="header-anchor" href="#action-types" aria-hidden="true">#</a> ACTION_TYPES</h3><ul><li>类型 <code>Object</code></li><li>action的所有事件类型</li></ul><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/vuex.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>由于该插件注册在 onAppCreated 中,如果在 onAppCreated 及之前使用 useStore 时,获取不到 vuex 实例</p><p><code>fesjs</code>导出了 vuex 实例<code>store</code>,如在 app.js 文件中</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> store<span class="token punctuation">,</span> <span class="token constant">GETTER_TYPES</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token constant">GETTER_TYPES</span><span class="token punctuation">.</span>user<span class="token punctuation">.</span>address<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></div><h2 id="vuex-插件" tabindex="-1"><a class="header-anchor" href="#vuex-插件" aria-hidden="true">#</a> vuex 插件</h2><p>stores 文件夹下的文件名包含 plugin 被解析为插件,vuex 插件写法参考<a href="https://next.vuex.vuejs.org/guide/plugins.html" target="_blank" rel="noopener noreferrer">官方文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a></p><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="store" tabindex="-1"><a class="header-anchor" href="#store" aria-hidden="true">#</a> store</h3><ul><li>类型 <code>Object</code></li><li>vuex 实例</li></ul><h3 id="mutation-types" tabindex="-1"><a class="header-anchor" href="#mutation-types" aria-hidden="true">#</a> MUTATION_TYPES</h3><ul><li>类型 <code>Object</code></li><li>mutation 的所有事件类型</li></ul><h3 id="getter-types" tabindex="-1"><a class="header-anchor" href="#getter-types" aria-hidden="true">#</a> GETTER_TYPES</h3><ul><li>类型 <code>Object</code></li><li>getter 的所有方法名</li></ul><h3 id="action-types" tabindex="-1"><a class="header-anchor" href="#action-types" aria-hidden="true">#</a> ACTION_TYPES</h3><ul><li>类型 <code>Object</code></li><li>action 的所有事件类型</li></ul></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/vuex.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/request.html" class="" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/qiankun.html" class="" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/watermark.html b/reference/plugin/plugins/watermark.html index 4748cc2e..811aa668 100644 --- a/reference/plugin/plugins/watermark.html +++ b/reference/plugin/plugins/watermark.html @@ -3,47 +3,65 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-watermark | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/watermark.html.e99470a0.js"><link rel="modulepreload" href="/assets/watermark.html.6ba7e245.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.17a13504.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/windicss.html.afe09b0e.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/watermark.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/watermark.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/watermark.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/watermark.html#编译时配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/watermark.html#disabled" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="disabled"><!--[--><!--]--> disabled <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/watermark.html#api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/watermark.html#createwatermark" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="createWatermark"><!--[--><!--]--> createWatermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-watermark" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-watermark" aria-hidden="true">#</a> @fesjs/plugin-watermark</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>给页面添加水印效果</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/watermark.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/watermark.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/watermark.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/watermark.html#编译时配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/watermark.html#disabled" class="router-link-active router-link-exact-active sidebar-item" aria-label="disabled"><!--[--><!--]--> disabled <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/reference/plugin/plugins/watermark.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/watermark.html#createwatermark" class="router-link-active router-link-exact-active sidebar-item" aria-label="createWatermark"><!--[--><!--]--> createWatermark <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-watermark" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-watermark" aria-hidden="true">#</a> @fesjs/plugin-watermark</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>给页面添加水印效果</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span><span class="token punctuation">,</span> - <span class="token property">"@fesjs/plugin-watermark"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> + <span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span> + <span class="token property">"@fesjs/plugin-watermark"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">watermark</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">false</span> + <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="disabled" tabindex="-1"><a class="header-anchor" href="#disabled" aria-hidden="true">#</a> disabled</h3><p>是否禁用水印,默认是<code>false</code>。</p><p>可以在开发环境关闭水印:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="disabled" tabindex="-1"><a class="header-anchor" href="#disabled" aria-hidden="true">#</a> disabled</h3><p>是否禁用水印,默认是<code>false</code>。</p><p>可以在开发环境关闭水印:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">watermark</span><span class="token operator">:</span> <span class="token punctuation">{</span> - <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span> + <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> -<span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="createwatermark" tabindex="-1"><a class="header-anchor" href="#createwatermark" aria-hidden="true">#</a> createWatermark</h3><p>创建水印功能,通过 <code>@fesjs/fes</code> 导入 API:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createWatermark<span class="token punctuation">,</span> destroyWatermark <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span><span class="token punctuation">;</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="createwatermark" tabindex="-1"><a class="header-anchor" href="#createwatermark" aria-hidden="true">#</a> createWatermark</h3><p>创建水印功能,通过 <code>@fesjs/fes</code> 导入 API:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createWatermark<span class="token punctuation">,</span> destroyWatermark <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span> <span class="token function">createWatermark</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'我是水印'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 生成水印</span> <span class="token function">destroyWatermark</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 销毁水印</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>默认参数是:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token punctuation">{</span> - content <span class="token operator">=</span> <span class="token string">'请勿外传'</span><span class="token punctuation">,</span> - container <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">,</span> - width <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">,</span> - height <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">,</span> - textAlign <span class="token operator">=</span> <span class="token string">'center'</span><span class="token punctuation">,</span> - textBaseline <span class="token operator">=</span> <span class="token string">'middle'</span><span class="token punctuation">,</span> - fontSize <span class="token operator">=</span> <span class="token string">'14px'</span><span class="token punctuation">,</span> - fontFamily <span class="token operator">=</span> <span class="token string">'Microsoft Yahei'</span><span class="token punctuation">,</span> - fillStyle <span class="token operator">=</span> <span class="token string">'rgba(184, 184, 184, 0.3)'</span><span class="token punctuation">,</span> - rotate <span class="token operator">=</span> <span class="token number">25</span><span class="token punctuation">,</span> - zIndex <span class="token operator">=</span> <span class="token number">99999</span><span class="token punctuation">,</span> - timestamp <span class="token operator">=</span> <span class="token string">'YYYY-MM-DD HH:mm'</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>默认参数是:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span> + <span class="token punctuation">(</span>content <span class="token operator">=</span> <span class="token string">'请勿外传'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>container <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>width <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>height <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>textAlign <span class="token operator">=</span> <span class="token string">'center'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>textBaseline <span class="token operator">=</span> <span class="token string">'middle'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>fontSize <span class="token operator">=</span> <span class="token string">'14px'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>fontFamily <span class="token operator">=</span> <span class="token string">'Microsoft Yahei'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>fillStyle <span class="token operator">=</span> <span class="token string">'rgba(184, 184, 184, 0.3)'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>rotate <span class="token operator">=</span> <span class="token number">25</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>zIndex <span class="token operator">=</span> <span class="token number">99999</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span>timestamp <span class="token operator">=</span> <span class="token string">'YYYY-MM-DD HH:mm'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>如果不需要时间戳,则可以设置<code>timestamp</code>为<code>false</code>。</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/watermark.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a></span><!----></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果不需要时间戳,则可以设置<code>timestamp</code>为<code>false</code>。</p></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/watermark.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/pinia.html" class="" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/login.html" class="" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/reference/plugin/plugins/windicss.html b/reference/plugin/plugins/windicss.html index 6cc81b33..b50845a9 100644 --- a/reference/plugin/plugins/windicss.html +++ b/reference/plugin/plugins/windicss.html @@ -3,23 +3,41 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="generator" content="VuePress 2.0.0-beta.28"> + <meta name="generator" content="VuePress 2.0.0-beta.53"> + <style> + :root { + --c-bg: #fff; + } + html.dark { + --c-bg: #22272e; + } + html, body { + background-color: var(--c-bg); + } + </style> + <script> + const userMode = localStorage.getItem('vuepress-color-scheme'); + const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) { + document.documentElement.classList.toggle('dark', true); + } + </script> <link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-windicss | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案"> - <link rel="preload" href="/fes.js/assets/js/runtime~app.67702f4f.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.8abd66bb.css" as="style"><link rel="preload" href="/fes.js/assets/js/399.ae8be0a6.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.d5bb65a0.js" as="script"> - <link rel="stylesheet" href="/fes.js/assets/css/styles.8abd66bb.css"> + <link rel="preload" href="/assets/style.03dc0593.css" as="style" /><link rel="stylesheet" href="/assets/style.03dc0593.css" /> + <link rel="modulepreload" href="/assets/app.bd9c95b7.js"><link rel="modulepreload" href="/assets/windicss.html.afe09b0e.js"><link rel="modulepreload" href="/assets/windicss.html.17a13504.js"><link rel="prefetch" href="/assets/index.html.c52ea2ee.js" as="script" /><link rel="prefetch" href="/assets/index.html.4ecf73ea.js" as="script" /><link rel="prefetch" href="/assets/builder.html.246dbbe3.js" as="script" /><link rel="prefetch" href="/assets/config.html.637a9806.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.8f3528e9.js" as="script" /><link rel="prefetch" href="/assets/css.html.f4729d94.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7ccc960.js" as="script" /><link rel="prefetch" href="/assets/env.html.2fbe8f51.js" as="script" /><link rel="prefetch" href="/assets/faq.html.7f01d8a8.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.f4fdc148.js" as="script" /><link rel="prefetch" href="/assets/image.html.f92a08c2.js" as="script" /><link rel="prefetch" href="/assets/mock.html.561d68eb.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.a5e6ae94.js" as="script" /><link rel="prefetch" href="/assets/public.html.950ba2eb.js" as="script" /><link rel="prefetch" href="/assets/route.html.8edafb3a.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.b70d36d5.js" as="script" /><link rel="prefetch" href="/assets/template.html.900fbffc.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.9bc44b95.js" as="script" /><link rel="prefetch" href="/assets/api.html.dd7de804.js" as="script" /><link rel="prefetch" href="/assets/cli.html.eb7c8bac.js" as="script" /><link rel="prefetch" href="/assets/index.html.833852a3.js" as="script" /><link rel="prefetch" href="/assets/index.html.4f4b557d.js" as="script" /><link rel="prefetch" href="/assets/index.html.1e4e9bb2.js" as="script" /><link rel="prefetch" href="/assets/index.html.4b24c667.js" as="script" /><link rel="prefetch" href="/assets/index.html.b99c3eab.js" as="script" /><link rel="prefetch" href="/assets/api.html.ad50f750.js" as="script" /><link rel="prefetch" href="/assets/access.html.ccef700f.js" as="script" /><link rel="prefetch" href="/assets/editor.html.45b1bf75.js" as="script" /><link rel="prefetch" href="/assets/enums.html.9eba9e94.js" as="script" /><link rel="prefetch" href="/assets/icon.html.1ef9becf.js" as="script" /><link rel="prefetch" href="/assets/jest.html.b6be70f6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.737f0d05.js" as="script" /><link rel="prefetch" href="/assets/locale.html.a0788058.js" as="script" /><link rel="prefetch" href="/assets/login.html.3b52bc00.js" as="script" /><link rel="prefetch" href="/assets/model.html.a33983f1.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.ca207361.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.fd060b60.js" as="script" /><link rel="prefetch" href="/assets/request.html.d16e6c85.js" as="script" /><link rel="prefetch" href="/assets/sass.html.be3aee7e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.86a67f1f.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.3e9bd488.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.6ba7e245.js" as="script" /><link rel="prefetch" href="/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/assets/index.html.de0d80a1.js" as="script" /><link rel="prefetch" href="/assets/index.html.9f427ef5.js" as="script" /><link rel="prefetch" href="/assets/builder.html.5491993d.js" as="script" /><link rel="prefetch" href="/assets/config.html.bebaf600.js" as="script" /><link rel="prefetch" href="/assets/contributing.html.3aa886b1.js" as="script" /><link rel="prefetch" href="/assets/css.html.8c2b9f6e.js" as="script" /><link rel="prefetch" href="/assets/directory-structure.html.c7e6fd2d.js" as="script" /><link rel="prefetch" href="/assets/env.html.5728b740.js" as="script" /><link rel="prefetch" href="/assets/faq.html.d692a6e2.js" as="script" /><link rel="prefetch" href="/assets/getting-started.html.0eb9c5e2.js" as="script" /><link rel="prefetch" href="/assets/image.html.50bf0bdd.js" as="script" /><link rel="prefetch" href="/assets/mock.html.ab147021.js" as="script" /><link rel="prefetch" href="/assets/plugin.html.de4f8c7b.js" as="script" /><link rel="prefetch" href="/assets/public.html.d51b184d.js" as="script" /><link rel="prefetch" href="/assets/route.html.32be9bfc.js" as="script" /><link rel="prefetch" href="/assets/runtime-config.html.90acb818.js" as="script" /><link rel="prefetch" href="/assets/template.html.8e33412a.js" as="script" /><link rel="prefetch" href="/assets/upgrade3.html.c353af42.js" as="script" /><link rel="prefetch" href="/assets/api.html.87969763.js" as="script" /><link rel="prefetch" href="/assets/cli.html.af8c16d8.js" as="script" /><link rel="prefetch" href="/assets/index.html.9bf5bab1.js" as="script" /><link rel="prefetch" href="/assets/index.html.cbd2c491.js" as="script" /><link rel="prefetch" href="/assets/index.html.a2d6e9e6.js" as="script" /><link rel="prefetch" href="/assets/index.html.2877eae5.js" as="script" /><link rel="prefetch" href="/assets/index.html.d2f518d0.js" as="script" /><link rel="prefetch" href="/assets/api.html.06ea97fd.js" as="script" /><link rel="prefetch" href="/assets/access.html.1a82486a.js" as="script" /><link rel="prefetch" href="/assets/editor.html.0d361fe8.js" as="script" /><link rel="prefetch" href="/assets/enums.html.2b56cb9b.js" as="script" /><link rel="prefetch" href="/assets/icon.html.09e6d802.js" as="script" /><link rel="prefetch" href="/assets/jest.html.da327ef6.js" as="script" /><link rel="prefetch" href="/assets/layout.html.18970df4.js" as="script" /><link rel="prefetch" href="/assets/locale.html.669c5454.js" as="script" /><link rel="prefetch" href="/assets/login.html.5cb3e152.js" as="script" /><link rel="prefetch" href="/assets/model.html.17d86d37.js" as="script" /><link rel="prefetch" href="/assets/pinia.html.eb251b6e.js" as="script" /><link rel="prefetch" href="/assets/qiankun.html.03151319.js" as="script" /><link rel="prefetch" href="/assets/request.html.08c691d1.js" as="script" /><link rel="prefetch" href="/assets/sass.html.9236bc5e.js" as="script" /><link rel="prefetch" href="/assets/swc.html.1459de3d.js" as="script" /><link rel="prefetch" href="/assets/vuex.html.1794fc22.js" as="script" /><link rel="prefetch" href="/assets/watermark.html.e99470a0.js" as="script" /><link rel="prefetch" href="/assets/404.html.b697c9e3.js" as="script" /><link rel="prefetch" href="/assets/index.0b6f9a66.js" as="script" /> </head> <body> - <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="v2.0"><span class="title">v2.0</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn" rel="noopener noreferrer" target="_blank" aria-label="v3.0"><!--[--><!--]--> v3.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/2.0/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/windicss.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/windicss.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/windicss.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/windicss.html#配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-windicss" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-windicss" aria-hidden="true">#</a> @fesjs/plugin-windicss</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p><code>windicss</code> 支持</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span> + <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.1-0"><span class="title">v3.0.1-0</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/model.html" class="sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/windicss.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/reference/plugin/plugins/windicss.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/windicss.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/reference/plugin/plugins/windicss.html#配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-windicss" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-windicss" aria-hidden="true">#</a> @fesjs/plugin-windicss</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p><code>windicss</code> 支持</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span> <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"@fesjs/plugin-windicss"</span><span class="token operator">:</span> <span class="token string">"^2.0.0"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><p>在 <code>.fes.js</code> 配置文件中添加自定义配置,详细配置<a href="https://windicss.org/integrations/webpack.html" target="_blank" rel="noopener noreferrer">请看<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>:</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><p>在 <code>.fes.js</code> 配置文件中添加自定义配置,详细配置<a href="https://windicss.org/integrations/webpack.html" target="_blank" rel="noopener noreferrer">请看<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span></a>:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">windicss</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'./'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> -</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/master/docs/reference/plugin/plugins/windicss.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="nav-link" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> - <script src="/fes.js/assets/js/runtime~app.67702f4f.js" defer></script><script src="/fes.js/assets/js/399.ae8be0a6.js" defer></script><script src="/fes.js/assets/js/app.d5bb65a0.js" defer></script> +</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/windicss.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: haizekuo@gmail.com">winixt</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/reference/plugin/plugins/qiankun.html" class="" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a></span><span class="next"><a href="/reference/plugin/plugins/sass.html" class="" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div> + <script type="module" src="/assets/app.bd9c95b7.js" defer></script> </body> </html> diff --git a/service-worker.js b/service-worker.js index c46c2523..23ad0e3a 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-d249b2c8"],(function(e){"use strict";self.addEventListener("message",(e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()})),e.precacheAndRoute([{url:"404.html",revision:"98d1eb1975c6175f821b407212531dea"},{url:"assets/css/styles.8abd66bb.css",revision:null},{url:"assets/img/back-to-top.8b37f773.svg",revision:null},{url:"assets/js/205.d4ef4058.js",revision:null},{url:"assets/js/293.f5289c13.js",revision:null},{url:"assets/js/399.ae8be0a6.js",revision:null},{url:"assets/js/491.d264dc1d.js",revision:null},{url:"assets/js/app.d5bb65a0.js",revision:null},{url:"assets/js/runtime~app.67702f4f.js",revision:null},{url:"assets/js/v-00cf7e23.1bc881cc.js",revision:null},{url:"assets/js/v-040800dc.1f1fb9d5.js",revision:null},{url:"assets/js/v-0a0e491c.37f99a72.js",revision:null},{url:"assets/js/v-1c0edac3.fe469da8.js",revision:null},{url:"assets/js/v-1d14d5cc.f6b678f3.js",revision:null},{url:"assets/js/v-2c05b6e0.7edc12ad.js",revision:null},{url:"assets/js/v-2fe128e7.a15f3d55.js",revision:null},{url:"assets/js/v-323bda7e.778122f9.js",revision:null},{url:"assets/js/v-355ee23e.f2dde2a4.js",revision:null},{url:"assets/js/v-3706649a.6d045efa.js",revision:null},{url:"assets/js/v-37e1c06f.49408d07.js",revision:null},{url:"assets/js/v-392e58ee.67937c7d.js",revision:null},{url:"assets/js/v-3c4e521e.b813ace2.js",revision:null},{url:"assets/js/v-3cd5a4ef.7a6ef2c7.js",revision:null},{url:"assets/js/v-3dba8814.9f07a8e3.js",revision:null},{url:"assets/js/v-411c0c9e.eb0a832d.js",revision:null},{url:"assets/js/v-41dee210.18d5dcb0.js",revision:null},{url:"assets/js/v-494b840e.3219979d.js",revision:null},{url:"assets/js/v-528b8b6c.e0560471.js",revision:null},{url:"assets/js/v-5bf80046.734741c7.js",revision:null},{url:"assets/js/v-5f4c684e.004fc897.js",revision:null},{url:"assets/js/v-6320961c.594d5357.js",revision:null},{url:"assets/js/v-6f2f6a5a.0a028df5.js",revision:null},{url:"assets/js/v-76cb52e8.0f619206.js",revision:null},{url:"assets/js/v-76cd065c.270a37ed.js",revision:null},{url:"assets/js/v-7b48519a.741c8475.js",revision:null},{url:"assets/js/v-7b96e3a4.033eb852.js",revision:null},{url:"assets/js/v-85fa9b2a.3f03d054.js",revision:null},{url:"assets/js/v-884fd4bc.36a95eba.js",revision:null},{url:"assets/js/v-8daa1a0e.97e78117.js",revision:null},{url:"assets/js/v-a1a49808.5aa9c148.js",revision:null},{url:"assets/js/v-a951be94.9550ef17.js",revision:null},{url:"assets/js/v-b15becb0.9810a63f.js",revision:null},{url:"assets/js/v-c253c956.71cde0f0.js",revision:null},{url:"assets/js/v-c5618810.c7e42791.js",revision:null},{url:"assets/js/v-d61a9282.315b2b24.js",revision:null},{url:"assets/js/v-d7fa887a.eec494da.js",revision:null},{url:"assets/js/v-ef8c5e10.01694dac.js",revision:null},{url:"assets/js/v-fb0f0066.f066a234.js",revision:null},{url:"assets/js/v-fffb8e28.7aa72175.js",revision:null},{url:"framework.png",revision:"d5bc1ce01d8f58c2d32e4396441e5dcc"},{url:"guide/config.html",revision:"ad4c0322930de071fc26718be8ea3a41"},{url:"guide/contributing.html",revision:"1addefd9ee46fd0dada54235fca7e623"},{url:"guide/css.html",revision:"874472f472cfd922c94acd4656db9839"},{url:"guide/directory-structure.html",revision:"ccc775cfa0b436bfa46da9ab7ea22e5a"},{url:"guide/env.html",revision:"68eda51cb71969240d33933aa429443b"},{url:"guide/faq.html",revision:"d78833731a385b494697cfa96fe60a87"},{url:"guide/getting-started.html",revision:"4609d6b12ac4446c1c926654816b8067"},{url:"guide/image.html",revision:"302ee61d9d339d7bc0a1f171b3795530"},{url:"guide/index.html",revision:"8bdbb77b37ef6499d5468169c5c8028b"},{url:"guide/mock.html",revision:"468070dbe75f5e796497d9d2a5f7f1d5"},{url:"guide/plugin.html",revision:"87e64c789fa62acba6ff4ca29050fe0f"},{url:"guide/public.html",revision:"a94a302dff5f040dca3aade3021d3c2a"},{url:"guide/route.html",revision:"c9c1a24d6390a9c16090a36824bf51b8"},{url:"guide/runtime-config.html",revision:"c31644e21c2cdca72c60731ce0da0d78"},{url:"guide/template.html",revision:"cade417e67d870f4e0212ce9de0e3c4e"},{url:"home.png",revision:"3a3b46b3bb2f0a9a52f439c80bade53a"},{url:"index.html",revision:"472913641980ff0c1e5ace67a47defdb"},{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:"db9e9d80763409db954c3e2f9bea1fcb"},{url:"reference/api/index.html",revision:"75904173542fa332f65a3dcb792841a5"},{url:"reference/cli.html",revision:"423be73dec090871634e347cd03dfa4c"},{url:"reference/cli/index.html",revision:"6b4278164dd3bbea2cb7f48ded61bee5"},{url:"reference/config/index.html",revision:"89f15ded6677ba5cd07c1aefef2502fa"},{url:"reference/plugin/dev/api.html",revision:"b2b86640c763fb698cb8e1398e1eb1b6"},{url:"reference/plugin/dev/index.html",revision:"eaefda6fa6b7efdeddd36bc7a82f258d"},{url:"reference/plugin/index.html",revision:"97946c029e81046db076a43988015ee4"},{url:"reference/plugin/plugins/access.html",revision:"b11813755e563758a75e423955e426c3"},{url:"reference/plugin/plugins/editor.html",revision:"7dd49fe1883166d191d58f13aba60f12"},{url:"reference/plugin/plugins/enums.html",revision:"463373f1356f7dc0384206e5965cf9b7"},{url:"reference/plugin/plugins/icon.html",revision:"4f8e519d28021f387eae056299dd7d5f"},{url:"reference/plugin/plugins/jest.html",revision:"05b1344dc081f408abe85899082b2f0a"},{url:"reference/plugin/plugins/layout.html",revision:"98fb5a46867a01dcd47e01b7905af37a"},{url:"reference/plugin/plugins/locale.html",revision:"52454f99f94c99a82b948de1b7f2600a"},{url:"reference/plugin/plugins/model.html",revision:"6146b5ed5b1f99196a3b09746f00da30"},{url:"reference/plugin/plugins/pinia.html",revision:"c9ad911d2c6969ef92d25036056f39d8"},{url:"reference/plugin/plugins/qiankun.html",revision:"cbe78fd989995b179e9d69588bd99e9f"},{url:"reference/plugin/plugins/request.html",revision:"92c9ca49e90f0f9b42eb9b7817c9c155"},{url:"reference/plugin/plugins/sass.html",revision:"1b27920d2113c3c7430433a7c6d97e06"},{url:"reference/plugin/plugins/vuex.html",revision:"2fa5329122fe2412730f300301b11d4e"},{url:"reference/plugin/plugins/watermark.html",revision:"eb2ce2a7347da64eb7df9ba1b5a4fd91"},{url:"reference/plugin/plugins/windicss.html",revision:"0c0679b9702cf860fda3ee44be2eb96e"},{url:"side.png",revision:"a5bf932a270e116563f7e1da8968d493"},{url:"top.png",revision:"b282c6a45571a8a0aa710c044b7e4893"}],{})})); +if(!self.define){let e,s={};const l=(l,i)=>(l=new URL(l+".js",i).href,s[l]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=l,e.onload=s,document.head.appendChild(e)}else e=l,importScripts(l),s()})).then((()=>{let e=s[l];if(!e)throw new Error(`Module ${l} didn’t register its module`);return e})));self.define=(i,r)=>{const n=e||("document"in self?document.currentScript.src:"")||location.href;if(s[n])return;let u={};const t=e=>l(e,n),a={module:{uri:n},exports:u,require:t};s[n]=Promise.all(i.map((e=>a[e]||t(e)))).then((e=>(r(...e),u)))}}define(["./workbox-fa9115e2"],(function(e){"use strict";self.addEventListener("message",(e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()})),e.precacheAndRoute([{url:"404.html",revision:"62f237cf00866d51a6352f4af395a325"},{url:"assets/404.html.b697c9e3.js",revision:null},{url:"assets/404.html.c3e557d0.js",revision:null},{url:"assets/access.html.1a82486a.js",revision:null},{url:"assets/access.html.ccef700f.js",revision:null},{url:"assets/api.html.06ea97fd.js",revision:null},{url:"assets/api.html.87969763.js",revision:null},{url:"assets/api.html.ad50f750.js",revision:null},{url:"assets/api.html.dd7de804.js",revision:null},{url:"assets/app.bd9c95b7.js",revision:null},{url:"assets/back-to-top.8efcbe56.svg",revision:null},{url:"assets/builder.html.246dbbe3.js",revision:null},{url:"assets/builder.html.5491993d.js",revision:null},{url:"assets/cli.html.af8c16d8.js",revision:null},{url:"assets/cli.html.eb7c8bac.js",revision:null},{url:"assets/config.html.637a9806.js",revision:null},{url:"assets/config.html.bebaf600.js",revision:null},{url:"assets/contributing.html.3aa886b1.js",revision:null},{url:"assets/contributing.html.8f3528e9.js",revision:null},{url:"assets/css.html.8c2b9f6e.js",revision:null},{url:"assets/css.html.f4729d94.js",revision:null},{url:"assets/directory-structure.html.c7ccc960.js",revision:null},{url:"assets/directory-structure.html.c7e6fd2d.js",revision:null},{url:"assets/editor.html.0d361fe8.js",revision:null},{url:"assets/editor.html.45b1bf75.js",revision:null},{url:"assets/enums.html.2b56cb9b.js",revision:null},{url:"assets/enums.html.9eba9e94.js",revision:null},{url:"assets/env.html.2fbe8f51.js",revision:null},{url:"assets/env.html.5728b740.js",revision:null},{url:"assets/faq.html.7f01d8a8.js",revision:null},{url:"assets/faq.html.d692a6e2.js",revision:null},{url:"assets/getting-started.html.0eb9c5e2.js",revision:null},{url:"assets/getting-started.html.f4fdc148.js",revision:null},{url:"assets/icon.html.09e6d802.js",revision:null},{url:"assets/icon.html.1ef9becf.js",revision:null},{url:"assets/image.html.50bf0bdd.js",revision:null},{url:"assets/image.html.f92a08c2.js",revision:null},{url:"assets/index.0b6f9a66.js",revision:null},{url:"assets/index.html.1e4e9bb2.js",revision:null},{url:"assets/index.html.2877eae5.js",revision:null},{url:"assets/index.html.4b24c667.js",revision:null},{url:"assets/index.html.4ecf73ea.js",revision:null},{url:"assets/index.html.4f4b557d.js",revision:null},{url:"assets/index.html.833852a3.js",revision:null},{url:"assets/index.html.9bf5bab1.js",revision:null},{url:"assets/index.html.9f427ef5.js",revision:null},{url:"assets/index.html.a2d6e9e6.js",revision:null},{url:"assets/index.html.b99c3eab.js",revision:null},{url:"assets/index.html.c52ea2ee.js",revision:null},{url:"assets/index.html.cbd2c491.js",revision:null},{url:"assets/index.html.d2f518d0.js",revision:null},{url:"assets/index.html.de0d80a1.js",revision:null},{url:"assets/jest.html.b6be70f6.js",revision:null},{url:"assets/jest.html.da327ef6.js",revision:null},{url:"assets/layout.html.18970df4.js",revision:null},{url:"assets/layout.html.737f0d05.js",revision:null},{url:"assets/locale.html.669c5454.js",revision:null},{url:"assets/locale.html.a0788058.js",revision:null},{url:"assets/login.html.3b52bc00.js",revision:null},{url:"assets/login.html.5cb3e152.js",revision:null},{url:"assets/mock.html.561d68eb.js",revision:null},{url:"assets/mock.html.ab147021.js",revision:null},{url:"assets/model.html.17d86d37.js",revision:null},{url:"assets/model.html.a33983f1.js",revision:null},{url:"assets/pinia.html.ca207361.js",revision:null},{url:"assets/pinia.html.eb251b6e.js",revision:null},{url:"assets/plugin.html.a5e6ae94.js",revision:null},{url:"assets/plugin.html.de4f8c7b.js",revision:null},{url:"assets/public.html.950ba2eb.js",revision:null},{url:"assets/public.html.d51b184d.js",revision:null},{url:"assets/qiankun.html.03151319.js",revision:null},{url:"assets/qiankun.html.fd060b60.js",revision:null},{url:"assets/request.html.08c691d1.js",revision:null},{url:"assets/request.html.d16e6c85.js",revision:null},{url:"assets/route.html.32be9bfc.js",revision:null},{url:"assets/route.html.8edafb3a.js",revision:null},{url:"assets/runtime-config.html.90acb818.js",revision:null},{url:"assets/runtime-config.html.b70d36d5.js",revision:null},{url:"assets/sass.html.9236bc5e.js",revision:null},{url:"assets/sass.html.be3aee7e.js",revision:null},{url:"assets/style.03dc0593.css",revision:null},{url:"assets/swc.html.1459de3d.js",revision:null},{url:"assets/swc.html.86a67f1f.js",revision:null},{url:"assets/template.html.8e33412a.js",revision:null},{url:"assets/template.html.900fbffc.js",revision:null},{url:"assets/upgrade3.html.9bc44b95.js",revision:null},{url:"assets/upgrade3.html.c353af42.js",revision:null},{url:"assets/vuex.html.1794fc22.js",revision:null},{url:"assets/vuex.html.3e9bd488.js",revision:null},{url:"assets/watermark.html.6ba7e245.js",revision:null},{url:"assets/watermark.html.e99470a0.js",revision:null},{url:"assets/windicss.html.17a13504.js",revision:null},{url:"assets/windicss.html.afe09b0e.js",revision:null},{url:"framework.png",revision:"d5bc1ce01d8f58c2d32e4396441e5dcc"},{url:"guide/builder.html",revision:"93bb1fe4b05459ae19724b332957aa6e"},{url:"guide/config.html",revision:"56aa9311e53c36e930f63457b6bf7a89"},{url:"guide/contributing.html",revision:"698e9f5393ecdac96af5fd632d3db4dc"},{url:"guide/css.html",revision:"ef9aee3cc146a297ce94b9fad69418c5"},{url:"guide/directory-structure.html",revision:"d5c162ffc99aac19153ced79fb58c8ac"},{url:"guide/env.html",revision:"f03bbe2c9313a79301deda8095887397"},{url:"guide/faq.html",revision:"16920baf495db51b0d2b241e8dc0dead"},{url:"guide/getting-started.html",revision:"7a1a91fc61ef6632d19492f1d93263fa"},{url:"guide/image.html",revision:"d33cba362d34a95cf48352bee1d38509"},{url:"guide/index.html",revision:"0a1e623953db8c4885716a7e12447e3e"},{url:"guide/mock.html",revision:"e3cb7cde77925bafb3af32c189553f65"},{url:"guide/plugin.html",revision:"9903866189c3e2537b70dc7df4cb8d99"},{url:"guide/public.html",revision:"2231707fe619f07b93e6583bc952c13e"},{url:"guide/route.html",revision:"4c59697d015b1b3aef01ac55bb130cf2"},{url:"guide/runtime-config.html",revision:"dc720cb7444fcf59f4632efeaa160b74"},{url:"guide/template.html",revision:"a603cefb87cab318e720bad6a012b84a"},{url:"guide/upgrade3.html",revision:"fa0e0584384f88ec6d8c3345b9afc797"},{url:"home.png",revision:"3a3b46b3bb2f0a9a52f439c80bade53a"},{url:"index.html",revision:"a3151b1bf74e41b3a6c0c940430873f3"},{url:"left-right.png",revision:"47027ee9621c21cb8f841957bdb7d805"},{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:"ef6d06acfd78b9f01b0a6b953eb4a7ed"},{url:"reference/api/index.html",revision:"c13f79d0185a1b29a65e9256a5d66a7d"},{url:"reference/cli.html",revision:"e3a314faafe7004a13dec3df6e6f1159"},{url:"reference/cli/index.html",revision:"ef71304c32fd520e2b0c50d330fafc42"},{url:"reference/config/index.html",revision:"389bcc1e62af85be0765dfadc0dd1279"},{url:"reference/plugin/dev/api.html",revision:"6f03fcafee30435c851a00cfeb08146e"},{url:"reference/plugin/dev/index.html",revision:"f576f7e5f212d55d702b8680b8e290c6"},{url:"reference/plugin/index.html",revision:"d9b238799fafe0f8206fd61bf9073605"},{url:"reference/plugin/plugins/access.html",revision:"be33e085a540e7022e5556eb44291c6b"},{url:"reference/plugin/plugins/editor.html",revision:"652f59bf4c6a8d40347317c93bdd0e3a"},{url:"reference/plugin/plugins/enums.html",revision:"1217f37e022e43bf5c4f74333b37cc33"},{url:"reference/plugin/plugins/icon.html",revision:"fef8b383be50f797eda54dc58f7342c2"},{url:"reference/plugin/plugins/jest.html",revision:"497a63dc859483aa8d50ad93d395e68d"},{url:"reference/plugin/plugins/layout.html",revision:"29c39108840ede7d8897f0e35343b83a"},{url:"reference/plugin/plugins/locale.html",revision:"45fda337448817b4dbc3c020f2e2f9b9"},{url:"reference/plugin/plugins/login.html",revision:"28d429be03d1f949d835f583cc794ec1"},{url:"reference/plugin/plugins/model.html",revision:"6bdca5ec1ca2507728d6cbe292027ff4"},{url:"reference/plugin/plugins/pinia.html",revision:"e64544803f5ae1763e21f4db5d9d17b8"},{url:"reference/plugin/plugins/qiankun.html",revision:"80779e04f4be6d232fc1530a39cfd864"},{url:"reference/plugin/plugins/request.html",revision:"4241bbfd011fe98876ca7dc7fd6a115b"},{url:"reference/plugin/plugins/sass.html",revision:"a7b40b606eff6aeb28ce37a57125bc4a"},{url:"reference/plugin/plugins/swc.html",revision:"a1e402603eb89278adb23dd6bc628186"},{url:"reference/plugin/plugins/vuex.html",revision:"f88a7dd9782ac269e11414640b8958b2"},{url:"reference/plugin/plugins/watermark.html",revision:"81e629b8c9af22e37a27efe4a93d097a"},{url:"reference/plugin/plugins/windicss.html",revision:"4df8ae3ef1cf11374b13700754d5faad"},{url:"side.png",revision:"a5bf932a270e116563f7e1da8968d493"},{url:"top.png",revision:"b282c6a45571a8a0aa710c044b7e4893"}],{})})); diff --git a/workbox-d249b2c8.js b/workbox-fa9115e2.js similarity index 100% rename from workbox-d249b2c8.js rename to workbox-fa9115e2.js