mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-12-12 23:17:11 +08:00
Deploying to gh-pages from @ WeBankFinTech/fes.js@eea895bdba 🚀
This commit is contained in:
winixt
parent
8e03aa808f
commit
7f51d3bc31
@ -1 +1 @@
|
||||
import{_ as c,o as p,c as i,C as u,r as d,Q as s,a5 as l,a6 as _,a7 as f,a8 as m,a9 as h,aa as v,ab as A,ac as g,ad as C,ae as y,M as P,d as w,u as x,q as E,k as R,af as b,ag as D,ah as H,ai as S}from"./chunks/framework.6405946a.js";import{t as T}from"./chunks/theme.bfd75df3.js";const V={},B={class:"VPFeatures"},F={class:"vp-doc fes-home container"};function O(e,t){return p(),i("div",B,[u("div",F,[d(e.$slots,"default",{},void 0,!0)])])}const $=c(V,[["render",O],["__scopeId","data-v-0d1d9f22"]]);const j={extends:T,enhanceApp(e){e.app.component("HomeContent",$)}};function r(e){if(e.extends){const t=r(e.extends);return{...t,...e,async enhanceApp(a){t.enhanceApp&&await t.enhanceApp(a),e.enhanceApp&&await e.enhanceApp(a)}}}return e}const n=r(j),k=w({name:"VitePressApp",setup(){const{site:e}=x();return E(()=>{R(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),b(),D(),H(),n.setup&&n.setup(),()=>S(n.Layout)}});async function I(){const e=M(),t=L();t.provide(_,e);const a=f(e.route);return t.provide(m,a),t.component("Content",h),t.component("ClientOnly",v),Object.defineProperties(t.config.globalProperties,{$frontmatter:{get(){return a.frontmatter.value}},$params:{get(){return a.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:t,router:e,siteData:A}),{app:t,router:e,data:a}}function L(){return g(k)}function M(){let e=s,t;return C(a=>{let o=y(a);return e&&(t=o),(e||t===o)&&(o=o.replace(/\.js$/,".lean.js")),s&&(e=!1),P(()=>import(o),[])},n.NotFound)}s&&I().then(({app:e,router:t,data:a})=>{t.go().then(()=>{l(t.route,a.site),e.mount("#app")})});export{I as createApp};
|
||||
import{_ as c,o as p,c as i,C as u,r as d,Q as s,a5 as l,a6 as _,a7 as f,a8 as m,a9 as h,aa as v,ab as A,ac as g,ad as C,ae as y,M as P,d as w,u as x,q as E,k as R,af as b,ag as D,ah as H,ai as S}from"./chunks/framework.85b09291.js";import{t as T}from"./chunks/theme.a72cbe78.js";const V={},B={class:"VPFeatures"},F={class:"vp-doc fes-home container"};function O(e,t){return p(),i("div",B,[u("div",F,[d(e.$slots,"default",{},void 0,!0)])])}const $=c(V,[["render",O],["__scopeId","data-v-0d1d9f22"]]);const j={extends:T,enhanceApp(e){e.app.component("HomeContent",$)}};function r(e){if(e.extends){const t=r(e.extends);return{...t,...e,async enhanceApp(a){t.enhanceApp&&await t.enhanceApp(a),e.enhanceApp&&await e.enhanceApp(a)}}}return e}const n=r(j),k=w({name:"VitePressApp",setup(){const{site:e}=x();return E(()=>{R(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),b(),D(),H(),n.setup&&n.setup(),()=>S(n.Layout)}});async function I(){const e=M(),t=L();t.provide(_,e);const a=f(e.route);return t.provide(m,a),t.component("Content",h),t.component("ClientOnly",v),Object.defineProperties(t.config.globalProperties,{$frontmatter:{get(){return a.frontmatter.value}},$params:{get(){return a.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:t,router:e,siteData:A}),{app:t,router:e,data:a}}function L(){return g(k)}function M(){let e=s,t;return C(a=>{let o=y(a);return e&&(t=o),(e||t===o)&&(o=o.replace(/\.js$/,".lean.js")),s&&(e=!1),P(()=>import(o),[])},n.NotFound)}s&&I().then(({app:e,router:t,data:a})=>{t.go().then(()=>{l(t.route,a.site),e.mount("#app")})});export{I as createApp};
|
||||
1
assets/chunks/@localSearchIndexroot.630091a5.js
Normal file
1
assets/chunks/@localSearchIndexroot.630091a5.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
assets/chunks/VPLocalSearchBox.a03f2e6a.js
Normal file
1
assets/chunks/VPLocalSearchBox.a03f2e6a.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
assets/chunks/framework.85b09291.js
Normal file
2
assets/chunks/framework.85b09291.js
Normal file
File diff suppressed because one or more lines are too long
7
assets/chunks/theme.a72cbe78.js
Normal file
7
assets/chunks/theme.a72cbe78.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as t,V as i}from"./chunks/framework.6405946a.js";const m=JSON.parse('{"title":"Vite 和 Webpack 双构建","description":"","frontmatter":{},"headers":[],"relativePath":"guide/builder.md"}'),r={name:"guide/builder.md"},l=i('<h1 id="vite-和-webpack-双构建" tabindex="-1">Vite 和 Webpack 双构建 <a class="header-anchor" href="#vite-和-webpack-双构建" aria-label="Permalink to "Vite 和 Webpack 双构建""></a></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-label="Permalink to "使用差异""></a></h2><p>由于 Fes.js 在 Vite 和 Webpack 上做了一层封装，开发者关心的构建配置不会太多。从使用上来说，主要存在以下几个差异点：</p><h3 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h3><p>Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看<a href="./../reference/config/">配置</a>。</p><h3 id="静态文件处理" tabindex="-1">静态文件处理 <a class="header-anchor" href="#静态文件处理" aria-label="Permalink to "静态文件处理""></a></h3><p>由于 Vite 的限制，不支持 <code>require</code> 语法，具体 Vite 的用法可以查看<a href="https://cn.vitejs.dev/guide/assets.html" target="_blank" rel="noreferrer">官网</a></p><h3 id="html-模版" tabindex="-1">html 模版 <a class="header-anchor" href="#html-模版" aria-label="Permalink to "html 模版""></a></h3><p>html 模版比较常规的需求，例如模版变量，Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求， Webpack 可以使用 <a href="https://github.com/jantimon/html-webpack-plugin" target="_blank" rel="noreferrer">html-webpack-plugin</a>，Vite 使用<a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noreferrer">vite-plugin-html</a> 进行个性化配置。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>fes3.0+ html 模版文件从 <code>public/index.html</code> 挪到项目根目录。</p></div>',12),c=[l];function o(s,n,h,p,d,b){return a(),t("div",null,c)}const _=e(r,[["render",o]]);export{m as __pageData,_ as default};
|
||||
import{_ as e,o as a,c as t,V as i}from"./chunks/framework.85b09291.js";const m=JSON.parse('{"title":"Vite 和 Webpack 双构建","description":"","frontmatter":{},"headers":[],"relativePath":"guide/builder.md"}'),r={name:"guide/builder.md"},l=i('<h1 id="vite-和-webpack-双构建" tabindex="-1">Vite 和 Webpack 双构建 <a class="header-anchor" href="#vite-和-webpack-双构建" aria-label="Permalink to "Vite 和 Webpack 双构建""></a></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-label="Permalink to "使用差异""></a></h2><p>由于 Fes.js 在 Vite 和 Webpack 上做了一层封装，开发者关心的构建配置不会太多。从使用上来说，主要存在以下几个差异点：</p><h3 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h3><p>Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看<a href="./../reference/config/">配置</a>。</p><h3 id="静态文件处理" tabindex="-1">静态文件处理 <a class="header-anchor" href="#静态文件处理" aria-label="Permalink to "静态文件处理""></a></h3><p>由于 Vite 的限制，不支持 <code>require</code> 语法，具体 Vite 的用法可以查看<a href="https://cn.vitejs.dev/guide/assets.html" target="_blank" rel="noreferrer">官网</a></p><h3 id="html-模版" tabindex="-1">html 模版 <a class="header-anchor" href="#html-模版" aria-label="Permalink to "html 模版""></a></h3><p>html 模版比较常规的需求，例如模版变量，Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求， Webpack 可以使用 <a href="https://github.com/jantimon/html-webpack-plugin" target="_blank" rel="noreferrer">html-webpack-plugin</a>，Vite 使用<a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noreferrer">vite-plugin-html</a> 进行个性化配置。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>fes3.0+ html 模版文件从 <code>public/index.html</code> 挪到项目根目录。</p></div>',12),c=[l];function o(s,n,h,p,d,b){return a(),t("div",null,c)}const _=e(r,[["render",o]]);export{m as __pageData,_ as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as t,V as i}from"./chunks/framework.6405946a.js";const m=JSON.parse('{"title":"Vite 和 Webpack 双构建","description":"","frontmatter":{},"headers":[],"relativePath":"guide/builder.md"}'),r={name:"guide/builder.md"},l=i("",12),c=[l];function o(s,n,h,p,d,b){return a(),t("div",null,c)}const _=e(r,[["render",o]]);export{m as __pageData,_ as default};
|
||||
import{_ as e,o as a,c as t,V as i}from"./chunks/framework.85b09291.js";const m=JSON.parse('{"title":"Vite 和 Webpack 双构建","description":"","frontmatter":{},"headers":[],"relativePath":"guide/builder.md"}'),r={name:"guide/builder.md"},l=i("",12),c=[l];function o(s,n,h,p,d,b){return a(),t("div",null,c)}const _=e(r,[["render",o]]);export{m as __pageData,_ as default};
|
||||
@ -1,53 +1,53 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const d=JSON.parse('{"title":"编译时配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config.md"}'),p={name:"guide/config.md"},o=l(`<h1 id="编译时配置" tabindex="-1">编译时配置 <a class="header-anchor" href="#编译时配置" aria-label="Permalink to "编译时配置""></a></h1><p>Fes.js 约定 <code>.fes.js</code> 文件为项目编译需要编译时配置文件，可以引入 <code>node</code> 端依赖项，不要引入浏览器端依赖项。</p><p>一份常见的配置示例如下（更多配置项请查阅<a href="./../reference/config/">配置</a>)：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">defineBuildConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"编译时配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config.md"}'),p={name:"guide/config.md"},o=l(`<h1 id="编译时配置" tabindex="-1">编译时配置 <a class="header-anchor" href="#编译时配置" aria-label="Permalink to "编译时配置""></a></h1><p>Fes.js 约定 <code>.fes.js</code> 文件为项目编译需要编译时配置文件，可以引入 <code>node</code> 端依赖项，不要引入浏览器端依赖项。</p><p>一份常见的配置示例如下（更多配置项请查阅<a href="./../reference/config/">配置</a>)：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">defineBuildConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">defineBuildConfig</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">prefix</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/v2</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">proxy</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">/v2</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">target</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">https://api.douban.com/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">changeOrigin</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">layout</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Fes.js</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">footer</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Created by MumbelFe</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">multiTabs</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">menus</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">onepiece</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">simpleList</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="本地临时配置文件" tabindex="-1">本地临时配置文件 <a class="header-anchor" href="#本地临时配置文件" aria-label="Permalink to "本地临时配置文件""></a></h2><p>可以新建 <code>.fes.local.js</code> 作为本地临时配置文件。这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配置。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// .fes.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">defineBuildConfig</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">prefix</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/v2</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">proxy</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">/v2</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">target</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">https://api.douban.com/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">changeOrigin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">layout</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Fes.js</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">footer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Created by MumbelFe</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">multiTabs</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">menus</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">onepiece</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">simpleList</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="本地临时配置文件" tabindex="-1">本地临时配置文件 <a class="header-anchor" href="#本地临时配置文件" aria-label="Permalink to "本地临时配置文件""></a></h2><p>可以新建 <code>.fes.local.js</code> 作为本地临时配置文件。这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配置。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// .fes.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// .fes.local.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">devServer</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">port</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">8000</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">devServer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">port</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">8000</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>最终的配置是：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">devServer</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">port</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">8000</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</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-label="Permalink to "多环境多份配置""></a></h2><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境，来指定当前环境的配置文件，这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配。</p><p>比如配置如下：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// .fes.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// .fes.uat.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">devServer</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">port</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">8000</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>当我们运行：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">FES_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">uat</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div><p>这时候会命中 <code>.fes.uat.js</code> 这份环境配置，最终配置是：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">devServer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">port</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">8000</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>当我们运行：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">FES_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">uat</span><span style="color:#A6ACCD;"> fes dev</span></span></code></pre></div><p>这时候会命中 <code>.fes.uat.js</code> 这份环境配置，最终配置是：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">devServer</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">port</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">8000</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="优先级" tabindex="-1">优先级 <a class="header-anchor" href="#优先级" aria-label="Permalink to "优先级""></a></h2><p>本地临时配置 > 环境配置 > 基础配置</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>如果多份配置中存在相同的配置项，<strong>则优先级高的会覆盖优先级低的</strong>。</p></div>`,21),e=[o];function c(t,r,D,F,y,i){return a(),n("div",null,e)}const E=s(p,[["render",c]]);export{d as __pageData,E as default};
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="优先级" tabindex="-1">优先级 <a class="header-anchor" href="#优先级" aria-label="Permalink to "优先级""></a></h2><p>本地临时配置 > 环境配置 > 基础配置</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>如果多份配置中存在相同的配置项，<strong>则优先级高的会覆盖优先级低的</strong>。</p></div>`,21),e=[o];function c(t,r,D,F,y,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{A as __pageData,d as default};
|
||||
1
assets/guide_config.md.25bc06f2.lean.js
Normal file
1
assets/guide_config.md.25bc06f2.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"编译时配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config.md"}'),p={name:"guide/config.md"},o=l("",21),e=[o];function c(t,r,D,F,y,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{A as __pageData,d as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const d=JSON.parse('{"title":"编译时配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/config.md"}'),p={name:"guide/config.md"},o=l("",21),e=[o];function c(t,r,D,F,y,i){return a(),n("div",null,e)}const E=s(p,[["render",c]]);export{d as __pageData,E as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{o as e,c as a,V as s}from"./chunks/framework.6405946a.js";const o=s("",41),l=[o],i=JSON.parse('{"title":"贡献指南","description":"","frontmatter":{},"headers":[],"relativePath":"guide/contributing.md"}'),t={name:"guide/contributing.md"},d=Object.assign(t,{setup(p){return(n,r)=>(e(),a("div",null,l))}});export{i as __pageData,d as default};
|
||||
import{o as e,c as a,V as s}from"./chunks/framework.85b09291.js";const o=s("",41),l=[o],i=JSON.parse('{"title":"贡献指南","description":"","frontmatter":{},"headers":[],"relativePath":"guide/contributing.md"}'),t={name:"guide/contributing.md"},d=Object.assign(t,{setup(p){return(n,r)=>(e(),a("div",null,l))}});export{i as __pageData,d as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as l,V as e}from"./chunks/framework.6405946a.js";const h=JSON.parse('{"title":"使用 css","description":"","frontmatter":{},"headers":[],"relativePath":"guide/css.md"}'),n={name:"guide/css.md"},o=e("",18),p=[o];function t(c,r,i,d,y,D){return a(),l("div",null,p)}const u=s(n,[["render",t]]);export{h as __pageData,u as default};
|
||||
@ -1,12 +1,12 @@
|
||||
import{_ as s,o as a,c as l,V as e}from"./chunks/framework.6405946a.js";const h=JSON.parse('{"title":"使用 css","description":"","frontmatter":{},"headers":[],"relativePath":"guide/css.md"}'),n={name:"guide/css.md"},o=e(`<h1 id="使用-css" tabindex="-1">使用 css <a class="header-anchor" href="#使用-css" aria-label="Permalink to "使用 css""></a></h1><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>本文档以 css 为示例，把后缀换成 <code>.less</code> 同样适用。</p></div><h2 id="全局样式" tabindex="-1">全局样式 <a class="header-anchor" href="#全局样式" aria-label="Permalink to "全局样式""></a></h2><p>Fes.js 中约定 <code>src/global.css</code> 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。</p><p>比如用于覆盖样式，</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">layout-content</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#B2CCD6;">max-width</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">1000px</span><span style="color:#89DDFF;">;</span></span>
|
||||
import{_ as s,o as a,c as l,V as e}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"使用 css","description":"","frontmatter":{},"headers":[],"relativePath":"guide/css.md"}'),n={name:"guide/css.md"},o=e(`<h1 id="使用-css" tabindex="-1">使用 css <a class="header-anchor" href="#使用-css" aria-label="Permalink to "使用 css""></a></h1><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>本文档以 css 为示例，把后缀换成 <code>.less</code> 同样适用。</p></div><h2 id="全局样式" tabindex="-1">全局样式 <a class="header-anchor" href="#全局样式" aria-label="Permalink to "全局样式""></a></h2><p>Fes.js 中约定 <code>src/global.css</code> 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。</p><p>比如用于覆盖样式，</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">layout-content</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">max-width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1000px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="组件内样式" tabindex="-1">组件内样式 <a class="header-anchor" href="#组件内样式" aria-label="Permalink to "组件内样式""></a></h2><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">layout-content</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#B2CCD6;">max-width</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">1000px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">layout-content</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">max-width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1000px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="引入第三方样式" tabindex="-1">引入第三方样式 <a class="header-anchor" href="#引入第三方样式" aria-label="Permalink to "引入第三方样式""></a></h2><p>可以直接通过 <code>import</code> 引入第三方组件，当然最好在入口文件<code>app.js</code>中引入</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// src/app.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bootstrap/dist/css/bootstrap.css</span><span style="color:#89DDFF;">'</span></span></code></pre></div><h2 id="css-modules" tabindex="-1">CSS Modules <a class="header-anchor" href="#css-modules" aria-label="Permalink to "CSS Modules""></a></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="noreferrer">CSS Modules</a> 用法，可以直接使用：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">style</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">module</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">layout-content</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#B2CCD6;">max-width</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">1000px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>如果想直接引入CSS文件的话，则CSS文件名需要包含<code>.module</code>，比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> style </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/styles/index.module.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#BABED8;">(style)</span></span></code></pre></div><h2 id="css-预处理器" tabindex="-1">CSS 预处理器 <a class="header-anchor" href="#css-预处理器" aria-label="Permalink to "CSS 预处理器""></a></h2><p>Fes.js 内置支持 <code>less</code>，不支持 <code>sass</code> 和 <code>stylus</code>，但如果有需求，可以通过 <code>chainWebpack</code> 配置或者 <code>fes-plugin</code> 插件的形式支持。</p>`,18),p=[o];function t(c,r,i,d,y,D){return a(),l("div",null,p)}const u=s(n,[["render",t]]);export{h as __pageData,u as default};
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bootstrap/dist/css/bootstrap.css</span><span style="color:#89DDFF;">'</span></span></code></pre></div><h2 id="css-modules" tabindex="-1">CSS Modules <a class="header-anchor" href="#css-modules" aria-label="Permalink to "CSS Modules""></a></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="noreferrer">CSS Modules</a> 用法，可以直接使用：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">style</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">module</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">layout-content</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">max-width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1000px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>如果想直接引入CSS文件的话，则CSS文件名需要包含<code>.module</code>，比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> style </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/styles/index.module.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(style)</span></span></code></pre></div><h2 id="css-预处理器" tabindex="-1">CSS 预处理器 <a class="header-anchor" href="#css-预处理器" aria-label="Permalink to "CSS 预处理器""></a></h2><p>Fes.js 内置支持 <code>less</code>，不支持 <code>sass</code> 和 <code>stylus</code>，但如果有需求，可以通过 <code>chainWebpack</code> 配置或者 <code>fes-plugin</code> 插件的形式支持。</p>`,18),p=[o];function t(c,r,i,d,y,D){return a(),l("div",null,p)}const h=s(n,[["render",t]]);export{C as __pageData,h as default};
|
||||
1
assets/guide_css.md.e9f5916f.lean.js
Normal file
1
assets/guide_css.md.e9f5916f.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as l,V as e}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"使用 css","description":"","frontmatter":{},"headers":[],"relativePath":"guide/css.md"}'),n={name:"guide/css.md"},o=e("",18),p=[o];function t(c,r,i,d,y,D){return a(),l("div",null,p)}const h=s(n,[["render",t]]);export{C as __pageData,h as default};
|
||||
@ -1,66 +1,66 @@
|
||||
import{_ as s,o as a,c as n,V as o}from"./chunks/framework.6405946a.js";const i=JSON.parse('{"title":"目录结构","description":"","frontmatter":{},"headers":[],"relativePath":"guide/directory-structure.md"}'),l={name:"guide/directory-structure.md"},p=o(`<h1 id="目录结构" tabindex="-1">目录结构 <a class="header-anchor" href="#目录结构" aria-label="Permalink to "目录结构""></a></h1><p>在<a href="./getting-started.html">快速上手</a>中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 <code>约定优于配置</code> 的原则，一个基础的 Fes.js 项目大致是这样的：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">fes-template</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── package.json</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── tsconfig.json</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── mock.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── .fes.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── .env</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── index.html</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── dist</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── public</span></span>
|
||||
<span class="line"><span style="color:#babed8;">│ └── logo.png</span></span>
|
||||
<span class="line"><span style="color:#babed8;">└── src</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> ├── .fes</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── pages</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> │ └── index.vue</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── app.js</span></span></code></pre></div><h3 id="package-json" tabindex="-1">package.json <a class="header-anchor" href="#package-json" aria-label="Permalink to "package.json""></a></h3><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@fesjs/template</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">version</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">2.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">description</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fes项目模版</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">scripts</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fes build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">prod</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">FES_ENV=prod fes build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">analyze</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">ANALYZE=1 fes build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">dev</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fes dev</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">test</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fes test</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">keywords</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">[</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">管理端</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fast</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">easy</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">strong</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">],</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">files</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">[</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.eslintrc.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.gitignore</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.fes.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.fes.prod.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">mock.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">package.json</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">README.md</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">tsconfig.json</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/src</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/config</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">],</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">repository</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">type</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">git</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">url</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">git+https://github.com/WeBankFinTech/fes.js.git</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">directory</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">packages/fes-template</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">author</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">harrywan</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">license</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">MIT</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">bugs</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">url</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://github.com/WeBankFinTech/fes.js/issues</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">homepage</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://github.com/WeBankFinTech/fes.js#readme</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">publishConfig</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">access</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">public</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">devDependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@webank/eslint-config-webank</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">1.2.1</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/builder-webpack</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-access</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-layout</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^5.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-model</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-enums</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-jest</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-vuex</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-request</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-qiankun</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-sass</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-monaco-editor</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-windicss</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes-design</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^0.7.23</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">vue</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.2.47</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">vuex</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^4.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">private</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">true</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></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">tsconfig.json <a class="header-anchor" href="#tsconfig-json" aria-label="Permalink to "tsconfig.json""></a></h3><p>解决 <code>@fesjs/fes</code> 和使用 <code>@</code> 的 API 提示</p><h3 id="fes-js" tabindex="-1">.fes.js <a class="header-anchor" href="#fes-js" aria-label="Permalink to ".fes.js""></a></h3><p>配置文件，包含 Fes.js 内置功能和安装的其他插件配置。</p><h3 id="mock-js" tabindex="-1">mock.js <a class="header-anchor" href="#mock-js" aria-label="Permalink to "mock.js""></a></h3><p><code>mock</code> 数据的配置文件。</p><h3 id="env" tabindex="-1">.env <a class="header-anchor" href="#env" aria-label="Permalink to ".env""></a></h3><p>定义环境变量。</p><p>比如 <code>.env</code> 文件内容如下：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">PORT=8888</span></span>
|
||||
<span class="line"><span style="color:#babed8;">FES_ENV=prod</span></span></code></pre></div><p>等同于 node 端运行时，设置如下：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">p<wbr>rocess.env.PORT = '8888';</span></span>
|
||||
<span class="line"><span style="color:#babed8;">p<wbr>rocess.env.FES_ENV = 'prod';</span></span></code></pre></div><h3 id="dist-目录" tabindex="-1">dist 目录 <a class="header-anchor" href="#dist-目录" aria-label="Permalink to "dist 目录""></a></h3><p>执行 <code>fes build</code> 后，产物默认会存放在这里。</p><h3 id="public-目录" tabindex="-1">public 目录 <a class="header-anchor" href="#public-目录" aria-label="Permalink to "public 目录""></a></h3><p>此目录下所有文件为静态资源，会被复制到输出路径。</p><h3 id="index-html" tabindex="-1">index.html <a class="header-anchor" href="#index-html" aria-label="Permalink to "index.html""></a></h3><p>默认的 <code>html</code> 模板文件，如果删除此 <code>html</code> 则会使用内置的 <code>html</code> 模板文件。</p><h3 id="src-目录" tabindex="-1">src 目录 <a class="header-anchor" href="#src-目录" aria-label="Permalink to "src 目录""></a></h3><h3 id="fes-目录" tabindex="-1">.fes 目录 <a class="header-anchor" href="#fes-目录" aria-label="Permalink to ".fes 目录""></a></h3><p>临时文件目录，比如入口文件、路由等，都会被临时生成到这里。</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>不要提交 <code>.fes</code> 目录到 <code>git</code> 仓库，他们会在 <code>fes dev</code> 和 <code>fes build</code> 时被删除并重新生成。</p></div><h3 id="pages-目录" tabindex="-1">pages 目录 <a class="header-anchor" href="#pages-目录" aria-label="Permalink to "pages 目录""></a></h3><p>所有路由组件文件存放在这里。</p><h3 id="app-js" tabindex="-1">app.js <a class="header-anchor" href="#app-js" aria-label="Permalink to "app.js""></a></h3><p>运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。</p>`,32),e=[p];function t(c,D,r,F,y,u){return a(),n("div",null,e)}const q=s(l,[["render",t]]);export{i as __pageData,q as default};
|
||||
import{_ as s,o as a,c as n,V as o}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"目录结构","description":"","frontmatter":{},"headers":[],"relativePath":"guide/directory-structure.md"}'),l={name:"guide/directory-structure.md"},p=o(`<h1 id="目录结构" tabindex="-1">目录结构 <a class="header-anchor" href="#目录结构" aria-label="Permalink to "目录结构""></a></h1><p>在<a href="./getting-started.html">快速上手</a>中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 <code>约定优于配置</code> 的原则，一个基础的 Fes.js 项目大致是这样的：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">fes-template</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── package.json</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── tsconfig.json</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── mock.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── .fes.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── .env</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── index.html</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── dist</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── public</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">│ └── logo.png</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">└── src</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ├── .fes</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── pages</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> │ └── index.vue</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── app.js</span></span></code></pre></div><h3 id="package-json" tabindex="-1">package.json <a class="header-anchor" href="#package-json" aria-label="Permalink to "package.json""></a></h3><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@fesjs/template</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">version</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">2.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">description</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fes项目模版</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">scripts</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fes build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">prod</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">FES_ENV=prod fes build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">analyze</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">ANALYZE=1 fes build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">dev</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fes dev</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">test</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fes test</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">keywords</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">管理端</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fast</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">easy</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">strong</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">],</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">files</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.eslintrc.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.gitignore</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.fes.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.fes.prod.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">mock.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">package.json</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">README.md</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">tsconfig.json</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/src</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/config</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">],</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">repository</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">type</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">git</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">url</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">git+https://github.com/WeBankFinTech/fes.js.git</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">directory</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">packages/fes-template</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">author</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">harrywan</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">license</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">MIT</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">bugs</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">url</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://github.com/WeBankFinTech/fes.js/issues</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">homepage</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://github.com/WeBankFinTech/fes.js#readme</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">publishConfig</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">access</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">public</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">devDependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@webank/eslint-config-webank</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">1.2.1</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/builder-webpack</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-access</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-layout</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^5.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-model</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-enums</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-jest</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-vuex</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-request</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-qiankun</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-sass</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-monaco-editor</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-windicss</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes-design</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^0.7.23</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">vue</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.2.47</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">vuex</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^4.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">private</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></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">tsconfig.json <a class="header-anchor" href="#tsconfig-json" aria-label="Permalink to "tsconfig.json""></a></h3><p>解决 <code>@fesjs/fes</code> 和使用 <code>@</code> 的 API 提示</p><h3 id="fes-js" tabindex="-1">.fes.js <a class="header-anchor" href="#fes-js" aria-label="Permalink to ".fes.js""></a></h3><p>配置文件，包含 Fes.js 内置功能和安装的其他插件配置。</p><h3 id="mock-js" tabindex="-1">mock.js <a class="header-anchor" href="#mock-js" aria-label="Permalink to "mock.js""></a></h3><p><code>mock</code> 数据的配置文件。</p><h3 id="env" tabindex="-1">.env <a class="header-anchor" href="#env" aria-label="Permalink to ".env""></a></h3><p>定义环境变量。</p><p>比如 <code>.env</code> 文件内容如下：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">PORT=8888</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">FES_ENV=prod</span></span></code></pre></div><p>等同于 node 端运行时，设置如下：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">p<wbr>rocess.env.PORT = '8888';</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">p<wbr>rocess.env.FES_ENV = 'prod';</span></span></code></pre></div><h3 id="dist-目录" tabindex="-1">dist 目录 <a class="header-anchor" href="#dist-目录" aria-label="Permalink to "dist 目录""></a></h3><p>执行 <code>fes build</code> 后，产物默认会存放在这里。</p><h3 id="public-目录" tabindex="-1">public 目录 <a class="header-anchor" href="#public-目录" aria-label="Permalink to "public 目录""></a></h3><p>此目录下所有文件为静态资源，会被复制到输出路径。</p><h3 id="index-html" tabindex="-1">index.html <a class="header-anchor" href="#index-html" aria-label="Permalink to "index.html""></a></h3><p>默认的 <code>html</code> 模板文件，如果删除此 <code>html</code> 则会使用内置的 <code>html</code> 模板文件。</p><h3 id="src-目录" tabindex="-1">src 目录 <a class="header-anchor" href="#src-目录" aria-label="Permalink to "src 目录""></a></h3><h3 id="fes-目录" tabindex="-1">.fes 目录 <a class="header-anchor" href="#fes-目录" aria-label="Permalink to ".fes 目录""></a></h3><p>临时文件目录，比如入口文件、路由等，都会被临时生成到这里。</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>不要提交 <code>.fes</code> 目录到 <code>git</code> 仓库，他们会在 <code>fes dev</code> 和 <code>fes build</code> 时被删除并重新生成。</p></div><h3 id="pages-目录" tabindex="-1">pages 目录 <a class="header-anchor" href="#pages-目录" aria-label="Permalink to "pages 目录""></a></h3><p>所有路由组件文件存放在这里。</p><h3 id="app-js" tabindex="-1">app.js <a class="header-anchor" href="#app-js" aria-label="Permalink to "app.js""></a></h3><p>运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。</p>`,32),e=[p];function t(c,D,r,F,y,C){return a(),n("div",null,e)}const i=s(l,[["render",t]]);export{A as __pageData,i as default};
|
||||
1
assets/guide_directory-structure.md.b9d44484.lean.js
Normal file
1
assets/guide_directory-structure.md.b9d44484.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as o}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"目录结构","description":"","frontmatter":{},"headers":[],"relativePath":"guide/directory-structure.md"}'),l={name:"guide/directory-structure.md"},p=o("",32),e=[p];function t(c,D,r,F,y,C){return a(),n("div",null,e)}const i=s(l,[["render",t]]);export{A as __pageData,i as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,V as o}from"./chunks/framework.6405946a.js";const i=JSON.parse('{"title":"目录结构","description":"","frontmatter":{},"headers":[],"relativePath":"guide/directory-structure.md"}'),l={name:"guide/directory-structure.md"},p=o("",32),e=[p];function t(c,D,r,F,y,u){return a(),n("div",null,e)}const q=s(l,[["render",t]]);export{i as __pageData,q as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@
|
||||
import{_ as a,o as s,c as e,V as o}from"./chunks/framework.6405946a.js";const y=JSON.parse('{"title":"环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/env.md"}'),n={name:"guide/env.md"},l=o("",64),p=[l];function t(c,r,i,d,h,u){return s(),e("div",null,p)}const E=a(n,[["render",t]]);export{y as __pageData,E as default};
|
||||
8
assets/guide_env.md.4d4dfe63.js
Normal file
8
assets/guide_env.md.4d4dfe63.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/guide_env.md.4d4dfe63.lean.js
Normal file
1
assets/guide_env.md.4d4dfe63.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as a,o as s,c as e,V as o}from"./chunks/framework.85b09291.js";const b=JSON.parse('{"title":"环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/env.md"}'),n={name:"guide/env.md"},l=o("",64),p=[l];function t(c,r,i,d,h,C){return s(),e("div",null,p)}const y=a(n,[["render",t]]);export{b as __pageData,y as default};
|
||||
@ -1,2 +1,2 @@
|
||||
import{_ as e,o as a,c as o,V as t}from"./chunks/framework.6405946a.js";const f=JSON.parse('{"title":"常见问题","description":"","frontmatter":{},"headers":[],"relativePath":"guide/faq.md"}'),s={name:"guide/faq.md"},n=t(`<h1 id="常见问题" tabindex="-1">常见问题 <a class="header-anchor" href="#常见问题" aria-label="Permalink to "常见问题""></a></h1><h4 id="为什么代码提示不生效" tabindex="-1">为什么代码提示不生效？ <a class="header-anchor" href="#为什么代码提示不生效" aria-label="Permalink to "为什么代码提示不生效？""></a></h4><ol><li>需要先运行一次<code>fes dev</code></li><li>检查tsconfig.json，<code>include</code>包含当前编辑文件，<code>compilerOptions.path</code>包含</li></ol><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">"@/*": ["./src/*"],</span></span>
|
||||
<span class="line"><span style="color:#babed8;">"@@/*": ["./src/.fes/*"]</span></span></code></pre></div>`,4),c=[n];function l(i,r,d,p,_,u){return a(),o("div",null,c)}const q=e(s,[["render",l]]);export{f as __pageData,q as default};
|
||||
import{_ as e,o as a,c as o,V as t}from"./chunks/framework.85b09291.js";const f=JSON.parse('{"title":"常见问题","description":"","frontmatter":{},"headers":[],"relativePath":"guide/faq.md"}'),s={name:"guide/faq.md"},n=t(`<h1 id="常见问题" tabindex="-1">常见问题 <a class="header-anchor" href="#常见问题" aria-label="Permalink to "常见问题""></a></h1><h4 id="为什么代码提示不生效" tabindex="-1">为什么代码提示不生效？ <a class="header-anchor" href="#为什么代码提示不生效" aria-label="Permalink to "为什么代码提示不生效？""></a></h4><ol><li>需要先运行一次<code>fes dev</code></li><li>检查tsconfig.json，<code>include</code>包含当前编辑文件，<code>compilerOptions.path</code>包含</li></ol><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">"@/*": ["./src/*"],</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">"@@/*": ["./src/.fes/*"]</span></span></code></pre></div>`,4),c=[n];function l(i,r,d,p,_,u){return a(),o("div",null,c)}const q=e(s,[["render",l]]);export{f as __pageData,q as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as o,V as t}from"./chunks/framework.6405946a.js";const f=JSON.parse('{"title":"常见问题","description":"","frontmatter":{},"headers":[],"relativePath":"guide/faq.md"}'),s={name:"guide/faq.md"},n=t("",4),c=[n];function l(i,r,d,p,_,u){return a(),o("div",null,c)}const q=e(s,[["render",l]]);export{f as __pageData,q as default};
|
||||
import{_ as e,o as a,c as o,V as t}from"./chunks/framework.85b09291.js";const f=JSON.parse('{"title":"常见问题","description":"","frontmatter":{},"headers":[],"relativePath":"guide/faq.md"}'),s={name:"guide/faq.md"},n=t("",4),c=[n];function l(i,r,d,p,_,u){return a(),o("div",null,c)}const q=e(s,[["render",l]]);export{f as __pageData,q as default};
|
||||
@ -1,60 +0,0 @@
|
||||
import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.6405946a.js";const t=p(`<h1 id="快速上手" tabindex="-1">快速上手 <a class="header-anchor" href="#快速上手" aria-label="Permalink to "快速上手""></a></h1><h2 id="依赖环境" tabindex="-1">依赖环境 <a class="header-anchor" href="#依赖环境" aria-label="Permalink to "依赖环境""></a></h2><p>首先得有 <a href="https://nodejs.org/" target="_blank" rel="noreferrer">Node.js</a>，并确保 node 版本是 12.13 或以上。</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 打印 node 版本</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">node</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">-v</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">v12.13.0</span></span></code></pre></div><p>推荐使用 <a href="https://pnpm.io/installation" target="_blank" rel="noreferrer">pnpm</a> 管理 npm 依赖</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 全局安装 pnpm</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">-g</span></span></code></pre></div><h2 id="创建项目" tabindex="-1">创建项目 <a class="header-anchor" href="#创建项目" aria-label="Permalink to "创建项目""></a></h2><p>这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。</p><h5 id="步骤-1-创建工作空间" tabindex="-1">步骤 1 创建工作空间 <a class="header-anchor" href="#步骤-1-创建工作空间" aria-label="Permalink to "步骤 1 创建工作空间""></a></h5><p>如果工作空间不存在，则先创建：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建目录 workspace</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">mkdir</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">workspace</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 进入目录 workspace</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">workspace</span></span></code></pre></div><p>如果工作空间已存在，则直接进入</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 进入目录 workspace</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">workspace</span></span></code></pre></div><h5 id="步骤-2-在工作空间创建项目" tabindex="-1">步骤 2 在工作空间创建项目 <a class="header-anchor" href="#步骤-2-在工作空间创建项目" aria-label="Permalink to "步骤 2 在工作空间创建项目""></a></h5><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-iKrlK" id="tab-pG5OkzX" checked="checked"><label for="tab-pG5OkzX">pnpm</label><input type="radio" name="group-iKrlK" id="tab--rLBVJ4"><label for="tab--rLBVJ4">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">create</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">@fesjs/fes-app</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">myapp</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npx</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">myapp</span></span></code></pre></div></div></div><p>如果项目文件夹 <code>workspace/myapp</code> 已经存在，会提示目录已存在：</p>`,16),c=["src"],r=s("p",null,"你可以选择：",-1),i=s("ul",null,[s("li",null,[s("code",null,"Overwrite"),a(" 删除项目文件夹，重新创建项目。")]),s("li",null,[s("code",null,"Merge"),a(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),y=s("code",null,"Overwrite",-1),d=s("code",null,"Merge",-1),B=s("code",null,"workspace/myapp",-1),E=s("code",null,"template",-1),h=["src"],D=p(`<p>你可以选默认适用于中后台前端应用的 <code>PC</code> 类型，也可以选适用于移动端的 <code>H5</code> 类型。</p><h5 id="步骤-3-安装依赖" tabindex="-1">步骤 3 安装依赖 <a class="header-anchor" href="#步骤-3-安装依赖" aria-label="Permalink to "步骤 3 安装依赖""></a></h5><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-KatWQ" id="tab-Q0a0Fy5" checked="checked"><label for="tab-Q0a0Fy5">pnpm</label><input type="radio" name="group-KatWQ" id="tab-q4ny-X0"><label for="tab-q4ny-X0">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 进入项目目录</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">myapp</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 安装依赖</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 进入项目目录</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">myapp</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 安装依赖</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span></span></code></pre></div></div></div><h2 id="启动项目" tabindex="-1">启动项目 <a class="header-anchor" href="#启动项目" aria-label="Permalink to "启动项目""></a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-yKW5h" id="tab-Rd1E0vr" checked="checked"><label for="tab-Rd1E0vr">pnpm</label><input type="radio" name="group-yKW5h" id="tab-WBXnCh2"><label for="tab-WBXnCh2">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 开发调试</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">run</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">v1.22.4</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">Starting</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">the</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">development</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">server</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">http://localhost:8000</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">...</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Webpack</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">15.91</span><span style="color:#C3E88D;">s</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">DONE</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">15917</span><span style="color:#C3E88D;">ms</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">11</span><span style="color:#C3E88D;">:17:08</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">AM</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 开发调试</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">run</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;">></span><span style="color:#BABED8;"> fes dev</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">Starting</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">the</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">development</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">server</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">http://localhost:8000</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">...</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Webpack</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">3.66</span><span style="color:#C3E88D;">s</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">DONE</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">3662</span><span style="color:#C3E88D;">ms</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">11</span><span style="color:#C3E88D;">:17:46</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">AM</span></span></code></pre></div></div></div><p>Fes.js 会在 <code>http://localhost:8000</code> 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。</p>`,6),C=["src"],b=p(`<h2 id="部署发布" tabindex="-1">部署发布 <a class="header-anchor" href="#部署发布" aria-label="Permalink to "部署发布""></a></h2><h3 id="构建" tabindex="-1">构建 <a class="header-anchor" href="#构建" aria-label="Permalink to "构建""></a></h3><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-ckIZ5" id="tab-rA9sR7i" checked="checked"><label for="tab-rA9sR7i">pnpm</label><input type="radio" name="group-ckIZ5" id="tab-8QbZjD9"><label for="tab-8QbZjD9">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 构建</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">build</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">run</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">v1.22.4</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">build</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Webpack</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">45.37</span><span style="color:#C3E88D;">s</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">✨</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Done</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">48.87</span><span style="color:#C3E88D;">s.</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 构建</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">run</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">build</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;">></span><span style="color:#BABED8;"> fes build</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">Webpack</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">in</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">45.37</span><span style="color:#C3E88D;">s</span></span></code></pre></div></div></div><p>构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。</p><div class="language-base"><button title="Copy Code" class="copy"></button><span class="lang">base</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">tree ./dist</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">dist</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── chunk-vendors.27cd4686.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── chunk-vendors.a5f5de67.css</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── index.11411d43.css</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── index.d72f1ba2.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── index.html</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── logo.png</span></span>
|
||||
<span class="line"><span style="color:#babed8;">└── static</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── logo.0f85bba0.png</span></span></code></pre></div><h3 id="本地验证" tabindex="-1">本地验证 <a class="header-anchor" href="#本地验证" aria-label="Permalink to "本地验证""></a></h3><p>发布之前，可以通过 <a href="https://github.com/vercel/serve" target="_blank" rel="noreferrer">serve</a> 做本地验证，验证结果应该跟执行 <code>fes dev</code> 的结果一样。</p><h3 id="部署" tabindex="-1">部署 <a class="header-anchor" href="#部署" aria-label="Permalink to "部署""></a></h3><p>本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。</p>`,9),F=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),u={name:"guide/getting-started.md"},_=Object.assign(u,{setup(m){return(A,g)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),y,a(" 或者 "),d,a(" 或者项目目录 "),B,a(" 不存在，会提示选取一个 "),E,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,h)]),D,s("img",{src:n(l)("home.png"),alt:"home"},null,8,C),b]))}});export{F as __pageData,_ as default};
|
||||
@ -1 +0,0 @@
|
||||
import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.6405946a.js";const t=p("",16),c=["src"],r=s("p",null,"你可以选择：",-1),i=s("ul",null,[s("li",null,[s("code",null,"Overwrite"),a(" 删除项目文件夹，重新创建项目。")]),s("li",null,[s("code",null,"Merge"),a(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),y=s("code",null,"Overwrite",-1),d=s("code",null,"Merge",-1),B=s("code",null,"workspace/myapp",-1),E=s("code",null,"template",-1),h=["src"],D=p("",6),C=["src"],b=p("",9),F=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),u={name:"guide/getting-started.md"},_=Object.assign(u,{setup(m){return(A,g)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),y,a(" 或者 "),d,a(" 或者项目目录 "),B,a(" 不存在，会提示选取一个 "),E,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,h)]),D,s("img",{src:n(l)("home.png"),alt:"home"},null,8,C),b]))}});export{F as __pageData,_ as default};
|
||||
60
assets/guide_getting-started.md.91924d93.js
Normal file
60
assets/guide_getting-started.md.91924d93.js
Normal file
@ -0,0 +1,60 @@
|
||||
import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.85b09291.js";const t=p(`<h1 id="快速上手" tabindex="-1">快速上手 <a class="header-anchor" href="#快速上手" aria-label="Permalink to "快速上手""></a></h1><h2 id="依赖环境" tabindex="-1">依赖环境 <a class="header-anchor" href="#依赖环境" aria-label="Permalink to "依赖环境""></a></h2><p>首先得有 <a href="https://nodejs.org/" target="_blank" rel="noreferrer">Node.js</a>，并确保 node 版本是 12.13 或以上。</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 打印 node 版本</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">node</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-v</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">v12.13.0</span></span></code></pre></div><p>推荐使用 <a href="https://pnpm.io/installation" target="_blank" rel="noreferrer">pnpm</a> 管理 npm 依赖</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 全局安装 pnpm</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-g</span></span></code></pre></div><h2 id="创建项目" tabindex="-1">创建项目 <a class="header-anchor" href="#创建项目" aria-label="Permalink to "创建项目""></a></h2><p>这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。</p><h5 id="步骤-1-创建工作空间" tabindex="-1">步骤 1 创建工作空间 <a class="header-anchor" href="#步骤-1-创建工作空间" aria-label="Permalink to "步骤 1 创建工作空间""></a></h5><p>如果工作空间不存在，则先创建：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建目录 workspace</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">mkdir</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">workspace</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 进入目录 workspace</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">workspace</span></span></code></pre></div><p>如果工作空间已存在，则直接进入</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 进入目录 workspace</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">workspace</span></span></code></pre></div><h5 id="步骤-2-在工作空间创建项目" tabindex="-1">步骤 2 在工作空间创建项目 <a class="header-anchor" href="#步骤-2-在工作空间创建项目" aria-label="Permalink to "步骤 2 在工作空间创建项目""></a></h5><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-nRBTU" id="tab-gTvxTdz" checked="checked"><label for="tab-gTvxTdz">pnpm</label><input type="radio" name="group-nRBTU" id="tab-3R6U9QM"><label for="tab-3R6U9QM">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">create</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@fesjs/fes-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">myapp</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npx</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">myapp</span></span></code></pre></div></div></div><p>如果项目文件夹 <code>workspace/myapp</code> 已经存在，会提示目录已存在：</p>`,16),c=["src"],r=s("p",null,"你可以选择：",-1),i=s("ul",null,[s("li",null,[s("code",null,"Overwrite"),a(" 删除项目文件夹，重新创建项目。")]),s("li",null,[s("code",null,"Merge"),a(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),C=s("code",null,"Overwrite",-1),y=s("code",null,"Merge",-1),d=s("code",null,"workspace/myapp",-1),A=s("code",null,"template",-1),D=["src"],h=p(`<p>你可以选默认适用于中后台前端应用的 <code>PC</code> 类型，也可以选适用于移动端的 <code>H5</code> 类型。</p><h5 id="步骤-3-安装依赖" tabindex="-1">步骤 3 安装依赖 <a class="header-anchor" href="#步骤-3-安装依赖" aria-label="Permalink to "步骤 3 安装依赖""></a></h5><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-Mp8Lq" id="tab-o1kD2PK" checked="checked"><label for="tab-o1kD2PK">pnpm</label><input type="radio" name="group-Mp8Lq" id="tab-xTdUym0"><label for="tab-xTdUym0">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 进入项目目录</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">myapp</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 安装依赖</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 进入项目目录</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">myapp</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 安装依赖</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span></span></code></pre></div></div></div><h2 id="启动项目" tabindex="-1">启动项目 <a class="header-anchor" href="#启动项目" aria-label="Permalink to "启动项目""></a></h2><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-X7S0z" id="tab-BmuHEuc" checked="checked"><label for="tab-BmuHEuc">pnpm</label><input type="radio" name="group-X7S0z" id="tab-U9AQknl"><label for="tab-U9AQknl">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 开发调试</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">v1.</span><span style="color:#F78C6C;">22.4</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">Starting</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">the</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">development</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">server</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">http://localhost:</span><span style="color:#F78C6C;">8000</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">...</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Webpack</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">15.91s</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">DONE</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">15917ms</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">11</span><span style="color:#C3E88D;">:</span><span style="color:#F78C6C;">17</span><span style="color:#C3E88D;">:</span><span style="color:#F78C6C;">08</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">AM</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 开发调试</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;"> fes dev</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">Starting</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">the</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">development</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">server</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">http://localhost:</span><span style="color:#F78C6C;">8000</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">...</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Webpack</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">3.66s</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">DONE</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">3662ms</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">11</span><span style="color:#C3E88D;">:</span><span style="color:#F78C6C;">17</span><span style="color:#C3E88D;">:</span><span style="color:#F78C6C;">46</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">AM</span></span></code></pre></div></div></div><p>Fes.js 会在 <code>http://localhost:8000</code> 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。</p>`,6),u=["src"],b=p(`<h2 id="部署发布" tabindex="-1">部署发布 <a class="header-anchor" href="#部署发布" aria-label="Permalink to "部署发布""></a></h2><h3 id="构建" tabindex="-1">构建 <a class="header-anchor" href="#构建" aria-label="Permalink to "构建""></a></h3><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-kyGo8" id="tab-quzPYPc" checked="checked"><label for="tab-quzPYPc">pnpm</label><input type="radio" name="group-kyGo8" id="tab-3MwlVmk"><label for="tab-3MwlVmk">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 构建</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">build</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">v1.</span><span style="color:#F78C6C;">22.4</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">build</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Webpack</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">45.37s</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">✨</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Done</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">48.87s.</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 构建</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">build</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;"> fes build</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">✔</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Webpack</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Compiled</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">successfully</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">in</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">45.37s</span></span></code></pre></div></div></div><p>构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。</p><div class="language-base"><button title="Copy Code" class="copy"></button><span class="lang">base</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">tree ./dist</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">dist</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── chunk-vendors.27cd4686.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── chunk-vendors.a5f5de67.css</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── index.11411d43.css</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── index.d72f1ba2.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── index.html</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── logo.png</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">└── static</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── logo.0f85bba0.png</span></span></code></pre></div><h3 id="本地验证" tabindex="-1">本地验证 <a class="header-anchor" href="#本地验证" aria-label="Permalink to "本地验证""></a></h3><p>发布之前，可以通过 <a href="https://github.com/vercel/serve" target="_blank" rel="noreferrer">serve</a> 做本地验证，验证结果应该跟执行 <code>fes dev</code> 的结果一样。</p><h3 id="部署" tabindex="-1">部署 <a class="header-anchor" href="#部署" aria-label="Permalink to "部署""></a></h3><p>本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。</p>`,9),_=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),m={name:"guide/getting-started.md"},k=Object.assign(m,{setup(g){return(E,v)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),C,a(" 或者 "),y,a(" 或者项目目录 "),d,a(" 不存在，会提示选取一个 "),A,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,D)]),h,s("img",{src:n(l)("home.png"),alt:"home"},null,8,u),b]))}});export{_ as __pageData,k as default};
|
||||
1
assets/guide_getting-started.md.91924d93.lean.js
Normal file
1
assets/guide_getting-started.md.91924d93.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{o as e,c as o,C as s,b as n,a,V as p,y as l}from"./chunks/framework.85b09291.js";const t=p("",16),c=["src"],r=s("p",null,"你可以选择：",-1),i=s("ul",null,[s("li",null,[s("code",null,"Overwrite"),a(" 删除项目文件夹，重新创建项目。")]),s("li",null,[s("code",null,"Merge"),a(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),C=s("code",null,"Overwrite",-1),y=s("code",null,"Merge",-1),d=s("code",null,"workspace/myapp",-1),A=s("code",null,"template",-1),D=["src"],h=p("",6),u=["src"],b=p("",9),_=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),m={name:"guide/getting-started.md"},k=Object.assign(m,{setup(g){return(E,v)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),C,a(" 或者 "),y,a(" 或者项目目录 "),d,a(" 不存在，会提示选取一个 "),A,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,D)]),h,s("img",{src:n(l)("home.png"),alt:"home"},null,8,u),b]))}});export{_ as __pageData,k as default};
|
||||
@ -1,15 +1,15 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"使用图片","description":"","frontmatter":{},"headers":[],"relativePath":"guide/image.md"}'),o={name:"guide/image.md"},p=n(`<h1 id="使用图片" tabindex="-1">使用图片 <a class="header-anchor" href="#使用图片" aria-label="Permalink to "使用图片""></a></h1><h2 id="使用图片-1" tabindex="-1">使用图片 <a class="header-anchor" href="#使用图片-1" aria-label="Permalink to "使用图片""></a></h2><p>假设在 <code>src/images</code> 目录下有 <code>logo.png</code>。</p><h3 id="vue-里使用图片" tabindex="-1">Vue 里使用图片 <a class="header-anchor" href="#vue-里使用图片" aria-label="Permalink to "Vue 里使用图片""></a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/images/logo.png\`</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span></code></pre></div><h3 id="js-里使用图片" tabindex="-1">JS 里使用图片 <a class="header-anchor" href="#js-里使用图片" aria-label="Permalink to "JS 里使用图片""></a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> imageUrl </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/images/logo.png\`</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="css-里使用图片" tabindex="-1">CSS 里使用图片 <a class="header-anchor" href="#css-里使用图片" aria-label="Permalink to "CSS 里使用图片""></a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">logo</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">url</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/images/logo.png</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">);</span></span>
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.85b09291.js";const u=JSON.parse('{"title":"使用图片","description":"","frontmatter":{},"headers":[],"relativePath":"guide/image.md"}'),o={name:"guide/image.md"},p=n(`<h1 id="使用图片" tabindex="-1">使用图片 <a class="header-anchor" href="#使用图片" aria-label="Permalink to "使用图片""></a></h1><h2 id="使用图片-1" tabindex="-1">使用图片 <a class="header-anchor" href="#使用图片-1" aria-label="Permalink to "使用图片""></a></h2><p>假设在 <code>src/images</code> 目录下有 <code>logo.png</code>。</p><h3 id="vue-里使用图片" tabindex="-1">Vue 里使用图片 <a class="header-anchor" href="#vue-里使用图片" aria-label="Permalink to "Vue 里使用图片""></a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/images/logo.png\`</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span></code></pre></div><h3 id="js-里使用图片" tabindex="-1">JS 里使用图片 <a class="header-anchor" href="#js-里使用图片" aria-label="Permalink to "JS 里使用图片""></a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> imageUrl </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/images/logo.png\`</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="css-里使用图片" tabindex="-1">CSS 里使用图片 <a class="header-anchor" href="#css-里使用图片" aria-label="Permalink to "CSS 里使用图片""></a></h3><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">logo</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">url</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/images/logo.png</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">);</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>注意：</p><ol><li>这是 <code>webpack</code> 的规则，如果切到其他打包工具，可能会有变化</li><li><code>less</code> 中同样适用</li></ol><h2 id="public-文件夹" tabindex="-1"><code>public</code> 文件夹 <a class="header-anchor" href="#public-文件夹" aria-label="Permalink to "\`public\` 文件夹""></a></h2><p>有些内容不需要经过 <code>webpack</code> 模块化处理，则可以将这些内容放在 <code>public</code> 文件夹，构建后会直接复制到 <code>dist</code> 目录，所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在-html-模板中使用" tabindex="-1">在 HTML 模板中使用 <a class="header-anchor" href="#在-html-模板中使用" aria-label="Permalink to "在 HTML 模板中使用""></a></h3><p>在 <code>index.html</code> 中需要设置：</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">icon</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;"><%= BASE_URL %>favicon.ico</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre></div><h3 id="在-vue-文件中使用" tabindex="-1">在.vue 文件中使用 <a class="header-anchor" href="#在-vue-文件中使用" aria-label="Permalink to "在.vue 文件中使用""></a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">\`\${publicPath}my-image.png\`</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">\`\${publicPath}my-image.png\`</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">BASE_URL</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">BASE_URL</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"使用图片","description":"","frontmatter":{},"headers":[],"relativePath":"guide/image.md"}'),o={name:"guide/image.md"},p=n("",18),e=[p];function t(c,r,D,i,F,y){return a(),l("div",null,e)}const h=s(o,[["render",t]]);export{u as __pageData,h as default};
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.85b09291.js";const u=JSON.parse('{"title":"使用图片","description":"","frontmatter":{},"headers":[],"relativePath":"guide/image.md"}'),o={name:"guide/image.md"},p=n("",18),e=[p];function t(c,r,D,i,F,y){return a(),l("div",null,e)}const h=s(o,[["render",t]]);export{u as __pageData,h as default};
|
||||
@ -1,5 +1,5 @@
|
||||
import{o as i,c as n,C as e,b as a,a as l,V as t,y as s}from"./chunks/framework.6405946a.js";const o=t('<h1 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h1><h2 id="痛点" tabindex="-1">痛点 <a class="header-anchor" href="#痛点" aria-label="Permalink to "痛点""></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">Fes.js 是什么？ <a class="header-anchor" href="#fes-js-是什么" aria-label="Permalink to "Fes.js 是什么？""></a></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">Fes.js 如何工作？ <a class="header-anchor" href="#fes-js-如何工作" aria-label="Permalink to "Fes.js 如何工作？""></a></h2><h3 id="架构" tabindex="-1">架构 <a class="header-anchor" href="#架构" aria-label="Permalink to "架构""></a></h3>',11),r=["src"],c=e("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),p=e("h3",{id:"插件和插件集",tabindex:"-1"},[l("插件和插件集 "),e("a",{class:"header-anchor",href:"#插件和插件集","aria-label":'Permalink to "插件和插件集"'},"")],-1),d=["src"],h=t(`<h3 id="fes-临时文件" tabindex="-1">.fes 临时文件 <a class="header-anchor" href="#fes-临时文件" aria-label="Permalink to ".fes 临时文件""></a></h3><p>.fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。</p><p>你通常会在 .fes 下看到以下目录</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">+ .fes</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> + core # 内部插件生成</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> + pluginA # 外部插件生成</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> + presetB # 外部插件生成</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> + fes.js # 入口文件</span></span></code></pre></div><p>临时文件是 Fes.js 中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。</p><p>你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 fes 时都会被删除并重新生成。</p><h2 id="为什么不是" tabindex="-1">为什么不是 ...? <a class="header-anchor" href="#为什么不是" aria-label="Permalink to "为什么不是 ...?""></a></h2><h3 id="vue-cli" tabindex="-1">Vue CLI <a class="header-anchor" href="#vue-cli" aria-label="Permalink to "Vue CLI""></a></h3><p>Vue CLI 是基于 Vue.js 进行快速开发的完整系统，提供交互式脚手架、丰富的官方插件，并且可通过插件进行扩展，他在打包层把体验做到了极致，但是不包含路由，不是框架。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。</p><h3 id="umi" tabindex="-1">UMI <a class="header-anchor" href="#umi" aria-label="Permalink to "UMI""></a></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),g=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md"}'),u={name:"guide/index.md"},j=Object.assign(u,{setup(_){return(b,f)=>(i(),n("div",null,[o,e("img",{src:a(s)("framework.png"),alt:"架构"},null,8,r),c,p,e("p",null,[e("img",{src:a(s)("plugins.png"),alt:"插件",title:"插件",style:{width:"500px"},class:"medium-zoom-image"},null,8,d)]),l(" Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。 "),h]))}});export{g as __pageData,j as default};
|
||||
import{o as i,c as n,C as e,b as a,a as l,V as t,y as s}from"./chunks/framework.85b09291.js";const o=t('<h1 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h1><h2 id="痛点" tabindex="-1">痛点 <a class="header-anchor" href="#痛点" aria-label="Permalink to "痛点""></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">Fes.js 是什么？ <a class="header-anchor" href="#fes-js-是什么" aria-label="Permalink to "Fes.js 是什么？""></a></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">Fes.js 如何工作？ <a class="header-anchor" href="#fes-js-如何工作" aria-label="Permalink to "Fes.js 如何工作？""></a></h2><h3 id="架构" tabindex="-1">架构 <a class="header-anchor" href="#架构" aria-label="Permalink to "架构""></a></h3>',11),r=["src"],c=e("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),p=e("h3",{id:"插件和插件集",tabindex:"-1"},[l("插件和插件集 "),e("a",{class:"header-anchor",href:"#插件和插件集","aria-label":'Permalink to "插件和插件集"'},"")],-1),d=["src"],h=t(`<h3 id="fes-临时文件" tabindex="-1">.fes 临时文件 <a class="header-anchor" href="#fes-临时文件" aria-label="Permalink to ".fes 临时文件""></a></h3><p>.fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。</p><p>你通常会在 .fes 下看到以下目录</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">+ .fes</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> + core # 内部插件生成</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> + pluginA # 外部插件生成</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> + presetB # 外部插件生成</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> + fes.js # 入口文件</span></span></code></pre></div><p>临时文件是 Fes.js 中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。</p><p>你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 fes 时都会被删除并重新生成。</p><h2 id="为什么不是" tabindex="-1">为什么不是 ...? <a class="header-anchor" href="#为什么不是" aria-label="Permalink to "为什么不是 ...?""></a></h2><h3 id="vue-cli" tabindex="-1">Vue CLI <a class="header-anchor" href="#vue-cli" aria-label="Permalink to "Vue CLI""></a></h3><p>Vue CLI 是基于 Vue.js 进行快速开发的完整系统，提供交互式脚手架、丰富的官方插件，并且可通过插件进行扩展，他在打包层把体验做到了极致，但是不包含路由，不是框架。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。</p><h3 id="umi" tabindex="-1">UMI <a class="header-anchor" href="#umi" aria-label="Permalink to "UMI""></a></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),b=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md"}'),u={name:"guide/index.md"},j=Object.assign(u,{setup(_){return(f,m)=>(i(),n("div",null,[o,e("img",{src:a(s)("framework.png"),alt:"架构"},null,8,r),c,p,e("p",null,[e("img",{src:a(s)("plugins.png"),alt:"插件",title:"插件",style:{width:"500px"},class:"medium-zoom-image"},null,8,d)]),l(" Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。 "),h]))}});export{b as __pageData,j as default};
|
||||
@ -1 +1 @@
|
||||
import{o as i,c as n,C as e,b as a,a as l,V as t,y as s}from"./chunks/framework.6405946a.js";const o=t("",11),r=["src"],c=e("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),p=e("h3",{id:"插件和插件集",tabindex:"-1"},[l("插件和插件集 "),e("a",{class:"header-anchor",href:"#插件和插件集","aria-label":'Permalink to "插件和插件集"'},"")],-1),d=["src"],h=t("",11),g=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md"}'),u={name:"guide/index.md"},j=Object.assign(u,{setup(_){return(b,f)=>(i(),n("div",null,[o,e("img",{src:a(s)("framework.png"),alt:"架构"},null,8,r),c,p,e("p",null,[e("img",{src:a(s)("plugins.png"),alt:"插件",title:"插件",style:{width:"500px"},class:"medium-zoom-image"},null,8,d)]),l(" Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。 "),h]))}});export{g as __pageData,j as default};
|
||||
import{o as i,c as n,C as e,b as a,a as l,V as t,y as s}from"./chunks/framework.85b09291.js";const o=t("",11),r=["src"],c=e("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),p=e("h3",{id:"插件和插件集",tabindex:"-1"},[l("插件和插件集 "),e("a",{class:"header-anchor",href:"#插件和插件集","aria-label":'Permalink to "插件和插件集"'},"")],-1),d=["src"],h=t("",11),b=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md"}'),u={name:"guide/index.md"},j=Object.assign(u,{setup(_){return(f,m)=>(i(),n("div",null,[o,e("img",{src:a(s)("framework.png"),alt:"架构"},null,8,r),c,p,e("p",null,[e("img",{src:a(s)("plugins.png"),alt:"插件",title:"插件",style:{width:"500px"},class:"medium-zoom-image"},null,8,d)]),l(" Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。 "),h]))}});export{b as __pageData,j as default};
|
||||
@ -1,14 +1,14 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"Mock 数据","description":"","frontmatter":{},"headers":[],"relativePath":"guide/mock.md"}'),p={name:"guide/mock.md"},o=l(`<h1 id="mock-数据" tabindex="-1">Mock 数据 <a class="header-anchor" href="#mock-数据" aria-label="Permalink to "Mock 数据""></a></h1><p>Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。</p><h2 id="约定式-mock-文件" tabindex="-1">约定式 Mock 文件 <a class="header-anchor" href="#约定式-mock-文件" aria-label="Permalink to "约定式 Mock 文件""></a></h2><p>Fes.js 约定 <code>./mock.js</code> 为 mock 文件。</p><p>比如：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">.</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── mock.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;">└── src</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── pages</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── index.vue</span></span></code></pre></div><h2 id="编写-mock-文件" tabindex="-1">编写 Mock 文件 <a class="header-anchor" href="#编写-mock-文件" aria-label="Permalink to "编写 Mock 文件""></a></h2><p>可以参考如下 🌰：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">cgiMock</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">mockjs</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">utils</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">mockjs</span><span style="color:#89DDFF;">;</span></span>
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"Mock 数据","description":"","frontmatter":{},"headers":[],"relativePath":"guide/mock.md"}'),p={name:"guide/mock.md"},o=l(`<h1 id="mock-数据" tabindex="-1">Mock 数据 <a class="header-anchor" href="#mock-数据" aria-label="Permalink to "Mock 数据""></a></h1><p>Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。</p><h2 id="约定式-mock-文件" tabindex="-1">约定式 Mock 文件 <a class="header-anchor" href="#约定式-mock-文件" aria-label="Permalink to "约定式 Mock 文件""></a></h2><p>Fes.js 约定 <code>./mock.js</code> 为 mock 文件。</p><p>比如：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── mock.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">└── src</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── pages</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── index.vue</span></span></code></pre></div><h2 id="编写-mock-文件" tabindex="-1">编写 Mock 文件 <a class="header-anchor" href="#编写-mock-文件" aria-label="Permalink to "编写 Mock 文件""></a></h2><p>可以参考如下 🌰：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">cgiMock</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">mockjs</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">utils</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Random</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">mockjs</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 测试 proxy 与 mock 用例集合</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/movie/in_theaters_mock</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/movie/in_theaters_mock</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> result</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -17,9 +17,9 @@ import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const B=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/movie/test_mock</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/movie/test_mock</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> result</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -30,9 +30,9 @@ import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const B=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 测试用例: mock.js change，重现请求，需要能拉最新的数据</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/watchtest</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/watchtest</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">JSON</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> result</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -58,36 +58,36 @@ import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const B=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 利用 mock.js 产生随机文本</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/text</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cparagraph</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/text</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cparagraph</span><span style="color:#F07178;">())</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 返回一个字符串 利用 mock.js 产生随机字符</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/random</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">mockjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">mock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">mockjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">mock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">string|1-10</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">★</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 正则匹配url, 返回一个字符串</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/</span><span style="color:#BABED8;">\\/</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;">\\/</span><span style="color:#C3E88D;">xyz</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">regexp test!</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\\/</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">\\/</span><span style="color:#C3E88D;">xyz</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">regexp test!</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/</span><span style="color:#BABED8;">\\/</span><span style="color:#C3E88D;">function</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">function test</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\\/</span><span style="color:#C3E88D;">function</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">function test</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 返回文本 readFileSync</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/file</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">file</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./package.json</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/file</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">utils</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">file</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./package.json</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 更复杂的规则配置</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> url</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#BABED8;">\\/</span><span style="color:#C3E88D;">who</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> url</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\\/</span><span style="color:#C3E88D;">who</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> method</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">GET</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> result</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">req</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">query</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">kwan</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">json</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> kwan</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">孤独患者</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> result</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">req</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">query</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">kwan</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">json</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> kwan</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">孤独患者</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Nooooooooooo</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Nooooooooooo</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> headers</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -106,31 +106,31 @@ import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const B=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 携带参数的请求</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/v2/audit/list</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">currentPage</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">pageSize</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isAudited</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">req</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">body</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/v2/audit/list</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">currentPage</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">pageSize</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">isAudited</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">req</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> data</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">currentPage</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">pageSize</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">currentPage</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">pageSize</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> totalPage</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> totalCount</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">12</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> pageData</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> length</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">pageSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">title</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> authorName</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cname</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> authorId</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">name</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> createTime</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Date</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">now</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> updateTime</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Date</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">now</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> readCount</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">integer</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">60</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> favoriteCount</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">integer</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">50</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> pageData</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Array</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">from</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> length</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">pageSize</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">title</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> authorName</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cname</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> authorId</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">name</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> createTime</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Date</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">now</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> updateTime</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Date</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">now</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> readCount</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">integer</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">60</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1000</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> favoriteCount</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Random</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">integer</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">50</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> postId</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">12323</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> serviceTag</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">业务类型</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> productTag</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">产品类型</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> requestTag</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">需求类型</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> handleTag</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">已采纳</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> postType</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">voice</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> postStatus</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isAudited</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pass</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">auditing</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> postStatus</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">isAudited</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pass</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">auditing</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> auditStatus</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">audit1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
@ -138,19 +138,19 @@ import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const B=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// multipart/form-data 类型</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/v2/upload</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/v2/upload</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">req</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">send</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> code</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> msg</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">文件上传成功</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="cgimock-参数" tabindex="-1">cgiMock 参数 <a class="header-anchor" href="#cgimock-参数" aria-label="Permalink to "cgiMock 参数""></a></h3><p>创建一个 mock 接口，参数非常灵活，参考上面的 demo 即可。</p><h3 id="mockjs-参数" tabindex="-1">mockjs 参数 <a class="header-anchor" href="#mockjs-参数" aria-label="Permalink to "mockjs 参数""></a></h3><p><a href="http://mockjs.com/" target="_blank" rel="noreferrer">Mock.js</a> 是常用的辅助生成模拟数据的三方库，借助他可以提升我们的 mock 数据能力。</p><p>比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">cgiMock</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">mockjs</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">utils</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="cgimock-参数" tabindex="-1">cgiMock 参数 <a class="header-anchor" href="#cgimock-参数" aria-label="Permalink to "cgiMock 参数""></a></h3><p>创建一个 mock 接口，参数非常灵活，参考上面的 demo 即可。</p><h3 id="mockjs-参数" tabindex="-1">mockjs 参数 <a class="header-anchor" href="#mockjs-参数" aria-label="Permalink to "mockjs 参数""></a></h3><p><a href="http://mockjs.com/" target="_blank" rel="noreferrer">Mock.js</a> 是常用的辅助生成模拟数据的三方库，借助他可以提升我们的 mock 数据能力。</p><p>比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">cgiMock</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">mockjs</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">utils</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">cgiMock</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/random</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">mockjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">mock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">mockjs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">mock</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">string|1-10</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">★</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="utils-参数" tabindex="-1">utils 参数 <a class="header-anchor" href="#utils-参数" aria-label="Permalink to "utils 参数""></a></h3><p>工具函数：</p><ul><li>utils.file(path)，从项目根目录根据 path 寻找文件，返回文件流。</li></ul><h2 id="配置-mock" tabindex="-1">配置 Mock <a class="header-anchor" href="#配置-mock" aria-label="Permalink to "配置 Mock""></a></h2><p>详见配置 <a href="./../reference/config/#mock">mock</a>。</p><h2 id="关闭-mock" tabindex="-1">关闭 Mock <a class="header-anchor" href="#关闭-mock" aria-label="Permalink to "关闭 Mock""></a></h2><p>可以通过配置关闭。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div>`,23),e=[o];function c(t,F,r,y,D,i){return n(),a("div",null,e)}const E=s(p,[["render",c]]);export{B as __pageData,E as default};
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="utils-参数" tabindex="-1">utils 参数 <a class="header-anchor" href="#utils-参数" aria-label="Permalink to "utils 参数""></a></h3><p>工具函数：</p><ul><li>utils.file(path)，从项目根目录根据 path 寻找文件，返回文件流。</li></ul><h2 id="配置-mock" tabindex="-1">配置 Mock <a class="header-anchor" href="#配置-mock" aria-label="Permalink to "配置 Mock""></a></h2><p>详见配置 <a href="./../reference/config/#mock">mock</a>。</p><h2 id="关闭-mock" tabindex="-1">关闭 Mock <a class="header-anchor" href="#关闭-mock" aria-label="Permalink to "关闭 Mock""></a></h2><p>可以通过配置关闭。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div>`,23),e=[o];function c(t,F,r,y,D,i){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{A as __pageData,d as default};
|
||||
1
assets/guide_mock.md.1451d115.lean.js
Normal file
1
assets/guide_mock.md.1451d115.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"Mock 数据","description":"","frontmatter":{},"headers":[],"relativePath":"guide/mock.md"}'),p={name:"guide/mock.md"},o=l("",23),e=[o];function c(t,F,r,y,D,i){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{A as __pageData,d as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"Mock 数据","description":"","frontmatter":{},"headers":[],"relativePath":"guide/mock.md"}'),p={name:"guide/mock.md"},o=l("",23),e=[o];function c(t,F,r,y,D,i){return n(),a("div",null,e)}const E=s(p,[["render",c]]);export{B as __pageData,E as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as o,V as e}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"插件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/plugin.md"}'),n={name:"guide/plugin.md"},l=e("",29),p=[l];function c(t,r,i,d,D,y){return a(),o("div",null,p)}const h=s(n,[["render",c]]);export{u as __pageData,h as default};
|
||||
@ -1,14 +1,14 @@
|
||||
import{_ as s,o as a,c as o,V as e}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"插件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/plugin.md"}'),n={name:"guide/plugin.md"},l=e(`<h1 id="插件" tabindex="-1">插件 <a class="header-anchor" href="#插件" aria-label="Permalink to "插件""></a></h1><h2 id="插件的-id-和-key" tabindex="-1">插件的 id 和 key <a class="header-anchor" href="#插件的-id-和-key" aria-label="Permalink to "插件的 id 和 key""></a></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="tip custom-block"><p class="custom-block-title">TIP</p><p>id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。</p></div><h2 id="启动插件" tabindex="-1">启动插件 <a class="header-anchor" href="#启动插件" aria-label="Permalink to "启动插件""></a></h2><p>有多种方式引入插件</p><h3 id="package-json-依赖" tabindex="-1">package.json 依赖 <a class="header-anchor" href="#package-json-依赖" aria-label="Permalink to "package.json 依赖""></a></h3><p>Fes.js 会自动检测 <code>dependencies</code> 和 <code>devDependencies</code> 里的 fes 插件，比如：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-request</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>那么 <code>@fesjs/plugin-request</code> 会自动被注册，无需在配置里重复声明。</p><h3 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h3><p>在配置里可通过 <code>presets</code> 和 <code>plugins</code> 配置插件，比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">presets</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./preset</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">foo/presets</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./plugin</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>通常用于几种情况：</p><ol><li>项目相对路径的插件</li><li>非 npm 包入口文件的插件</li></ol><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>请不要配置 npm 包的插件，否则会报重复注册的错误</p></div><h3 id="环境变量" tabindex="-1">环境变量 <a class="header-anchor" href="#环境变量" aria-label="Permalink to "环境变量""></a></h3><p>还可通过环境变量 <code>FES_PRESETS</code> 和 <code>FES_PLUGINS</code> 注册额外插件。</p><p>比如：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">FES_PRESETS</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">/a/b/preset.js</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div><h2 id="禁用插件" tabindex="-1">禁用插件 <a class="header-anchor" href="#禁用插件" aria-label="Permalink to "禁用插件""></a></h2><p>通过配置插件的 <code>key</code> 为 <code>false</code>，比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></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-label="Permalink to "配置插件""></a></h2><p>通过插件的 <code>key</code> 来配置插件，比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">prefix</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/v2</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>这里的 <code>mock</code> 是 Mock 插件 的 key。</p>`,29),p=[l];function c(t,r,i,d,D,y){return a(),o("div",null,p)}const h=s(n,[["render",c]]);export{u as __pageData,h as default};
|
||||
import{_ as s,o as a,c as e,V as o}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"插件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/plugin.md"}'),n={name:"guide/plugin.md"},l=o(`<h1 id="插件" tabindex="-1">插件 <a class="header-anchor" href="#插件" aria-label="Permalink to "插件""></a></h1><h2 id="插件的-id-和-key" tabindex="-1">插件的 id 和 key <a class="header-anchor" href="#插件的-id-和-key" aria-label="Permalink to "插件的 id 和 key""></a></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="tip custom-block"><p class="custom-block-title">TIP</p><p>id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。</p></div><h2 id="启动插件" tabindex="-1">启动插件 <a class="header-anchor" href="#启动插件" aria-label="Permalink to "启动插件""></a></h2><p>有多种方式引入插件</p><h3 id="package-json-依赖" tabindex="-1">package.json 依赖 <a class="header-anchor" href="#package-json-依赖" aria-label="Permalink to "package.json 依赖""></a></h3><p>Fes.js 会自动检测 <code>dependencies</code> 和 <code>devDependencies</code> 里的 fes 插件，比如：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-request</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>那么 <code>@fesjs/plugin-request</code> 会自动被注册，无需在配置里重复声明。</p><h3 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h3><p>在配置里可通过 <code>presets</code> 和 <code>plugins</code> 配置插件，比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">presets</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./preset</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">foo/presets</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./plugin</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>通常用于几种情况：</p><ol><li>项目相对路径的插件</li><li>非 npm 包入口文件的插件</li></ol><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>请不要配置 npm 包的插件，否则会报重复注册的错误</p></div><h3 id="环境变量" tabindex="-1">环境变量 <a class="header-anchor" href="#环境变量" aria-label="Permalink to "环境变量""></a></h3><p>还可通过环境变量 <code>FES_PRESETS</code> 和 <code>FES_PLUGINS</code> 注册额外插件。</p><p>比如：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">FES_PRESETS</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">/a/b/preset.js</span><span style="color:#A6ACCD;"> fes dev</span></span></code></pre></div><h2 id="禁用插件" tabindex="-1">禁用插件 <a class="header-anchor" href="#禁用插件" aria-label="Permalink to "禁用插件""></a></h2><p>通过配置插件的 <code>key</code> 为 <code>false</code>，比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></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-label="Permalink to "配置插件""></a></h2><p>通过插件的 <code>key</code> 来配置插件，比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mock</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">prefix</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/v2</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>这里的 <code>mock</code> 是 Mock 插件 的 key。</p>`,29),p=[l];function c(t,r,i,d,D,y){return a(),e("div",null,p)}const u=s(n,[["render",c]]);export{C as __pageData,u as default};
|
||||
1
assets/guide_plugin.md.bcd330ad.lean.js
Normal file
1
assets/guide_plugin.md.bcd330ad.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as e,V as o}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"插件","description":"","frontmatter":{},"headers":[],"relativePath":"guide/plugin.md"}'),n={name:"guide/plugin.md"},l=o("",29),p=[l];function c(t,r,i,d,D,y){return a(),e("div",null,p)}const u=s(n,[["render",c]]);export{C as __pageData,u as default};
|
||||
@ -1,11 +1,11 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"静态资源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/public.md"}'),o={name:"guide/public.md"},p=l(`<h1 id="静态资源" tabindex="-1">静态资源 <a class="header-anchor" href="#静态资源" aria-label="Permalink to "静态资源""></a></h1><p>有些内容不需要经过 <code>webpack</code> 模块化处理，则可以将这些内容放在 <code>public</code> 文件夹，构建后会直接复制到 <code>dist</code> 目录，所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在-html-模板中使用" tabindex="-1">在 HTML 模板中使用 <a class="header-anchor" href="#在-html-模板中使用" aria-label="Permalink to "在 HTML 模板中使用""></a></h3><p>在 <code>index.html</code> 中需要设置：</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">icon</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;"><%= BASE_URL %>favicon.ico</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre></div><h3 id="在-vue-和-js-文件中使用" tabindex="-1">在.vue 和 js 文件中使用 <a class="header-anchor" href="#在-vue-和-js-文件中使用" aria-label="Permalink to "在.vue 和 js 文件中使用""></a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">\`\${publicPath}my-image.png\`</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const u=JSON.parse('{"title":"静态资源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/public.md"}'),o={name:"guide/public.md"},p=l(`<h1 id="静态资源" tabindex="-1">静态资源 <a class="header-anchor" href="#静态资源" aria-label="Permalink to "静态资源""></a></h1><p>有些内容不需要经过 <code>webpack</code> 模块化处理，则可以将这些内容放在 <code>public</code> 文件夹，构建后会直接复制到 <code>dist</code> 目录，所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在-html-模板中使用" tabindex="-1">在 HTML 模板中使用 <a class="header-anchor" href="#在-html-模板中使用" aria-label="Permalink to "在 HTML 模板中使用""></a></h3><p>在 <code>index.html</code> 中需要设置：</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">icon</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;"><%= BASE_URL %>favicon.ico</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre></div><h3 id="在-vue-和-js-文件中使用" tabindex="-1">在.vue 和 js 文件中使用 <a class="header-anchor" href="#在-vue-和-js-文件中使用" aria-label="Permalink to "在.vue 和 js 文件中使用""></a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">\`\${publicPath}my-image.png\`</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">BASE_URL</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">BASE_URL</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"静态资源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/public.md"}'),o={name:"guide/public.md"},p=l("",7),e=[p];function t(c,r,D,F,i,y){return a(),n("div",null,e)}const h=s(o,[["render",t]]);export{u as __pageData,h as default};
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const u=JSON.parse('{"title":"静态资源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/public.md"}'),o={name:"guide/public.md"},p=l("",7),e=[p];function t(c,r,D,F,i,y){return a(),n("div",null,e)}const h=s(o,[["render",t]]);export{u as __pageData,h as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const E=JSON.parse('{"title":"路由","description":"","frontmatter":{},"headers":[],"relativePath":"guide/route.md"}'),p={name:"guide/route.md"},o=l("",62),e=[o];function t(c,r,D,F,y,B){return a(),n("div",null,e)}const A=s(p,[["render",t]]);export{E as __pageData,A as default};
|
||||
@ -1,158 +1,158 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const E=JSON.parse('{"title":"路由","description":"","frontmatter":{},"headers":[],"relativePath":"guide/route.md"}'),p={name:"guide/route.md"},o=l(`<h1 id="路由" tabindex="-1">路由 <a class="header-anchor" href="#路由" aria-label="Permalink to "路由""></a></h1><p>像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 <code>Vue Router</code> 实现的路由，想了解更多的同学可以看看<a href="https://next.router.vuejs.org/" target="_blank" rel="noreferrer">官方文档</a>。</p><h2 id="路由配置" tabindex="-1">路由配置 <a class="header-anchor" href="#路由配置" aria-label="Permalink to "路由配置""></a></h2><p>在配置文件 <code>.fes.js</code>中通过 <code>router</code> 进行配置。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">router</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">routes</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> []</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">mode</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hash</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="routes" tabindex="-1">routes <a class="header-anchor" href="#routes" aria-label="Permalink to "routes""></a></h3><p><code>routes</code> 是配置添加到路由的初始路由列表，格式为路由信息的数组。具体使用参考 <a href="https://next.router.vuejs.org/zh/guide/" target="_blank" rel="noreferrer">Vue Router 文档</a> 中关于路由配置、路由匹配相关内容。</p><h3 id="mode" tabindex="-1">mode <a class="header-anchor" href="#mode" aria-label="Permalink to "mode""></a></h3><p>创建历史记录的类型：</p><ul><li><strong>history</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createwebhistory" target="_blank" rel="noreferrer">createWebHistory</a></li><li><strong>hash</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noreferrer">createWebHashHistory</a></li><li><strong>memory</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noreferrer">createMemoryHistory</a></li></ul><p>默认是<code>hash</code>模式。</p><h2 id="约定式路由" tabindex="-1">约定式路由 <a class="header-anchor" href="#约定式路由" aria-label="Permalink to "约定式路由""></a></h2><p>约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。</p><h3 id="约定规范" tabindex="-1">约定规范 <a class="header-anchor" href="#约定规范" aria-label="Permalink to "约定规范""></a></h3><p>比如以下文件结构：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">pages</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── index.vue # 根路由页面 路径为 /</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── [...slug].vue # 模糊匹配 路径为 /:slug(.*)</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── a.vue # 路径 /a</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── b # 文件夹b</span></span>
|
||||
<span class="line"><span style="color:#babed8;">│ ├── index.vue # 路径 /b</span></span>
|
||||
<span class="line"><span style="color:#babed8;">│ ├── [slug].vue # 动态路由 /b/:slug</span></span>
|
||||
<span class="line"><span style="color:#babed8;">│ ├── c.vue # 路径 /b/c</span></span>
|
||||
<span class="line"><span style="color:#babed8;">│ └── layout.vue # /b 路径下所有页面公共的布局组件</span></span>
|
||||
<span class="line"><span style="color:#babed8;">└── layout.vue # 根路由下所有页面共用的布局组件</span></span></code></pre></div><p>编译后会得到以下路由配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">[</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/layout</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/a</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/a</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">7</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/b</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/b/layout</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">7</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/b/c</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/b/c</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">b_c</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">14</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/b/:id</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/b/@id</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">b__id</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">13</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/b</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/b/index</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">b_index</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">7</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/index</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/:pathMatch(.*)</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/*</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">FUZZYMATCH</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">;</span></span></code></pre></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-label="Permalink to "动态路由""></a></h3><p>Fes.js 里约定名称为 <code>[slug]</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><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><code>@slug</code>形式下版本会弃用，请替换为<code>[slug]</code>~</p></div><h3 id="模糊匹配" tabindex="-1">模糊匹配 <a class="header-anchor" href="#模糊匹配" aria-label="Permalink to "模糊匹配""></a></h3><p>Fes.js 里约定名称为 <code>[...slug]</code>格式的文件或文件夹映射为动态路由中的模糊匹配形式。 比如：</p><ul><li><code>src/pages/users/[...].vue</code> 会成为 <code>/users/:pathMatch(.*)</code></li><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><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><code>*</code>形式下版本会弃用，请替换为<code>[...slug]</code>~</p></div><h3 id="嵌套路由" tabindex="-1">嵌套路由 <a class="header-anchor" href="#嵌套路由" aria-label="Permalink to "嵌套路由""></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-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">pages</span></span>
|
||||
<span class="line"><span style="color:#babed8;">└── users</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> ├── layout.vue</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> ├── index.vue</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── list.vue</span></span></code></pre></div><p>会生成路由：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">[</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/users</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/users/layout</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/users</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/users/index</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/users/list</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/users/list</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="模糊匹配-1" tabindex="-1">模糊匹配 <a class="header-anchor" href="#模糊匹配-1" aria-label="Permalink to "模糊匹配""></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="noreferrer">404 路由</a>。</p><p>比如以下目录结构：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">pages</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── index.vue # 根路由页面 路径为 /</span></span>
|
||||
<span class="line"><span style="color:#babed8;">└── *.vue # 模糊匹配 路径为 *</span></span></code></pre></div><p>会生成路由：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">[</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/index</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/:pathMatch(.*)</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/**</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">;</span></span></code></pre></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-label="Permalink to "智能路由""></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-label="Permalink to "扩展路由元信息""></a></h2><p>我们在定义路由时可以配置<code>meta</code>字段，用来记录一些跟路由相关的信息：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> router </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">new</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">VueRouter</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">routes</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> Foo</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> Bar</span><span style="color:#89DDFF;">,</span></span>
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const i=JSON.parse('{"title":"路由","description":"","frontmatter":{},"headers":[],"relativePath":"guide/route.md"}'),p={name:"guide/route.md"},o=l(`<h1 id="路由" tabindex="-1">路由 <a class="header-anchor" href="#路由" aria-label="Permalink to "路由""></a></h1><p>像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 <code>Vue Router</code> 实现的路由，想了解更多的同学可以看看<a href="https://next.router.vuejs.org/" target="_blank" rel="noreferrer">官方文档</a>。</p><h2 id="路由配置" tabindex="-1">路由配置 <a class="header-anchor" href="#路由配置" aria-label="Permalink to "路由配置""></a></h2><p>在配置文件 <code>.fes.js</code>中通过 <code>router</code> 进行配置。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">router</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">routes</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> []</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mode</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hash</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="routes" tabindex="-1">routes <a class="header-anchor" href="#routes" aria-label="Permalink to "routes""></a></h3><p><code>routes</code> 是配置添加到路由的初始路由列表，格式为路由信息的数组。具体使用参考 <a href="https://next.router.vuejs.org/zh/guide/" target="_blank" rel="noreferrer">Vue Router 文档</a> 中关于路由配置、路由匹配相关内容。</p><h3 id="mode" tabindex="-1">mode <a class="header-anchor" href="#mode" aria-label="Permalink to "mode""></a></h3><p>创建历史记录的类型：</p><ul><li><strong>history</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createwebhistory" target="_blank" rel="noreferrer">createWebHistory</a></li><li><strong>hash</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noreferrer">createWebHashHistory</a></li><li><strong>memory</strong>，对应 <a href="https://next.router.vuejs.org/zh/api/#createWebHashHistory" target="_blank" rel="noreferrer">createMemoryHistory</a></li></ul><p>默认是<code>hash</code>模式。</p><h2 id="约定式路由" tabindex="-1">约定式路由 <a class="header-anchor" href="#约定式路由" aria-label="Permalink to "约定式路由""></a></h2><p>约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。</p><h3 id="约定规范" tabindex="-1">约定规范 <a class="header-anchor" href="#约定规范" aria-label="Permalink to "约定规范""></a></h3><p>比如以下文件结构：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">pages</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── index.vue # 根路由页面 路径为 /</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── [...slug].vue # 模糊匹配 路径为 /:slug(.*)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── a.vue # 路径 /a</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── b # 文件夹b</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">│ ├── index.vue # 路径 /b</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">│ ├── [slug].vue # 动态路由 /b/:slug</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">│ ├── c.vue # 路径 /b/c</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">│ └── layout.vue # /b 路径下所有页面公共的布局组件</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">└── layout.vue # 根路由下所有页面共用的布局组件</span></span></code></pre></div><p>编译后会得到以下路由配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">[</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/layout</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/a</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/a</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">a</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">7</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/b</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/b/layout</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">7</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/b/c</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/b/c</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">b_c</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">14</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/b/:id</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/b/@id</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">b__id</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">13</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/b</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/b/index</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">b_index</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">7</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/index</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/:pathMatch(.*)</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/*</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">FUZZYMATCH</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span></code></pre></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-label="Permalink to "动态路由""></a></h3><p>Fes.js 里约定名称为 <code>[slug]</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><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><code>@slug</code>形式下版本会弃用，请替换为<code>[slug]</code>~</p></div><h3 id="模糊匹配" tabindex="-1">模糊匹配 <a class="header-anchor" href="#模糊匹配" aria-label="Permalink to "模糊匹配""></a></h3><p>Fes.js 里约定名称为 <code>[...slug]</code>格式的文件或文件夹映射为动态路由中的模糊匹配形式。 比如：</p><ul><li><code>src/pages/users/[...].vue</code> 会成为 <code>/users/:pathMatch(.*)</code></li><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><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p><code>*</code>形式下版本会弃用，请替换为<code>[...slug]</code>~</p></div><h3 id="嵌套路由" tabindex="-1">嵌套路由 <a class="header-anchor" href="#嵌套路由" aria-label="Permalink to "嵌套路由""></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-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">pages</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">└── users</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ├── layout.vue</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ├── index.vue</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── list.vue</span></span></code></pre></div><p>会生成路由：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">[</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/users</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/users/layout</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/users</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/users/index</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/users/list</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/users/list</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="模糊匹配-1" tabindex="-1">模糊匹配 <a class="header-anchor" href="#模糊匹配-1" aria-label="Permalink to "模糊匹配""></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="noreferrer">404 路由</a>。</p><p>比如以下目录结构：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">pages</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── index.vue # 根路由页面 路径为 /</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">└── *.vue # 模糊匹配 路径为 *</span></span></code></pre></div><p>会生成路由：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">[</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/index</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/:pathMatch(.*)</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/**</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">count</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span></code></pre></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-label="Permalink to "智能路由""></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-label="Permalink to "扩展路由元信息""></a></h2><p>我们在定义路由时可以配置<code>meta</code>字段，用来记录一些跟路由相关的信息：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> router </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">VueRouter</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">routes</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> Foo</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">children</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> Bar</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// a meta field</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">requiresAuth</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>我们使用<code>defineRouteMeta</code> 配置 <code>meta</code>：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">defineRouteMeta</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">defineRouteMeta</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vuex测试</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>当然在单文件组件中，还可以通过<code><config></config></code>配置 <code>meta</code>：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">config</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> "name": "store",</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> "title": "vuex测试"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">config</span><span style="color:#89DDFF;">></span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>推荐使用<code>defineRouteMeta</code>，有更好的提示。</p></div><p>路由元信息在编译后会附加到路由配置中：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight has-highlighted-lines"><code><span class="line"><span style="color:#BABED8;">[</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/a</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">require</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/a</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#BABED8;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vuex测试</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line highlighted"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">]</span></span></code></pre></div><h2 id="路由跳转" tabindex="-1">路由跳转 <a class="header-anchor" href="#路由跳转" aria-label="Permalink to "路由跳转""></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="noreferrer">Vue Router 官方文档</a>。</p><h3 id="声明式" tabindex="-1">声明式 <a class="header-anchor" href="#声明式" aria-label="Permalink to "声明式""></a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">to</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/home</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Home</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span></code></pre></div><h3 id="命令式" tabindex="-1">命令式 <a class="header-anchor" href="#命令式" aria-label="Permalink to "命令式""></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="noreferrer">Vue Rouer 文档</a>了解更多。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">requiresAuth</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>我们使用<code>defineRouteMeta</code> 配置 <code>meta</code>：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">defineRouteMeta</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">defineRouteMeta</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vuex测试</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>当然在单文件组件中，还可以通过<code><config></config></code>配置 <code>meta</code>：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">config</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> "name": "store",</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> "title": "vuex测试"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">config</span><span style="color:#89DDFF;">></span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>推荐使用<code>defineRouteMeta</code>，有更好的提示。</p></div><p>路由元信息在编译后会附加到路由配置中：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight has-highlighted-lines"><code><span class="line"><span style="color:#A6ACCD;">[</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/a</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/pages/a</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vuex测试</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line highlighted"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">]</span></span></code></pre></div><h2 id="路由跳转" tabindex="-1">路由跳转 <a class="header-anchor" href="#路由跳转" aria-label="Permalink to "路由跳转""></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="noreferrer">Vue Router 官方文档</a>。</p><h3 id="声明式" tabindex="-1">声明式 <a class="header-anchor" href="#声明式" aria-label="Permalink to "声明式""></a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">to</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/home</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Home</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span></code></pre></div><h3 id="命令式" tabindex="-1">命令式 <a class="header-anchor" href="#命令式" aria-label="Permalink to "命令式""></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="noreferrer">Vue Rouer 文档</a>了解更多。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRouter</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRouter</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 这三种形式是等价的</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/users/posva#bio</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> path</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/users/posva</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> hash</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#bio</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">users</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> params</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> username</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">posva</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> hash</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#bio</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/users/posva#bio</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> path</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/users/posva</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> hash</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#bio</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">users</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> params</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> username</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">posva</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> hash</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#bio</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 只改变 hash</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> hash</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#bio</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> hash</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#bio</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 只改变 query</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> query</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> page</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> query</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> page</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 只改变 param</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> params</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> username</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">jolyne</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> params</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> username</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">jolyne</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 跳转到上一个路由</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">goBack</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">goBack</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// \b跳转到前一个历史记录</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">go</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">go</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 替换历史堆栈中的记录</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/new</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/new</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div>`,62),e=[o];function t(c,r,D,F,y,B){return a(),n("div",null,e)}const A=s(p,[["render",t]]);export{E as __pageData,A as default};
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div>`,62),e=[o];function t(c,r,D,F,y,C){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};
|
||||
1
assets/guide_route.md.bc8f1b03.lean.js
Normal file
1
assets/guide_route.md.bc8f1b03.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const i=JSON.parse('{"title":"路由","description":"","frontmatter":{},"headers":[],"relativePath":"guide/route.md"}'),p={name:"guide/route.md"},o=l("",62),e=[o];function t(c,r,D,F,y,C){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};
|
||||
@ -1,67 +1,67 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const A=JSON.parse('{"title":"运行时配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/runtime-config.md"}'),p={name:"guide/runtime-config.md"},o=l(`<h1 id="运行时配置" tabindex="-1">运行时配置 <a class="header-anchor" href="#运行时配置" aria-label="Permalink to "运行时配置""></a></h1><p>Fes.js 约定 <code>src/app.js</code> 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端，因此我们可以在这里写函数、引入浏览器端依赖项等等，注意不要引入 node 端依赖项。</p><h2 id="运行时为啥需要配置" tabindex="-1">运行时为啥需要配置？ <a class="header-anchor" href="#运行时为啥需要配置" aria-label="Permalink to "运行时为啥需要配置？""></a></h2><p>Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件，而 Fes.js 中 entry 文件由框架生成，用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。</p><p>例如：</p><p>plugin-access 插件定义运行时配置项：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">api</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addRuntimePluginKey</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">access</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>plugin-access 插件读取配置项：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> runtimeConfig </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">applyPlugins</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">access</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> ApplyPluginsType</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">modify</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">initialValue</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>而用户则只需要配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// app.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">defineRuntimeConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"运行时配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/runtime-config.md"}'),p={name:"guide/runtime-config.md"},o=l(`<h1 id="运行时配置" tabindex="-1">运行时配置 <a class="header-anchor" href="#运行时配置" aria-label="Permalink to "运行时配置""></a></h1><p>Fes.js 约定 <code>src/app.js</code> 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端，因此我们可以在这里写函数、引入浏览器端依赖项等等，注意不要引入 node 端依赖项。</p><h2 id="运行时为啥需要配置" tabindex="-1">运行时为啥需要配置？ <a class="header-anchor" href="#运行时为啥需要配置" aria-label="Permalink to "运行时为啥需要配置？""></a></h2><p>Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件，而 Fes.js 中 entry 文件由框架生成，用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。</p><p>例如：</p><p>plugin-access 插件定义运行时配置项：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">api</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addRuntimePluginKey</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">access</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>plugin-access 插件读取配置项：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> runtimeConfig </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">applyPlugins</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">access</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> ApplyPluginsType</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">modify</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">initialValue</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>而用户则只需要配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// app.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">defineRuntimeConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">defineRuntimeConfig</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">access</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">memo</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">memo</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">unAccessHandler</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> router</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> to</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> from</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> next</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">defineRuntimeConfig</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">access</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">memo</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">memo</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">unAccessHandler</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> router</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> from</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> next</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 处理逻辑</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">noFoundHandler</span><span style="color:#89DDFF;">({</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">router</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">next</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">noFoundHandler</span><span style="color:#89DDFF;">({</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">router</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">next</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 处理逻辑</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="配置智能提示" tabindex="-1">配置智能提示 <a class="header-anchor" href="#配置智能提示" aria-label="Permalink to "配置智能提示""></a></h2><p>配置可以单独导出，也可以通过 <code>defineRuntimeConfig</code> 工具函数获取类型提示。</p><p>方式一（推荐，有类型提示）：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// app.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">defineRuntimeConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="配置智能提示" tabindex="-1">配置智能提示 <a class="header-anchor" href="#配置智能提示" aria-label="Permalink to "配置智能提示""></a></h2><p>配置可以单独导出，也可以通过 <code>defineRuntimeConfig</code> 工具函数获取类型提示。</p><p>方式一（推荐，有类型提示）：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// app.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">defineRuntimeConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">defineRuntimeConfig</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">access</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">memo</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">memo</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">unAccessHandler</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> router</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> to</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> from</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> next</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">defineRuntimeConfig</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">access</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">memo</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">memo</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">unAccessHandler</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> router</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> from</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> next</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 处理逻辑</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">noFoundHandler</span><span style="color:#89DDFF;">({</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">router</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">next</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">noFoundHandler</span><span style="color:#89DDFF;">({</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">router</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">next</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 处理逻辑</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// ...其他配置项</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>方式二：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// app.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> access </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">memo</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">memo</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">unAccessHandler</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> router</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> to</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> from</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> next</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>方式二：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// app.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> access </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">memo</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">memo</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">unAccessHandler</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> router</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> from</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> next</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 处理逻辑</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">noFoundHandler</span><span style="color:#89DDFF;">({</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">router</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">next</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">noFoundHandler</span><span style="color:#89DDFF;">({</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">router</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">next</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 处理逻辑</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="配置项" tabindex="-1">配置项 <a class="header-anchor" href="#配置项" aria-label="Permalink to "配置项""></a></h2><h3 id="beforerender" tabindex="-1">beforeRender <a class="header-anchor" href="#beforerender" aria-label="Permalink to "beforeRender""></a></h3><p>beforeRender(lastOpts)</p><p>在渲染之前执行，执行<code>action</code>过程中显示 <code>loading</code> 配置的组件，执行结果作为参数 <code>initialState</code> 传给 <code>modifyClientRenderOpts</code>。</p><p>示例：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// app.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> PageLoading </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/components/PageLoading</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> UserCenter </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/components/UserCenter</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="配置项" tabindex="-1">配置项 <a class="header-anchor" href="#配置项" aria-label="Permalink to "配置项""></a></h2><h3 id="beforerender" tabindex="-1">beforeRender <a class="header-anchor" href="#beforerender" aria-label="Permalink to "beforeRender""></a></h3><p>beforeRender(lastOpts)</p><p>在渲染之前执行，执行<code>action</code>过程中显示 <code>loading</code> 配置的组件，执行结果作为参数 <code>initialState</code> 传给 <code>modifyClientRenderOpts</code>。</p><p>示例：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// app.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> PageLoading </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/components/PageLoading</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> UserCenter </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/components/UserCenter</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">beforeRender</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">lastOpts</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">beforeRender</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">lastOpts</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">lastOpts</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">lastOpts</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> loading</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">PageLoading</span><span style="color:#89DDFF;"> />,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> action</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">setRole</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">access</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">resolve</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">setRole</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">access</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">resolve</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setRole</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">admin</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -71,53 +71,53 @@ import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const A=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="patchroutes" tabindex="-1">patchRoutes <a class="header-anchor" href="#patchroutes" aria-label="Permalink to "patchRoutes""></a></h3><p>patchRoutes({routes })</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>准备删除此API，推荐使用<code>modifyRoute</code></p></div><p>修改路由。</p><p>比如在最前面添加一个 /foo 路由：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">patchRoutes</span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">routes</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">routes</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">unshift</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="patchroutes" tabindex="-1">patchRoutes <a class="header-anchor" href="#patchroutes" aria-label="Permalink to "patchRoutes""></a></h3><p>patchRoutes({routes })</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>准备删除此API，推荐使用<code>modifyRoute</code></p></div><p>修改路由。</p><p>比如在最前面添加一个 /foo 路由：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">patchRoutes</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">routes</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">routes</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">unshift</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> path</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> component</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">require</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/extraRoutes/foo</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> component</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">require</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/extraRoutes/foo</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>直接修改 <code>routes</code>, 不需要返回</p></div><h3 id="modifyroute" tabindex="-1">modifyRoute <a class="header-anchor" href="#modifyroute" aria-label="Permalink to "modifyRoute""></a></h3><p>modifyRoute({base, createHistory, routes})</p><p>修改路由配置信息。</p><p>比如在最前面添加一个 /foo 路由：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">modifyRoute</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">memo</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>直接修改 <code>routes</code>, 不需要返回</p></div><h3 id="modifyroute" tabindex="-1">modifyRoute <a class="header-anchor" href="#modifyroute" aria-label="Permalink to "modifyRoute""></a></h3><p>modifyRoute({base, createHistory, routes})</p><p>修改路由配置信息。</p><p>比如在最前面添加一个 /foo 路由：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">modifyRoute</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">memo</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">memo</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">memo</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> routes</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> path</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> component</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">require</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/extraRoutes/foo</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> component</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">require</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/extraRoutes/foo</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">default</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span><span style="color:#F07178;"> </span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">memo</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">routes</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">memo</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">routes</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> ]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>比如修改 base:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">modifyRoute</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">memo</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>比如修改 base:</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">modifyRoute</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">memo</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">memo</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> base</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">window</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">location</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">href</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">memo</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> base</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">location</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">href</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>比如改为使用createMemoryHistory：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">modifyRoute</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">memo</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>比如改为使用createMemoryHistory：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">modifyRoute</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">memo</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">memo</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> createHistory</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">createMemoryHistory</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">memo</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> createHistory</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createMemoryHistory</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="modifyclientrenderopts" tabindex="-1">modifyClientRenderOpts <a class="header-anchor" href="#modifyclientrenderopts" aria-label="Permalink to "modifyClientRenderOpts""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#BABED8;"> isSubApp </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">modifyClientRenderOpts</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">lastOpts</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="modifyclientrenderopts" tabindex="-1">modifyClientRenderOpts <a class="header-anchor" href="#modifyclientrenderopts" aria-label="Permalink to "modifyClientRenderOpts""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> isSubApp </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">modifyClientRenderOpts</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">lastOpts</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">lastOpts</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> rootElement</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isSubApp</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">sub-root</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">lastOpts</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">rootElement</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">lastOpts</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> rootElement</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">isSubApp</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">sub-root</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">lastOpts</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">rootElement</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="rootcontainer" tabindex="-1">rootContainer <a class="header-anchor" href="#rootcontainer" aria-label="Permalink to "rootContainer""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">rootContainer</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">container</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="rootcontainer" tabindex="-1">rootContainer <a class="header-anchor" href="#rootcontainer" aria-label="Permalink to "rootContainer""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">rootContainer</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">container</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">RouterView</span><span style="color:#89DDFF;">></</span><span style="color:#FFCB6B;">RouterView</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">RouterView</span><span style="color:#89DDFF;">></</span><span style="color:#FFCB6B;">RouterView</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="onappcreated" tabindex="-1">onAppCreated <a class="header-anchor" href="#onappcreated" aria-label="Permalink to "onAppCreated""></a></h3><p>onAppCreated({app})</p><p>创建 app 实例后触发。</p><p>比如用于安装 Vue 插件：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">createRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-router</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="onappcreated" tabindex="-1">onAppCreated <a class="header-anchor" href="#onappcreated" aria-label="Permalink to "onAppCreated""></a></h3><p>onAppCreated({app})</p><p>创建 app 实例后触发。</p><p>比如用于安装 Vue 插件：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-router</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">onAppCreated</span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">app</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">createRouter</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">router</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="render" tabindex="-1">render <a class="header-anchor" href="#render" aria-label="Permalink to "render""></a></h3><p>render(oldRender: Function)</p><p>覆写 render。</p><p>比如用于渲染之前做权限校验。</p><h3 id="onroutercreated" tabindex="-1">onRouterCreated <a class="header-anchor" href="#onroutercreated" aria-label="Permalink to "onRouterCreated""></a></h3><p>onRouterCreated({router})</p><p>生成 router 时触发。</p><p>比如用于收集切换路由的记录：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">onRouterCreated</span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">router</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">afterEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">from</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">to</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">onAppCreated</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">app</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">createRouter</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">router</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="render" tabindex="-1">render <a class="header-anchor" href="#render" aria-label="Permalink to "render""></a></h3><p>render(oldRender: Function)</p><p>覆写 render。</p><p>比如用于渲染之前做权限校验。</p><h3 id="onroutercreated" tabindex="-1">onRouterCreated <a class="header-anchor" href="#onroutercreated" aria-label="Permalink to "onRouterCreated""></a></h3><p>onRouterCreated({router})</p><p>生成 router 时触发。</p><p>比如用于收集切换路由的记录：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">onRouterCreated</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">router</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">afterEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">from</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">to</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="更多配置项" tabindex="-1">更多配置项 <a class="header-anchor" href="#更多配置项" aria-label="Permalink to "更多配置项""></a></h2><p>Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。</p>`,67),e=[o];function t(c,r,y,D,F,i){return n(),a("div",null,e)}const E=s(p,[["render",t]]);export{A as __pageData,E as default};
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="更多配置项" tabindex="-1">更多配置项 <a class="header-anchor" href="#更多配置项" aria-label="Permalink to "更多配置项""></a></h2><p>Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。</p>`,67),e=[o];function t(c,r,y,D,F,i){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
1
assets/guide_runtime-config.md.99433914.lean.js
Normal file
1
assets/guide_runtime-config.md.99433914.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"运行时配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/runtime-config.md"}'),p={name:"guide/runtime-config.md"},o=l("",67),e=[o];function t(c,r,y,D,F,i){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const A=JSON.parse('{"title":"运行时配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/runtime-config.md"}'),p={name:"guide/runtime-config.md"},o=l("",67),e=[o];function t(c,r,y,D,F,i){return n(),a("div",null,e)}const E=s(p,[["render",t]]);export{A as __pageData,E as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.6405946a.js";const h=JSON.parse('{"title":"HTML 模板","description":"","frontmatter":{},"headers":[],"relativePath":"guide/template.md"}'),o={name:"guide/template.md"},p=n("",13),t=[p];function e(c,r,D,F,y,i){return a(),l("div",null,t)}const u=s(o,[["render",e]]);export{h as __pageData,u as default};
|
||||
@ -1,19 +1,19 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.6405946a.js";const h=JSON.parse('{"title":"HTML 模板","description":"","frontmatter":{},"headers":[],"relativePath":"guide/template.md"}'),o={name:"guide/template.md"},p=n(`<h1 id="html-模板" tabindex="-1">HTML 模板 <a class="header-anchor" href="#html-模板" aria-label="Permalink to "HTML 模板""></a></h1><p>Fes.js 默认模板内容是：</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>fes3.0+ html 模版文件从 <code>public/index.html</code> 挪到项目根目录。</p></div><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">></span></span>
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"HTML 模板","description":"","frontmatter":{},"headers":[],"relativePath":"guide/template.md"}'),o={name:"guide/template.md"},p=n(`<h1 id="html-模板" tabindex="-1">HTML 模板 <a class="header-anchor" href="#html-模板" aria-label="Permalink to "HTML 模板""></a></h1><p>Fes.js 默认模板内容是：</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>fes3.0+ html 模版文件从 <code>public/index.html</code> 挪到项目根目录。</p></div><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><!</span><span style="color:#F07178;">DOCTYPE</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">html</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">utf-8</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">width=device-width,initial-scale=1.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;"><%= title %></span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;"><%= mountElementId %></span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">charset</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">utf-8</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">http-equiv</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">X-UA-Compatible</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">IE=edge</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">viewport</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">width=device-width,initial-scale=1.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;"><%= title %></span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;"><%= mountElementId %></span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="修改页面标题" tabindex="-1">修改页面标题 <a class="header-anchor" href="#修改页面标题" aria-label="Permalink to "修改页面标题""></a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// .fes.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">这是页面标题</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>页面的标题会设置成 <code>这是页面标题</code>。</p><h2 id="模板变量" tabindex="-1">模板变量 <a class="header-anchor" href="#模板变量" aria-label="Permalink to "模板变量""></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"><button title="Copy Code" class="copy"></button><span class="lang">env</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;"># .env</span></span>
|
||||
<span class="line"><span style="color:#babed8;">FES_APP_HELLO_WORLD=hello world</span></span></code></pre></div><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">icon</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;"><%= BASE_URL %>favicon.ico</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">这是页面标题</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>页面的标题会设置成 <code>这是页面标题</code>。</p><h2 id="模板变量" tabindex="-1">模板变量 <a class="header-anchor" href="#模板变量" aria-label="Permalink to "模板变量""></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"><button title="Copy Code" class="copy"></button><span class="lang">env</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;"># .env</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">FES_APP_HELLO_WORLD=hello world</span></span></code></pre></div><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">icon</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;"><%= BASE_URL %>favicon.ico</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;"><%= FES_APP_HELLO_WORLD %></span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span></code></pre></div>`,13),t=[p];function e(c,r,D,F,y,i){return a(),l("div",null,t)}const u=s(o,[["render",e]]);export{h as __pageData,u as default};
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;"><%= FES_APP_HELLO_WORLD %></span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">></span></span></code></pre></div>`,13),t=[p];function e(c,D,r,F,y,i){return a(),l("div",null,t)}const A=s(o,[["render",e]]);export{C as __pageData,A as default};
|
||||
1
assets/guide_template.md.d4004323.lean.js
Normal file
1
assets/guide_template.md.d4004323.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"HTML 模板","description":"","frontmatter":{},"headers":[],"relativePath":"guide/template.md"}'),o={name:"guide/template.md"},p=n("",13),t=[p];function e(c,D,r,F,y,i){return a(),l("div",null,t)}const A=s(o,[["render",e]]);export{C as __pageData,A as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as r,V as l}from"./chunks/framework.6405946a.js";const f=JSON.parse('{"title":"从 2.0.x 迁移到 3.0.x","description":"","frontmatter":{},"headers":[],"relativePath":"guide/upgrade3.md"}'),t={name:"guide/upgrade3.md"},i=l('<h1 id="从-2-0-x-迁移到-3-0-x" tabindex="-1">从 2.0.x 迁移到 3.0.x <a class="header-anchor" href="#从-2-0-x-迁移到-3-0-x" aria-label="Permalink to "从 2.0.x 迁移到 3.0.x""></a></h1><h2 id="版本-3-0-x-的-break" tabindex="-1">版本 3.0.x 的 break <a class="header-anchor" href="#版本-3-0-x-的-break" aria-label="Permalink to "版本 3.0.x 的 break""></a></h2><ol><li>编译时的 <a href="./../reference/config//#base">base</a> 配置，移到了 <a href="./../reference/config//#router">router.base</a> 下。</li><li><a href="https://github.com/webpack/webpack-dev-server" target="_blank" rel="noreferrer">webpack-dev-server</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="noreferrer">webpack-dev-server 3.x 升级 4.x</a>。</li></ol><h2 id="继续使用-webpack" tabindex="-1">继续使用 Webpack <a class="header-anchor" href="#继续使用-webpack" aria-label="Permalink to "继续使用 Webpack""></a></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="noreferrer">html-webpack-plugin</a> 相关配置，具体模版变量使用请查看<a href="./../guide/template.html">HTML 模版</a>。</li></ol><h2 id="换成-vite" tabindex="-1">换成 Vite <a class="header-anchor" href="#换成-vite" aria-label="Permalink to "换成 Vite""></a></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="noreferrer">html-webpack-plugin</a> 配置，需要改成 <a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noreferrer">vite-plugin-html</a> 的写法。</li><li>将 <code>require</code> 等 Vite 不支持的代码，改写成 Vite 支持的方式。</li></ol><h2 id="插件" tabindex="-1">插件 <a class="header-anchor" href="#插件" aria-label="Permalink to "插件""></a></h2><p>插件都需要升级到 <code>3.0.x</code> 版本，新版添加了兼容<code>builder</code>的逻辑，但是提供的接口和配置没有变化，只需要升级版本即可使用。</p><ul><li><a href="./../reference/plugin/plugins/layout.html">@fesjs/plugin-layout</a> 需要升级到<code>5.0.x</code>版本。</li><li><a href="./../reference/plugin/plugins/locale.html">@fesjs/plugin-locale</a> 需要升级到<code>4.0.x</code>版本。</li><li><a href="./../reference/plugin/plugins/qiankun.html">@fesjs/plugin-qiankun</a> 由于<code>qiankun</code>技术限制，子应用目前还只能使用 Webpack 构建。</li></ul>',10),o=[i];function c(n,d,h,p,s,u){return a(),r("div",null,o)}const m=e(t,[["render",c]]);export{f as __pageData,m as default};
|
||||
import{_ as e,o as a,c as r,V as l}from"./chunks/framework.85b09291.js";const f=JSON.parse('{"title":"从 2.0.x 迁移到 3.0.x","description":"","frontmatter":{},"headers":[],"relativePath":"guide/upgrade3.md"}'),t={name:"guide/upgrade3.md"},i=l('<h1 id="从-2-0-x-迁移到-3-0-x" tabindex="-1">从 2.0.x 迁移到 3.0.x <a class="header-anchor" href="#从-2-0-x-迁移到-3-0-x" aria-label="Permalink to "从 2.0.x 迁移到 3.0.x""></a></h1><h2 id="版本-3-0-x-的-break" tabindex="-1">版本 3.0.x 的 break <a class="header-anchor" href="#版本-3-0-x-的-break" aria-label="Permalink to "版本 3.0.x 的 break""></a></h2><ol><li>编译时的 <a href="./../reference/config//#base">base</a> 配置，移到了 <a href="./../reference/config//#router">router.base</a> 下。</li><li><a href="https://github.com/webpack/webpack-dev-server" target="_blank" rel="noreferrer">webpack-dev-server</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="noreferrer">webpack-dev-server 3.x 升级 4.x</a>。</li></ol><h2 id="继续使用-webpack" tabindex="-1">继续使用 Webpack <a class="header-anchor" href="#继续使用-webpack" aria-label="Permalink to "继续使用 Webpack""></a></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="noreferrer">html-webpack-plugin</a> 相关配置，具体模版变量使用请查看<a href="./../guide/template.html">HTML 模版</a>。</li></ol><h2 id="换成-vite" tabindex="-1">换成 Vite <a class="header-anchor" href="#换成-vite" aria-label="Permalink to "换成 Vite""></a></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="noreferrer">html-webpack-plugin</a> 配置，需要改成 <a href="https://github.com/vbenjs/vite-plugin-html" target="_blank" rel="noreferrer">vite-plugin-html</a> 的写法。</li><li>将 <code>require</code> 等 Vite 不支持的代码，改写成 Vite 支持的方式。</li></ol><h2 id="插件" tabindex="-1">插件 <a class="header-anchor" href="#插件" aria-label="Permalink to "插件""></a></h2><p>插件都需要升级到 <code>3.0.x</code> 版本，新版添加了兼容<code>builder</code>的逻辑，但是提供的接口和配置没有变化，只需要升级版本即可使用。</p><ul><li><a href="./../reference/plugin/plugins/layout.html">@fesjs/plugin-layout</a> 需要升级到<code>5.0.x</code>版本。</li><li><a href="./../reference/plugin/plugins/locale.html">@fesjs/plugin-locale</a> 需要升级到<code>4.0.x</code>版本。</li><li><a href="./../reference/plugin/plugins/qiankun.html">@fesjs/plugin-qiankun</a> 由于<code>qiankun</code>技术限制，子应用目前还只能使用 Webpack 构建。</li></ul>',10),o=[i];function c(n,d,h,p,s,u){return a(),r("div",null,o)}const m=e(t,[["render",c]]);export{f as __pageData,m as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as e,o as a,c as r,V as l}from"./chunks/framework.6405946a.js";const f=JSON.parse('{"title":"从 2.0.x 迁移到 3.0.x","description":"","frontmatter":{},"headers":[],"relativePath":"guide/upgrade3.md"}'),t={name:"guide/upgrade3.md"},i=l("",10),o=[i];function c(n,d,h,p,s,u){return a(),r("div",null,o)}const m=e(t,[["render",c]]);export{f as __pageData,m as default};
|
||||
import{_ as e,o as a,c as r,V as l}from"./chunks/framework.85b09291.js";const f=JSON.parse('{"title":"从 2.0.x 迁移到 3.0.x","description":"","frontmatter":{},"headers":[],"relativePath":"guide/upgrade3.md"}'),t={name:"guide/upgrade3.md"},i=l("",10),o=[i];function c(n,d,h,p,s,u){return a(),r("div",null,o)}const m=e(t,[["render",c]]);export{f as __pageData,m as default};
|
||||
@ -1,15 +1,15 @@
|
||||
import{_ as a,H as t,o as n,c as o,J as c,E as i,C as s,a as e}from"./chunks/framework.6405946a.js";const _=JSON.parse('{"title":"Fes.js","description":"","frontmatter":{"layout":"home","title":"Fes.js","hero":{"name":"Fes.js","tagline":"一个好用的前端应用解决方案","image":{"src":"/logo.png","alt":"VitePress"},"actions":[{"text":"快速上手","link":"/guide/getting-started.html","theme":"brand"},{"text":"项目简介","link":"/guide/","theme":"alt"}]},"features":[{"title":"Fast","details":"Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。"},{"title":"Easy","details":"基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。"},{"title":"Strong","details":"仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。"},{"title":"可扩展","details":"借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。"},{"title":"面向未来","details":"在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。"},{"title":"令人愉悦","details":"我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}]},"headers":[],"relativePath":"index.md"}'),p={name:"index.md"},r=s("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[e("像数 1, 2, 3 一样容易 "),s("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-label":'Permalink to "像数 1, 2, 3 一样容易"'},"")],-1),d=s("div",{class:"vp-code-group"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-hKaaW",id:"tab-taqtcig",checked:"checked"}),s("label",{for:"tab-taqtcig"},"pnpm"),s("input",{type:"radio",name:"group-hKaaW",id:"tab-BpPyQPT"}),s("label",{for:"tab-BpPyQPT"},"npm")]),s("div",{class:"blocks"},[s("div",{class:"language-bash active"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"create"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/fes-app"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"myapp")]),e(`
|
||||
import{_ as a,H as t,o as n,c as o,J as c,E as i,C as s,a as e}from"./chunks/framework.85b09291.js";const D=JSON.parse('{"title":"Fes.js","description":"","frontmatter":{"layout":"home","title":"Fes.js","hero":{"name":"Fes.js","tagline":"一个好用的前端应用解决方案","image":{"src":"/logo.png","alt":"VitePress"},"actions":[{"text":"快速上手","link":"/guide/getting-started.html","theme":"brand"},{"text":"项目简介","link":"/guide/","theme":"alt"}]},"features":[{"title":"Fast","details":"Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。"},{"title":"Easy","details":"基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。"},{"title":"Strong","details":"仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。"},{"title":"可扩展","details":"借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。"},{"title":"面向未来","details":"在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。"},{"title":"令人愉悦","details":"我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}]},"headers":[],"relativePath":"index.md"}'),p={name:"index.md"},r=s("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[e("像数 1, 2, 3 一样容易 "),s("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-label":'Permalink to "像数 1, 2, 3 一样容易"'},"")],-1),d=s("div",{class:"vp-code-group"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-VzWeG",id:"tab-gcBrJiR",checked:"checked"}),s("label",{for:"tab-gcBrJiR"},"pnpm"),s("input",{type:"radio",name:"group-VzWeG",id:"tab-kLiO-Ra"}),s("label",{for:"tab-kLiO-Ra"},"npm")]),s("div",{class:"blocks"},[s("div",{class:"language-bash active"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"create"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/fes-app"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"myapp")]),e(`
|
||||
`),s("span",{class:"line"}),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 安装依赖")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"i")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"i")]),e(`
|
||||
`),s("span",{class:"line"}),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 运行")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])]),s("div",{class:"language-bash"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npx"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/create-fes-app"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"myapp")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])]),s("div",{class:"language-bash"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npx"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/create-fes-app"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"myapp")]),e(`
|
||||
`),s("span",{class:"line"}),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 安装依赖")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"install")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"install")]),e(`
|
||||
`),s("span",{class:"line"}),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 运行")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"run"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])])])],-1),y=s("h2",{id:"反馈",tabindex:"-1"},[e("反馈 "),s("a",{class:"header-anchor",href:"#反馈","aria-label":'Permalink to "反馈"'},"")],-1),h=s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Github Issue"),s("th",null,"Fes.js 开源运营小助手")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("a",{href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noreferrer"},"@fesjs/fes.js/issues")]),s("td",null,[s("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})])])])],-1);function u(m,B,g,E,f,b){const l=t("HomeContent");return n(),o("div",null,[c(l,null,{default:i(()=>[r,d,y,h]),_:1})])}const D=a(p,[["render",u]]);export{_ as __pageData,D as default};
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"run"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])])])],-1),y=s("h2",{id:"反馈",tabindex:"-1"},[e("反馈 "),s("a",{class:"header-anchor",href:"#反馈","aria-label":'Permalink to "反馈"'},"")],-1),h=s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Github Issue"),s("th",null,"Fes.js 开源运营小助手")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("a",{href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noreferrer"},"@fesjs/fes.js/issues")]),s("td",null,[s("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})])])])],-1);function C(u,m,g,f,b,_){const l=t("HomeContent");return n(),o("div",null,[c(l,null,{default:i(()=>[r,d,y,h]),_:1})])}const F=a(p,[["render",C]]);export{D as __pageData,F as default};
|
||||
@ -1,15 +1,15 @@
|
||||
import{_ as a,H as t,o as n,c as o,J as c,E as i,C as s,a as e}from"./chunks/framework.6405946a.js";const _=JSON.parse('{"title":"Fes.js","description":"","frontmatter":{"layout":"home","title":"Fes.js","hero":{"name":"Fes.js","tagline":"一个好用的前端应用解决方案","image":{"src":"/logo.png","alt":"VitePress"},"actions":[{"text":"快速上手","link":"/guide/getting-started.html","theme":"brand"},{"text":"项目简介","link":"/guide/","theme":"alt"}]},"features":[{"title":"Fast","details":"Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。"},{"title":"Easy","details":"基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。"},{"title":"Strong","details":"仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。"},{"title":"可扩展","details":"借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。"},{"title":"面向未来","details":"在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。"},{"title":"令人愉悦","details":"我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}]},"headers":[],"relativePath":"index.md"}'),p={name:"index.md"},r=s("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[e("像数 1, 2, 3 一样容易 "),s("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-label":'Permalink to "像数 1, 2, 3 一样容易"'},"")],-1),d=s("div",{class:"vp-code-group"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-hKaaW",id:"tab-taqtcig",checked:"checked"}),s("label",{for:"tab-taqtcig"},"pnpm"),s("input",{type:"radio",name:"group-hKaaW",id:"tab-BpPyQPT"}),s("label",{for:"tab-BpPyQPT"},"npm")]),s("div",{class:"blocks"},[s("div",{class:"language-bash active"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"create"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/fes-app"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"myapp")]),e(`
|
||||
import{_ as a,H as t,o as n,c as o,J as c,E as i,C as s,a as e}from"./chunks/framework.85b09291.js";const D=JSON.parse('{"title":"Fes.js","description":"","frontmatter":{"layout":"home","title":"Fes.js","hero":{"name":"Fes.js","tagline":"一个好用的前端应用解决方案","image":{"src":"/logo.png","alt":"VitePress"},"actions":[{"text":"快速上手","link":"/guide/getting-started.html","theme":"brand"},{"text":"项目简介","link":"/guide/","theme":"alt"}]},"features":[{"title":"Fast","details":"Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。"},{"title":"Easy","details":"基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。"},{"title":"Strong","details":"仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。"},{"title":"可扩展","details":"借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。"},{"title":"面向未来","details":"在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。"},{"title":"令人愉悦","details":"我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}]},"headers":[],"relativePath":"index.md"}'),p={name:"index.md"},r=s("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[e("像数 1, 2, 3 一样容易 "),s("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-label":'Permalink to "像数 1, 2, 3 一样容易"'},"")],-1),d=s("div",{class:"vp-code-group"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-VzWeG",id:"tab-gcBrJiR",checked:"checked"}),s("label",{for:"tab-gcBrJiR"},"pnpm"),s("input",{type:"radio",name:"group-VzWeG",id:"tab-kLiO-Ra"}),s("label",{for:"tab-kLiO-Ra"},"npm")]),s("div",{class:"blocks"},[s("div",{class:"language-bash active"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"create"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/fes-app"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"myapp")]),e(`
|
||||
`),s("span",{class:"line"}),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 安装依赖")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"i")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"i")]),e(`
|
||||
`),s("span",{class:"line"}),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 运行")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])]),s("div",{class:"language-bash"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npx"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/create-fes-app"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"myapp")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"pnpm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])]),s("div",{class:"language-bash"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"bash"),s("pre",{class:"shiki material-theme-palenight"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 创建模板")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npx"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"@fesjs/create-fes-app"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"myapp")]),e(`
|
||||
`),s("span",{class:"line"}),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 安装依赖")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"install")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"install")]),e(`
|
||||
`),s("span",{class:"line"}),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 运行")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"run"),s("span",{style:{color:"#BABED8"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])])])],-1),y=s("h2",{id:"反馈",tabindex:"-1"},[e("反馈 "),s("a",{class:"header-anchor",href:"#反馈","aria-label":'Permalink to "反馈"'},"")],-1),h=s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Github Issue"),s("th",null,"Fes.js 开源运营小助手")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("a",{href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noreferrer"},"@fesjs/fes.js/issues")]),s("td",null,[s("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})])])])],-1);function u(m,B,g,E,f,b){const l=t("HomeContent");return n(),o("div",null,[c(l,null,{default:i(()=>[r,d,y,h]),_:1})])}const D=a(p,[["render",u]]);export{_ as __pageData,D as default};
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"run"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])])])],-1),y=s("h2",{id:"反馈",tabindex:"-1"},[e("反馈 "),s("a",{class:"header-anchor",href:"#反馈","aria-label":'Permalink to "反馈"'},"")],-1),h=s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Github Issue"),s("th",null,"Fes.js 开源运营小助手")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("a",{href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noreferrer"},"@fesjs/fes.js/issues")]),s("td",null,[s("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})])])])],-1);function C(u,m,g,f,b,_){const l=t("HomeContent");return n(),o("div",null,[c(l,null,{default:i(()=>[r,d,y,h]),_:1})])}const F=a(p,[["render",C]]);export{D as __pageData,F as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as a,o as t,c as r,C as e,a as o}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"API","description":"","frontmatter":{},"headers":[],"relativePath":"reference/api.md"}'),s={name:"reference/api.md"},c=e("h1",{id:"api",tabindex:"-1"},[o("API "),e("a",{class:"header-anchor",href:"#api","aria-label":'Permalink to "API"'},"")],-1),n=[c];function i(d,p,_,l,f,h){return t(),r("div",null,n)}const x=a(s,[["render",i]]);export{u as __pageData,x as default};
|
||||
import{_ as a,o as t,c as r,C as e,a as o}from"./chunks/framework.85b09291.js";const u=JSON.parse('{"title":"API","description":"","frontmatter":{},"headers":[],"relativePath":"reference/api.md"}'),s={name:"reference/api.md"},c=e("h1",{id:"api",tabindex:"-1"},[o("API "),e("a",{class:"header-anchor",href:"#api","aria-label":'Permalink to "API"'},"")],-1),n=[c];function i(d,p,_,l,f,h){return t(),r("div",null,n)}const x=a(s,[["render",i]]);export{u as __pageData,x as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as a,o as t,c as r,C as e,a as o}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"API","description":"","frontmatter":{},"headers":[],"relativePath":"reference/api.md"}'),s={name:"reference/api.md"},c=e("h1",{id:"api",tabindex:"-1"},[o("API "),e("a",{class:"header-anchor",href:"#api","aria-label":'Permalink to "API"'},"")],-1),n=[c];function i(d,p,_,l,f,h){return t(),r("div",null,n)}const x=a(s,[["render",i]]);export{u as __pageData,x as default};
|
||||
import{_ as a,o as t,c as r,C as e,a as o}from"./chunks/framework.85b09291.js";const u=JSON.parse('{"title":"API","description":"","frontmatter":{},"headers":[],"relativePath":"reference/api.md"}'),s={name:"reference/api.md"},c=e("h1",{id:"api",tabindex:"-1"},[o("API "),e("a",{class:"header-anchor",href:"#api","aria-label":'Permalink to "API"'},"")],-1),n=[c];function i(d,p,_,l,f,h){return t(),r("div",null,n)}const x=a(s,[["render",i]]);export{u as __pageData,x as default};
|
||||
@ -1,65 +1,65 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"API","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/api/index.md"}'),o={name:"reference/api/index.md"},p=l(`<h1 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h1><p>Fes.js 统一了 API 的出口，所有运行时 API（包含 Fes.js 内置 API 和插件提供的 API）全部通过<code>@fesjs/fes</code>导出。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">someApi</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="基础-api" tabindex="-1">基础 API <a class="header-anchor" href="#基础-api" aria-label="Permalink to "基础 API""></a></h2><h3 id="plugin" tabindex="-1">plugin <a class="header-anchor" href="#plugin" aria-label="Permalink to "plugin""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>主要在插件里面使用，项目代码中一般用不到。</p></div><p>运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">plugin</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">ApplyPluginsType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"API","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/api/index.md"}'),o={name:"reference/api/index.md"},p=l(`<h1 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h1><p>Fes.js 统一了 API 的出口，所有运行时 API（包含 Fes.js 内置 API 和插件提供的 API）全部通过<code>@fesjs/fes</code>导出。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">someApi</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="基础-api" tabindex="-1">基础 API <a class="header-anchor" href="#基础-api" aria-label="Permalink to "基础 API""></a></h2><h3 id="plugin" tabindex="-1">plugin <a class="header-anchor" href="#plugin" aria-label="Permalink to "plugin""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>主要在插件里面使用，项目代码中一般用不到。</p></div><p>运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">plugin</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ApplyPluginsType</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 注册插件</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">register</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">apply</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">dva</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">1</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">register</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">apply</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">dva</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">bar</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">1</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">register</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">apply</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">dva</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">foo</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">register</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">apply</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">dva</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">bar</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bar</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 执行插件</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 得到 { foo: 1, bar: 1 }</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">applyPlugins</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">dva</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> ApplyPluginsType</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">modify</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">initialValue</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">args</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">async</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="plugin-register-参数包含" tabindex="-1"><strong>plugin.register</strong> 参数包含: <a class="header-anchor" href="#plugin-register-参数包含" aria-label="Permalink to "**plugin.register** 参数包含:""></a></h4><ul><li>apply 插件文件导出的内容</li><li>path 插件文件路径</li></ul><h4 id="plugin-applyplugins-参数包含" tabindex="-1"><strong>plugin.applyPlugins</strong> 参数包含: <a class="header-anchor" href="#plugin-applyplugins-参数包含" aria-label="Permalink to "**plugin.applyPlugins** 参数包含:""></a></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">ApplyPluginsType <a class="header-anchor" href="#applypluginstype" aria-label="Permalink to "ApplyPluginsType""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>主要在插件里面使用，项目代码中一般用不到。</p></div><p>运行时插件执行类型，enum 类型，包含三个属性：</p><ul><li>compose，用于合并执行多个函数，函数可决定前序函数的执行时机</li><li>modify，用于修改值</li><li>event，用于执行事件，前面没有依赖关系</li></ul><h3 id="defineroutemeta" tabindex="-1">defineRouteMeta <a class="header-anchor" href="#defineroutemeta" aria-label="Permalink to "defineRouteMeta""></a></h3><p>定义页面的元信息</p><h3 id="definebuildconfig" tabindex="-1">defineBuildConfig <a class="header-anchor" href="#definebuildconfig" aria-label="Permalink to "defineBuildConfig""></a></h3><p>定义构建配置</p><h3 id="defineruntimeconfig" tabindex="-1">defineRuntimeConfig <a class="header-anchor" href="#defineruntimeconfig" aria-label="Permalink to "defineRuntimeConfig""></a></h3><p>定义运行时配置</p><h2 id="路由-api" tabindex="-1">路由 API <a class="header-anchor" href="#路由-api" aria-label="Permalink to "路由 API""></a></h2><p>Fes.js 路由基于 <a href="https://next.router.vuejs.org/introduction.html" target="_blank" rel="noreferrer">Vue Router 4.0</a>，想了解更多的同学可以看看官方文档。</p><h3 id="getrouter" tabindex="-1">getRouter <a class="header-anchor" href="#getrouter" aria-label="Permalink to "getRouter""></a></h3><p>返回当前 <code>router</code> 实例。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">getRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> router </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">getRouter</span><span style="color:#BABED8;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#BABED8;">()</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="gethistory" tabindex="-1">getHistory <a class="header-anchor" href="#gethistory" aria-label="Permalink to "getHistory""></a></h3><p>返回当前路由的 History</p><h3 id="useroute" tabindex="-1">useRoute <a class="header-anchor" href="#useroute" aria-label="Permalink to "useRoute""></a></h3><p>返回当前 <code>route</code> 实例，相当于在模板内使用 <code>$route</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useRoute</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">route</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRoute</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">applyPlugins</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">dva</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">type</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> ApplyPluginsType</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">modify</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">initialValue</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">args</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">async</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="plugin-register-参数包含" tabindex="-1"><strong>plugin.register</strong> 参数包含: <a class="header-anchor" href="#plugin-register-参数包含" aria-label="Permalink to "**plugin.register** 参数包含:""></a></h4><ul><li>apply 插件文件导出的内容</li><li>path 插件文件路径</li></ul><h4 id="plugin-applyplugins-参数包含" tabindex="-1"><strong>plugin.applyPlugins</strong> 参数包含: <a class="header-anchor" href="#plugin-applyplugins-参数包含" aria-label="Permalink to "**plugin.applyPlugins** 参数包含:""></a></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">ApplyPluginsType <a class="header-anchor" href="#applypluginstype" aria-label="Permalink to "ApplyPluginsType""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>主要在插件里面使用，项目代码中一般用不到。</p></div><p>运行时插件执行类型，enum 类型，包含三个属性：</p><ul><li>compose，用于合并执行多个函数，函数可决定前序函数的执行时机</li><li>modify，用于修改值</li><li>event，用于执行事件，前面没有依赖关系</li></ul><h3 id="defineroutemeta" tabindex="-1">defineRouteMeta <a class="header-anchor" href="#defineroutemeta" aria-label="Permalink to "defineRouteMeta""></a></h3><p>定义页面的元信息</p><h3 id="definebuildconfig" tabindex="-1">defineBuildConfig <a class="header-anchor" href="#definebuildconfig" aria-label="Permalink to "defineBuildConfig""></a></h3><p>定义构建配置</p><h3 id="defineruntimeconfig" tabindex="-1">defineRuntimeConfig <a class="header-anchor" href="#defineruntimeconfig" aria-label="Permalink to "defineRuntimeConfig""></a></h3><p>定义运行时配置</p><h2 id="路由-api" tabindex="-1">路由 API <a class="header-anchor" href="#路由-api" aria-label="Permalink to "路由 API""></a></h2><p>Fes.js 路由基于 <a href="https://next.router.vuejs.org/introduction.html" target="_blank" rel="noreferrer">Vue Router 4.0</a>，想了解更多的同学可以看看官方文档。</p><h3 id="getrouter" tabindex="-1">getRouter <a class="header-anchor" href="#getrouter" aria-label="Permalink to "getRouter""></a></h3><p>返回当前 <code>router</code> 实例。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">getRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> router </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getRouter</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">router</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="gethistory" tabindex="-1">getHistory <a class="header-anchor" href="#gethistory" aria-label="Permalink to "getHistory""></a></h3><p>返回当前路由的 History</p><h3 id="useroute" tabindex="-1">useRoute <a class="header-anchor" href="#useroute" aria-label="Permalink to "useRoute""></a></h3><p>返回当前 <code>route</code> 实例，相当于在模板内使用 <code>$route</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useRoute</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">route</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRoute</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="userouter" tabindex="-1">useRouter <a class="header-anchor" href="#userouter" aria-label="Permalink to "useRouter""></a></h3><p>返回 <code>router</code> 实例，相当于在模板语法中使用 <code>$router</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">router</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRouter</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="userouter" tabindex="-1">useRouter <a class="header-anchor" href="#userouter" aria-label="Permalink to "useRouter""></a></h3><p>返回 <code>router</code> 实例，相当于在模板语法中使用 <code>$router</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useRouter</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">router</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useRouter</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="onbeforerouteupdate" tabindex="-1">onBeforeRouteUpdate <a class="header-anchor" href="#onbeforerouteupdate" aria-label="Permalink to "onBeforeRouteUpdate""></a></h3><p>添加导航守卫，在当前路由即将更新时触发。类似于之前的<code>beforeRouteUpdate</code>，但是可用于任何组件。卸载组件时，将移除守卫。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">onBeforeRouteUpdate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">onBeforeRouteUpdate</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">next</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="onbeforerouteupdate" tabindex="-1">onBeforeRouteUpdate <a class="header-anchor" href="#onbeforerouteupdate" aria-label="Permalink to "onBeforeRouteUpdate""></a></h3><p>添加导航守卫，在当前路由即将更新时触发。类似于之前的<code>beforeRouteUpdate</code>，但是可用于任何组件。卸载组件时，将移除守卫。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">onBeforeRouteUpdate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">onBeforeRouteUpdate</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">next</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="onbeforerouteleave" tabindex="-1">onBeforeRouteLeave <a class="header-anchor" href="#onbeforerouteleave" aria-label="Permalink to "onBeforeRouteLeave""></a></h3><p>添加导航守卫，在当前路由即将离开时触发。类似于之前的<code>beforeRouteLeave</code>，但可用于任何组件。卸载组件时，将移除守卫。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">onBeforeRouteLeave</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">onBeforeRouteLeave</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;font-style:italic;">next</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="onbeforerouteleave" tabindex="-1">onBeforeRouteLeave <a class="header-anchor" href="#onbeforerouteleave" aria-label="Permalink to "onBeforeRouteLeave""></a></h3><p>添加导航守卫，在当前路由即将离开时触发。类似于之前的<code>beforeRouteLeave</code>，但可用于任何组件。卸载组件时，将移除守卫。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">onBeforeRouteLeave</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">onBeforeRouteLeave</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">from</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;font-style:italic;">next</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="createwebhashhistory" tabindex="-1">createWebHashHistory <a class="header-anchor" href="#createwebhashhistory" aria-label="Permalink to "createWebHashHistory""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意 URL 时这非常有用。注意：如果 SEO 对你很重要，你应该使用 <code>createWebHistory</code>。</p><h3 id="createwebhistory" tabindex="-1">createWebHistory <a class="header-anchor" href="#createwebhistory" aria-label="Permalink to "createWebHistory""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建 HTML5 历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。</p><h3 id="creatememoryhistory" tabindex="-1">createMemoryHistory <a class="header-anchor" href="#creatememoryhistory" aria-label="Permalink to "createMemoryHistory""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。</p><h3 id="createrouter" tabindex="-1">createRouter <a class="header-anchor" href="#createrouter" aria-label="Permalink to "createRouter""></a></h3><p>创建一个路由器实例，该实例可用于 Vue 应用程序。查看<a href="https://next.router.vuejs.org/api/#routeroptions" target="_blank" rel="noreferrer">路由器选项</a>，了解可以传递的所有属性的列表。</p><h3 id="routerlink" tabindex="-1">RouterLink <a class="header-anchor" href="#routerlink" aria-label="Permalink to "RouterLink""></a></h3><p>使用自定义组件路由器链接来创建链接，而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">to</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/about</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">Go to About</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;">></span></span></code></pre></div><p>可以查看<a href="https://next.router.vuejs.org/api/#router-link-props" target="_blank" rel="noreferrer">官方文档</a>了解更多 RouterLink 的 Porps。查看<a href="https://next.router.vuejs.org/api/#router-link-s-v-slot" target="_blank" rel="noreferrer">官方文档</a>了解 RouterLink 的作用域插槽。</p><h3 id="uselink" tabindex="-1">useLink <a class="header-anchor" href="#uselink" aria-label="Permalink to "useLink""></a></h3><p>返回的结果跟 RouterLink 的作用域插槽的属性一致，查看<a href="https://next.router.vuejs.org/api/#router-link-s-v-slot" target="_blank" rel="noreferrer">官方 API</a>了解更多。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">RouterLink</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useLink</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="createwebhashhistory" tabindex="-1">createWebHashHistory <a class="header-anchor" href="#createwebhashhistory" aria-label="Permalink to "createWebHashHistory""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意 URL 时这非常有用。注意：如果 SEO 对你很重要，你应该使用 <code>createWebHistory</code>。</p><h3 id="createwebhistory" tabindex="-1">createWebHistory <a class="header-anchor" href="#createwebhistory" aria-label="Permalink to "createWebHistory""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建 HTML5 历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。</p><h3 id="creatememoryhistory" tabindex="-1">createMemoryHistory <a class="header-anchor" href="#creatememoryhistory" aria-label="Permalink to "createMemoryHistory""></a></h3><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。</p><h3 id="createrouter" tabindex="-1">createRouter <a class="header-anchor" href="#createrouter" aria-label="Permalink to "createRouter""></a></h3><p>创建一个路由器实例，该实例可用于 Vue 应用程序。查看<a href="https://next.router.vuejs.org/api/#routeroptions" target="_blank" rel="noreferrer">路由器选项</a>，了解可以传递的所有属性的列表。</p><h3 id="routerlink" tabindex="-1">RouterLink <a class="header-anchor" href="#routerlink" aria-label="Permalink to "RouterLink""></a></h3><p>使用自定义组件路由器链接来创建链接，而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">to</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/about</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Go to About</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">router-link</span><span style="color:#89DDFF;">></span></span></code></pre></div><p>可以查看<a href="https://next.router.vuejs.org/api/#router-link-props" target="_blank" rel="noreferrer">官方文档</a>了解更多 RouterLink 的 Porps。查看<a href="https://next.router.vuejs.org/api/#router-link-s-v-slot" target="_blank" rel="noreferrer">官方文档</a>了解 RouterLink 的作用域插槽。</p><h3 id="uselink" tabindex="-1">useLink <a class="header-anchor" href="#uselink" aria-label="Permalink to "useLink""></a></h3><p>返回的结果跟 RouterLink 的作用域插槽的属性一致，查看<a href="https://next.router.vuejs.org/api/#router-link-s-v-slot" target="_blank" rel="noreferrer">官方 API</a>了解更多。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">RouterLink</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useLink</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">AppLink</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">AppLink</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">props</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">props</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// add @ts-ignore if using TypeScript</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">...</span><span style="color:#BABED8;">RouterLink</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">props</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">inactiveClass</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> String</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">RouterLink</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">props</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">inactiveClass</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> String</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">props</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">props</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// \`props\` contains \`to\` and any other prop that can be passed to <router-link></span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">navigate</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">href</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">route</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isActive</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isExactActive</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useLink</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">props</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">navigate</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">href</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">route</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">isActive</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">isExactActive</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useLink</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">props</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// profit!</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">isExternalLink</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">isExternalLink</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="routerview" tabindex="-1">RouterView <a class="header-anchor" href="#routerview" aria-label="Permalink to "RouterView""></a></h3><p>router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方，以适应你的布局。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-slot</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">{ Component, route }</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">component</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:is</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Component</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;">></span></span></code></pre></div><p>可以查看<a href="https://next.router.vuejs.org/api/#router-view-props" target="_blank" rel="noreferrer">官方文档</a>了解更多 RouterView 的 Porps。查看<a href="https://next.router.vuejs.org/api/#router-view-s-v-slot" target="_blank" rel="noreferrer">官方文档</a>了解 RouterView 的作用域插槽。</p><h3 id="其他-router-methods" tabindex="-1">其他 Router Methods <a class="header-anchor" href="#其他-router-methods" aria-label="Permalink to "其他 Router Methods""></a></h3><p>查看<a href="https://next.router.vuejs.org/api/#router-methods" target="_blank" rel="noreferrer">vue-router 官方文档</a>了解更多。</p>`,65),e=[p];function t(r,c,y,D,i,F){return a(),n("div",null,e)}const d=s(o,[["render",t]]);export{B as __pageData,d as default};
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">component</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:is</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Component</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">router-view</span><span style="color:#89DDFF;">></span></span></code></pre></div><p>可以查看<a href="https://next.router.vuejs.org/api/#router-view-props" target="_blank" rel="noreferrer">官方文档</a>了解更多 RouterView 的 Porps。查看<a href="https://next.router.vuejs.org/api/#router-view-s-v-slot" target="_blank" rel="noreferrer">官方文档</a>了解 RouterView 的作用域插槽。</p><h3 id="其他-router-methods" tabindex="-1">其他 Router Methods <a class="header-anchor" href="#其他-router-methods" aria-label="Permalink to "其他 Router Methods""></a></h3><p>查看<a href="https://next.router.vuejs.org/api/#router-methods" target="_blank" rel="noreferrer">vue-router 官方文档</a>了解更多。</p>`,65),e=[p];function t(r,c,y,D,i,F){return a(),n("div",null,e)}const u=s(o,[["render",t]]);export{A as __pageData,u as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"API","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/api/index.md"}'),o={name:"reference/api/index.md"},p=l("",65),e=[p];function t(r,c,y,D,i,F){return a(),n("div",null,e)}const d=s(o,[["render",t]]);export{B as __pageData,d as default};
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"API","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/api/index.md"}'),o={name:"reference/api/index.md"},p=l("",65),e=[p];function t(r,c,y,D,i,F){return a(),n("div",null,e)}const u=s(o,[["render",t]]);export{A as __pageData,u as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,V as e}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"命令行工具","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/cli/index.md"}'),l={name:"reference/cli/index.md"},p=e("",34),o=[p];function t(c,i,r,d,b,y){return a(),n("div",null,o)}const f=s(l,[["render",t]]);export{u as __pageData,f as default};
|
||||
@ -1,71 +1,71 @@
|
||||
import{_ as s,o as a,c as n,V as e}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"命令行工具","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/cli/index.md"}'),l={name:"reference/cli/index.md"},p=e(`<h1 id="命令行工具" tabindex="-1">命令行工具 <a class="header-anchor" href="#命令行工具" aria-label="Permalink to "命令行工具""></a></h1><h2 id="create-fes-app" tabindex="-1">create-fes-app <a class="header-anchor" href="#create-fes-app" aria-label="Permalink to "create-fes-app""></a></h2><p>通过 <code>create-fes-app</code> 命令创建项目模板，输入<code>create-fes-app -h</code>则可以看到如下信息：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">Usage: create-fes-app <name></span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">Options:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -v, --version Output the current version</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -h, --help Display help for command</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -f, --force Overwrite target directory if it exists</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -m, --merge Merge target directory if it exists</span></span></code></pre></div><p>可以在本机安装后使用：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-WPA_I" id="tab-r8bT1MI" checked="checked"><label for="tab-r8bT1MI">pnpm</label><input type="radio" name="group-WPA_I" id="tab--A1JQjV"><label for="tab--A1JQjV">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 全局安装</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">global</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">add</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span></span>
|
||||
import{_ as s,o as a,c as n,V as e}from"./chunks/framework.85b09291.js";const h=JSON.parse('{"title":"命令行工具","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/cli/index.md"}'),l={name:"reference/cli/index.md"},p=e(`<h1 id="命令行工具" tabindex="-1">命令行工具 <a class="header-anchor" href="#命令行工具" aria-label="Permalink to "命令行工具""></a></h1><h2 id="create-fes-app" tabindex="-1">create-fes-app <a class="header-anchor" href="#create-fes-app" aria-label="Permalink to "create-fes-app""></a></h2><p>通过 <code>create-fes-app</code> 命令创建项目模板，输入<code>create-fes-app -h</code>则可以看到如下信息：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Usage: create-fes-app <name></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Options:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -v, --version Output the current version</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -h, --help Display help for command</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -f, --force Overwrite target directory if it exists</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -m, --merge Merge target directory if it exists</span></span></code></pre></div><p>可以在本机安装后使用：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-3yil7" id="tab-Yzzegtg" checked="checked"><label for="tab-Yzzegtg">pnpm</label><input type="radio" name="group-3yil7" id="tab-0YCMppt"><label for="tab-0YCMppt">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 全局安装</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">global</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">add</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">create-fes-app</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">fes-app</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 全局安装</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">-g</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">create-fes-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">fes-app</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 全局安装</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-g</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">create-fes-app</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">fes-app</span></span></code></pre></div></div></div><p>推荐使用 <code>pnpm create</code> 和 <code>npx</code> 方式创建模板，一直使用最新的模板：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-RJ_BR" id="tab-htG7wOx" checked="checked"><label for="tab-htG7wOx">pnpm</label><input type="radio" name="group-RJ_BR" id="tab-vPGU7R8"><label for="tab-vPGU7R8">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">create</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">@fesjs/fes-app</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">myapp</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">create-fes-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">fes-app</span></span></code></pre></div></div></div><p>推荐使用 <code>pnpm create</code> 和 <code>npx</code> 方式创建模板，一直使用最新的模板：</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-L49tU" id="tab-cCUAuzx" checked="checked"><label for="tab-cCUAuzx">pnpm</label><input type="radio" name="group-L49tU" id="tab-1qndVxu"><label for="tab-1qndVxu">npm</label></div><div class="blocks"><div class="language-bash active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">create</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@fesjs/fes-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">myapp</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 安装依赖</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 运行</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npx</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">myapp</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># 创建模板</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npx</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">myapp</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 安装依赖</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">install</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># 运行</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">run</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div></div></div><h2 id="fes" tabindex="-1">fes <a class="header-anchor" href="#fes" aria-label="Permalink to "fes""></a></h2><p>需要在项目根目录执行 <code>fes</code> 命令，输入<code>fes -h</code>则可以看到如下信息：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">Usage: fes <command> [options]</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">一个好用的前端应用解决方案</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">Options:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -v, --vers output the current version</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -h, --help display help for command</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">Commands:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> build build application for production</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> dev [options] start a local http service for development</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> help show command helps</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> info print debugging information about your environment</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> webpack [options] inspect webpack configurations</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;"> Run fes <command> --help for detailed usage of given command.</span></span></code></pre></div><h3 id="fes-dev" tabindex="-1">fes dev <a class="header-anchor" href="#fes-dev" aria-label="Permalink to "fes dev""></a></h3><p>启动本地开发服务器进行项目的开发调试。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">Usage: fes dev [options]</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">start a local http service for development</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">Options:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --port http service port, like 8000</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --https whether to turn on the https service</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -h, --help display help for command</span></span></code></pre></div><p>比如：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">--port=8000</span></span></code></pre></div><h3 id="fes-build" tabindex="-1">fes build <a class="header-anchor" href="#fes-build" aria-label="Permalink to "fes build""></a></h3><p>编译构建 web 产物。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">Usage: fes build [options]</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">build application for production</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">Options:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -h, --help display help for command</span></span></code></pre></div><p>比如：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">fes build</span></span></code></pre></div><h3 id="fes-help" tabindex="-1">fes help <a class="header-anchor" href="#fes-help" aria-label="Permalink to "fes help""></a></h3><p>打印帮助文档。 比如：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">help</span></span></code></pre></div><h3 id="fes-info" tabindex="-1">fes info <a class="header-anchor" href="#fes-info" aria-label="Permalink to "fes info""></a></h3><p>打印当前项目的有用的环境信息，用来帮助定位问题。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">Usage: fes info [options]</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">print debugging information about your environment</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">Options:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -h, --help display help for command</span></span></code></pre></div><p>比如：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">info</span></span></code></pre></div><h3 id="fes-webpack" tabindex="-1">fes webpack <a class="header-anchor" href="#fes-webpack" aria-label="Permalink to "fes webpack""></a></h3><p>查看项目使用的 webpack 配置。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">Usage: fes webpack [options]</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">inspect webpack configurations</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">Options:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --rule <ruleName> inspect a specific module rule</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --plugin <pluginName> inspect a specific plugin</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --rules list all module rule names</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --plugins list all plugin names</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --verbose show full function definitions in output</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -h, --help display help for command</span></span></code></pre></div><p>比如：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">webpack</span></span></code></pre></div>`,34),o=[p];function t(c,i,r,d,b,y){return a(),n("div",null,o)}const f=s(l,[["render",t]]);export{u as __pageData,f as default};
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div></div></div><h2 id="fes" tabindex="-1">fes <a class="header-anchor" href="#fes" aria-label="Permalink to "fes""></a></h2><p>需要在项目根目录执行 <code>fes</code> 命令，输入<code>fes -h</code>则可以看到如下信息：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Usage: fes <command> [options]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">一个好用的前端应用解决方案</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Options:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -v, --vers output the current version</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -h, --help display help for command</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Commands:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> build build application for production</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> dev [options] start a local http service for development</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> help show command helps</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> info print debugging information about your environment</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> webpack [options] inspect webpack configurations</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Run fes <command> --help for detailed usage of given command.</span></span></code></pre></div><h3 id="fes-dev" tabindex="-1">fes dev <a class="header-anchor" href="#fes-dev" aria-label="Permalink to "fes dev""></a></h3><p>启动本地开发服务器进行项目的开发调试。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Usage: fes dev [options]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">start a local http service for development</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Options:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --port http service port, like 8000</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --https whether to turn on the https service</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -h, --help display help for command</span></span></code></pre></div><p>比如：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">fes</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">--port=8000</span></span></code></pre></div><h3 id="fes-build" tabindex="-1">fes build <a class="header-anchor" href="#fes-build" aria-label="Permalink to "fes build""></a></h3><p>编译构建 web 产物。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Usage: fes build [options]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">build application for production</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Options:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -h, --help display help for command</span></span></code></pre></div><p>比如：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">fes build</span></span></code></pre></div><h3 id="fes-help" tabindex="-1">fes help <a class="header-anchor" href="#fes-help" aria-label="Permalink to "fes help""></a></h3><p>打印帮助文档。 比如：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">fes</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">help</span></span></code></pre></div><h3 id="fes-info" tabindex="-1">fes info <a class="header-anchor" href="#fes-info" aria-label="Permalink to "fes info""></a></h3><p>打印当前项目的有用的环境信息，用来帮助定位问题。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Usage: fes info [options]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">print debugging information about your environment</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Options:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -h, --help display help for command</span></span></code></pre></div><p>比如：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">fes</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">info</span></span></code></pre></div><h3 id="fes-webpack" tabindex="-1">fes webpack <a class="header-anchor" href="#fes-webpack" aria-label="Permalink to "fes webpack""></a></h3><p>查看项目使用的 webpack 配置。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Usage: fes webpack [options]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">inspect webpack configurations</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Options:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --rule <ruleName> inspect a specific module rule</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --plugin <pluginName> inspect a specific plugin</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --rules list all module rule names</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --plugins list all plugin names</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --verbose show full function definitions in output</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -h, --help display help for command</span></span></code></pre></div><p>比如：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">fes</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">webpack</span></span></code></pre></div>`,34),o=[p];function t(c,i,r,C,d,y){return a(),n("div",null,o)}const u=s(l,[["render",t]]);export{h as __pageData,u as default};
|
||||
1
assets/reference_cli_index.md.9de78a69.lean.js
Normal file
1
assets/reference_cli_index.md.9de78a69.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as e}from"./chunks/framework.85b09291.js";const h=JSON.parse('{"title":"命令行工具","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/cli/index.md"}'),l={name:"reference/cli/index.md"},p=e("",34),o=[p];function t(c,i,r,C,d,y){return a(),n("div",null,o)}const u=s(l,[["render",t]]);export{h as __pageData,u as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/config/index.md"}'),o={name:"reference/config/index.md"},e=n("",134),p=[e];function t(c,r,i,D,y,F){return a(),l("div",null,p)}const B=s(o,[["render",t]]);export{u as __pageData,B as default};
|
||||
File diff suppressed because one or more lines are too long
1
assets/reference_config_index.md.d3e13751.lean.js
Normal file
1
assets/reference_config_index.md.d3e13751.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{"aside":"left","outline":[2,3]},"headers":[],"relativePath":"reference/config/index.md"}'),o={name:"reference/config/index.md"},e=n("",134),p=[e];function t(c,r,i,D,y,F){return a(),l("div",null,p)}const A=s(o,[["render",t]]);export{C as __pageData,A as default};
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const d=JSON.parse('{"title":"插件 API","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/dev/api.md"}'),p={name:"reference/plugin/dev/api.md"},o=l("",211),e=[o];function t(c,r,y,D,F,i){return a(),n("div",null,e)}const A=s(p,[["render",t]]);export{d as __pageData,A as default};
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"插件 API","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/dev/api.md"}'),p={name:"reference/plugin/dev/api.md"},o=l("",211),e=[o];function t(c,r,y,D,F,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -1,12 +1,12 @@
|
||||
import{_ as s,o as a,c as e,V as n}from"./chunks/framework.6405946a.js";const h=JSON.parse('{"title":"插件介绍","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/dev/index.md"}'),l={name:"reference/plugin/dev/index.md"},o=n(`<h1 id="插件介绍" tabindex="-1">插件介绍 <a class="header-anchor" href="#插件介绍" aria-label="Permalink to "插件介绍""></a></h1><h2 id="开始" tabindex="-1">开始 <a class="header-anchor" href="#开始" aria-label="Permalink to "开始""></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">api</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">api</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">describe</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
import{_ as s,o as a,c as e,V as n}from"./chunks/framework.85b09291.js";const h=JSON.parse('{"title":"插件介绍","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/dev/index.md"}'),l={name:"reference/plugin/dev/index.md"},o=n(`<h1 id="插件介绍" tabindex="-1">插件介绍 <a class="header-anchor" href="#插件介绍" aria-label="Permalink to "插件介绍""></a></h1><h2 id="开始" tabindex="-1">开始 <a class="header-anchor" href="#开始" aria-label="Permalink to "开始""></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">api</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">api</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">describe</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> key</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">esbuild</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> config</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> schema</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">joi</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">joi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">object</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> schema</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">joi</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">joi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">object</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> default</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> enableBy</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">api</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">EnableBy</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">config</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> enableBy</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">api</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">EnableBy</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></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-label="Permalink to "创建插件""></a></h2><h5 id="第一步-安装create-fes-app" tabindex="-1">第一步：安装<code>create-fes-app</code> <a class="header-anchor" href="#第一步-安装create-fes-app" aria-label="Permalink to "第一步：安装\`create-fes-app\`""></a></h5><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">-g</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span></span></code></pre></div><h5 id="第二步-创建插件项目" tabindex="-1">第二步：创建插件项目 <a class="header-anchor" href="#第二步-创建插件项目" aria-label="Permalink to "第二步：创建插件项目""></a></h5><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">create-fes-app</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">pluginName</span></span></code></pre></div><p>在询问<code>Pick an template</code>时选择<code>Plugin</code>!</p><h5 id="第三步-进入插件目录-安装依赖" tabindex="-1">第三步：进入插件目录 & 安装依赖 <a class="header-anchor" href="#第三步-进入插件目录-安装依赖" aria-label="Permalink to "第三步：进入插件目录 & 安装依赖""></a></h5><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">pluginName</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">&</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">i</span></span></code></pre></div><h5 id="第四步-启动编译" tabindex="-1">第四步：启动编译 <a class="header-anchor" href="#第四步-启动编译" aria-label="Permalink to "第四步：启动编译""></a></h5><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div><h5 id="第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" tabindex="-1">第五步：使用插件 API 完成你的插件！（可以参考其他插件理解 api 用法和场景） <a class="header-anchor" href="#第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" aria-label="Permalink to "第五步：使用插件 API 完成你的插件！（可以参考其他插件理解 api 用法和场景）""></a></h5><h2 id="发布到-npm" tabindex="-1">发布到 npm <a class="header-anchor" href="#发布到-npm" aria-label="Permalink to "发布到 npm""></a></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=[o];function t(c,r,i,d,y,F){return a(),e("div",null,p)}const u=s(l,[["render",t]]);export{h as __pageData,u as default};
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></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-label="Permalink to "创建插件""></a></h2><h5 id="第一步-安装create-fes-app" tabindex="-1">第一步：安装<code>create-fes-app</code> <a class="header-anchor" href="#第一步-安装create-fes-app" aria-label="Permalink to "第一步：安装\`create-fes-app\`""></a></h5><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-g</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@fesjs/create-fes-app</span></span></code></pre></div><h5 id="第二步-创建插件项目" tabindex="-1">第二步：创建插件项目 <a class="header-anchor" href="#第二步-创建插件项目" aria-label="Permalink to "第二步：创建插件项目""></a></h5><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">create-fes-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">pluginName</span></span></code></pre></div><p>在询问<code>Pick an template</code>时选择<code>Plugin</code>!</p><h5 id="第三步-进入插件目录-安装依赖" tabindex="-1">第三步：进入插件目录 & 安装依赖 <a class="header-anchor" href="#第三步-进入插件目录-安装依赖" aria-label="Permalink to "第三步：进入插件目录 & 安装依赖""></a></h5><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">cd</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">pluginName</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span></span></code></pre></div><h5 id="第四步-启动编译" tabindex="-1">第四步：启动编译 <a class="header-anchor" href="#第四步-启动编译" aria-label="Permalink to "第四步：启动编译""></a></h5><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">pnpm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">dev</span></span></code></pre></div><h5 id="第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" tabindex="-1">第五步：使用插件 API 完成你的插件！（可以参考其他插件理解 api 用法和场景） <a class="header-anchor" href="#第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" aria-label="Permalink to "第五步：使用插件 API 完成你的插件！（可以参考其他插件理解 api 用法和场景）""></a></h5><h2 id="发布到-npm" tabindex="-1">发布到 npm <a class="header-anchor" href="#发布到-npm" aria-label="Permalink to "发布到 npm""></a></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=[o];function t(c,r,i,d,y,F){return a(),e("div",null,p)}const C=s(l,[["render",t]]);export{h as __pageData,C as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as e,V as n}from"./chunks/framework.6405946a.js";const h=JSON.parse('{"title":"插件介绍","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/dev/index.md"}'),l={name:"reference/plugin/dev/index.md"},o=n("",23),p=[o];function t(c,r,i,d,y,F){return a(),e("div",null,p)}const u=s(l,[["render",t]]);export{h as __pageData,u as default};
|
||||
import{_ as s,o as a,c as e,V as n}from"./chunks/framework.85b09291.js";const h=JSON.parse('{"title":"插件介绍","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/dev/index.md"}'),l={name:"reference/plugin/dev/index.md"},o=n("",23),p=[o];function t(c,r,i,d,y,F){return a(),e("div",null,p)}const C=s(l,[["render",t]]);export{h as __pageData,C as default};
|
||||
@ -1 +1 @@
|
||||
import{o as e,c as s,C as t,b as a,V as d,y as r}from"./chunks/framework.6405946a.js";const l=d('<h1 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h1><h2 id="插件列表" tabindex="-1">插件列表 <a class="header-anchor" href="#插件列表" aria-label="Permalink to "插件列表""></a></h2><table><thead><tr><th>插件</th><th>介绍</th></tr></thead><tbody><tr><td><a href="./plugins/access.html">@fesjs/plugin-access</a></td><td>提供对页面资源的权限控制能力</td></tr><tr><td><a href="./plugins/enums.html">@fesjs/plugin-enums</a></td><td>提供统一的枚举存取及丰富的函数来处理枚举</td></tr><tr><td><a href="./plugins/icon.html">@fesjs/plugin-icon</a></td><td>svg 文件自动注册为组件</td></tr><tr><td><a href="./plugins/jest.html">@fesjs/plugin-jest</a></td><td>基于 <code>Jest</code>，提供单元测试、覆盖测试能力</td></tr><tr><td><a href="./plugins/layout.html">@fesjs/plugin-layout</a></td><td>简单的配置即可拥有布局，包括导航以及侧边栏</td></tr><tr><td><a href="./plugins/locale.html">@fesjs/plugin-locale</a></td><td>基于 <code>Vue I18n</code>，提供国际化能力</td></tr><tr><td><a href="./plugins/model.html">@fesjs/plugin-model</a></td><td>简易的数据管理方案</td></tr><tr><td><a href="./plugins/request.html">@fesjs/plugin-request</a></td><td>基于 <code>Axios</code> 封装的 request，内置防止重复请求、请求节流、错误处理等功能</td></tr><tr><td><a href="./plugins/vuex.html">@fesjs/plugin-vuex</a></td><td>基于 <code>Vuex</code>, 提供状态管理能力</td></tr><tr><td><a href="./plugins/qiankun.html">@fesjs/plugin-qiankun</a></td><td>基于 <code>qiankun</code>，提供微服务能力</td></tr><tr><td><a href="./plugins/sass.html">@fesjs/plugin-sass</a></td><td>样式支持 sass</td></tr><tr><td><a href="./plugins/editor.html">@fesjs/plugin-monaco-editor</a></td><td>提供代码编辑器能力， 基于<code>monaco-editor</code>（VS Code 使用的代码编辑器）</td></tr><tr><td><a href="./plugins/windicss.html">@fesjs/plugin-windicss</a></td><td>基于 <code>windicss</code>，提供原子化 CSS 能力</td></tr><tr><td><a href="./plugins/pinia.html">@fesjs/plugin-pinia</a></td><td>基于 <code>pinia</code>，提供状态管理</td></tr><tr><td><a href="./plugins/watermark.html">@fesjs/plugin-watermark</a></td><td>水印</td></tr><tr><td><a href="./plugins/swc.html">@fesjs/plugin-swc</a></td><td>swc</td></tr></tbody></table><h2 id="架构" tabindex="-1">架构 <a class="header-anchor" href="#架构" aria-label="Permalink to "架构""></a></h2>',4),n=["src"],i=t("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),f=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/index.md"}'),o={name:"reference/plugin/index.md"},g=Object.assign(o,{setup(u){return(c,h)=>(e(),s("div",null,[l,t("img",{src:a(r)("framework.png"),alt:"架构"},null,8,n),i]))}});export{f as __pageData,g as default};
|
||||
import{o as e,c as s,C as t,b as a,V as d,y as r}from"./chunks/framework.85b09291.js";const l=d('<h1 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h1><h2 id="插件列表" tabindex="-1">插件列表 <a class="header-anchor" href="#插件列表" aria-label="Permalink to "插件列表""></a></h2><table><thead><tr><th>插件</th><th>介绍</th></tr></thead><tbody><tr><td><a href="./plugins/access.html">@fesjs/plugin-access</a></td><td>提供对页面资源的权限控制能力</td></tr><tr><td><a href="./plugins/enums.html">@fesjs/plugin-enums</a></td><td>提供统一的枚举存取及丰富的函数来处理枚举</td></tr><tr><td><a href="./plugins/icon.html">@fesjs/plugin-icon</a></td><td>svg 文件自动注册为组件</td></tr><tr><td><a href="./plugins/jest.html">@fesjs/plugin-jest</a></td><td>基于 <code>Jest</code>，提供单元测试、覆盖测试能力</td></tr><tr><td><a href="./plugins/layout.html">@fesjs/plugin-layout</a></td><td>简单的配置即可拥有布局，包括导航以及侧边栏</td></tr><tr><td><a href="./plugins/locale.html">@fesjs/plugin-locale</a></td><td>基于 <code>Vue I18n</code>，提供国际化能力</td></tr><tr><td><a href="./plugins/model.html">@fesjs/plugin-model</a></td><td>简易的数据管理方案</td></tr><tr><td><a href="./plugins/request.html">@fesjs/plugin-request</a></td><td>基于 <code>Axios</code> 封装的 request，内置防止重复请求、请求节流、错误处理等功能</td></tr><tr><td><a href="./plugins/vuex.html">@fesjs/plugin-vuex</a></td><td>基于 <code>Vuex</code>, 提供状态管理能力</td></tr><tr><td><a href="./plugins/qiankun.html">@fesjs/plugin-qiankun</a></td><td>基于 <code>qiankun</code>，提供微服务能力</td></tr><tr><td><a href="./plugins/sass.html">@fesjs/plugin-sass</a></td><td>样式支持 sass</td></tr><tr><td><a href="./plugins/editor.html">@fesjs/plugin-monaco-editor</a></td><td>提供代码编辑器能力， 基于<code>monaco-editor</code>（VS Code 使用的代码编辑器）</td></tr><tr><td><a href="./plugins/windicss.html">@fesjs/plugin-windicss</a></td><td>基于 <code>windicss</code>，提供原子化 CSS 能力</td></tr><tr><td><a href="./plugins/pinia.html">@fesjs/plugin-pinia</a></td><td>基于 <code>pinia</code>，提供状态管理</td></tr><tr><td><a href="./plugins/watermark.html">@fesjs/plugin-watermark</a></td><td>水印</td></tr><tr><td><a href="./plugins/swc.html">@fesjs/plugin-swc</a></td><td>swc</td></tr></tbody></table><h2 id="架构" tabindex="-1">架构 <a class="header-anchor" href="#架构" aria-label="Permalink to "架构""></a></h2>',4),n=["src"],i=t("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),f=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/index.md"}'),o={name:"reference/plugin/index.md"},g=Object.assign(o,{setup(u){return(c,h)=>(e(),s("div",null,[l,t("img",{src:a(r)("framework.png"),alt:"架构"},null,8,n),i]))}});export{f as __pageData,g as default};
|
||||
@ -1 +1 @@
|
||||
import{o as e,c as s,C as t,b as a,V as d,y as r}from"./chunks/framework.6405946a.js";const l=d("",4),n=["src"],i=t("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),f=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/index.md"}'),o={name:"reference/plugin/index.md"},g=Object.assign(o,{setup(u){return(c,h)=>(e(),s("div",null,[l,t("img",{src:a(r)("framework.png"),alt:"架构"},null,8,n),i]))}});export{f as __pageData,g as default};
|
||||
import{o as e,c as s,C as t,b as a,V as d,y as r}from"./chunks/framework.85b09291.js";const l=d("",4),n=["src"],i=t("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),f=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/index.md"}'),o={name:"reference/plugin/index.md"},g=Object.assign(o,{setup(u){return(c,h)=>(e(),s("div",null,[l,t("img",{src:a(r)("framework.png"),alt:"架构"},null,8,n),i]))}});export{f as __pageData,g as default};
|
||||
@ -1,92 +1,92 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"@fesjs/plugin-access","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/access.md"}'),o={name:"reference/plugin/plugins/access.md"},p=l(`<h1 id="fesjs-plugin-access" tabindex="-1">@fesjs/plugin-access <a class="header-anchor" href="#fesjs-plugin-access" aria-label="Permalink to "@fesjs/plugin-access""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>对于前端应用来说，权限就是页面、页面元素是否可见。</p><h3 id="资源" tabindex="-1">资源 <a class="header-anchor" href="#资源" aria-label="Permalink to "资源""></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"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">access</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">accessId</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;"> accessOnepicess1 </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">access</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-access</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">accessId</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">accessOnepicess2</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"@fesjs/plugin-access","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/access.md"}'),o={name:"reference/plugin/plugins/access.md"},p=l(`<h1 id="fesjs-plugin-access" tabindex="-1">@fesjs/plugin-access <a class="header-anchor" href="#fesjs-plugin-access" aria-label="Permalink to "@fesjs/plugin-access""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>对于前端应用来说，权限就是页面、页面元素是否可见。</p><h3 id="资源" tabindex="-1">资源 <a class="header-anchor" href="#资源" aria-label="Permalink to "资源""></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"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">access</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">accessId</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;"> accessOnepicess1 </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">access</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-access</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">accessId</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">accessOnepicess2</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> accessId</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">accessOnepicess</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h3 id="匹配规则" tabindex="-1">匹配规则 <a class="header-anchor" href="#匹配规则" aria-label="Permalink to "匹配规则""></a></h3><h4 id="全等匹配" tabindex="-1">全等匹配 <a class="header-anchor" href="#全等匹配" aria-label="Permalink to "全等匹配""></a></h4><p>资源的匹配规则默认是使用全等匹配，比如页面 <code>pages/a.vue</code> 对应路由 <code>path</code> 是 <code>/a</code>，则 <code>/a</code> 就是页面的资源 ID。如果我们设置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#BABED8;">access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#BABED8;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/a</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">])</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>由于权限列表中包含<code>/a</code>，则表示拥有此页面权限。</p><h4 id="模糊匹配" tabindex="-1">模糊匹配 <a class="header-anchor" href="#模糊匹配" aria-label="Permalink to "模糊匹配""></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">access</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">roles</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">admin</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">*</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h3 id="匹配规则" tabindex="-1">匹配规则 <a class="header-anchor" href="#匹配规则" aria-label="Permalink to "匹配规则""></a></h3><h4 id="全等匹配" tabindex="-1">全等匹配 <a class="header-anchor" href="#全等匹配" aria-label="Permalink to "全等匹配""></a></h4><p>资源的匹配规则默认是使用全等匹配，比如页面 <code>pages/a.vue</code> 对应路由 <code>path</code> 是 <code>/a</code>，则 <code>/a</code> 就是页面的资源 ID。如果我们设置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/a</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>由于权限列表中包含<code>/a</code>，则表示拥有此页面权限。</p><h4 id="模糊匹配" tabindex="-1">模糊匹配 <a class="header-anchor" href="#模糊匹配" aria-label="Permalink to "模糊匹配""></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">access</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">roles</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">admin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">*</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="角色" tabindex="-1">角色 <a class="header-anchor" href="#角色" aria-label="Permalink to "角色""></a></h3><p>通常我们会用角色来控制权限，相应的 Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。</p><p>当然有时候业务比较复杂，角色对应的权限是动态的。不要怕！插件提供粒度更细的 API 来设置当前用户能访问的资源。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-access</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="编译时配置" tabindex="-1">编译时配置 <a class="header-anchor" href="#编译时配置" aria-label="Permalink to "编译时配置""></a></h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">access</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">roles</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">admin</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/onepiece</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/store</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="roles" tabindex="-1">roles <a class="header-anchor" href="#roles" aria-label="Permalink to "roles""></a></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-label="Permalink to "运行时配置""></a></h2><p>在 <code>app.js</code> 中配置</p><h3 id="unaccesshandler" tabindex="-1">unAccessHandler <a class="header-anchor" href="#unaccesshandler" aria-label="Permalink to "unAccessHandler""></a></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="noreferrer">next 函数</a></li></ul></li></ul><p>比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> access </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">unAccessHandler</span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">next</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accesssIds</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">to</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">path</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-access</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="编译时配置" tabindex="-1">编译时配置 <a class="header-anchor" href="#编译时配置" aria-label="Permalink to "编译时配置""></a></h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">access</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">roles</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">admin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/onepiece</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/store</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="roles" tabindex="-1">roles <a class="header-anchor" href="#roles" aria-label="Permalink to "roles""></a></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-label="Permalink to "运行时配置""></a></h2><p>在 <code>app.js</code> 中配置</p><h3 id="unaccesshandler" tabindex="-1">unAccessHandler <a class="header-anchor" href="#unaccesshandler" aria-label="Permalink to "unAccessHandler""></a></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="noreferrer">next 函数</a></li></ul></li></ul><p>比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> access </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">unAccessHandler</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">next</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">to</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">path</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="nofoundhandler" tabindex="-1">noFoundHandler <a class="header-anchor" href="#nofoundhandler" aria-label="Permalink to "noFoundHandler""></a></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="noreferrer">next 函数</a></li></ul></li></ul><p>比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> access </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">noFoundHandler</span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">next</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accesssIds</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="nofoundhandler" tabindex="-1">noFoundHandler <a class="header-anchor" href="#nofoundhandler" aria-label="Permalink to "noFoundHandler""></a></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="noreferrer">next 函数</a></li></ul></li></ul><p>比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> access </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">noFoundHandler</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">next</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="ignoreaccess" tabindex="-1">ignoreAccess <a class="header-anchor" href="#ignoreaccess" aria-label="Permalink to "ignoreAccess""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> access </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">ignoreAccess</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/login</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="access" tabindex="-1">access <a class="header-anchor" href="#access" aria-label="Permalink to "access""></a></h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="access-hasaccess" tabindex="-1">access.hasAccess <a class="header-anchor" href="#access-hasaccess" aria-label="Permalink to "access.hasAccess""></a></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">access.isDataReady <a class="header-anchor" href="#access-isdataready" aria-label="Permalink to "access.isDataReady""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#BABED8;">(access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isDataReady</span><span style="color:#BABED8;">())</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="access-setrole" tabindex="-1">access.setRole <a class="header-anchor" href="#access-setrole" aria-label="Permalink to "access.setRole""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setRole</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">admin</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="access-getrole" tabindex="-1">access.getRole <a class="header-anchor" href="#access-getrole" aria-label="Permalink to "access.getRole""></a></h4><ul><li><strong>类型</strong>：函数</li><li><strong>详情</strong>：获取当前的角色。</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getRole</span><span style="color:#BABED8;">()</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="access-setaccess" tabindex="-1">access.setAccess <a class="header-anchor" href="#access-setaccess" aria-label="Permalink to "access.setAccess""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#BABED8;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/a</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/b</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/c</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">])</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="access-getaccess" tabindex="-1">access.getAccess <a class="header-anchor" href="#access-getaccess" aria-label="Permalink to "access.getAccess""></a></h4><ul><li><strong>类型</strong>：函数</li><li><strong>详情</strong>：返回当前可见的资源列表。</li><li><strong>参数</strong>：null</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#BABED8;">()</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="useaccess" tabindex="-1">useAccess <a class="header-anchor" href="#useaccess" aria-label="Permalink to "useAccess""></a></h3><ul><li><strong>类型</strong>：<a href="https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api" target="_blank" rel="noreferrer">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"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-if</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">accessOnepicess</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">accessOnepicess</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="ignoreaccess" tabindex="-1">ignoreAccess <a class="header-anchor" href="#ignoreaccess" aria-label="Permalink to "ignoreAccess""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> access </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">ignoreAccess</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/login</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="access" tabindex="-1">access <a class="header-anchor" href="#access" aria-label="Permalink to "access""></a></h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="access-hasaccess" tabindex="-1">access.hasAccess <a class="header-anchor" href="#access-hasaccess" aria-label="Permalink to "access.hasAccess""></a></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">access.isDataReady <a class="header-anchor" href="#access-isdataready" aria-label="Permalink to "access.isDataReady""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">isDataReady</span><span style="color:#A6ACCD;">())</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="access-setrole" tabindex="-1">access.setRole <a class="header-anchor" href="#access-setrole" aria-label="Permalink to "access.setRole""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setRole</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">admin</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="access-getrole" tabindex="-1">access.getRole <a class="header-anchor" href="#access-getrole" aria-label="Permalink to "access.getRole""></a></h4><ul><li><strong>类型</strong>：函数</li><li><strong>详情</strong>：获取当前的角色。</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getRole</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="access-setaccess" tabindex="-1">access.setAccess <a class="header-anchor" href="#access-setaccess" aria-label="Permalink to "access.setAccess""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/a</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/b</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/c</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">])</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="access-getaccess" tabindex="-1">access.getAccess <a class="header-anchor" href="#access-getaccess" aria-label="Permalink to "access.getAccess""></a></h4><ul><li><strong>类型</strong>：函数</li><li><strong>详情</strong>：返回当前可见的资源列表。</li><li><strong>参数</strong>：null</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">access</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">access</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="useaccess" tabindex="-1">useAccess <a class="header-anchor" href="#useaccess" aria-label="Permalink to "useAccess""></a></h3><ul><li><strong>类型</strong>：<a href="https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api" target="_blank" rel="noreferrer">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"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-if</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">accessOnepicess</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">accessOnepicess</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useAccess</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessOnepicess</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useAccess</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/onepiece1</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useAccess</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessOnepicess</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useAccess</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/onepiece1</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessOnepicess</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessOnepicess</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h3 id="v-access" tabindex="-1">v-access <a class="header-anchor" href="#v-access" aria-label="Permalink to "v-access""></a></h3><p>在指令 <code>v-access</code> 中传入 <code>accessId</code>，则当 <code>accessId</code> 拥有权限时显示 DOM，当没有权限时隐藏此 DOM。</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-access</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">accessId</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">accessOnepicess</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-access</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">accessId</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">accessOnepicess</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> accessId</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">accessOnepicess</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h3 id="组件-access" tabindex="-1">组件 Access <a class="header-anchor" href="#组件-access" aria-label="Permalink to "组件 Access""></a></h3><p>组件 <code>Access</code> 中传入 <code>accessId</code>，则当 <code>accessId</code> 拥有权限时渲染此组件，当没有权限时隐藏此组件。</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">access</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">accessId</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;"> accessOnepicess </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">access</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">access</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">accessId</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;"> accessOnepicess </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">access</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> accessId</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">accessOnepicess</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div>`,72),e=[p];function c(t,r,F,D,y,i){return a(),n("div",null,e)}const A=s(o,[["render",c]]);export{B as __pageData,A as default};
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div>`,72),e=[p];function c(t,r,F,D,y,i){return a(),n("div",null,e)}const d=s(o,[["render",c]]);export{C as __pageData,d as default};
|
||||
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"@fesjs/plugin-access","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/access.md"}'),o={name:"reference/plugin/plugins/access.md"},p=l("",72),e=[p];function c(t,r,F,D,y,i){return a(),n("div",null,e)}const d=s(o,[["render",c]]);export{C as __pageData,d as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"@fesjs/plugin-access","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/access.md"}'),o={name:"reference/plugin/plugins/access.md"},p=l("",72),e=[p];function c(t,r,F,D,y,i){return a(),n("div",null,e)}const A=s(o,[["render",c]]);export{B as __pageData,A as default};
|
||||
@ -1,41 +1,41 @@
|
||||
import{_ as s,o as a,c as n,V as o}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"@fesjs/plugin-monaco-editor","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/editor.md"}'),l={name:"reference/plugin/plugins/editor.md"},p=o(`<h1 id="fesjs-plugin-monaco-editor" tabindex="-1">@fesjs/plugin-monaco-editor <a class="header-anchor" href="#fesjs-plugin-monaco-editor" aria-label="Permalink to "@fesjs/plugin-monaco-editor""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>我们会遇到需要编辑代码的场景，比如编辑<code>json</code>、<code>javascript</code>、<code>python</code>等等，<a href="https://github.com/Microsoft/monaco-editor" target="_blank" rel="noreferrer">Monaco Editor</a> 是 \b 一个好用而且强大的的代码编辑器库，引入<code>Monaco Editor</code>有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 <code>Monaco Editor</code> 版本是 <code>1.9.1</code>。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-monaco-editor</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="编译时配置" tabindex="-1">编译时配置 <a class="header-anchor" href="#编译时配置" aria-label="Permalink to "编译时配置""></a></h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">monacoEditor</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">languages</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">javascript</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">typescript</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></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="noreferrer">文档</a>。</p><h3 id="filename" tabindex="-1">filename <a class="header-anchor" href="#filename" aria-label="Permalink to "filename""></a></h3><ul><li><strong>类型</strong>：自定义 worker 脚本名称</li><li><strong>默认值</strong>：<code>'[name].worker.js'</code></li></ul><h3 id="publicpath" tabindex="-1">publicPath <a class="header-anchor" href="#publicpath" aria-label="Permalink to "publicPath""></a></h3><ul><li><strong>类型</strong>：自定义 worker 脚本的路径</li><li><strong>默认值</strong>：<code>''</code></li></ul><h3 id="languages" tabindex="-1">languages <a class="header-anchor" href="#languages" aria-label="Permalink to "languages""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">monacoEditor</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">languages</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">javascript</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">typescript</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="monaco" tabindex="-1">monaco <a class="header-anchor" href="#monaco" aria-label="Permalink to "monaco""></a></h3><p>编辑器的全局对象，提供扩展语言，自定义主题等等 API，具体用法请查看<a href="https://microsoft.github.io/monaco-editor/" target="_blank" rel="noreferrer">monaco</a>官方文档。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">monaco</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
import{_ as s,o as a,c as n,V as o}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"@fesjs/plugin-monaco-editor","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/editor.md"}'),l={name:"reference/plugin/plugins/editor.md"},p=o(`<h1 id="fesjs-plugin-monaco-editor" tabindex="-1">@fesjs/plugin-monaco-editor <a class="header-anchor" href="#fesjs-plugin-monaco-editor" aria-label="Permalink to "@fesjs/plugin-monaco-editor""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>我们会遇到需要编辑代码的场景，比如编辑<code>json</code>、<code>javascript</code>、<code>python</code>等等，<a href="https://github.com/Microsoft/monaco-editor" target="_blank" rel="noreferrer">Monaco Editor</a> 是 \b 一个好用而且强大的的代码编辑器库，引入<code>Monaco Editor</code>有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 <code>Monaco Editor</code> 版本是 <code>1.9.1</code>。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-monaco-editor</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="编译时配置" tabindex="-1">编译时配置 <a class="header-anchor" href="#编译时配置" aria-label="Permalink to "编译时配置""></a></h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">monacoEditor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">languages</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">javascript</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">typescript</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></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="noreferrer">文档</a>。</p><h3 id="filename" tabindex="-1">filename <a class="header-anchor" href="#filename" aria-label="Permalink to "filename""></a></h3><ul><li><strong>类型</strong>：自定义 worker 脚本名称</li><li><strong>默认值</strong>：<code>'[name].worker.js'</code></li></ul><h3 id="publicpath" tabindex="-1">publicPath <a class="header-anchor" href="#publicpath" aria-label="Permalink to "publicPath""></a></h3><ul><li><strong>类型</strong>：自定义 worker 脚本的路径</li><li><strong>默认值</strong>：<code>''</code></li></ul><h3 id="languages" tabindex="-1">languages <a class="header-anchor" href="#languages" aria-label="Permalink to "languages""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">monacoEditor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">languages</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">javascript</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">typescript</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="monaco" tabindex="-1">monaco <a class="header-anchor" href="#monaco" aria-label="Permalink to "monaco""></a></h3><p>编辑器的全局对象，提供扩展语言，自定义主题等等 API，具体用法请查看<a href="https://microsoft.github.io/monaco-editor/" target="_blank" rel="noreferrer">monaco</a>官方文档。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">monaco</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#BABED8;">monaco</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">editor</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineTheme</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">myCoolTheme</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">base</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vs</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">inherit</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">rules</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">token</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">custom-info</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">foreground</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">808080</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">token</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">custom-error</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">foreground</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ff0000</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">fontStyle</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bold</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">token</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">custom-notice</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">foreground</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">FFA500</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">token</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">custom-date</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">foreground</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">008800</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="组件-monacoeditor" tabindex="-1">组件 MonacoEditor <a class="header-anchor" href="#组件-monacoeditor" aria-label="Permalink to "组件 MonacoEditor""></a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">MonacoEditor</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">language</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">height</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">400px</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">check</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">MonacoEditor</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">monaco</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">editor</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">defineTheme</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">myCoolTheme</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">base</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vs</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">inherit</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">rules</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">token</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">custom-info</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foreground</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">808080</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">token</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">custom-error</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foreground</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ff0000</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fontStyle</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">bold</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">token</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">custom-notice</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foreground</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">FFA500</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">token</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">custom-date</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">foreground</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">008800</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="组件-monacoeditor" tabindex="-1">组件 MonacoEditor <a class="header-anchor" href="#组件-monacoeditor" aria-label="Permalink to "组件 MonacoEditor""></a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">MonacoEditor</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">language</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">height</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">400px</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">check</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">MonacoEditor</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">MonacoEditor</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> MonacoEditor</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">json</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">''</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">MonacoEditor</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> MonacoEditor</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">json</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">''</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">json</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">json</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h4 id="props" tabindex="-1">props <a class="header-anchor" href="#props" aria-label="Permalink to "props""></a></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">events <a class="header-anchor" href="#events" aria-label="Permalink to "events""></a></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>`,27),e=[p];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const h=s(l,[["render",t]]);export{B as __pageData,h as default};
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h4 id="props" tabindex="-1">props <a class="header-anchor" href="#props" aria-label="Permalink to "props""></a></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">events <a class="header-anchor" href="#events" aria-label="Permalink to "events""></a></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>`,27),e=[p];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(l,[["render",t]]);export{C as __pageData,A as default};
|
||||
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as o}from"./chunks/framework.85b09291.js";const C=JSON.parse('{"title":"@fesjs/plugin-monaco-editor","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/editor.md"}'),l={name:"reference/plugin/plugins/editor.md"},p=o("",27),e=[p];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(l,[["render",t]]);export{C as __pageData,A as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,V as o}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"@fesjs/plugin-monaco-editor","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/editor.md"}'),l={name:"reference/plugin/plugins/editor.md"},p=o("",27),e=[p];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const h=s(l,[["render",t]]);export{B as __pageData,h as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const E=JSON.parse('{"title":"@fesjs/plugin-enums","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/enums.md"}'),p={name:"reference/plugin/plugins/enums.md"},o=l("",44),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(p,[["render",t]]);export{E as __pageData,A as default};
|
||||
@ -1,36 +1,36 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const E=JSON.parse('{"title":"@fesjs/plugin-enums","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/enums.md"}'),p={name:"reference/plugin/plugins/enums.md"},o=l(`<h1 id="fesjs-plugin-enums" tabindex="-1">@fesjs/plugin-enums <a class="header-anchor" href="#fesjs-plugin-enums" aria-label="Permalink to "@fesjs/plugin-enums""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>日常业务开发中，有很多场景会使用到枚举值，比如 select-options、table-column。</p><p>该插件提供统一的枚举存取及丰富的函数来处理枚举。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-enums</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"@fesjs/plugin-enums","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/enums.md"}'),p={name:"reference/plugin/plugins/enums.md"},o=l(`<h1 id="fesjs-plugin-enums" tabindex="-1">@fesjs/plugin-enums <a class="header-anchor" href="#fesjs-plugin-enums" aria-label="Permalink to "@fesjs/plugin-enums""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>日常业务开发中，有很多场景会使用到枚举值，比如 select-options、table-column。</p><p>该插件提供统一的枚举存取及丰富的函数来处理枚举。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-enums</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h2><h3 id="静态配置" tabindex="-1">静态配置 <a class="header-anchor" href="#静态配置" aria-label="Permalink to "静态配置""></a></h3><p>在 <code>.fes.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 配置格式：[[key, value], ...]</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">enums</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">status</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">无效的</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">有效的</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="动态配置" tabindex="-1">动态配置 <a class="header-anchor" href="#动态配置" aria-label="Permalink to "动态配置""></a></h3><p>在业务代码中</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">enums</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">enums</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">status</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">无效的</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">有效的</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="动态配置" tabindex="-1">动态配置 <a class="header-anchor" href="#动态配置" aria-label="Permalink to "动态配置""></a></h3><p>在业务代码中</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">enums</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 动态添加</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">enums</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> [[</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">无效的</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">有效的</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">]]</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">enums</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">) </span><span style="color:#676E95;font-style:italic;">// 有效的</span></span></code></pre></div><h2 id="场景使用" tabindex="-1">场景使用 <a class="header-anchor" href="#场景使用" aria-label="Permalink to "场景使用""></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"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;"><!-- 遍历枚举status --></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">item in enumsGet('status')</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">item.key</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">{{ item.value }}：{{ item.key }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;"><!-- 遍历枚举扩展后的roles --></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">item in roles</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">item.key</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">{{ item.name }}：{{ item.disabled }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;"><!-- 获取枚举roles为2的英文名 --></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">{{ enumsGet('roles', '2', { dir: 'eName' }) }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">enums</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> [[</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">无效的</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">有效的</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">enums</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// 有效的</span></span></code></pre></div><h2 id="场景使用" tabindex="-1">场景使用 <a class="header-anchor" href="#场景使用" aria-label="Permalink to "场景使用""></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"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"><!-- 遍历枚举status --></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">item in enumsGet('status')</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">item.key</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">{{ item.value }}：{{ item.key }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"><!-- 遍历枚举扩展后的roles --></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-for</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">item in roles</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">item.key</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">{{ item.name }}：{{ item.disabled }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"><!-- 获取枚举roles为2的英文名 --></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">{{ enumsGet('roles', '2', { dir: 'eName' }) }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">enums</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">enums</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 动态添加枚举，枚举项是对象，并指定key的属性名为id</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">enums</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">enums</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">roles</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> [</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -55,7 +55,7 @@ import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const E=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> keyName</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">id</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 导出定制格式的roles，扩展枚举项新的属性name、disabled</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">roles</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">enums</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">roles</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">roles</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">enums</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">get</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">roles</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> extend</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> key</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
@ -64,60 +64,60 @@ import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const E=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> key</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">disabled</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 传入函数，获取结果值</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">transfer</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">item</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">item</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">perm</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">some</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">i</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">>=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">transfer</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">perm</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">some</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">i</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">>=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">roles</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">roles</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> enumsGet</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">enums</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">get</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">roles</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> enumsGet</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">enums</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">get</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">roles</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="get" tabindex="-1">get <a class="header-anchor" href="#get" aria-label="Permalink to "get""></a></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配置">查看 extend 配置</a></p></li><li><p><code>get(name: string, key: string, opt: {dir: string})</code> 获取指定名字及键枚举<a href="#dir规则">dir 规则</a>的值</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">get</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">get</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">get</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">extend</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">dir</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">value</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">disabled</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">transfer</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">item</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> item </span><span style="color:#89DDFF;">===</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">get</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">dir</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">value</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="push" tabindex="-1">push <a class="header-anchor" href="#push" aria-label="Permalink to "push""></a></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">remove <a class="header-anchor" href="#remove" aria-label="Permalink to "remove""></a></h3><ul><li>remove(name: string)</li></ul><p>移除指定的枚举</p><h3 id="concat" tabindex="-1">concat <a class="header-anchor" href="#concat" aria-label="Permalink to "concat""></a></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配置">extend 配置</a></li></ul></li></ul><h3 id="convert" tabindex="-1">convert <a class="header-anchor" href="#convert" aria-label="Permalink to "convert""></a></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">extend 配置 <a class="header-anchor" href="#extend-配置" aria-label="Permalink to "extend 配置""></a></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="tip custom-block"><p class="custom-block-title">TIP</p><p>同时设置<a href="#dir规则">dir</a>和 transfer，transfer 优先</p></div></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">get</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">extend</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">dir</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">value</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">disabled</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">transfer</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">item</span><span style="color:#89DDFF;">)</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> item</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">key </span><span style="color:#89DDFF;">===</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="dir-规则" tabindex="-1">dir 规则 <a class="header-anchor" href="#dir-规则" aria-label="Permalink to "dir 规则""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 假如枚举项value的结构如下</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> user </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">aring</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">role</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">管理员</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">业务操作员</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="get" tabindex="-1">get <a class="header-anchor" href="#get" aria-label="Permalink to "get""></a></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配置">查看 extend 配置</a></p></li><li><p><code>get(name: string, key: string, opt: {dir: string})</code> 获取指定名字及键枚举<a href="#dir规则">dir 规则</a>的值</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">extend</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">dir</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">value</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">disabled</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">transfer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> item </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">dir</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">value</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="push" tabindex="-1">push <a class="header-anchor" href="#push" aria-label="Permalink to "push""></a></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">remove <a class="header-anchor" href="#remove" aria-label="Permalink to "remove""></a></h3><ul><li>remove(name: string)</li></ul><p>移除指定的枚举</p><h3 id="concat" tabindex="-1">concat <a class="header-anchor" href="#concat" aria-label="Permalink to "concat""></a></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配置">extend 配置</a></li></ul></li></ul><h3 id="convert" tabindex="-1">convert <a class="header-anchor" href="#convert" aria-label="Permalink to "convert""></a></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">extend 配置 <a class="header-anchor" href="#extend-配置" aria-label="Permalink to "extend 配置""></a></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="tip custom-block"><p class="custom-block-title">TIP</p><p>同时设置<a href="#dir规则">dir</a>和 transfer，transfer 优先</p></div></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">get</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">status</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">extend</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">name</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">dir</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">value</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">key</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">disabled</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">transfer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">key </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">0</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="dir-规则" tabindex="-1">dir 规则 <a class="header-anchor" href="#dir-规则" aria-label="Permalink to "dir 规则""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 假如枚举项value的结构如下</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> user </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">age</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">aring</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">role</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">管理员</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">业务操作员</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 那么规则解析是：</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">dir value</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">age</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">18</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">role[0]</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#FFCB6B;">id</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">管理员</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">role[1].id</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#F78C6C;">2</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>枚举项 value 如果是基本类型，则规则不生效，value 就是当前值</p></div>`,44),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(p,[["render",t]]);export{E as __pageData,A as default};
|
||||
<span class="line"><span style="color:#A6ACCD;">dir value</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">age</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">role[0]</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#FFCB6B;">id</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">管理员</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">role[1].id</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>枚举项 value 如果是基本类型，则规则不生效，value 就是当前值</p></div>`,44),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"@fesjs/plugin-enums","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/enums.md"}'),p={name:"reference/plugin/plugins/enums.md"},o=l("",44),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -1,6 +1,6 @@
|
||||
import{_ as s,o as a,c as t,V as e}from"./chunks/framework.6405946a.js";const h=JSON.parse('{"title":"@fesjs/plugin-icon","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/icon.md"}'),n={name:"reference/plugin/plugins/icon.md"},l=e(`<h1 id="fesjs-plugin-icon" tabindex="-1">@fesjs/plugin-icon <a class="header-anchor" href="#fesjs-plugin-icon" aria-label="Permalink to "@fesjs/plugin-icon""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>提供以 <code>component</code> 的方式，直接使用 svg icon 的能力。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-icon</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
import{_ as s,o as a,c as t,V as e}from"./chunks/framework.85b09291.js";const h=JSON.parse('{"title":"@fesjs/plugin-icon","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/icon.md"}'),n={name:"reference/plugin/plugins/icon.md"},l=e(`<h1 id="fesjs-plugin-icon" tabindex="-1">@fesjs/plugin-icon <a class="header-anchor" href="#fesjs-plugin-icon" aria-label="Permalink to "@fesjs/plugin-icon""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>提供以 <code>component</code> 的方式，直接使用 svg icon 的能力。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-icon</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="使用" tabindex="-1">使用 <a class="header-anchor" href="#使用" aria-label="Permalink to "使用""></a></h2><p>新建 <code>src/icons</code> 目录，将 svg 文件放入其中，在 <code>component</code> 中引用：</p><div class="language-jsx"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">fes-icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">iconName</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span></code></pre></div><h3 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to "属性""></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),o=[l];function p(c,r,i,d,D,y){return a(),t("div",null,o)}const u=s(n,[["render",p]]);export{h as __pageData,u as default};
|
||||
@ -1 +1 @@
|
||||
import{_ as s,o as a,c as t,V as e}from"./chunks/framework.6405946a.js";const h=JSON.parse('{"title":"@fesjs/plugin-icon","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/icon.md"}'),n={name:"reference/plugin/plugins/icon.md"},l=e("",11),o=[l];function p(c,r,i,d,D,y){return a(),t("div",null,o)}const u=s(n,[["render",p]]);export{h as __pageData,u as default};
|
||||
import{_ as s,o as a,c as t,V as e}from"./chunks/framework.85b09291.js";const h=JSON.parse('{"title":"@fesjs/plugin-icon","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/icon.md"}'),n={name:"reference/plugin/plugins/icon.md"},l=e("",11),o=[l];function p(c,r,i,d,D,y){return a(),t("div",null,o)}const u=s(n,[["render",p]]);export{h as __pageData,u as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,V as e}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"@fesjs/plugin-jest","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/jest.md"}'),l={name:"reference/plugin/plugins/jest.md"},t=e("",26),p=[t];function o(c,r,i,b,d,y){return a(),n("div",null,p)}const f=s(l,[["render",o]]);export{u as __pageData,f as default};
|
||||
@ -1,299 +1,299 @@
|
||||
import{_ as s,o as a,c as n,V as e}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"@fesjs/plugin-jest","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/jest.md"}'),l={name:"reference/plugin/plugins/jest.md"},t=e(`<h1 id="fesjs-plugin-jest" tabindex="-1">@fesjs/plugin-jest <a class="header-anchor" href="#fesjs-plugin-jest" aria-label="Permalink to "@fesjs/plugin-jest""></a></h1><p>集成 <a href="https://www.jestjs.cn/" target="_blank" rel="noreferrer">Jest</a> 测试框架，目前只支持单元测试和覆盖测试。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-jest</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="约定" tabindex="-1">约定 <a class="header-anchor" href="#约定" aria-label="Permalink to "约定""></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-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">fes-template</span></span>
|
||||
<span class="line"><span style="color:#babed8;">├── __tests__</span></span>
|
||||
<span class="line"><span style="color:#babed8;">│ └── add.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;">└── src</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> ├── .fes</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── utils</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── sum.js</span></span></code></pre></div><p>内容如下：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> sum </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/utils/sum</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">test</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">adds 1 + 2 to equal 3</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
import{_ as s,o as n,c as a,V as e}from"./chunks/framework.85b09291.js";const D=JSON.parse('{"title":"@fesjs/plugin-jest","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/jest.md"}'),l={name:"reference/plugin/plugins/jest.md"},t=e(`<h1 id="fesjs-plugin-jest" tabindex="-1">@fesjs/plugin-jest <a class="header-anchor" href="#fesjs-plugin-jest" aria-label="Permalink to "@fesjs/plugin-jest""></a></h1><p>集成 <a href="https://www.jestjs.cn/" target="_blank" rel="noreferrer">Jest</a> 测试框架，目前只支持单元测试和覆盖测试。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-jest</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="约定" tabindex="-1">约定 <a class="header-anchor" href="#约定" aria-label="Permalink to "约定""></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-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">fes-template</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">├── __tests__</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">│ └── add.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">└── src</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ├── .fes</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── utils</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── sum.js</span></span></code></pre></div><p>内容如下：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> sum </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/utils/sum</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">test</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">adds 1 + 2 to equal 3</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">expect</span><span style="color:#F07178;">(</span><span style="color:#82AAFF;">sum</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toBe</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">3</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="命令" tabindex="-1">命令 <a class="header-anchor" href="#命令" aria-label="Permalink to "命令""></a></h2><p>在 <code>fes</code> 上注册 <code>test</code> 命令：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">test</span></span></code></pre></div><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h2><p>插件实现 Jest 的全部配置，具体请查看 <a href="https://www.jestjs.cn/docs/configuration#reference" target="_blank" rel="noreferrer">文档-configuration</a>。 也可以使用 <code>-h</code> 打印配置帮助信息：</p><h3 id="args-变量" tabindex="-1">args 变量 <a class="header-anchor" href="#args-变量" aria-label="Permalink to "args 变量""></a></h3><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">test</span><span style="color:#BABED8;"> </span><span style="color:#C3E88D;">-h</span></span></code></pre></div><p>打印配置帮助信息:</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight has-diff"><code><span class="line"><span style="color:#babed8;">$ fes test -h</span></span>
|
||||
<span class="line"><span style="color:#babed8;">Usage: fes test [options]</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">run unit tests with jest</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;">Options:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --all The opposite of \`onlyChanged\`. If \`onlyChanged\`</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> is set by default, running jest with \`--all\`</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> will force Jest to run all tests instead of</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> running only tests related to changed files.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --automock Automock all files by default.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -b --bail Exit the test suite immediately after \`n\`</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> number of failing tests.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --browser Respect the "browser" field in package.json</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> when resolving modules. Some packages export</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> different versions based on whether they are</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> operating in node.js or a browser.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --cache Whether to use the transform cache. Disable the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> cache using --no-cache.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --cacheDirectory The directory where Jest should store its</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> cached dependency information.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --changedFilesWithAncestor Runs tests related to the current changes and</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> the changes made in the last commit. Behaves</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> similarly to \`--onlyChanged\`.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --changedSince Runs tests related to the changes since the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> provided branch. If the current branch has</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> diverged from the given branch, then only</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> changes made locally will be tested. Behaves</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> similarly to \`--onlyChanged\`.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --ci Whether to run Jest in continuous integration</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> (CI) mode. This option is on by default in most</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> popular CI environments. It will prevent</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> snapshots from being written unless explicitly</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> requested.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --clearCache Clears the configured Jest cache directory and</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> then exits. Default directory can be found by</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> calling jest --showConfig</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --clearMocks Automatically clear mock calls and instances</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> between every test. Equivalent to calling</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> jest.clearAllMocks() between each test.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --collectCoverage Alias for --coverage.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --collectCoverageFrom A glob pattern relative to <rootDir> matching</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> the files that coverage info needs to be</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> collected from.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --collectCoverageOnlyFrom Explicit list of paths coverage will be</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> restricted to.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --color Forces test results output color highlighting</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> (even if stdout is not a TTY). Set to false if</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> you would like to have no colors.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --colors Alias for \`--color\`.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -c --config The path to a jest config file specifying how</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> to find and execute tests. If no rootDir is set</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> in the config, the directory containing the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> config file is assumed to be the rootDir for</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> the project.This can also be a JSON encoded</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> value which Jest will use as configuration.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --coverage Indicates that test coverage information should</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> be collected and reported in the output.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --coverageDirectory The directory where Jest should output its</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> coverage files.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --coveragePathIgnorePatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> matched against all file paths before executing</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> the test. If the file pathmatches any of the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> patterns, coverage information will be skipped.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --coverageProvider Select between Babel and V8 to collect coverage</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --coverageReporters A list of reporter names that Jest uses when</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> writing coverage reports. Any istanbul reporter</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> can be used.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --coverageThreshold A JSON string with which will be used to</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> configure minimum threshold enforcement for</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> coverage results</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --debug Print debugging info about your jest config.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --detectLeaks **EXPERIMENTAL**: Detect memory leaks in tests.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> After executing a test, it will try to garbage</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> collect the global object used, and fail if it</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> was leaked</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --detectOpenHandles Print out remaining open handles preventing</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> Jest from exiting at the end of a test run.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> Implies \`runInBand\`.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --env The test environment used for all tests. This</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> can point to any file or node module. Examples:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> \`jsdom\`, \`node\` or \`path/to/my-environment.js\`</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --errorOnDeprecated Make calling deprecated APIs throw helpful</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> error messages.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -e --expand Use this flag to show full diffs instead of a</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> patch.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --filter Path to a module exporting a filtering</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> function. This method receives a list of tests</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> which can be manipulated to exclude tests from</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> running. Especially useful when used in</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> conjunction with a testing infrastructure to</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> filter known broken tests.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --findRelatedTests Find related tests for a list of source files</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> that were passed in as arguments. Useful for</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> pre-commit hook integration to run the minimal</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> amount of tests necessary.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --forceExit Force Jest to exit after all tests have</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> completed running. This is useful when</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> resources set up by test code cannot be</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> adequately cleaned up.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --globalSetup The path to a module that runs before All</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> Tests.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --globalTeardown The path to a module that runs after All Tests.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --globals A JSON string with map of global variables that</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> need to be available in all test environments.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --haste A JSON string with map of variables for the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> haste module system</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --init Generate a basic configuration file</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --injectGlobals Should Jest inject global variables or not</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --json Prints the test results in JSON. This mode will</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> send all other test output and user messages to</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> stderr.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --lastCommit Run all tests affected by file changes in the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> last commit made. Behaves similarly to</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> \`--onlyChanged\`.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --listTests Lists all tests Jest will run given the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> arguments and exits. Most useful in a CI system</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> together with \`--findRelatedTests\` to determine</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> the tests Jest will run based on specific files</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --logHeapUsage Logs the heap usage after every test. Useful to</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> debug memory leaks. Use together with</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> \`--runInBand\` and \`--expose-gc\` in node.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --mapCoverage Maps code coverage reports against original source code when transformers supply source maps.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"></span></span>
|
||||
<span class="line"><span style="color:#babed8;"> DEPRECATED</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --maxConcurrency Specifies the maximum number of tests that are</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> allowed to runconcurrently. This only affects</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> tests using \`test.concurrent\`.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -w --maxWorkers Specifies the maximum number of workers the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> worker-pool will spawn for running tests. This</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> defaults to the number of the cores available</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> on your machine. (its usually best not to</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> override this default)</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --moduleDirectories An array of directory names to be searched</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> recursively up from the requiring module's</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> location.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --moduleFileExtensions An array of file extensions your modules use.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> If you require modules without specifying a</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> file extension, these are the extensions Jest</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> will look for.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --moduleNameMapper A JSON string with a map from regular</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> expressions to module names or to arrays of</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> module names that allow to stub out resources,</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> like images or styles with a single module</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --modulePathIgnorePatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> matched against all module paths before those</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> paths are to be considered "visible" to the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> module loader.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --modulePaths An alternative API to setting the NODE_PATH env</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> variable, modulePaths is an array of absolute</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> paths to additional locations to search when</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> resolving modules.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --noStackTrace Disables stack trace in test results output</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --notify Activates notifications for test results.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --notifyMode Specifies when notifications will appear for</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> test results.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -o --onlyChanged Attempts to identify which tests to run based</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> on which files have changed in the current</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> repository. Only works if you're running tests</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> in a git or hg repository at the moment.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -f --onlyFailures Run tests that failed in the previous</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> execution.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --outputFile Write test results to a file when the --json</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> option is also specified.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --passWithNoTests Will not fail if no tests are found (for</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> example while using \`--testPathPattern\`.)</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --preset A preset that is used as a base for Jest's</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> configuration.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --prettierPath The path to the "prettier" module used for</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> inline snapshots.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --projects A list of projects that use Jest to run all</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> tests of all projects in a single instance of</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> Jest.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --reporters A list of custom reporters for the test suite.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --resetMocks Automatically reset mock state between every</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> test. Equivalent to calling</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> jest.resetAllMocks() between each test.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --resetModules If enabled, the module registry for every test</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> file will be reset before running each</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> individual test.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --resolver A JSON string which allows the use of a custom</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> resolver.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --restoreMocks Automatically restore mock state and</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> implementation between every test. Equivalent</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> to calling jest.restoreAllMocks() between each</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> test.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --rootDir The root directory that Jest should scan for</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> tests and modules within.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --roots A list of paths to directories that Jest should</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> use to search for files in.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -i --runInBand Run all tests serially in the current process</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> (rather than creating a worker pool of child</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> processes that run tests). This is sometimes</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> useful for debugging, but such use cases are</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> pretty rare.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --runTestsByPath Used when provided patterns are exact file</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> paths. This avoids converting them into a</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> regular expression and matching it against</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> every single file.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --runner Allows to use a custom runner instead of Jest's</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> default test runner.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --selectProjects Run only the tests of the specified</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> projects.Jest uses the attribute \`displayName\`</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> in the configuration to identify each project.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --setupFiles A list of paths to modules that run some code</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> to configure or set up the testing environment</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> before each test.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --setupFilesAfterEnv A list of paths to modules that run some code</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> to configure or set up the testing framework</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> before each test</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --showConfig Print your jest config and then exits.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --silent Prevent tests from printing messages through</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> the console.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --skipFilter Disables the filter provided by --filter.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> Useful for CI jobs, or local enforcement when</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> fixing tests.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --snapshotSerializers A list of paths to snapshot serializer modules</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> Jest should use for snapshot testing.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testEnvironment Alias for --env</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testEnvironmentOptions Test environment options that will be passed to</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> the testEnvironment. The relevant options</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> depend on the environment.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testFailureExitCode Exit code of \`jest\` command if the test run</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> failed</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testLocationInResults Add \`location\` information to the test results</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testMatch The glob patterns Jest uses to detect test</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> files.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -t --testNamePattern Run only tests with a name that matches the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> regex pattern.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testPathIgnorePatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> matched against all test paths before executing</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> the test. If the test path matches any of the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> patterns, it will be skipped.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testPathPattern A regexp pattern string that is matched against</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> all tests paths before executing the test.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testRegex A string or array of string regexp patterns</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> that Jest uses to detect test files.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testResultsProcessor Allows the use of a custom results processor.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> This processor must be a node module that</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> exports a function expecting as the first</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> argument the result object.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testRunner Allows to specify a custom test runner. The</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> default is \`jasmine2\`. A path to a custom test</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> runner can be provided:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> \`<rootDir>/path/to/testRunner.js\`.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testSequencer Allows to specify a custom test sequencer. The</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> default is \`@jest/test-sequencer\`. A path to a</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> custom test sequencer can be provided:</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> \`<rootDir>/path/to/testSequencer.js\`</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testTimeout This option sets the default timeouts of test</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> cases.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --testURL This option sets the URL for the jsdom</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> environment.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --timers Setting this value to fake allows the use of</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> fake timers for functions such as setTimeout.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --transform A JSON string which maps from regular</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> expressions to paths to transformers.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --transformIgnorePatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> matched against all source file paths before</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> transformation.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --unmockedModulePathPatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> matched against all modules before the module</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> loader will automatically return a mock for</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> them.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -u --updateSnapshot Use this flag to re-record snapshots. Can be</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> used together with a test suite pattern or with</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> \`--testNamePattern\` to re-record snapshot for</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> test matching the pattern</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --useStderr Divert all output to stderr.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --verbose Display individual test results with the test</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> suite hierarchy.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --watch Watch files for changes and rerun tests related</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> to changed files. If you want to re-run all</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> tests when a file has changed, use the</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> \`--watchAll\` option.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --watchAll Watch files for changes and rerun all tests. If</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> you want to re-run only the tests related to</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> the changed files, use the \`--watch\` option.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --watchPathIgnorePatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> matched against all paths before trigger test</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> re-run in watch mode. If the test path matches</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> any of the patterns, it will be skipped.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> --watchman Whether to use watchman for file crawling.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> Disable using --no-watchman.</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> -h, --help display help for command</span></span></code></pre></div><p>比如覆盖测试：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">fes test --coverage</span></span></code></pre></div><h3 id="配置文件" tabindex="-1">配置文件 <a class="header-anchor" href="#配置文件" aria-label="Permalink to "配置文件""></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-label="Permalink to "优先级""></a></h3><p><code>args</code> 配置 > <code>package.json</code>中的 <code>jest</code> > <code>jest.config.js</code> > 默认配置</p>`,26),p=[t];function o(c,r,i,b,d,y){return a(),n("div",null,p)}const f=s(l,[["render",o]]);export{u as __pageData,f as default};
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h2 id="命令" tabindex="-1">命令 <a class="header-anchor" href="#命令" aria-label="Permalink to "命令""></a></h2><p>在 <code>fes</code> 上注册 <code>test</code> 命令：</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">test</span></span></code></pre></div><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h2><p>插件实现 Jest 的全部配置，具体请查看 <a href="https://www.jestjs.cn/docs/configuration#reference" target="_blank" rel="noreferrer">文档-configuration</a>。 也可以使用 <code>-h</code> 打印配置帮助信息：</p><h3 id="args-变量" tabindex="-1">args 变量 <a class="header-anchor" href="#args-变量" aria-label="Permalink to "args 变量""></a></h3><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">$</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">fes</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">test</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-h</span></span></code></pre></div><p>打印配置帮助信息:</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight has-diff"><code><span class="line"><span style="color:#A6ACCD;">$ fes test -h</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Usage: fes test [options]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">run unit tests with jest</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Options:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --all The opposite of \`onlyChanged\`. If \`onlyChanged\`</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> is set by default, running jest with \`--all\`</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> will force Jest to run all tests instead of</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> running only tests related to changed files.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --automock Automock all files by default.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -b --bail Exit the test suite immediately after \`n\`</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> number of failing tests.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --browser Respect the "browser" field in package.json</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> when resolving modules. Some packages export</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> different versions based on whether they are</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> operating in node.js or a browser.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --cache Whether to use the transform cache. Disable the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> cache using --no-cache.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --cacheDirectory The directory where Jest should store its</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> cached dependency information.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --changedFilesWithAncestor Runs tests related to the current changes and</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> the changes made in the last commit. Behaves</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> similarly to \`--onlyChanged\`.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --changedSince Runs tests related to the changes since the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> provided branch. If the current branch has</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> diverged from the given branch, then only</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> changes made locally will be tested. Behaves</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> similarly to \`--onlyChanged\`.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --ci Whether to run Jest in continuous integration</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> (CI) mode. This option is on by default in most</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> popular CI environments. It will prevent</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> snapshots from being written unless explicitly</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> requested.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --clearCache Clears the configured Jest cache directory and</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> then exits. Default directory can be found by</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> calling jest --showConfig</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --clearMocks Automatically clear mock calls and instances</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> between every test. Equivalent to calling</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> jest.clearAllMocks() between each test.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --collectCoverage Alias for --coverage.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --collectCoverageFrom A glob pattern relative to <rootDir> matching</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> the files that coverage info needs to be</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> collected from.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --collectCoverageOnlyFrom Explicit list of paths coverage will be</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> restricted to.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --color Forces test results output color highlighting</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> (even if stdout is not a TTY). Set to false if</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> you would like to have no colors.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --colors Alias for \`--color\`.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -c --config The path to a jest config file specifying how</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> to find and execute tests. If no rootDir is set</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> in the config, the directory containing the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> config file is assumed to be the rootDir for</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> the project.This can also be a JSON encoded</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> value which Jest will use as configuration.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --coverage Indicates that test coverage information should</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> be collected and reported in the output.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --coverageDirectory The directory where Jest should output its</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> coverage files.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --coveragePathIgnorePatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> matched against all file paths before executing</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> the test. If the file pathmatches any of the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> patterns, coverage information will be skipped.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --coverageProvider Select between Babel and V8 to collect coverage</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --coverageReporters A list of reporter names that Jest uses when</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> writing coverage reports. Any istanbul reporter</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> can be used.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --coverageThreshold A JSON string with which will be used to</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> configure minimum threshold enforcement for</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> coverage results</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --debug Print debugging info about your jest config.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --detectLeaks **EXPERIMENTAL**: Detect memory leaks in tests.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> After executing a test, it will try to garbage</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> collect the global object used, and fail if it</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> was leaked</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --detectOpenHandles Print out remaining open handles preventing</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Jest from exiting at the end of a test run.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Implies \`runInBand\`.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --env The test environment used for all tests. This</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> can point to any file or node module. Examples:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> \`jsdom\`, \`node\` or \`path/to/my-environment.js\`</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --errorOnDeprecated Make calling deprecated APIs throw helpful</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> error messages.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -e --expand Use this flag to show full diffs instead of a</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> patch.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --filter Path to a module exporting a filtering</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> function. This method receives a list of tests</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> which can be manipulated to exclude tests from</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> running. Especially useful when used in</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> conjunction with a testing infrastructure to</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> filter known broken tests.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --findRelatedTests Find related tests for a list of source files</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> that were passed in as arguments. Useful for</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> pre-commit hook integration to run the minimal</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> amount of tests necessary.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --forceExit Force Jest to exit after all tests have</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> completed running. This is useful when</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> resources set up by test code cannot be</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> adequately cleaned up.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --globalSetup The path to a module that runs before All</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Tests.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --globalTeardown The path to a module that runs after All Tests.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --globals A JSON string with map of global variables that</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> need to be available in all test environments.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --haste A JSON string with map of variables for the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> haste module system</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --init Generate a basic configuration file</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --injectGlobals Should Jest inject global variables or not</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --json Prints the test results in JSON. This mode will</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> send all other test output and user messages to</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> stderr.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --lastCommit Run all tests affected by file changes in the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> last commit made. Behaves similarly to</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> \`--onlyChanged\`.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --listTests Lists all tests Jest will run given the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> arguments and exits. Most useful in a CI system</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> together with \`--findRelatedTests\` to determine</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> the tests Jest will run based on specific files</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --logHeapUsage Logs the heap usage after every test. Useful to</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> debug memory leaks. Use together with</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> \`--runInBand\` and \`--expose-gc\` in node.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --mapCoverage Maps code coverage reports against original source code when transformers supply source maps.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> DEPRECATED</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --maxConcurrency Specifies the maximum number of tests that are</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> allowed to runconcurrently. This only affects</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> tests using \`test.concurrent\`.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -w --maxWorkers Specifies the maximum number of workers the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> worker-pool will spawn for running tests. This</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> defaults to the number of the cores available</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> on your machine. (its usually best not to</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> override this default)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --moduleDirectories An array of directory names to be searched</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> recursively up from the requiring module's</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> location.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --moduleFileExtensions An array of file extensions your modules use.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> If you require modules without specifying a</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> file extension, these are the extensions Jest</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> will look for.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --moduleNameMapper A JSON string with a map from regular</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> expressions to module names or to arrays of</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> module names that allow to stub out resources,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> like images or styles with a single module</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --modulePathIgnorePatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> matched against all module paths before those</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> paths are to be considered "visible" to the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> module loader.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --modulePaths An alternative API to setting the NODE_PATH env</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> variable, modulePaths is an array of absolute</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> paths to additional locations to search when</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> resolving modules.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --noStackTrace Disables stack trace in test results output</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --notify Activates notifications for test results.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --notifyMode Specifies when notifications will appear for</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> test results.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -o --onlyChanged Attempts to identify which tests to run based</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> on which files have changed in the current</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> repository. Only works if you're running tests</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> in a git or hg repository at the moment.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -f --onlyFailures Run tests that failed in the previous</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> execution.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --outputFile Write test results to a file when the --json</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> option is also specified.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --passWithNoTests Will not fail if no tests are found (for</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> example while using \`--testPathPattern\`.)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --preset A preset that is used as a base for Jest's</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> configuration.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --prettierPath The path to the "prettier" module used for</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> inline snapshots.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --projects A list of projects that use Jest to run all</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> tests of all projects in a single instance of</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Jest.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --reporters A list of custom reporters for the test suite.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --resetMocks Automatically reset mock state between every</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> test. Equivalent to calling</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> jest.resetAllMocks() between each test.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --resetModules If enabled, the module registry for every test</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> file will be reset before running each</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> individual test.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --resolver A JSON string which allows the use of a custom</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> resolver.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --restoreMocks Automatically restore mock state and</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> implementation between every test. Equivalent</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> to calling jest.restoreAllMocks() between each</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> test.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --rootDir The root directory that Jest should scan for</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> tests and modules within.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --roots A list of paths to directories that Jest should</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> use to search for files in.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -i --runInBand Run all tests serially in the current process</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> (rather than creating a worker pool of child</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> processes that run tests). This is sometimes</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> useful for debugging, but such use cases are</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> pretty rare.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --runTestsByPath Used when provided patterns are exact file</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> paths. This avoids converting them into a</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> regular expression and matching it against</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> every single file.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --runner Allows to use a custom runner instead of Jest's</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> default test runner.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --selectProjects Run only the tests of the specified</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> projects.Jest uses the attribute \`displayName\`</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> in the configuration to identify each project.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --setupFiles A list of paths to modules that run some code</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> to configure or set up the testing environment</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> before each test.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --setupFilesAfterEnv A list of paths to modules that run some code</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> to configure or set up the testing framework</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> before each test</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --showConfig Print your jest config and then exits.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --silent Prevent tests from printing messages through</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> the console.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --skipFilter Disables the filter provided by --filter.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Useful for CI jobs, or local enforcement when</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> fixing tests.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --snapshotSerializers A list of paths to snapshot serializer modules</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Jest should use for snapshot testing.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testEnvironment Alias for --env</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testEnvironmentOptions Test environment options that will be passed to</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> the testEnvironment. The relevant options</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> depend on the environment.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testFailureExitCode Exit code of \`jest\` command if the test run</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> failed</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testLocationInResults Add \`location\` information to the test results</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testMatch The glob patterns Jest uses to detect test</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> files.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -t --testNamePattern Run only tests with a name that matches the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> regex pattern.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testPathIgnorePatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> matched against all test paths before executing</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> the test. If the test path matches any of the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> patterns, it will be skipped.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testPathPattern A regexp pattern string that is matched against</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> all tests paths before executing the test.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testRegex A string or array of string regexp patterns</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> that Jest uses to detect test files.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testResultsProcessor Allows the use of a custom results processor.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> This processor must be a node module that</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> exports a function expecting as the first</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> argument the result object.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testRunner Allows to specify a custom test runner. The</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> default is \`jasmine2\`. A path to a custom test</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> runner can be provided:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> \`<rootDir>/path/to/testRunner.js\`.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testSequencer Allows to specify a custom test sequencer. The</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> default is \`@jest/test-sequencer\`. A path to a</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> custom test sequencer can be provided:</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> \`<rootDir>/path/to/testSequencer.js\`</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testTimeout This option sets the default timeouts of test</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> cases.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --testURL This option sets the URL for the jsdom</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> environment.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --timers Setting this value to fake allows the use of</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> fake timers for functions such as setTimeout.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --transform A JSON string which maps from regular</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> expressions to paths to transformers.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --transformIgnorePatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> matched against all source file paths before</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> transformation.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --unmockedModulePathPatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> matched against all modules before the module</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> loader will automatically return a mock for</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> them.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -u --updateSnapshot Use this flag to re-record snapshots. Can be</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> used together with a test suite pattern or with</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> \`--testNamePattern\` to re-record snapshot for</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> test matching the pattern</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --useStderr Divert all output to stderr.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --verbose Display individual test results with the test</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> suite hierarchy.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --watch Watch files for changes and rerun tests related</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> to changed files. If you want to re-run all</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> tests when a file has changed, use the</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> \`--watchAll\` option.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --watchAll Watch files for changes and rerun all tests. If</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> you want to re-run only the tests related to</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> the changed files, use the \`--watch\` option.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --watchPathIgnorePatterns An array of regexp pattern strings that are</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> matched against all paths before trigger test</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> re-run in watch mode. If the test path matches</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> any of the patterns, it will be skipped.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> --watchman Whether to use watchman for file crawling.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Disable using --no-watchman.</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> -h, --help display help for command</span></span></code></pre></div><p>比如覆盖测试：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">fes test --coverage</span></span></code></pre></div><h3 id="配置文件" tabindex="-1">配置文件 <a class="header-anchor" href="#配置文件" aria-label="Permalink to "配置文件""></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-label="Permalink to "优先级""></a></h3><p><code>args</code> 配置 > <code>package.json</code>中的 <code>jest</code> > <code>jest.config.js</code> > 默认配置</p>`,26),p=[t];function o(c,r,i,A,C,y){return n(),a("div",null,p)}const u=s(l,[["render",o]]);export{D as __pageData,u as default};
|
||||
1
assets/reference_plugin_plugins_jest.md.4b1c2ebf.lean.js
Normal file
1
assets/reference_plugin_plugins_jest.md.4b1c2ebf.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,V as e}from"./chunks/framework.85b09291.js";const D=JSON.parse('{"title":"@fesjs/plugin-jest","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/jest.md"}'),l={name:"reference/plugin/plugins/jest.md"},t=e("",26),p=[t];function o(c,r,i,A,C,y){return n(),a("div",null,p)}const u=s(l,[["render",o]]);export{D as __pageData,u as default};
|
||||
@ -1,102 +1,102 @@
|
||||
import{o as p,c as e,C as s,b as a,V as o,a as l,y as n}from"./chunks/framework.6405946a.js";const t=o(`<h1 id="fesjs-plugin-layout" tabindex="-1">@fesjs/plugin-layout <a class="header-anchor" href="#fesjs-plugin-layout" aria-label="Permalink to "@fesjs/plugin-layout""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></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="./access.html">@fesjs/plugin-access</a> 插件使用，可以完成对路由的权限控制。</li><li>搭配 <a href="./locale.html">@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-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-layout</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^5.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="布局类型" tabindex="-1">布局类型 <a class="header-anchor" href="#布局类型" aria-label="Permalink to "布局类型""></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">side <a class="header-anchor" href="#side" aria-label="Permalink to "side""></a></h3>`,10),c=["src"],r=s("h3",{id:"top",tabindex:"-1"},[l("top "),s("a",{class:"header-anchor",href:"#top","aria-label":'Permalink to "top"'},"")],-1),i=["src"],D=s("h3",{id:"mixin",tabindex:"-1"},[l("mixin "),s("a",{class:"header-anchor",href:"#mixin","aria-label":'Permalink to "mixin"'},"")],-1),F=["src"],y=s("h3",{id:"left-right",tabindex:"-1"},[l("left-right "),s("a",{class:"header-anchor",href:"#left-right","aria-label":'Permalink to "left-right"'},"")],-1),d=["src"],B=o(`<h3 id="页面个性化" tabindex="-1">页面个性化 <a class="header-anchor" href="#页面个性化" aria-label="Permalink to "页面个性化""></a></h3><p>可以为页面单独设置布局类型：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">defineRouteMeta</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
import{o as p,c as e,C as s,b as a,V as o,a as l,y as n}from"./chunks/framework.85b09291.js";const t=o(`<h1 id="fesjs-plugin-layout" tabindex="-1">@fesjs/plugin-layout <a class="header-anchor" href="#fesjs-plugin-layout" aria-label="Permalink to "@fesjs/plugin-layout""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></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="./access.html">@fesjs/plugin-access</a> 插件使用，可以完成对路由的权限控制。</li><li>搭配 <a href="./locale.html">@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-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-layout</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^5.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="布局类型" tabindex="-1">布局类型 <a class="header-anchor" href="#布局类型" aria-label="Permalink to "布局类型""></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">side <a class="header-anchor" href="#side" aria-label="Permalink to "side""></a></h3>`,10),c=["src"],r=s("h3",{id:"top",tabindex:"-1"},[l("top "),s("a",{class:"header-anchor",href:"#top","aria-label":'Permalink to "top"'},"")],-1),i=["src"],D=s("h3",{id:"mixin",tabindex:"-1"},[l("mixin "),s("a",{class:"header-anchor",href:"#mixin","aria-label":'Permalink to "mixin"'},"")],-1),F=["src"],y=s("h3",{id:"left-right",tabindex:"-1"},[l("left-right "),s("a",{class:"header-anchor",href:"#left-right","aria-label":'Permalink to "left-right"'},"")],-1),C=["src"],d=o(`<h3 id="页面个性化" tabindex="-1">页面个性化 <a class="header-anchor" href="#页面个性化" aria-label="Permalink to "页面个性化""></a></h3><p>可以为页面单独设置布局类型：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">defineRouteMeta</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#82AAFF;">defineRouteMeta</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">layout</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">navigation</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">null,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>当设置为 <code>null</code> 时，页面不使用布局。</p><h2 id="页面缓存" tabindex="-1">页面缓存 <a class="header-anchor" href="#页面缓存" aria-label="Permalink to "页面缓存""></a></h2><p>支持配置页面缓存，通过<a href="./../../../guide/route.html#扩展路由元信息">定义路由元信息</a>开启缓存：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">defineRouteMeta</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">defineRouteMeta</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">layout</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">navigation</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>当设置为 <code>null</code> 时，页面不使用布局。</p><h2 id="页面缓存" tabindex="-1">页面缓存 <a class="header-anchor" href="#页面缓存" aria-label="Permalink to "页面缓存""></a></h2><p>支持配置页面缓存，通过<a href="./../../../guide/route.html#扩展路由元信息">定义路由元信息</a>开启缓存：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">defineRouteMeta</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#82AAFF;">defineRouteMeta</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">keep-alive</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="处理嵌套路由" tabindex="-1">处理嵌套路由 <a class="header-anchor" href="#处理嵌套路由" aria-label="Permalink to "处理嵌套路由""></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"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">Page</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">Page</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">defineRouteMeta</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">keep-alive</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h3 id="处理嵌套路由" tabindex="-1">处理嵌套路由 <a class="header-anchor" href="#处理嵌套路由" aria-label="Permalink to "处理嵌套路由""></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"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">Page</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">Page</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">Page</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> Page</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Page</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> Page</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h2><h4 id="编译时配置方式" tabindex="-1">编译时配置方式 <a class="header-anchor" href="#编译时配置方式" aria-label="Permalink to "编译时配置方式""></a></h4><p>在 <code>.fes.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">layout</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h2><h4 id="编译时配置方式" tabindex="-1">编译时配置方式 <a class="header-anchor" href="#编译时配置方式" aria-label="Permalink to "编译时配置方式""></a></h4><p>在 <code>.fes.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">layout</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 标题</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Fes.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Fes.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 底部文字</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">footer</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Created by MumbleFE</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">footer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Created by MumbleFE</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 主题light</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">theme</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">dark</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">menus</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">onepiece</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">simpleList</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">theme</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">dark</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">menus</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">onepiece</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">simpleList</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span></code></pre></div><h4 id="运行时配置方式" tabindex="-1">运行时配置方式 <a class="header-anchor" href="#运行时配置方式" aria-label="Permalink to "运行时配置方式""></a></h4><p>在 <code>app.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> UserCenter </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/components/UserCenter</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> layout </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">renderCustom</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">UserCenter</span><span style="color:#89DDFF;"> />,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">menus</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> [</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>在<code>fes.js</code>中，运行时配置有定义对象和函数两种方式，当使用函数配置<code>layout</code>时，<code>layoutConfig</code>是编译时配置结果，<code>initialState</code>是 <code>beforeRender.action</code>执行后创建的应用初始状态数据。<br> 。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> layout </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">layoutConfig</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">initialState</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">renderCustom</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">UserCenter</span><span style="color:#89DDFF;"> />,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">menus</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">=></span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">menusRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">layoutConfig</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">menus</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span></code></pre></div><h4 id="运行时配置方式" tabindex="-1">运行时配置方式 <a class="header-anchor" href="#运行时配置方式" aria-label="Permalink to "运行时配置方式""></a></h4><p>在 <code>app.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> UserCenter </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@/components/UserCenter</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> layout </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">renderCustom</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">UserCenter</span><span style="color:#89DDFF;"> />,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">menus</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>在<code>fes.js</code>中，运行时配置有定义对象和函数两种方式，当使用函数配置<code>layout</code>时，<code>layoutConfig</code>是编译时配置结果，<code>initialState</code>是 <code>beforeRender.action</code>执行后创建的应用初始状态数据。<br> 。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> layout </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">layoutConfig</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">initialState</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">renderCustom</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">UserCenter</span><span style="color:#89DDFF;"> />,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">menus</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">menusRef</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">layoutConfig</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">menus</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">watch</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#BABED8;">initialState</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">userName</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">initialState</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">userName</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">menusRef</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> [</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">menusRef</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> [</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">store</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> ]</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> )</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">menusRef</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">menusRef</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>最终配置结果是运行时配置跟编译时配置合并的结果，运行时配置优先于编译时配置。</p><p>实际上运行配置能做的事情更多，推荐用运行时配置方式。</p><h3 id="footer" tabindex="-1">footer <a class="header-anchor" href="#footer" aria-label="Permalink to "footer""></a></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">theme <a class="header-anchor" href="#theme" aria-label="Permalink to "theme""></a></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">navigation <a class="header-anchor" href="#navigation" aria-label="Permalink to "navigation""></a></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">isFixedHeader <a class="header-anchor" href="#isfixedheader" aria-label="Permalink to "isFixedHeader""></a></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">isFixedSidebar <a class="header-anchor" href="#isfixedsidebar" aria-label="Permalink to "isFixedSidebar""></a></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">title <a class="header-anchor" href="#title" aria-label="Permalink to "title""></a></h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：默认为 <a href="./../../../reference/config/#title">编译时配置 title</a></p></li><li><p><strong>详情</strong>：产品名。</p></li></ul><h3 id="logo" tabindex="-1">logo <a class="header-anchor" href="#logo" aria-label="Permalink to "logo""></a></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 的链接，例如在 public/logo.png 放了一个 logo，可以这么配置(<a href="./../../../guide/env.html#process-env">BASE_URL 来自这里</a>)</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> layout </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">logo</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#BABED8;">process</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">env</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">BASE_URL</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">logo.png</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="multitabs" tabindex="-1">multiTabs <a class="header-anchor" href="#multitabs" aria-label="Permalink to "multiTabs""></a></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">menus <a class="header-anchor" href="#menus" aria-label="Permalink to "menus""></a></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#扩展路由元信息">meta</a> 中的 <code>name</code>，把菜单和路由关联起来，\b 然后使用路由元信息补充菜单配置，比如 <code>title</code>、<code>path</code> \b 等。</p></li><li><p><strong>path</strong>：菜单的路径，可配置第三方地址。</p></li><li><p><strong>match (v4.0.0+）</strong>：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">{</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> path: '/product',</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> match: ['/product/*', '/product/create']</span></span>
|
||||
<span class="line"><span style="color:#babed8;">}</span></span></code></pre></div></li><li><p><strong>title</strong>：菜单的标题。</p><ul><li><p>如果同时使用<a href="./locale.html">国际化插件</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="noreferrer">fes-design icon</a>，编译时配置使用组件名称，我们会自动引入组件。</p></li><li><p>图标使用本地或者远程 svg 图片。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>最终配置结果是运行时配置跟编译时配置合并的结果，运行时配置优先于编译时配置。</p><p>实际上运行配置能做的事情更多，推荐用运行时配置方式。</p><h3 id="footer" tabindex="-1">footer <a class="header-anchor" href="#footer" aria-label="Permalink to "footer""></a></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">theme <a class="header-anchor" href="#theme" aria-label="Permalink to "theme""></a></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">navigation <a class="header-anchor" href="#navigation" aria-label="Permalink to "navigation""></a></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">isFixedHeader <a class="header-anchor" href="#isfixedheader" aria-label="Permalink to "isFixedHeader""></a></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">isFixedSidebar <a class="header-anchor" href="#isfixedsidebar" aria-label="Permalink to "isFixedSidebar""></a></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">title <a class="header-anchor" href="#title" aria-label="Permalink to "title""></a></h3><ul><li><p><strong>类型</strong>：<code>String</code></p></li><li><p><strong>默认值</strong>：默认为 <a href="./../../../reference/config/#title">编译时配置 title</a></p></li><li><p><strong>详情</strong>：产品名。</p></li></ul><h3 id="logo" tabindex="-1">logo <a class="header-anchor" href="#logo" aria-label="Permalink to "logo""></a></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 的链接，例如在 public/logo.png 放了一个 logo，可以这么配置(<a href="./../../../guide/env.html#process-env">BASE_URL 来自这里</a>)</p></li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> layout </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">logo</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">\`\${</span><span style="color:#A6ACCD;">process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">BASE_URL</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">logo.png</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="multitabs" tabindex="-1">multiTabs <a class="header-anchor" href="#multitabs" aria-label="Permalink to "multiTabs""></a></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">menus <a class="header-anchor" href="#menus" aria-label="Permalink to "menus""></a></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#扩展路由元信息">meta</a> 中的 <code>name</code>，把菜单和路由关联起来，\b 然后使用路由元信息补充菜单配置，比如 <code>title</code>、<code>path</code> \b 等。</p></li><li><p><strong>path</strong>：菜单的路径，可配置第三方地址。</p></li><li><p><strong>match (v4.0.0+）</strong>：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> path: '/product',</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> match: ['/product/*', '/product/create']</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre></div></li><li><p><strong>title</strong>：菜单的标题。</p><ul><li><p>如果同时使用<a href="./locale.html">国际化插件</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="noreferrer">fes-design icon</a>，编译时配置使用组件名称，我们会自动引入组件。</p></li><li><p>图标使用本地或者远程 svg 图片。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">icon</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/wine-outline.svg</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div></li></ul></li><li><p><strong>children</strong>：子菜单配置。</p></li></ul></li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>函数类型仅在运行时可用，可以实现动态变更菜单。</p></div><h3 id="menuprops" tabindex="-1">menuProps <a class="header-anchor" href="#menuprops" aria-label="Permalink to "menuProps""></a></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">sideWidth <a class="header-anchor" href="#sidewidth" aria-label="Permalink to "sideWidth""></a></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">renderCustom <a class="header-anchor" href="#rendercustom" aria-label="Permalink to "renderCustom""></a></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">unAccessHandler <a class="header-anchor" href="#unaccesshandler" aria-label="Permalink to "unAccessHandler""></a></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="noreferrer">next 函数</a></li></ul></li></ul><p>比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> layout </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">unAccessHandler</span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">next</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accesssIds</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#BABED8;">to</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">path</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div></li></ul></li><li><p><strong>children</strong>：子菜单配置。</p></li></ul></li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>函数类型仅在运行时可用，可以实现动态变更菜单。</p></div><h3 id="menuprops" tabindex="-1">menuProps <a class="header-anchor" href="#menuprops" aria-label="Permalink to "menuProps""></a></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">sideWidth <a class="header-anchor" href="#sidewidth" aria-label="Permalink to "sideWidth""></a></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">renderCustom <a class="header-anchor" href="#rendercustom" aria-label="Permalink to "renderCustom""></a></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">unAccessHandler <a class="header-anchor" href="#unaccesshandler" aria-label="Permalink to "unAccessHandler""></a></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="noreferrer">next 函数</a></li></ul></li></ul><p>比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> layout </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">unAccessHandler</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">to</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">next</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">to</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">path</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/403</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="nofoundhandler" tabindex="-1">noFoundHandler <a class="header-anchor" href="#nofoundhandler" aria-label="Permalink to "noFoundHandler""></a></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="noreferrer">next 函数</a></li></ul></li></ul><p>比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> layout </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">noFoundHandler</span><span style="color:#89DDFF;">({</span><span style="color:#BABED8;"> </span><span style="color:#BABED8;font-style:italic;">next</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">})</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accesssIds</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#BABED8;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h3 id="nofoundhandler" tabindex="-1">noFoundHandler <a class="header-anchor" href="#nofoundhandler" aria-label="Permalink to "noFoundHandler""></a></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="noreferrer">next 函数</a></li></ul></li></ul><p>比如：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> layout </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">noFoundHandler</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">next</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAccess</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">accessApi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAccess</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">accesssIds</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">concat</span><span style="color:#F07178;">([</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">]))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">next</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/404</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="usetabtitle" tabindex="-1">useTabTitle <a class="header-anchor" href="#usetabtitle" aria-label="Permalink to "useTabTitle""></a></h3><p>类型定义如下：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useTabTitle</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">title</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">|</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">Ref</span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">>):</span><span style="color:#BABED8;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>当使用多页签模式时，在页面中使用 <code>useTabTitle</code> 可以自定义页面标签：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useRoute</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useTabTitle</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="usetabtitle" tabindex="-1">useTabTitle <a class="header-anchor" href="#usetabtitle" aria-label="Permalink to "useTabTitle""></a></h3><p>类型定义如下：</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useTabTitle</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Ref</span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">>):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>当使用多页签模式时，在页面中使用 <code>useTabTitle</code> 可以自定义页面标签：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useRoute</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useTabTitle</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> titleRef </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useTabTitle</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">详情-</span><span style="color:#89DDFF;">\${</span><span style="color:#BABED8;">route</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">params</span><span style="color:#89DDFF;">?.</span><span style="color:#BABED8;">id</span><span style="color:#89DDFF;">}\`</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> titleRef </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useTabTitle</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">详情-</span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">route</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">params</span><span style="color:#89DDFF;">?.</span><span style="color:#A6ACCD;">id</span><span style="color:#89DDFF;">}\`</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">//如果要更新</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">titleRef</span><span style="color:#89DDFF;">.</span><span style="color:#BABED8;">value </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">changed</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="_4-x-升级到-5-x" tabindex="-1">4.x 升级到 5.x <a class="header-anchor" href="#_4-x-升级到-5-x" aria-label="Permalink to "4.x 升级到 5.x""></a></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>`,63),f=JSON.parse('{"title":"@fesjs/plugin-layout","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/layout.md"}'),u={name:"reference/plugin/plugins/layout.md"},m=Object.assign(u,{setup(g){return(h,A)=>(p(),e("div",null,[t,s("img",{src:a(n)("side.png"),alt:"side"},null,8,c),r,s("img",{src:a(n)("top.png"),alt:"top"},null,8,i),D,s("img",{src:a(n)("mixin.png"),alt:"mixin"},null,8,F),y,s("img",{src:a(n)("left-right.png"),alt:"left-right"},null,8,d),B]))}});export{f as __pageData,m as default};
|
||||
<span class="line"><span style="color:#A6ACCD;">titleRef</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">changed</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="_4-x-升级到-5-x" tabindex="-1">4.x 升级到 5.x <a class="header-anchor" href="#_4-x-升级到-5-x" aria-label="Permalink to "4.x 升级到 5.x""></a></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>`,63),m=JSON.parse('{"title":"@fesjs/plugin-layout","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/layout.md"}'),A={name:"reference/plugin/plugins/layout.md"},b=Object.assign(A,{setup(u){return(g,h)=>(p(),e("div",null,[t,s("img",{src:a(n)("side.png"),alt:"side"},null,8,c),r,s("img",{src:a(n)("top.png"),alt:"top"},null,8,i),D,s("img",{src:a(n)("mixin.png"),alt:"mixin"},null,8,F),y,s("img",{src:a(n)("left-right.png"),alt:"left-right"},null,8,C),d]))}});export{m as __pageData,b as default};
|
||||
@ -1 +1 @@
|
||||
import{o as p,c as e,C as s,b as a,V as o,a as l,y as n}from"./chunks/framework.6405946a.js";const t=o("",10),c=["src"],r=s("h3",{id:"top",tabindex:"-1"},[l("top "),s("a",{class:"header-anchor",href:"#top","aria-label":'Permalink to "top"'},"")],-1),i=["src"],D=s("h3",{id:"mixin",tabindex:"-1"},[l("mixin "),s("a",{class:"header-anchor",href:"#mixin","aria-label":'Permalink to "mixin"'},"")],-1),F=["src"],y=s("h3",{id:"left-right",tabindex:"-1"},[l("left-right "),s("a",{class:"header-anchor",href:"#left-right","aria-label":'Permalink to "left-right"'},"")],-1),d=["src"],B=o("",63),f=JSON.parse('{"title":"@fesjs/plugin-layout","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/layout.md"}'),u={name:"reference/plugin/plugins/layout.md"},m=Object.assign(u,{setup(g){return(h,A)=>(p(),e("div",null,[t,s("img",{src:a(n)("side.png"),alt:"side"},null,8,c),r,s("img",{src:a(n)("top.png"),alt:"top"},null,8,i),D,s("img",{src:a(n)("mixin.png"),alt:"mixin"},null,8,F),y,s("img",{src:a(n)("left-right.png"),alt:"left-right"},null,8,d),B]))}});export{f as __pageData,m as default};
|
||||
import{o as p,c as e,C as s,b as a,V as o,a as l,y as n}from"./chunks/framework.85b09291.js";const t=o("",10),c=["src"],r=s("h3",{id:"top",tabindex:"-1"},[l("top "),s("a",{class:"header-anchor",href:"#top","aria-label":'Permalink to "top"'},"")],-1),i=["src"],D=s("h3",{id:"mixin",tabindex:"-1"},[l("mixin "),s("a",{class:"header-anchor",href:"#mixin","aria-label":'Permalink to "mixin"'},"")],-1),F=["src"],y=s("h3",{id:"left-right",tabindex:"-1"},[l("left-right "),s("a",{class:"header-anchor",href:"#left-right","aria-label":'Permalink to "left-right"'},"")],-1),C=["src"],d=o("",63),m=JSON.parse('{"title":"@fesjs/plugin-layout","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/layout.md"}'),A={name:"reference/plugin/plugins/layout.md"},b=Object.assign(A,{setup(u){return(g,h)=>(p(),e("div",null,[t,s("img",{src:a(n)("side.png"),alt:"side"},null,8,c),r,s("img",{src:a(n)("top.png"),alt:"top"},null,8,i),D,s("img",{src:a(n)("mixin.png"),alt:"mixin"},null,8,F),y,s("img",{src:a(n)("left-right.png"),alt:"left-right"},null,8,C),d]))}});export{m as __pageData,b as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"@fesjs/plugin-locale","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/locale.md"}'),o={name:"reference/plugin/plugins/locale.md"},p=n("",55),e=[p];function t(c,r,D,y,F,i){return a(),l("div",null,e)}const u=s(o,[["render",t]]);export{B as __pageData,u as default};
|
||||
@ -1,74 +1,74 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"@fesjs/plugin-locale","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/locale.md"}'),o={name:"reference/plugin/plugins/locale.md"},p=n(`<h1 id="fesjs-plugin-locale" tabindex="-1">@fesjs/plugin-locale <a class="header-anchor" href="#fesjs-plugin-locale" aria-label="Permalink to "@fesjs/plugin-locale""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>国际化插件，基于 <a href="https://github.com/intlify/vue-i18n-next" target="_blank" rel="noreferrer">Vue I18n</a>，用于解决 i18n 问题。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-locale</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h2><h3 id="约定式配置" tabindex="-1">约定式配置 <a class="header-anchor" href="#约定式配置" aria-label="Permalink to "约定式配置""></a></h3><p>Fes.js 约定如下目录，项目就拥有了 <code>zh-CN</code> 与 <code>en-US</code> 国际化语言切换：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">src</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> ├── locales</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> │ ├── zh-CN.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> │ └── en-US.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── pages</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> │ └── index.vue</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── app.js</span></span></code></pre></div><p>多语言文件的命名规范：<code><lang>-<COUNTRY>.js</code></p><p>多语言文件的内容规范：键值组成的字面量，如下：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// src/locales/zh-CN.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">menu</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">interface</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">接口</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">overview</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">概述</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">i18n</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">internationalization</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">国际化，基于</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">achieve</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">实现。</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">ui</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">UI组件</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"@fesjs/plugin-locale","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/locale.md"}'),o={name:"reference/plugin/plugins/locale.md"},p=n(`<h1 id="fesjs-plugin-locale" tabindex="-1">@fesjs/plugin-locale <a class="header-anchor" href="#fesjs-plugin-locale" aria-label="Permalink to "@fesjs/plugin-locale""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>国际化插件，基于 <a href="https://github.com/intlify/vue-i18n-next" target="_blank" rel="noreferrer">Vue I18n</a>，用于解决 i18n 问题。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-locale</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="配置" tabindex="-1">配置 <a class="header-anchor" href="#配置" aria-label="Permalink to "配置""></a></h2><h3 id="约定式配置" tabindex="-1">约定式配置 <a class="header-anchor" href="#约定式配置" aria-label="Permalink to "约定式配置""></a></h3><p>Fes.js 约定如下目录，项目就拥有了 <code>zh-CN</code> 与 <code>en-US</code> 国际化语言切换：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">src</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ├── locales</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> │ ├── zh-CN.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> │ └── en-US.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── pages</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> │ └── index.vue</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── app.js</span></span></code></pre></div><p>多语言文件的命名规范：<code><lang>-<COUNTRY>.js</code></p><p>多语言文件的内容规范：键值组成的字面量，如下：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// src/locales/zh-CN.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">menu</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">interface</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">接口</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">overview</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">概述</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">i18n</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">internationalization</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">国际化，基于</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">achieve</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">实现。</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">ui</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">UI组件</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// src/locales/en-US.js</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">menu</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">interface</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">interface</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">overview</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Overview</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">i18n</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">internationalization</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">internationalization，base on</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">achieve</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">to achieve.</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">ui</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">UI components</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>想了解更多语言信息配置、匹配规则，请参考 <a href="https://vue-i18n.intlify.dev/guide/essentials/syntax.html" target="_blank" rel="noreferrer">Vue I18n</a> 文档。</p><h3 id="多层配置" tabindex="-1">多层配置 <a class="header-anchor" href="#多层配置" aria-label="Permalink to "多层配置""></a></h3><p>如果国际化内容较多，希望模块化配置，则可以这样：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#babed8;">src</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> ├── locales</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> │ ├── zh-CN.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> │ └── en-US.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> | └── system</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> | ├── zh-CN.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> │ └── en-US.js</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── pages</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> │ └── index.vue</span></span>
|
||||
<span class="line"><span style="color:#babed8;"> └── app.js</span></span></code></pre></div><p>插件会把相同语言的配置合并在一起！</p><h3 id="编译时配置" tabindex="-1">编译时配置 <a class="header-anchor" href="#编译时配置" aria-label="Permalink to "编译时配置""></a></h3><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>默认配置为：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">zh-CN</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// default locale</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">fallbackLocale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">zh-CN</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// set fallback locale</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">baseNavigator</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 开启浏览器语言检测</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">legacy</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 用户是否需要 Legacy API 模式</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>所有配置项如下：</p><h4 id="locale" tabindex="-1">locale <a class="header-anchor" href="#locale" aria-label="Permalink to "locale""></a></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">fallbackLocale <a class="header-anchor" href="#fallbacklocale" aria-label="Permalink to "fallbackLocale""></a></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">baseNavigator <a class="header-anchor" href="#basenavigator" aria-label="Permalink to "baseNavigator""></a></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">legacy <a class="header-anchor" href="#legacy" aria-label="Permalink to "legacy""></a></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-label="Permalink to "运行时配置""></a></h3><p>暂无。</p><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="locale-1" tabindex="-1">locale <a class="header-anchor" href="#locale-1" aria-label="Permalink to "locale""></a></h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="locale-messages" tabindex="-1">locale.messages <a class="header-anchor" href="#locale-messages" aria-label="Permalink to "locale.messages""></a></h4><ul><li><strong>类型</strong>：<code>Object</code></li><li><strong>详情</strong>：当前的配置的语言信息。</li></ul><h4 id="locale-setlocale" tabindex="-1">locale.setLocale <a class="header-anchor" href="#locale-setlocale" aria-label="Permalink to "locale.setLocale""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">locale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setLocale</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">en-US</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="locale-addlocale" tabindex="-1">locale.addLocale <a class="header-anchor" href="#locale-addlocale" aria-label="Permalink to "locale.addLocale""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">locale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addLocale</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ja-JP</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">messages</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#BABED8;"> </span><span style="color:#F07178;">test</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">テスト</span><span style="color:#89DDFF;">'</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="locale-getalllocales" tabindex="-1">locale.getAllLocales <a class="header-anchor" href="#locale-getalllocales" aria-label="Permalink to "locale.getAllLocales""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#BABED8;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#BABED8;">(locale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAllLocales</span><span style="color:#BABED8;">())</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">menu</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">interface</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">interface</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">overview</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">Overview</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">i18n</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">internationalization</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">internationalization，base on</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">achieve</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">to achieve.</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">ui</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">UI components</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>想了解更多语言信息配置、匹配规则，请参考 <a href="https://vue-i18n.intlify.dev/guide/essentials/syntax.html" target="_blank" rel="noreferrer">Vue I18n</a> 文档。</p><h3 id="多层配置" tabindex="-1">多层配置 <a class="header-anchor" href="#多层配置" aria-label="Permalink to "多层配置""></a></h3><p>如果国际化内容较多，希望模块化配置，则可以这样：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">src</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ├── locales</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> │ ├── zh-CN.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> │ └── en-US.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> | └── system</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> | ├── zh-CN.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> │ └── en-US.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── pages</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> │ └── index.vue</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> └── app.js</span></span></code></pre></div><p>插件会把相同语言的配置合并在一起！</p><h3 id="编译时配置" tabindex="-1">编译时配置 <a class="header-anchor" href="#编译时配置" aria-label="Permalink to "编译时配置""></a></h3><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>默认配置为：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">zh-CN</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// default locale</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fallbackLocale</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">zh-CN</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// set fallback locale</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">baseNavigator</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 开启浏览器语言检测</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">legacy</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 用户是否需要 Legacy API 模式</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>所有配置项如下：</p><h4 id="locale" tabindex="-1">locale <a class="header-anchor" href="#locale" aria-label="Permalink to "locale""></a></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">fallbackLocale <a class="header-anchor" href="#fallbacklocale" aria-label="Permalink to "fallbackLocale""></a></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">baseNavigator <a class="header-anchor" href="#basenavigator" aria-label="Permalink to "baseNavigator""></a></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">legacy <a class="header-anchor" href="#legacy" aria-label="Permalink to "legacy""></a></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-label="Permalink to "运行时配置""></a></h3><p>暂无。</p><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="locale-1" tabindex="-1">locale <a class="header-anchor" href="#locale-1" aria-label="Permalink to "locale""></a></h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出：</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="locale-messages" tabindex="-1">locale.messages <a class="header-anchor" href="#locale-messages" aria-label="Permalink to "locale.messages""></a></h4><ul><li><strong>类型</strong>：<code>Object</code></li><li><strong>详情</strong>：当前的配置的语言信息。</li></ul><h4 id="locale-setlocale" tabindex="-1">locale.setLocale <a class="header-anchor" href="#locale-setlocale" aria-label="Permalink to "locale.setLocale""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">locale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setLocale</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">en-US</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="locale-addlocale" tabindex="-1">locale.addLocale <a class="header-anchor" href="#locale-addlocale" aria-label="Permalink to "locale.addLocale""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">locale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">addLocale</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">locale</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">ja-JP</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">messages</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">test</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">テスト</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="locale-getalllocales" tabindex="-1">locale.getAllLocales <a class="header-anchor" href="#locale-getalllocales" aria-label="Permalink to "locale.getAllLocales""></a></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-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(locale</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getAllLocales</span><span style="color:#A6ACCD;">())</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]</span></span></code></pre></div><h3 id="usei18n" tabindex="-1">useI18n <a class="header-anchor" href="#usei18n" aria-label="Permalink to "useI18n""></a></h3><p>Composition API, 只能在 <code>setup</code> 函数中使用，更多细节参考 <a href="https://vue-i18n.intlify.dev/api/composition.html#usei18n" target="_blank" rel="noreferrer">Vue I18n</a>。 \b 举个 🌰：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">form</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">{{ t('language') }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">form</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">message: {{ t('hello') }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">form</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">{{ t('language') }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">label</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">form</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">message: {{ t('hello') }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useI18n</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useI18n</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">t</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useI18n</span><span style="color:#F07178;">()</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">t</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useI18n</span><span style="color:#F07178;">()</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// Something to do ...</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">t</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">t</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><p><code>useI18n()</code>返回结果是 <a href="https://vue-i18n.intlify.dev/api/composition.html#composer" target="_blank" rel="noreferrer">Composer</a>，提供类似 <code>t</code>、<code>n</code>、<code>d</code> 等转换函数，在模板中使用。</p>`,55),e=[p];function t(c,r,D,y,F,i){return a(),l("div",null,e)}const u=s(o,[["render",t]]);export{B as __pageData,u as default};
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><p><code>useI18n()</code>返回结果是 <a href="https://vue-i18n.intlify.dev/api/composition.html#composer" target="_blank" rel="noreferrer">Composer</a>，提供类似 <code>t</code>、<code>n</code>、<code>d</code> 等转换函数，在模板中使用。</p>`,55),e=[p];function t(c,r,D,y,F,i){return a(),l("div",null,e)}const d=s(o,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"@fesjs/plugin-locale","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/locale.md"}'),o={name:"reference/plugin/plugins/locale.md"},p=n("",55),e=[p];function t(c,r,D,y,F,i){return a(),l("div",null,e)}const d=s(o,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -1,16 +1,16 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"@fesjs/plugin-login","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/login.md"}'),o={name:"reference/plugin/plugins/login.md"},p=l(`<h1 id="fesjs-plugin-login" tabindex="-1">@fesjs/plugin-login <a class="header-anchor" href="#fesjs-plugin-login" aria-label="Permalink to "@fesjs/plugin-login""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>管理自定义 login 页面，包括 login 页面权限问题，跳转登陆问题。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-login</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="运行时配置" tabindex="-1">运行时配置 <a class="header-anchor" href="#运行时配置" aria-label="Permalink to "运行时配置""></a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">defineRuntimeConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"@fesjs/plugin-login","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/login.md"}'),o={name:"reference/plugin/plugins/login.md"},p=l(`<h1 id="fesjs-plugin-login" tabindex="-1">@fesjs/plugin-login <a class="header-anchor" href="#fesjs-plugin-login" aria-label="Permalink to "@fesjs/plugin-login""></a></h1><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></a></h2><p>管理自定义 login 页面，包括 login 页面权限问题，跳转登陆问题。</p><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-login</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="运行时配置" tabindex="-1">运行时配置 <a class="header-anchor" href="#运行时配置" aria-label="Permalink to "运行时配置""></a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">defineRuntimeConfig</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">defineRuntimeConfig</span><span style="color:#BABED8;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">login</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">loginPath</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/login</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#BABED8;"> </span><span style="color:#676E95;font-style:italic;">// 登陆页面路径，默认 /login，也可以用路由的 name</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">hasLogin</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">defineRuntimeConfig</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">login</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">loginPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/login</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 登陆页面路径，默认 /login，也可以用路由的 name</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">hasLogin</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 进入页面前判断是否登陆的逻辑，每次跳转非登陆页面都会检测，直到为 true，支持异步</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#BABED8;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div>`,8),e=[p];function t(c,r,D,i,F,y){return n(),a("div",null,e)}const d=s(o,[["render",t]]);export{u as __pageData,d as default};
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div>`,8),e=[p];function t(c,r,D,i,F,y){return n(),a("div",null,e)}const u=s(o,[["render",t]]);export{A as __pageData,u as default};
|
||||
@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"@fesjs/plugin-login","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/login.md"}'),o={name:"reference/plugin/plugins/login.md"},p=l("",8),e=[p];function t(c,r,D,i,F,y){return n(),a("div",null,e)}const u=s(o,[["render",t]]);export{A as __pageData,u as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const u=JSON.parse('{"title":"@fesjs/plugin-login","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/login.md"}'),o={name:"reference/plugin/plugins/login.md"},p=l("",8),e=[p];function t(c,r,D,i,F,y){return n(),a("div",null,e)}const d=s(o,[["render",t]]);export{u as __pageData,d as default};
|
||||
@ -1,38 +1,38 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"@fesjs/plugin-model","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/model.md"}'),o={name:"reference/plugin/plugins/model.md"},p=l(`<h1 id="fesjs-plugin-model" tabindex="-1">@fesjs/plugin-model <a class="header-anchor" href="#fesjs-plugin-model" aria-label="Permalink to "@fesjs/plugin-model""></a></h1><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 package.json 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-model</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></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">Model 文件 <a class="header-anchor" href="#model-文件" aria-label="Permalink to "Model 文件""></a></h3><p><strong>src/models/useAuthModel.js</strong></p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">reactive</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"@fesjs/plugin-model","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/model.md"}'),o={name:"reference/plugin/plugins/model.md"},p=l(`<h1 id="fesjs-plugin-model" tabindex="-1">@fesjs/plugin-model <a class="header-anchor" href="#fesjs-plugin-model" aria-label="Permalink to "@fesjs/plugin-model""></a></h1><h2 id="启用方式" tabindex="-1">启用方式 <a class="header-anchor" href="#启用方式" aria-label="Permalink to "启用方式""></a></h2><p>在 package.json 中引入依赖：</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">dependencies</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/fes</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#FFCB6B;">@fesjs/plugin-model</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^3.0.0</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to "介绍""></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">Model 文件 <a class="header-anchor" href="#model-文件" aria-label="Permalink to "Model 文件""></a></h3><p><strong>src/models/useAuthModel.js</strong></p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reactive</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">function</span><span style="color:#BABED8;"> </span><span style="color:#82AAFF;">useAuthModel</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">user</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">reactive</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useAuthModel</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">user</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">reactive</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">signin</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">signin</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// todo</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">signout</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">signout</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// todo</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">user</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">signin</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">signout</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">user</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">signin</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">signout</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="在组件中使用-model" tabindex="-1">在组件中使用 Model <a class="header-anchor" href="#在组件中使用-model" aria-label="Permalink to "在组件中使用 Model""></a></h3><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useModel</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">user</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">signin</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">signout</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useModel</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">useAuthModel</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useModel</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">user</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">signin</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">signout</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useModel</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">useAuthModel</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h3 id="initialstate" tabindex="-1">@@initialState <a class="header-anchor" href="#initialstate" aria-label="Permalink to "@@initialState""></a></h3><p>在<code>beforeRender</code>的返回的内容会写入<code>@@initialState</code></p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">const</span><span style="color:#BABED8;"> beforeRender </span><span style="color:#89DDFF;">=</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">loading</span><span style="color:#89DDFF;">:</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">PageLoading</span><span style="color:#89DDFF;"> />,</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">action</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">setRole</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">access</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#BABED8;font-style:italic;">resolve</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div><h3 id="initialstate" tabindex="-1">@@initialState <a class="header-anchor" href="#initialstate" aria-label="Permalink to "@@initialState""></a></h3><p>在<code>beforeRender</code>的返回的内容会写入<code>@@initialState</code></p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> beforeRender </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">loading</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#FFCB6B;">PageLoading</span><span style="color:#89DDFF;"> />,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">action</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">setRole</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">access</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">resolve</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setTimeout</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">setRole</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">admin</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件</span></span>
|
||||
@ -43,18 +43,18 @@ import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const B=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>然后我们可以在其他组件中使用：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#BABED8;">{{ initialState.userName }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">{{ initialState.userName }}</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">useModel</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useModel</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@fesjs/fes</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#BABED8;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#BABED8;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#BABED8;">initialState</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useModel</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@@initialState</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">setup</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">initialState</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useModel</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@@initialState</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#BABED8;">initialState</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">initialState</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">style</span><span style="color:#BABED8;"> </span><span style="color:#C792EA;">scope</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="usemodel" tabindex="-1">useModel <a class="header-anchor" href="#usemodel" aria-label="Permalink to "useModel""></a></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),e=[p];function t(c,r,F,y,D,i){return n(),a("div",null,e)}const u=s(o,[["render",t]]);export{B as __pageData,u as default};
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">style</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">scope</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to "API""></a></h2><h3 id="usemodel" tabindex="-1">useModel <a class="header-anchor" href="#usemodel" aria-label="Permalink to "useModel""></a></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),e=[p];function t(c,r,F,y,D,i){return n(),a("div",null,e)}const d=s(o,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.85b09291.js";const A=JSON.parse('{"title":"@fesjs/plugin-model","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/model.md"}'),o={name:"reference/plugin/plugins/model.md"},p=l("",22),e=[p];function t(c,r,F,y,D,i){return n(),a("div",null,e)}const d=s(o,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.6405946a.js";const B=JSON.parse('{"title":"@fesjs/plugin-model","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/model.md"}'),o={name:"reference/plugin/plugins/model.md"},p=l("",22),e=[p];function t(c,r,F,y,D,i){return n(),a("div",null,e)}const u=s(o,[["render",t]]);export{B as __pageData,u as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.6405946a.js";const d=JSON.parse('{"title":"@fesjs/plugin-pinia","description":"","frontmatter":{},"headers":[],"relativePath":"reference/plugin/plugins/pinia.md"}'),p={name:"reference/plugin/plugins/pinia.md"},o=l("",23),e=[o];function t(c,r,F,y,D,i){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{d as __pageData,u as default};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user