mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
Deploying to gh-pages from @ WeBankFinTech/fes.js@b97689f4b4 🚀
This commit is contained in:
winixt
parent
d2d7c98489
commit
8dde8a7620
@ -1 +0,0 @@
|
||||
import{_ as e,o as c,c as t}from"./app.136d0839.js";const _={};function o(r,n){return c(),t("div")}const a=e(_,[["render",o],["__file","404.html.vue"]]);export{a as default};
|
||||
@ -1 +0,0 @@
|
||||
const t=JSON.parse('{"key":"v-3706649a","path":"/404.html","title":"","lang":"zh-CN","frontmatter":{"layout":"NotFound"},"excerpt":"","headers":[],"git":{},"filePathRelative":null}');export{t as data};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-2fe128e7","path":"/reference/plugin/plugins/access.html","title":"@fesjs/plugin-access","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[{"level":3,"title":"资源","slug":"资源","link":"#资源","children":[]},{"level":3,"title":"匹配规则","slug":"匹配规则","link":"#匹配规则","children":[]},{"level":3,"title":"角色","slug":"角色","link":"#角色","children":[]}]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"编译时配置","slug":"编译时配置","link":"#编译时配置","children":[{"level":3,"title":"roles","slug":"roles","link":"#roles","children":[]}]},{"level":2,"title":"运行时配置","slug":"运行时配置","link":"#运行时配置","children":[{"level":3,"title":"unAccessHandler","slug":"unaccesshandler","link":"#unaccesshandler","children":[]},{"level":3,"title":"noFoundHandler","slug":"nofoundhandler","link":"#nofoundhandler","children":[]},{"level":3,"title":"ignoreAccess","slug":"ignoreaccess","link":"#ignoreaccess","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"access","slug":"access","link":"#access","children":[]},{"level":3,"title":"useAccess","slug":"useaccess","link":"#useaccess","children":[]},{"level":3,"title":"v-access","slug":"v-access","link":"#v-access","children":[]},{"level":3,"title":"组件 Access","slug":"组件-access","link":"#组件-access","children":[]}]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/access.md"}');export{e as data};
|
||||
@ -1,107 +0,0 @@
|
||||
import{_ as p,r as c,o,c as l,b as s,d as a,a as e,f as n}from"./app.136d0839.js";const i={},u=n(`<h1 id="fesjs-plugin-access" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-access" aria-hidden="true">#</a> @fesjs/plugin-access</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>对于前端应用来说，权限就是页面、页面元素是否可见。</p><h3 id="资源" tabindex="-1"><a class="header-anchor" href="#资源" aria-hidden="true">#</a> 资源</h3><p>Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分他们：</p><ul><li>页面的资源 ID 默认是页面的路由 <code>path</code> 。比如页面 <code>pages/a.vue</code> 的路由 <code>path</code> 是 <code>/a</code>。当页面访问 <code>/a</code> 时会渲染当前页面，<code>/a</code> 也就是页面的 <code>accessId</code>。</li><li>页面元素的资源 ID 没有默认值，需要自定义。</li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>access</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess1 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>access</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-access</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>accessOnepicess2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="匹配规则" tabindex="-1"><a class="header-anchor" href="#匹配规则" aria-hidden="true">#</a> 匹配规则</h3><h4 id="全等匹配" tabindex="-1"><a class="header-anchor" href="#全等匹配" aria-hidden="true">#</a> 全等匹配</h4><p>资源的匹配规则默认是使用全等匹配，比如页面 <code>pages/a.vue</code> 对应路由 <code>path</code> 是 <code>/a</code>，则 <code>/a</code> 就是页面的资源 ID。如果我们设置：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>access<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/a'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>由于权限列表中包含<code>/a</code>，则表示拥有此页面权限。</p><h4 id="模糊匹配" tabindex="-1"><a class="header-anchor" href="#模糊匹配" aria-hidden="true">#</a> 模糊匹配</h4><p>页面<code>@id.vue</code>会映射为动态路由<code>/:id</code>，想匹配此页面有两种办法：</p><ul><li><strong>access.setAccess(['/:id'])</strong></li><li><strong>access.setAccess(['/*'])</strong></li></ul><p>第二种是模糊匹配，<code>*</code>表示任意路径。比如角色<code>admin</code>需要全部权限，则可以：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">access</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">roles</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">admin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'*'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="角色" tabindex="-1"><a class="header-anchor" href="#角色" aria-hidden="true">#</a> 角色</h3><p>通常我们会用角色来控制权限，相应的 Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。</p><p>当然有时候业务比较复杂，角色对应的权限是动态的。不要怕！插件提供粒度更细的 API 来设置当前用户能访问的资源。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
|
||||
<span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-access"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">access</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">roles</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">admin</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/'</span><span class="token punctuation">,</span> <span class="token string">'/onepiece'</span><span class="token punctuation">,</span> <span class="token string">'/store'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="roles" tabindex="-1"><a class="header-anchor" href="#roles" aria-hidden="true">#</a> roles</h3><ul><li><p><strong>类型</strong>：对象</p></li><li><p><strong>默认值</strong>：<code>{}</code></p></li><li><p><strong>详情</strong>：</p><p>角色预定义列表。<code>key</code> 是角色 Id ，<code>value</code>是角色 Id 对应的资源列表。</p></li></ul><h2 id="运行时配置" tabindex="-1"><a class="header-anchor" href="#运行时配置" aria-hidden="true">#</a> 运行时配置</h2><p>在 <code>app.js</code> 中配置</p><h3 id="unaccesshandler" tabindex="-1"><a class="header-anchor" href="#unaccesshandler" aria-hidden="true">#</a> unAccessHandler</h3>`,31),r=n("<li><p><strong>类型</strong>：<code>Function</code></p></li><li><p><strong>默认值</strong>：<code>null</code></p></li><li><p><strong>详情</strong>：</p><p>当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 <code>unAccessHandler</code> 函数。</p></li>",3),d=s("p",null,[s("strong",null,"参数")],-1),k=s("li",null,"router：createRouter 创建的路由实例",-1),v=s("li",null,"to： 准备进入的路由",-1),g=s("li",null,"from：离开的路由",-1),m={href:"https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next",target:"_blank",rel:"noopener noreferrer"},h=n(`<p>比如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">unAccessHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> to<span class="token punctuation">,</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/404'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/403'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/403'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="nofoundhandler" tabindex="-1"><a class="header-anchor" href="#nofoundhandler" aria-hidden="true">#</a> noFoundHandler</h3>`,3),b=n("<li><p><strong>类型</strong>：<code>Function</code></p></li><li><p><strong>默认值</strong>：<code>null</code></p></li><li><p><strong>详情</strong>：</p><p>当进入某个路由时，如果路由对应的页面不存在，则会调用 <code>noFoundHandler</code> 函数。</p></li>",3),f=s("p",null,[s("strong",null,"参数")],-1),y=s("li",null,"router：createRouter 创建的路由实例",-1),x=s("li",null,"to： 准备进入的路由",-1),j=s("li",null,"from：离开的路由",-1),A={href:"https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next",target:"_blank",rel:"noopener noreferrer"},_=n(`<p>比如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">noFoundHandler</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> next <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> accesssIds <span class="token operator">=</span> accessApi<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>accesssIds<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
accessApi<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span>accesssIds<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/404'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/404'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="ignoreaccess" tabindex="-1"><a class="header-anchor" href="#ignoreaccess" aria-hidden="true">#</a> ignoreAccess</h3><ul><li><p><strong>类型</strong>：<code>Array<string></code></p></li><li><p><strong>默认值</strong>：<code>null</code></p></li><li><p><strong>详情</strong>：</p><p>配置需要忽略权限校验的页面。</p></li></ul><p>比如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> access <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">ignoreAccess</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/login'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="access" tabindex="-1"><a class="header-anchor" href="#access" aria-hidden="true">#</a> access</h3><p>插件 API 通过 <code>@fesjs/fes</code> 导出：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="access-hasaccess" tabindex="-1"><a class="header-anchor" href="#access-hasaccess" aria-hidden="true">#</a> access.hasAccess</h4><ul><li><strong>类型</strong>：( accessId: string | number ) => Promise<boolean></li><li><strong>详情</strong>: 判断某个资源是否可见。</li><li><strong>参数</strong>： <ul><li>accessId，资源 Id</li></ul></li><li><strong>返回值</strong>：是否有权限</li></ul><h4 id="access-isdataready" tabindex="-1"><a class="header-anchor" href="#access-isdataready" aria-hidden="true">#</a> access.isDataReady</h4><ul><li><strong>类型</strong>：() => boolean</li><li><strong>详情</strong>：可以用异步数据来设置权限，<code>isDataReady</code> 用来判断异步数据是否已经加载完毕。</li><li><strong>参数</strong>：null</li><li><strong>返回值</strong>：Boolean</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>access<span class="token punctuation">.</span><span class="token function">isDataReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="access-setrole" tabindex="-1"><a class="header-anchor" href="#access-setrole" aria-hidden="true">#</a> access.setRole</h4><ul><li><strong>类型</strong>：函数</li><li><strong>详情</strong>：设置当前的角色。</li><li><strong>参数</strong>： <ul><li>roleId，角色 Id，有两种类型： <ul><li>String，对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li><li>Promise，Promise resolve 的结果应对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li></ul></li></ul></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
access<span class="token punctuation">.</span><span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="access-setaccess" tabindex="-1"><a class="header-anchor" href="#access-setaccess" aria-hidden="true">#</a> access.setAccess</h4><ul><li><strong>类型</strong>：函数</li><li><strong>详情</strong>：设置当前的角色。</li><li><strong>参数</strong>： <ul><li>accessIds，资源 Id 数组，有两种类型： <ul><li>Array，数组项对应着 <code>roles</code> 配置对象中的 <code>key</code>。</li><li>Promise，Promise resolve 的结果应该是<code>Array<accessId></code>。</li></ul></li></ul></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
access<span class="token punctuation">.</span><span class="token function">setAccess</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'/a'</span><span class="token punctuation">,</span> <span class="token string">'/b'</span><span class="token punctuation">,</span> <span class="token string">'/c'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="access-getaccess" tabindex="-1"><a class="header-anchor" href="#access-getaccess" aria-hidden="true">#</a> access.getAccess</h4><ul><li><strong>类型</strong>：函数</li><li><strong>详情</strong>：返回当前可见的资源列表。</li><li><strong>参数</strong>：null</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
access<span class="token punctuation">.</span><span class="token function">getAccess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="useaccess" tabindex="-1"><a class="header-anchor" href="#useaccess" aria-hidden="true">#</a> useAccess</h3><ul><li><strong>类型</strong>：<a href="(https://v3.cn.vuejs.org/guide/composition-api-introduction.html)">composition</a> 函数</li><li><strong>详情</strong>：判断某个资源是否可见。</li><li><strong>参数</strong>： <ul><li>accessId，资源 Id</li></ul></li><li><strong>返回值</strong>：<code>ref</code></li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessOnepicess<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>accessOnepicess<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> useAccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> accessOnepicess <span class="token operator">=</span> <span class="token function">useAccess</span><span class="token punctuation">(</span><span class="token string">'/onepiece1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
accessOnepicess<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="v-access" tabindex="-1"><a class="header-anchor" href="#v-access" aria-hidden="true">#</a> v-access</h3><p>在指令 <code>v-access</code> 中传入 <code>accessId</code>，则当 <code>accessId</code> 拥有权限时显示 DOM，当没有权限时隐藏此 DOM。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-access</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>accessOnepicess<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="组件-access" tabindex="-1"><a class="header-anchor" href="#组件-access" aria-hidden="true">#</a> 组件 Access</h3><p>组件 <code>Access</code> 中传入 <code>accessId</code>，则当 <code>accessId</code> 拥有权限时渲染此组件，当没有权限时隐藏此组件。</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>access</span> <span class="token attr-name">:id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accessId<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> accessOnepicess <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>access</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">accessId</span><span class="token operator">:</span> <span class="token string">'accessOnepicess'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,33);function w(I,q){const t=c("ExternalLinkIcon");return o(),l("div",null,[u,s("ul",null,[r,s("li",null,[d,s("ul",null,[k,v,g,s("li",null,[a("next： "),s("a",m,[a("next 函数"),e(t)])])])])]),h,s("ul",null,[b,s("li",null,[f,s("ul",null,[y,x,j,s("li",null,[a("next： "),s("a",A,[a("next 函数"),e(t)])])])])]),_])}const F=p(i,[["render",w],["__file","access.html.vue"]]);export{F as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as a,o as t,c,b as e,d as o}from"./app.136d0839.js";const r={},s=e("h1",{id:"api",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#api","aria-hidden":"true"},"#"),o(" API")],-1),n=[s];function _(i,d){return t(),c("div",null,n)}const l=a(r,[["render",_],["__file","api.html.vue"]]);export{l as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-a1a49808","path":"/reference/api.html","title":"API","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/api.md"}');export{e as data};
|
||||
@ -1,196 +0,0 @@
|
||||
import{_ as e,r as i,o,c,b as n,d as a,a as p,f as t}from"./app.136d0839.js";const l={},u=t(`<h1 id="插件-api" tabindex="-1"><a class="header-anchor" href="#插件-api" aria-hidden="true">#</a> 插件 API</h1><h2 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h2><h3 id="api-paths" tabindex="-1"><a class="header-anchor" href="#api-paths" aria-hidden="true">#</a> api.paths</h3><p>一些关键的路径：</p><ul><li>cwd，执行命令的绝对路径</li><li>absNodeModulesPath，nodeModule 的绝对路径</li><li>absOutputPath，输出 <code>build</code> 产物的绝对路径</li><li>absSrcPath，<code>src</code> 目录的绝对路径</li><li>absPagesPath，<code>pages</code>目录的绝对路径</li><li>absTmpPath，<code>.fes</code>临时文件目录的绝对路径</li></ul><h3 id="api-cwd" tabindex="-1"><a class="header-anchor" href="#api-cwd" aria-hidden="true">#</a> api.cwd</h3><p>执行命令的绝对路径</p><h3 id="api-pkg" tabindex="-1"><a class="header-anchor" href="#api-pkg" aria-hidden="true">#</a> api.pkg</h3><p><code>package.json</code>的内容</p><h3 id="api-configinstance" tabindex="-1"><a class="header-anchor" href="#api-configinstance" aria-hidden="true">#</a> api.configInstance</h3><p><code>config</code>实例</p><h3 id="userconfig" tabindex="-1"><a class="header-anchor" href="#userconfig" aria-hidden="true">#</a> userConfig</h3><p>用户配置</p><h3 id="config" tabindex="-1"><a class="header-anchor" href="#config" aria-hidden="true">#</a> config</h3><p>插件配置可被修改，此为最终的配置</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> env</h3><p>p<wbr>rocess.env</p><h3 id="args" tabindex="-1"><a class="header-anchor" href="#args" aria-hidden="true">#</a> args</h3><p>环境变量</p><h2 id="核心方法" tabindex="-1"><a class="header-anchor" href="#核心方法" aria-hidden="true">#</a> 核心方法</h2><h3 id="describe" tabindex="-1"><a class="header-anchor" href="#describe" aria-hidden="true">#</a> describe</h3><p>注册阶段执行，用于描述插件或插件集的 id、key、配置信息、启用方式等。</p><p>用法：<strong>describe({ id?: string, key?: string, config?: { default, schema, onChange } }, enableBy?)</strong></p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'esbuild'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">schema</span><span class="token punctuation">(</span><span class="token parameter">joi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> joi<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">enableBy</span><span class="token operator">:</span> api<span class="token punctuation">.</span>EnableBy<span class="token punctuation">.</span>config<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注：</p>`,26),r=n("li",null,[n("code",null,"config.default"),a(" 为配置的默认值，用户没有配置时取这个")],-1),d=n("code",null,"config.schema",-1),k={href:"https://hapi.dev/module/joi",target:"_blank",rel:"noopener noreferrer"},v=n("li",null,[n("code",null,"config.onChange"),a(" 是 "),n("code",null,"dev"),a(" 阶段配置被修改后的处理机制，默认会重启 dev 进程，也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件，还可以通过函数的格式自定义")],-1),m=n("li",null,[n("code",null,"enableBy"),a(" 为启用方式，默认是注册启用，可更改为 "),n("code",null,"api.EnableBy.config"),a("，还可以用自定义函数的方式决定其启用时机（动态生效）")],-1),h=t(`<h3 id="register" tabindex="-1"><a class="header-anchor" href="#register" aria-hidden="true">#</a> register</h3><p>为 api.applyPlugins 注册可供其使用的 hook。</p><p>用法：<strong>register({ key: string, fn: Function, pluginId?: string, before?: string, stage?: number })</strong></p><p>参数：</p><ul><li>key：唯一 id</li><li>fn：hook 函数，当执行<code>api.applyPlugins</code>时，此函数被执行。</li><li>pluginId：插件 id，如果配置了插件 id，则只有此插件未被禁用时，才会执行。</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 可同步</span>
|
||||
api<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
|
||||
<span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token string">'a'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// 可异步</span>
|
||||
api<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">await</span> <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token string">'b'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意：</p><ul><li>fn 支持同步和异步，异步通过 Promise，返回值为 Promise 即为异步</li><li>fn 里的内容需结合 <code>api.appyPlugins</code> 的 <code>type</code> 参数来看,如果是 <code>api.ApplyPluginsType.add</code>，需有返回值，这些返回值最终会被合成一个数组。如果是 <code>api.ApplyPluginsType.modify</code>，需对第一个参数做修改，并返回它，它会作为下个 hook 的参数。 如果是 <code>api.ApplyPluginsType.event</code>，无需返回值</li><li>stage 和 before 都是用于调整执行顺序的，参考 tapable</li><li>stage 默认是 0，设为 -1 或更少会提前执行，设为 1 或更多会后置执行</li></ul><h3 id="applyplugins" tabindex="-1"><a class="header-anchor" href="#applyplugins" aria-hidden="true">#</a> applyPlugins</h3><p>取得 register 注册的 hooks 执行后的数据。</p><p>用法：<strong>applyPlugins({ key: string, type: api.ApplyPluginsType, initialValue?: any, args?: any })</strong></p><p>参数：</p><ul><li>key：唯一 id</li><li>type：hook 的类型。</li><li>initialValue：初始值。</li><li>args：参数，hook 函数执行时，args 会作为参数传入。</li></ul><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token keyword">await</span> api<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> api<span class="token punctuation">.</span>ApplyPluginsType<span class="token punctuation">.</span>add<span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ['a', 'b']</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="api-applypluginstype" tabindex="-1"><a class="header-anchor" href="#api-applypluginstype" aria-hidden="true">#</a> api.ApplyPluginsType</h4><p>编译时插件 hook 执行类型，enum 类型，包含三个属性：</p><ul><li>compose，用于合并执行多个函数，函数可决定前序函数的执行时机</li><li>modify，用于修改值</li><li>event，用于执行事件，前面没有依赖关系</li></ul><h3 id="registermethod" tabindex="-1"><a class="header-anchor" href="#registermethod" aria-hidden="true">#</a> registerMethod</h3><p>往 <code>api</code> 上注册方法。如果有提供 <code>fn</code>，则执行 <code>fn</code> 定义的函数。</p><p>用法：<strong>registerMethod({ name: string, fn?: Function, exitsError?: boolean })</strong></p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerMethod</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'writeTmpFile'</span><span class="token punctuation">,</span>
|
||||
<span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> path<span class="token punctuation">,</span> content <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">assert</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>stage <span class="token operator">>=</span> api<span class="token punctuation">.</span>ServiceStage<span class="token punctuation">.</span>pluginReady<span class="token punctuation">,</span> <span class="token string">'api.writeTmpFile() should not execute in register stage.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> absPath <span class="token operator">=</span> <span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath<span class="token punctuation">,</span> path<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
api<span class="token punctuation">.</span>utils<span class="token punctuation">.</span>mkdirp<span class="token punctuation">.</span><span class="token function">sync</span><span class="token punctuation">(</span><span class="token function">dirname</span><span class="token punctuation">(</span>absPath<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">existsSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token function">readFileSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span> <span class="token operator">!==</span> content<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">writeFileSync</span><span class="token punctuation">(</span>absPath<span class="token punctuation">,</span> content<span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后在插件中可以使用：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="registercommand" tabindex="-1"><a class="header-anchor" href="#registercommand" aria-hidden="true">#</a> registerCommand</h3>`,26),g={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},b=n("p",null,[a("用法："),n("strong",null,"registerCommand({ command: string, description: string, fn: Function, options?: Object })")],-1),f=n("p",null,"参数：",-1),y=n("li",null,"command",-1),j=n("li",null,[a("description，描述文字，输入 "),n("code",null,"--help"),a(" 会打印")],-1),x=n("li",null,[a("fn，命令执行的函数，参数有： "),n("ul",null,[n("li",null,"rawArgv，原始参数"),n("li",null,"args，参数"),n("li",null,"options，执行命令时附带的的参数配置"),n("li",null,"program，commander 对象")])],-1),P={href:"https://github.com/tj/commander.js/",target:"_blank",rel:"noopener noreferrer"},w=t(`<p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerCommand</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'webpack'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect webpack configurations'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rule <ruleName>'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific module rule'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugin <pluginName>'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'inspect a specific plugin'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--rules'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all module rule names'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--plugins'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'list all plugin names'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'--verbose'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'show full function definitions in output'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">async</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> rawArgv<span class="token punctuation">,</span> args<span class="token punctuation">,</span> options<span class="token punctuation">,</span> program <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当项目引入此插件后，使用：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes webpack
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="registerpresets" tabindex="-1"><a class="header-anchor" href="#registerpresets" aria-hidden="true">#</a> registerPresets</h3><p>注册插件集，参数为路径数组。</p><p>用法：<strong>registerPresets(presets: string[])</strong></p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPresets</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="registerplugins" tabindex="-1"><a class="header-anchor" href="#registerplugins" aria-hidden="true">#</a> registerPlugins</h3><p>注册插件，参数为路径数组。</p><p>用法：<strong>registerPlugins(plugins: string[])</strong></p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">registerPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'preset_2'</span><span class="token punctuation">,</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'preset2'</span><span class="token punctuation">,</span> <span class="token function-variable function">apply</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'./preset_3'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="hasplugins" tabindex="-1"><a class="header-anchor" href="#hasplugins" aria-hidden="true">#</a> hasPlugins</h3><p>判断是否有注册某个插件，插件的 id 规则：</p><ul><li>id 默认为包名</li><li>内置插件以 <code>@@</code> 为前缀，比如 <code>@@/registerMethod</code></li></ul><p>用法：<strong>hasPlugins(pluginIds: string[])</strong></p><p>例如</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册 @fesjs/plugin-locale</span>
|
||||
api<span class="token punctuation">.</span><span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/plugin-locale'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用，只能判断在他之前是否有注册某个插件。</p></div><h3 id="haspresets" tabindex="-1"><a class="header-anchor" href="#haspresets" aria-hidden="true">#</a> hasPresets</h3><p>判断是否有注册某个插件集。</p><p>用法：<strong>hasPresets(presetIds: string[])</strong></p><p>例如</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 判断是否有注册</span>
|
||||
api<span class="token punctuation">.</span><span class="token function">hasPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/preset-xxx'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果在注册阶段使用，只能判断在他之前是否有注册某个插件集。</p></div><h3 id="skipplugins" tabindex="-1"><a class="header-anchor" href="#skipplugins" aria-hidden="true">#</a> skipPlugins</h3><p>声明哪些插件需要被禁用，参数为插件 id 的数组。</p><p>用法：<strong>hasPresets(presetIds: string[])</strong></p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 禁用 plugin-model 插件</span>
|
||||
api<span class="token punctuation">.</span><span class="token function">skipPlugins</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'@fesjs/plugin-model'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="扩展方法" tabindex="-1"><a class="header-anchor" href="#扩展方法" aria-hidden="true">#</a> 扩展方法</h2><p>通过 api.registerMethod() 扩展的方法。</p><h3 id="addpluginexports" tabindex="-1"><a class="header-anchor" href="#addpluginexports" aria-hidden="true">#</a> addPluginExports</h3><p>把插件需要导出的运行时 API 写入<code>@fesjs/fes</code>。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addPluginExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">specifiers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'access'</span><span class="token punctuation">,</span> <span class="token string">'useAccess'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">source</span><span class="token operator">:</span> absoluteFilePath<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这样用户使用时：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> access<span class="token punctuation">,</span> useAccess <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addcoreexports" tabindex="-1"><a class="header-anchor" href="#addcoreexports" aria-hidden="true">#</a> addCoreExports</h3><p>提供给其他插件运行时需要的 API。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addCoreExports</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">specifiers</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'getRoutes'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">source</span><span class="token operator">:</span> absCoreFilePath<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>使用：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getHistory<span class="token punctuation">,</span> destroyRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@@/core/coreExports'</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addruntimeplugin" tabindex="-1"><a class="header-anchor" href="#addruntimeplugin" aria-hidden="true">#</a> addRuntimePlugin</h3><p>添加运行时插件，返回值格式为表示文件路径的字符串。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePlugin</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./runtime'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addruntimepluginkey" tabindex="-1"><a class="header-anchor" href="#addruntimepluginkey" aria-hidden="true">#</a> addRuntimePluginKey</h3><p>添加插件提供的运行时配置的 key，返回值格式为字符串。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addRuntimePluginKey</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'some'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>则用户可以：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// app.js</span>
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">some</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addentryimportsahead" tabindex="-1"><a class="header-anchor" href="#addentryimportsahead" aria-hidden="true">#</a> addEntryImportsAhead</h3><p>在入口文件现有 import 的前面添加 import。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImportsAhead</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'anypackage'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="addentryimports" tabindex="-1"><a class="header-anchor" href="#addentryimports" aria-hidden="true">#</a> addEntryImports</h3><p>在入口文件现有 import 的后面添加 import。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryImport</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">'/modulePath/xxx.js'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">specifier</span><span class="token operator">:</span> <span class="token string">'moduleName'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addentrycodeahead" tabindex="-1"><a class="header-anchor" href="#addentrycodeahead" aria-hidden="true">#</a> addEntryCodeAhead</h3><p>在入口文件最前面（import 之后）添加代码。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCodeAhead</span><span class="token punctuation">(</span>
|
||||
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>globalCSSFile
|
||||
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">file</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">require('</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span><span class="token function">winPath</span><span class="token punctuation">(</span><span class="token function">relative</span><span class="token punctuation">(</span>absTmpPath<span class="token punctuation">,</span> file<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">');</span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span>
|
||||
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addentrycode" tabindex="-1"><a class="header-anchor" href="#addentrycode" aria-hidden="true">#</a> addEntryCode</h3><p>在入口文件最后添加代码。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addEntryCode</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">console.log('works!')</span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addhtmlheadscripts" tabindex="-1"><a class="header-anchor" href="#addhtmlheadscripts" aria-hidden="true">#</a> addHTMLHeadScripts</h3><p>在 HTML 头部添加脚本。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addHTMLHeadScripts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// ...attrs</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addbeforemiddlewares" tabindex="-1"><a class="header-anchor" href="#addbeforemiddlewares" aria-hidden="true">#</a> addBeforeMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之前的中间件，返回值格式为 <code>express</code> 中间件。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addBeforeMiddlewares</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token string">'end'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="addmiddlewares" tabindex="-1"><a class="header-anchor" href="#addmiddlewares" aria-hidden="true">#</a> addMiddlewares</h3><p>添加在 <code>webpack compiler</code> 中间件之后的中间件，返回值格式为 <code>express</code> 中间件。</p><h3 id="addtmpgeneratewatcherpaths" tabindex="-1"><a class="header-anchor" href="#addtmpgeneratewatcherpaths" aria-hidden="true">#</a> addTmpGenerateWatcherPaths</h3><p>添加重新生成临时文件的监听路径。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">addTmpGenerateWatcherPaths</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string">'./app.js'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="chainwebpack" tabindex="-1"><a class="header-anchor" href="#chainwebpack" aria-hidden="true">#</a> chainWebpack</h3><p>通过 [webpack-chain] 的方式修改 webpack 配置。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">chainWebpack</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
memo<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'vue-i18n'</span><span class="token punctuation">,</span> <span class="token string">'vue-i18n/dist/vue-i18n.esm-bundler.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="copytmpfiles" tabindex="-1"><a class="header-anchor" href="#copytmpfiles" aria-hidden="true">#</a> copyTmpFiles</h3><p>批量写临时文件。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">copyTmpFiles</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
namespace<span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">ignore</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'.tpl'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>参数：</p><ul><li>namespace：复制到临时文件夹下的目标目录</li><li>path：需要复制的文件目录</li><li>ignore：需要排除的文件</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 <code>webpack</code> 的重新编译</p></div><h3 id="getport" tabindex="-1"><a class="header-anchor" href="#getport" aria-hidden="true">#</a> getPort</h3><p>获取端口号，dev 时有效。</p><h3 id="gethostname" tabindex="-1"><a class="header-anchor" href="#gethostname" aria-hidden="true">#</a> getHostname</h3><p>获取 hostname，dev 时有效。</p><h3 id="getserver" tabindex="-1"><a class="header-anchor" href="#getserver" aria-hidden="true">#</a> getServer</h3><p>获取 devServer，dev 时有效。</p><h3 id="getroutes" tabindex="-1"><a class="header-anchor" href="#getroutes" aria-hidden="true">#</a> getRoutes</h3><p>获取 <code>api.modifyRoutes</code> 修改过后的路由信息。</p><h3 id="getroutesjson" tabindex="-1"><a class="header-anchor" href="#getroutesjson" aria-hidden="true">#</a> getRoutesJSON</h3><p>获取格式化后的路由信息</p><h3 id="modifyroutes" tabindex="-1"><a class="header-anchor" href="#modifyroutes" aria-hidden="true">#</a> modifyRoutes</h3><p>修改路由。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 把BaseLayout插入到路由配置中，作为根路由</span>
|
||||
api<span class="token punctuation">.</span><span class="token function">modifyRoutes</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">routes</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token function">winPath</span><span class="token punctuation">(</span><span class="token function">join</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>paths<span class="token punctuation">.</span>absTmpPath <span class="token operator">||</span> <span class="token string">''</span><span class="token punctuation">,</span> absFilePath<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">children</span><span class="token operator">:</span> routes<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybundleconfigopts" tabindex="-1"><a class="header-anchor" href="#modifybundleconfigopts" aria-hidden="true">#</a> modifyBundleConfigOpts</h3><p>修改获取 bundleConfig 的函数参数。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfigOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
memo<span class="token punctuation">.</span>miniCSSExtractPluginPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
memo<span class="token punctuation">.</span>miniCSSExtractPluginLoaderPath <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin/dist/loader'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> memo<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybundleconfig" tabindex="-1"><a class="header-anchor" href="#modifybundleconfig" aria-hidden="true">#</a> modifyBundleConfig</h3><p>修改 bundle 配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBundleConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">bundleConfig</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// do something</span>
|
||||
<span class="token keyword">return</span> bundleConfig<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybabelopts" tabindex="-1"><a class="header-anchor" href="#modifybabelopts" aria-hidden="true">#</a> modifyBabelOpts</h3><p>修改 babel 配置项。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">babelOpts</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>babelPluginImport<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>babelPluginImport<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
babelOpts<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> config<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">return</span> babelOpts<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifybabelpresetopts" tabindex="-1"><a class="header-anchor" href="#modifybabelpresetopts" aria-hidden="true">#</a> modifyBabelPresetOpts</h3><p>修改 babel 插件的配置。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyBabelPresetOpts</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">opts</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>opts<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifypaths" tabindex="-1"><a class="header-anchor" href="#modifypaths" aria-hidden="true">#</a> modifyPaths</h3><p>修改 paths 对象。</p><h3 id="modifydefaultconfig" tabindex="-1"><a class="header-anchor" href="#modifydefaultconfig" aria-hidden="true">#</a> modifyDefaultConfig</h3><p>修改默认配置。 例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyDefaultConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>memo<span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>defaultOptions<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifyconfig" tabindex="-1"><a class="header-anchor" href="#modifyconfig" aria-hidden="true">#</a> modifyConfig</h3><p>修改最终配置。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyConfig</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">memo</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>memo<span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>defaultOptions<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="modifypublicpathstr" tabindex="-1"><a class="header-anchor" href="#modifypublicpathstr" aria-hidden="true">#</a> modifyPublicPathStr</h3><p>修改 publicPath 字符串。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">modifyPublicPathStr</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> api<span class="token punctuation">.</span>config<span class="token punctuation">.</span>publicPath <span class="token operator">||</span> <span class="token string">'/'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onpluginready" tabindex="-1"><a class="header-anchor" href="#onpluginready" aria-hidden="true">#</a> onPluginReady</h3><p>在插件初始化完成触发。在 onStart 之前，此时还没有 config 和 paths，他们尚未解析好。</p><h3 id="onstart" tabindex="-1"><a class="header-anchor" href="#onstart" aria-hidden="true">#</a> onStart</h3><p>在命令注册函数执行前触发。可以使用 config 和 paths。</p><h3 id="onexit" tabindex="-1"><a class="header-anchor" href="#onexit" aria-hidden="true">#</a> onExit</h3><p>dev 退出时触发。</p><h3 id="ongeneratefiles" tabindex="-1"><a class="header-anchor" href="#ongeneratefiles" aria-hidden="true">#</a> onGenerateFiles</h3><p>生成临时文件，触发时机在 webpack 编译之前。</p><h3 id="restartserver" tabindex="-1"><a class="header-anchor" href="#restartserver" aria-hidden="true">#</a> restartServer</h3><p>重启 devServer，dev 时有效。</p><h3 id="writetmpfile" tabindex="-1"><a class="header-anchor" href="#writetmpfile" aria-hidden="true">#</a> writeTmpFile</h3><p>写临时文件。</p><p>例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>api<span class="token punctuation">.</span><span class="token function">writeTmpFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> absoluteFilePath<span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">content</span><span class="token operator">:</span> Mustache<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'runtime/core.tpl'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token constant">REPLACE_ROLES</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>参数：</p><ul><li>path：相对于临时文件夹的路径</li><li>content：文件内容</li></ul><div class="custom-container tip"><p class="custom-container-title">提示</p><p>不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件 临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译</p></div>`,154);function _(C,S){const s=i("ExternalLinkIcon");return o(),c("div",null,[u,n("ul",null,[r,n("li",null,[d,a(" 用于声明配置的类型，基于 "),n("a",k,[a("joi"),p(s)]),a("，如果你希望用户进行配置，这个是必须的，否则用户的配置无效")]),v,m]),h,n("p",null,[a("注册命令，基于 "),n("a",g,[a("commander"),p(s)]),a(" 实现的机制。")]),b,f,n("ul",null,[y,j,x,n("li",null,[a("options，参数配置，基于 "),n("a",P,[a("commander"),p(s)]),a(" 。")])]),w])}const T=e(l,[["render",_],["__file","api.html.vue"]]);export{T as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
assets/app.d49e6235.js
Normal file
1
assets/app.d49e6235.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as c,o as p,c as i,C as u,r as d,d as l,Q as s,a5 as _,u as f,q as m,k as h,a6 as v,a7 as A,a8 as g,a9 as C,aa as y,ab as P,ac as w,ad as x,ae as E,af as R,ag as b,ah as D,ai as H,M as S}from"./chunks/framework.c1e1f082.js";import{t as T}from"./chunks/theme.4f26ce49.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=l({name:"VitePressApp",setup(){const{site:e}=f();return m(()=>{h(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),v(),A(),g(),n.setup&&n.setup(),()=>C(n.Layout)}});async function I(){const e=M(),t=L();t.provide(y,e);const a=P(e.route);return t.provide(w,a),t.component("Content",x),t.component("ClientOnly",E),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:R}),{app:t,router:e,data:a}}function L(){return b(k)}function M(){let e=s,t;return D(a=>{let o=H(a);return e&&(t=o),(e||t===o)&&(o=o.replace(/\.js$/,".lean.js")),s&&(e=!1),S(()=>import(o),[])},n.NotFound)}s&&I().then(({app:e,router:t,data:a})=>{t.go().then(()=>{_(t.route,a.site),e.mount("#app")})});export{I as createApp};
|
||||
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284"><g transform="translate(-229 -126.358)" fill="currentColor"><rect width="35" height="5" rx="2" transform="rotate(-45 296.902 -200.874)"/><rect width="35" height="5" rx="2" transform="rotate(-135 169.502 20.377)"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 291 B |
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-0cca110a","path":"/guide/builder.html","title":"支持 Vite 和 Webpack 双构建","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"使用差异","slug":"使用差异","link":"#使用差异","children":[{"level":3,"title":"配置","slug":"配置","link":"#配置","children":[]},{"level":3,"title":"静态文件处理","slug":"静态文件处理","link":"#静态文件处理","children":[]},{"level":3,"title":"html 模版","slug":"html-模版","link":"#html-模版","children":[]}]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"guide/builder.md"}');export{e as data};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as n,r as i,o as c,c as o,b as e,d as t,a as r,f as s}from"./app.136d0839.js";const l={},h=s('<h1 id="支持-vite-和-webpack-双构建" tabindex="-1"><a class="header-anchor" href="#支持-vite-和-webpack-双构建" aria-hidden="true">#</a> 支持 Vite 和 Webpack 双构建</h1><p><code>Fes.js@3.0.x</code> 版本支持 Vite 和 Webpack 两种构建方式，不再内置构建方式，需要开发者自行选择:</p><ul><li>选用 Vite 构建，安装 <code>npm i @fesjs/builder-vite</code> 依赖即可。</li><li>选用 Webpack 构建，安装 <code>npm i @fesjs/builder-webpack</code> 依赖即可。</li></ul><h2 id="使用差异" tabindex="-1"><a class="header-anchor" href="#使用差异" aria-hidden="true">#</a> 使用差异</h2><p>由于 Fes.js 在 Vite 和 Webpack 上做了一层封装，开发者关心的构建配置不会太多。从使用上来说，主要存在以下几个差异点：</p><h3 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h3><p>Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看<a href="../reference/config">配置</a>。</p><h3 id="静态文件处理" tabindex="-1"><a class="header-anchor" href="#静态文件处理" aria-hidden="true">#</a> 静态文件处理</h3>',8),d=e("code",null,"require",-1),p={href:"https://cn.vitejs.dev/guide/assets.html",target:"_blank",rel:"noopener noreferrer"},u=e("h3",{id:"html-模版",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#html-模版","aria-hidden":"true"},"#"),t(" html 模版")],-1),_={href:"https://github.com/jantimon/html-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},b={href:"https://github.com/vbenjs/vite-plugin-html",target:"_blank",rel:"noopener noreferrer"},m=e("div",{class:"custom-container tip"},[e("p",{class:"custom-container-title"},"提示"),e("p",null,[t("fes3.0+ html 模版文件从 "),e("code",null,"public/index.html"),t(" 挪到项目根目录。")])],-1);function f(k,x){const a=i("ExternalLinkIcon");return c(),o("div",null,[h,e("p",null,[t("由于 Vite 的限制，不支持 "),d,t(" 语法，具体 Vite 的用法可以查看"),e("a",p,[t("官网"),r(a)])]),u,e("p",null,[t("html 模版比较常规的需求，例如模版变量，Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求， Webpack 可以使用 "),e("a",_,[t("html-webpack-plugin"),r(a)]),t("，Vite 使用"),e("a",b,[t("vite-plugin-html"),r(a)]),t(" 进行个性化配置。")]),m])}const v=n(l,[["render",f],["__file","builder.html.vue"]]);export{v as default};
|
||||
1
assets/chunks/@localSearchIndexroot.e5e26ab0.js
Normal file
1
assets/chunks/@localSearchIndexroot.e5e26ab0.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/chunks/VPLocalSearchBox.5c431d87.js
Normal file
1
assets/chunks/VPLocalSearchBox.5c431d87.js
Normal file
File diff suppressed because one or more lines are too long
2
assets/chunks/framework.c1e1f082.js
Normal file
2
assets/chunks/framework.c1e1f082.js
Normal file
File diff suppressed because one or more lines are too long
7
assets/chunks/theme.4f26ce49.js
Normal file
7
assets/chunks/theme.4f26ce49.js
Normal file
File diff suppressed because one or more lines are too long
@ -1,46 +0,0 @@
|
||||
import{_ as r,r as t,o as p,c as o,b as a,d as e,a as s,w as c,f as i}from"./app.136d0839.js";const d={},u=a("h1",{id:"命令行接口",tabindex:"-1"},[a("a",{class:"header-anchor",href:"#命令行接口","aria-hidden":"true"},"#"),e(" 命令行接口")],-1),v={href:"https://www.npmjs.com/package/@vuepress/cli",target:"_blank",rel:"noopener noreferrer"},m={href:"https://www.npmjs.com/package/vuepress",target:"_blank",rel:"noopener noreferrer"},b=i(`<p>执行 <code>vuepress --help</code> 来获取下列帮助信息：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>Usage:
|
||||
$ vuepress <span class="token operator"><</span>command<span class="token operator">></span> <span class="token punctuation">[</span>options<span class="token punctuation">]</span>
|
||||
|
||||
Commands:
|
||||
dev <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span> Start development server
|
||||
build <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span> Build to static site
|
||||
info Display environment information
|
||||
|
||||
For <span class="token function">more</span> info, run any <span class="token builtin class-name">command</span> with the <span class="token variable"><span class="token variable">\`</span><span class="token parameter variable">--help</span><span class="token variable">\`</span></span> flag:
|
||||
$ vuepress dev <span class="token parameter variable">--help</span>
|
||||
$ vuepress build <span class="token parameter variable">--help</span>
|
||||
$ vuepress info <span class="token parameter variable">--help</span>
|
||||
|
||||
Options:
|
||||
-v, <span class="token parameter variable">--version</span> Display version number
|
||||
-h, <span class="token parameter variable">--help</span> Display this message
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dev" tabindex="-1"><a class="header-anchor" href="#dev" aria-hidden="true">#</a> dev</h2><p>启动一个开发服务器，在本地开发你的 VuePress 站点。</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>Usage:
|
||||
$ vuepress dev <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span>
|
||||
|
||||
Options:
|
||||
-c, <span class="token parameter variable">--config</span> <span class="token operator"><</span>config<span class="token operator">></span> Set path to config <span class="token function">file</span>
|
||||
-p, <span class="token parameter variable">--port</span> <span class="token operator"><</span>port<span class="token operator">></span> Use specified port <span class="token punctuation">(</span>default: <span class="token number">8000</span><span class="token punctuation">)</span>
|
||||
-t, <span class="token parameter variable">--temp</span> <span class="token operator"><</span>temp<span class="token operator">></span> Set the directory of the temporary files
|
||||
<span class="token parameter variable">--host</span> <span class="token operator"><</span>host<span class="token operator">></span> Use specified <span class="token function">host</span> <span class="token punctuation">(</span>default: <span class="token number">0.0</span>.0.0<span class="token punctuation">)</span>
|
||||
<span class="token parameter variable">--cache</span> <span class="token operator"><</span>cache<span class="token operator">></span> Set the directory of the cache files
|
||||
--clean-temp Clean the temporary files before dev
|
||||
--clean-cache Clean the cache files before dev
|
||||
<span class="token parameter variable">--open</span> Open browser when ready
|
||||
<span class="token parameter variable">--debug</span> Enable debug mode
|
||||
--no-watch Disable watching page and config files <span class="token punctuation">(</span>default: <span class="token boolean">true</span><span class="token punctuation">)</span>
|
||||
-v, <span class="token parameter variable">--version</span> Display version number
|
||||
-h, <span class="token parameter variable">--help</span> Display this message
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>通过命令行设置的配置项，会覆盖你配置文件中的同名配置项。</p></div><h2 id="build" tabindex="-1"><a class="header-anchor" href="#build" aria-hidden="true">#</a> build</h2>`,7),h=i(`<div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>Usage:
|
||||
$ vuepress build <span class="token punctuation">[</span>sourceDir<span class="token punctuation">]</span>
|
||||
|
||||
Options:
|
||||
-c, <span class="token parameter variable">--config</span> <span class="token operator"><</span>config<span class="token operator">></span> Set path to config <span class="token function">file</span>
|
||||
-d, <span class="token parameter variable">--dest</span> <span class="token operator"><</span>dest<span class="token operator">></span> Set the directory build output <span class="token punctuation">(</span>default: .vuepress/dist<span class="token punctuation">)</span>
|
||||
-t, <span class="token parameter variable">--temp</span> <span class="token operator"><</span>temp<span class="token operator">></span> Set the directory of the temporary files
|
||||
<span class="token parameter variable">--cache</span> <span class="token operator"><</span>cache<span class="token operator">></span> Set the directory of the cache files
|
||||
--clean-temp Clean the temporary files before build
|
||||
--clean-cache Clean the cache files before build
|
||||
<span class="token parameter variable">--debug</span> Enable debug mode
|
||||
-v, <span class="token parameter variable">--version</span> Display version number
|
||||
-h, <span class="token parameter variable">--help</span> Display this message
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>通过命令行设置的配置项，会覆盖你配置文件中的同名配置项。</p></div><h2 id="info" tabindex="-1"><a class="header-anchor" href="#info" aria-hidden="true">#</a> info</h2><p>输出当前系统和依赖相关的信息。</p><p>在你想要检查你的环境，或者提交 Issue 时候，可以使用该命令。</p>`,5);function k(f,g){const n=t("ExternalLinkIcon"),l=t("RouterLink");return p(),o("div",null,[u,a("p",null,[e("VuePress 命令行接口是由 "),a("a",v,[e("@vuepress/cli"),s(n)]),e(" 包提供的。它是 "),a("a",m,[e("vuepress"),s(n)]),e(" 包的依赖之一，当然你也可以单独安装它。")]),b,a("p",null,[e("将你的 VuePress 站点构建成静态文件，以便你进行后续"),s(l,{to:"/guide/deployment.html"},{default:c(()=>[e("部署")]),_:1}),e("。")]),h])}const y=r(d,[["render",k],["__file","cli.html.vue"]]);export{y as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-a951be94","path":"/reference/cli.html","title":"命令行接口","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"dev","slug":"dev","link":"#dev","children":[]},{"level":2,"title":"build","slug":"build","link":"#build","children":[]},{"level":2,"title":"info","slug":"info","link":"#info","children":[]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/cli.md"}');export{e as data};
|
||||
@ -1,59 +0,0 @@
|
||||
import{_ as n,o as s,c as a,f as e}from"./app.136d0839.js";const p={},t=e(`<h1 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h1><p>Fes.js 约定 <code>.fes.js</code> 文件为项目编译需要编译时配置文件，可以引入 <code>node</code> 端依赖项，不要引入浏览器端依赖项。</p><p>一份常见的配置示例如下（更多配置项请查阅<a href="../reference/config">配置</a>)：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> defineBuildConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineBuildConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">publicPath</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">prefix</span><span class="token operator">:</span> <span class="token string">'/v2'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">proxy</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string-property property">'/v2'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">target</span><span class="token operator">:</span> <span class="token string">'https://api.douban.com/'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">changeOrigin</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">layout</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Fes.js'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">footer</span><span class="token operator">:</span> <span class="token string">'Created by MumbelFe'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">multiTabs</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">menus</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'onepiece'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'store'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'simpleList'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="本地临时配置文件" tabindex="-1"><a class="header-anchor" href="#本地临时配置文件" aria-hidden="true">#</a> 本地临时配置文件</h2><p>可以新建 <code>.fes.local.js</code> 作为本地临时配置文件。这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配置。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// .fes.local.js</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8000</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>最终的配置是：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8000</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container warning"><p class="custom-container-title">注意</p><p><code>.fes.local.js</code> 是本地验证使用的临时配置，仅在 <code>fes dev</code> 时有效，请将其添加到 <code>.gitignore</code>，不要提交到 <code>git</code> 仓库中。</p></div><h2 id="多环境多份配置" tabindex="-1"><a class="header-anchor" href="#多环境多份配置" aria-hidden="true">#</a> 多环境多份配置</h2><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境，来指定当前环境的配置文件，这份配置会和 <code>.fes.js</code> 做 <code>deep merge</code> 后形成最终配。</p><p>比如配置如下：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// .fes.js</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// .fes.uat.js</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8000</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当我们运行：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">FES_ENV</span><span class="token operator">=</span>uat fes dev
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>这时候会命中 <code>.fes.uat.js</code> 这份环境配置，最终配置是：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">mock</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token number">8000</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="优先级" tabindex="-1"><a class="header-anchor" href="#优先级" aria-hidden="true">#</a> 优先级</h2><p>本地临时配置 > 环境配置 > 基础配置</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果多份配置中存在相同的配置项，<strong>则优先级高的会覆盖优先级低的</strong>。</p></div>`,21),o=[t];function l(c,r){return s(),a("div",null,o)}const u=n(p,[["render",l],["__file","config.html.vue"]]);export{u as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-85fa9b2a","path":"/guide/config.html","title":"编译时配置","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"本地临时配置文件","slug":"本地临时配置文件","link":"#本地临时配置文件","children":[]},{"level":2,"title":"多环境多份配置","slug":"多环境多份配置","link":"#多环境多份配置","children":[]},{"level":2,"title":"优先级","slug":"优先级","link":"#优先级","children":[]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"guide/config.md"}');export{e as data};
|
||||
@ -1,8 +0,0 @@
|
||||
import{_ as d,r as t,o as i,c as r,b as e,d as a,a as n,f as o}from"./app.136d0839.js";const c={},l=e("h1",{id:"贡献指南",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#贡献指南","aria-hidden":"true"},"#"),a(" 贡献指南")],-1),p=e("h2",{id:"包概览",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#包概览","aria-hidden":"true"},"#"),a(" 包概览")],-1),h={href:"https://pnpm.io/pnpm-workspace_yaml",target:"_blank",rel:"noopener noreferrer"},u={href:"https://en.wikipedia.org/wiki/Monorepo",target:"_blank",rel:"noopener noreferrer"},m=e("code",null,"packages",-1),f=o('<ul><li><p><code>@fesjs/create-fes-app</code>: 创建项目模板模块。提供<code>create-fes-app</code>命令，提供创建多种类型项目模板的能力。</p></li><li><p><code>@fesjs/compiler</code>: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。</p></li><li><p><code>@fesjs/runtime</code>: 运行时插件模块。集成了 vue-router，定义运行时插件生命周期、插件通讯机制。</p></li><li><p><code>@fesjs/preset-build-in</code>: 内置插件集。包含<code>dev</code>、<code>build</code>等命令，集成 webpack5+babel，提供方便编写插件的 API，入口文件处理，路由处理等能力。</p></li><li><p><code>@fesjs/fes-template</code>: 适用于 PC 类型的模板项目。</p></li><li><p><code>@fesjs/fes-template-h5</code>: 适用于 H5 类型的模板项目。</p></li><li><p><code>@fesjs/plugin-${name}</code>: 官方插件。</p></li><li><p><code>@fesjs/fes</code>: 入口模块。提供<code>fes</code>命令和 API 入口，封装<code>@fesjs/compiler</code> + <code>@fesjs/runtime</code> + <code>@fesjs/preset-build-in</code>，用户只需要安装此依赖和其他插件。</p></li></ul><h2 id="开发准备" tabindex="-1"><a class="header-anchor" href="#开发准备" aria-hidden="true">#</a> 开发准备</h2><p>开发要求：</p>',3),b={href:"http://nodejs.org",target:"_blank",rel:"noopener noreferrer"},v={href:"https://pnpm.io/",target:"_blank",rel:"noopener noreferrer"},g=e("p",null,"本项目开发使用的一些主要工具：",-1),_={href:"https://jestjs.io/",target:"_blank",rel:"noopener noreferrer"},k={href:"https://eslint.org/",target:"_blank",rel:"noopener noreferrer"},x={href:"https://prettier.io/",target:"_blank",rel:"noopener noreferrer"},j=o(`<p>克隆仓库：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">git</span> clone https://github.com/WeBankFinTech/fes.js.git
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>进入<code>fes.js</code>目录，安装依赖：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> i
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="贡献文档" tabindex="-1"><a class="header-anchor" href="#贡献文档" aria-hidden="true">#</a> 贡献文档</h2>`,5),w=e("code",null,"docs",-1),q={href:"https://v2.vuepress.vuejs.org/zh/",target:"_blank",rel:"noopener noreferrer"},P=o(`<h4 id="第一步-启动服务" tabindex="-1"><a class="header-anchor" href="#第一步-启动服务" aria-hidden="true">#</a> 第一步：启动服务</h4><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> docs:dev
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="第二步-修改-md-文件" tabindex="-1"><a class="header-anchor" href="#第二步-修改-md-文件" aria-hidden="true">#</a> 第二步：修改 md 文件</h4><p>菜单配置在<code>/docs/.vuepress/configs/sidebar/zh.ts</code>中，可以通过此配置找到对应想修改的文档。</p><p>如果想添加图片，则可以先把图片添加至<code>/docs/.vuepress/public</code>，在代码中使用：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>$withBase('framework.png')<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>架构<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h4 id="第三步-查看更新" tabindex="-1"><a class="header-anchor" href="#第三步-查看更新" aria-hidden="true">#</a> 第三步：查看更新</h4><p>当 md 文档保存后，文档会自动更新，在<code>http://localhost:8080/</code>查看。</p><h2 id="贡献源码" tabindex="-1"><a class="header-anchor" href="#贡献源码" aria-hidden="true">#</a> 贡献源码</h2><p><code>Fes.js</code>统一使用<code>ES Module</code>规范编写源码，代码会在 node 端和浏览器端执行，所以源码需要编译后才能发布成包，再被执行。</p><h4 id="启动编译服务" tabindex="-1"><a class="header-anchor" href="#启动编译服务" aria-hidden="true">#</a> 启动编译服务</h4><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> dev
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>当我们修改<code>build.config.js</code>中配置的包代码时，会把<code>src</code>目录的源码编译后到<code>lib</code>目录。</p><h4 id="修改源码" tabindex="-1"><a class="header-anchor" href="#修改源码" aria-hidden="true">#</a> 修改源码</h4><p>在了解<code>Fes.js</code>设计前提下，修改核心代码或者插件代码。</p><h4 id="验证修改内容" tabindex="-1"><a class="header-anchor" href="#验证修改内容" aria-hidden="true">#</a> 验证修改内容</h4><p>根据需求选择模板项目来验证修改内容，比如选择<code>fes-template</code>：</p><ol><li>查看需待验证包是否已经添加到模板项目的依赖中，如果没有则在模板项目的 package.json 中添加包依赖，添加后在根目录执行<code>pnpm</code>关联依赖</li><li>启动模板项目的开发服务</li></ol><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> packages/fes-template
|
||||
<span class="token function">pnpm</span> dev
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><ol start="3"><li>在项目模板中添加代码验证修改内容</li><li>打开<code>localhost:8000</code>查看结果</li></ol><h4 id="快速调试技巧" tabindex="-1"><a class="header-anchor" href="#快速调试技巧" aria-hidden="true">#</a> 快速调试技巧</h4><p>每次修改插件或者核心代码后，等待自动编译完，需要在模板目录重新执行<code>fes dev</code>，比较费时费力。</p><p>可以先在模板的 <code>.fes</code> 目录中找到对应临时代码，更改逻辑，验证完后再将变更逻辑保存到正式文件中。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>直接修改临时文件切莫重新执行<code>fes dev</code>，修改会被覆盖。</p></div><h2 id="提交-pr" tabindex="-1"><a class="header-anchor" href="#提交-pr" aria-hidden="true">#</a> 提交 PR</h2><ol><li>fork 项目!</li><li>创建你的功能分支: git checkout -b my-new-feature</li><li>本地提交新代码: git commit -am 'Add some feature'</li><li>推送本地到服务器分支: git push origin my-new-feature</li><li>创建一个 PR</li></ol>`,26);function B(E,N){const s=t("ExternalLinkIcon");return i(),r("div",null,[l,p,e("p",null,[a("项目仓库借助于 "),e("a",h,[a("pnpm 工作区"),n(s)]),a(" 来实现 "),e("a",u,[a(" Monorepo"),n(s)]),a(" ，在 "),m,a(" 目录下存放多个互相关联的独立包。")]),f,e("ul",null,[e("li",null,[e("a",b,[a("Node.js v14+"),n(s)])]),e("li",null,[e("a",v,[a("pnpm v8"),n(s)])])]),g,e("ul",null,[e("li",null,[e("a",_,[a("Jest"),n(s)]),a(" 用于单元测试")]),e("li",null,[e("a",k,[a("ESLint"),n(s)]),a(" + "),e("a",x,[a("Prettier"),n(s)]),a(" 用于代码检查和格式化")])]),j,e("p",null,[a("文档代码在"),w,a("目录，基于 "),e("a",q,[a("vuepress"),n(s)]),a(" 实现。")]),P])}const V=d(c,[["render",B],["__file","contributing.html.vue"]]);export{V as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-d7fa887a","path":"/guide/contributing.html","title":"贡献指南","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"包概览","slug":"包概览","link":"#包概览","children":[]},{"level":2,"title":"开发准备","slug":"开发准备","link":"#开发准备","children":[]},{"level":2,"title":"贡献文档","slug":"贡献文档","link":"#贡献文档","children":[]},{"level":2,"title":"贡献源码","slug":"贡献源码","link":"#贡献源码","children":[]},{"level":2,"title":"提交 PR","slug":"提交-pr","link":"#提交-pr","children":[]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"guide/contributing.md"}');export{e as data};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-884fd4bc","path":"/guide/css.html","title":"使用 css","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"全局样式","slug":"全局样式","link":"#全局样式","children":[]},{"level":2,"title":"组件内样式","slug":"组件内样式","link":"#组件内样式","children":[]},{"level":2,"title":"引入第三方样式","slug":"引入第三方样式","link":"#引入第三方样式","children":[]},{"level":2,"title":"CSS Modules","slug":"css-modules","link":"#css-modules","children":[]},{"level":2,"title":"CSS 预处理器","slug":"css-预处理器","link":"#css-预处理器","children":[]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"guide/css.md"}');export{e as data};
|
||||
@ -1,17 +0,0 @@
|
||||
import{_ as t,r as c,o,c as d,b as a,d as s,a as i,f as n}from"./app.136d0839.js";const l={},p=n(`<h1 id="使用-css" tabindex="-1"><a class="header-anchor" href="#使用-css" aria-hidden="true">#</a> 使用 css</h1><div class="custom-container tip"><p class="custom-container-title">提示</p><p>本文档以 css 为示例，把后缀换成 <code>.less</code> 同样适用。</p></div><h2 id="全局样式" tabindex="-1"><a class="header-anchor" href="#全局样式" aria-hidden="true">#</a> 全局样式</h2><p>Fes.js 中约定 <code>src/global.css</code> 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。</p><p>比如用于覆盖样式，</p><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.layout-content</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="组件内样式" tabindex="-1"><a class="header-anchor" href="#组件内样式" aria-hidden="true">#</a> 组件内样式</h2><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||||
<span class="token selector">.layout-content</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="引入第三方样式" tabindex="-1"><a class="header-anchor" href="#引入第三方样式" aria-hidden="true">#</a> 引入第三方样式</h2><p>可以直接通过 <code>import</code> 引入第三方组件，当然最好在入口文件<code>app.js</code>中引入</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// src/app.js</span>
|
||||
<span class="token keyword">import</span> <span class="token string">'bootstrap/dist/css/bootstrap.css'</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="css-modules" tabindex="-1"><a class="header-anchor" href="#css-modules" aria-hidden="true">#</a> CSS Modules</h2>`,12),r=a("code",null,"Vue",-1),u={href:"https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95",target:"_blank",rel:"noopener noreferrer"},v=n(`<div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">module</span><span class="token punctuation">></span></span>
|
||||
.layout-content {
|
||||
max-width: 1000px;
|
||||
}
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果想直接引入CSS文件的话，则CSS文件名需要包含<code>.module</code>，比如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> style <span class="token keyword">from</span> <span class="token string">'@/styles/index.module.css'</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>style<span class="token punctuation">)</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="css-预处理器" tabindex="-1"><a class="header-anchor" href="#css-预处理器" aria-hidden="true">#</a> CSS 预处理器</h2><p>Fes.js 内置支持 <code>less</code>，不支持 <code>sass</code> 和 <code>stylus</code>，但如果有需求，可以通过 <code>chainWebpack</code> 配置或者 <code>fes-plugin</code> 插件的形式支持。</p>`,5);function m(h,k){const e=c("ExternalLinkIcon");return o(),d("div",null,[p,a("p",null,[s("支持 "),r,s(" 的 "),a("a",u,[s("CSS Modules"),i(e)]),s(" 用法，可以直接使用：")]),v])}const b=t(l,[["render",m],["__file","css.html.vue"]]);export{b as default};
|
||||
@ -1,70 +0,0 @@
|
||||
import{_ as e,r as t,o,c as p,b as n,d as s,a as c,w as i,f as u}from"./app.136d0839.js";const l={},r=n("h1",{id:"目录结构",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#目录结构","aria-hidden":"true"},"#"),s(" 目录结构")],-1),d=n("code",null,"约定优于配置",-1),k=u(`<div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>fes-template
|
||||
├── package.json
|
||||
├── tsconfig.json
|
||||
├── mock.js
|
||||
├── .fes.js
|
||||
├── .env
|
||||
├── index.html
|
||||
├── dist
|
||||
├── public
|
||||
│ └── logo.png
|
||||
└── src
|
||||
├── .fes
|
||||
└── pages
|
||||
│ └── index.vue
|
||||
└── app.js
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="package-json" tabindex="-1"><a class="header-anchor" href="#package-json" aria-hidden="true">#</a> package.json</h3><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
|
||||
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"@fesjs/template"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"2.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"fes项目模版"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"fes build"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"prod"</span><span class="token operator">:</span> <span class="token string">"FES_ENV=prod fes build"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"analyze"</span><span class="token operator">:</span> <span class="token string">"ANALYZE=1 fes build"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"dev"</span><span class="token operator">:</span> <span class="token string">"fes dev"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"fes test"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"keywords"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"管理端"</span><span class="token punctuation">,</span> <span class="token string">"fes"</span><span class="token punctuation">,</span> <span class="token string">"fast"</span><span class="token punctuation">,</span> <span class="token string">"easy"</span><span class="token punctuation">,</span> <span class="token string">"strong"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"files"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">".eslintrc.js"</span><span class="token punctuation">,</span> <span class="token string">".gitignore"</span><span class="token punctuation">,</span> <span class="token string">".fes.js"</span><span class="token punctuation">,</span> <span class="token string">".fes.prod.js"</span><span class="token punctuation">,</span> <span class="token string">"mock.js"</span><span class="token punctuation">,</span> <span class="token string">"package.json"</span><span class="token punctuation">,</span> <span class="token string">"README.md"</span><span class="token punctuation">,</span> <span class="token string">"tsconfig.json"</span><span class="token punctuation">,</span> <span class="token string">"/src"</span><span class="token punctuation">,</span> <span class="token string">"/config"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"repository"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"git"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"git+https://github.com/WeBankFinTech/fes.js.git"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"directory"</span><span class="token operator">:</span> <span class="token string">"packages/fes-template"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"author"</span><span class="token operator">:</span> <span class="token string">"harrywan"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"MIT"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"bugs"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://github.com/WeBankFinTech/fes.js/issues"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"homepage"</span><span class="token operator">:</span> <span class="token string">"https://github.com/WeBankFinTech/fes.js#readme"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"publishConfig"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"access"</span><span class="token operator">:</span> <span class="token string">"public"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"@webank/eslint-config-webank"</span><span class="token operator">:</span> <span class="token string">"1.2.1"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/builder-webpack"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-access"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-layout"</span><span class="token operator">:</span> <span class="token string">"^5.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-model"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-enums"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-jest"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-vuex"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-request"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-qiankun"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-sass"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-monaco-editor"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-windicss"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/fes-design"</span><span class="token operator">:</span> <span class="token string">"^0.7.23"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"vue"</span><span class="token operator">:</span> <span class="token string">"^3.2.47"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"vuex"</span><span class="token operator">:</span> <span class="token string">"^4.0.0"</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"private"</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>其中<code>@fesjs/fes</code>是 Fes.js 核心依赖，另外以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被自动注册为插件或插件集。<code>@fesjs/builder-</code> 开头的会被注册为构建器。</p><h3 id="tsconfig-json" tabindex="-1"><a class="header-anchor" href="#tsconfig-json" aria-hidden="true">#</a> tsconfig.json</h3><p>解决 <code>@fesjs/fes</code> 和使用 <code>@</code> 的 API 提示</p><h3 id="fes-js" tabindex="-1"><a class="header-anchor" href="#fes-js" aria-hidden="true">#</a> .fes.js</h3><p>配置文件，包含 Fes.js 内置功能和安装的其他插件配置。</p><h3 id="mock-js" tabindex="-1"><a class="header-anchor" href="#mock-js" aria-hidden="true">#</a> mock.js</h3><p><code>mock</code> 数据的配置文件。</p><h3 id="env" tabindex="-1"><a class="header-anchor" href="#env" aria-hidden="true">#</a> .env</h3><p>定义环境变量。</p><p>比如 <code>.env</code> 文件内容如下：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>PORT=8888
|
||||
FES_ENV=prod
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>等同于 node 端运行时，设置如下：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>p<wbr>rocess.env.PORT = '8888';
|
||||
p<wbr>rocess.env.FES_ENV = 'prod';
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dist-目录" tabindex="-1"><a class="header-anchor" href="#dist-目录" aria-hidden="true">#</a> dist 目录</h3><p>执行 <code>fes build</code> 后，产物默认会存放在这里。</p><h3 id="public-目录" tabindex="-1"><a class="header-anchor" href="#public-目录" aria-hidden="true">#</a> public 目录</h3><p>此目录下所有文件为静态资源，会被复制到输出路径。</p><h3 id="index-html" tabindex="-1"><a class="header-anchor" href="#index-html" aria-hidden="true">#</a> index.html</h3><p>默认的 <code>html</code> 模板文件，如果删除此 <code>html</code> 则会使用内置的 <code>html</code> 模板文件。</p><h3 id="src-目录" tabindex="-1"><a class="header-anchor" href="#src-目录" aria-hidden="true">#</a> src 目录</h3><h3 id="fes-目录" tabindex="-1"><a class="header-anchor" href="#fes-目录" aria-hidden="true">#</a> .fes 目录</h3><p>临时文件目录，比如入口文件、路由等，都会被临时生成到这里。</p><div class="custom-container warning"><p class="custom-container-title">注意</p><p>不要提交 <code>.fes</code> 目录到 <code>git</code> 仓库，他们会在 <code>fes dev</code> 和 <code>fes build</code> 时被删除并重新生成。</p></div><h3 id="pages-目录" tabindex="-1"><a class="header-anchor" href="#pages-目录" aria-hidden="true">#</a> pages 目录</h3><p>所有路由组件文件存放在这里。</p><h3 id="app-js" tabindex="-1"><a class="header-anchor" href="#app-js" aria-hidden="true">#</a> app.js</h3><p>运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。</p>`,30);function q(v,m){const a=t("RouterLink");return o(),p("div",null,[r,n("p",null,[s("在"),c(a,{to:"/guide/getting-started.html"},{default:i(()=>[s("快速上手")]),_:1}),s("中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 "),d,s(" 的原则，一个基础的 Fes.js 项目大致是这样的：")]),k])}const g=e(l,[["render",q],["__file","directory-structure.html.vue"]]);export{g as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-040800dc","path":"/guide/directory-structure.html","title":"目录结构","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":3,"title":"package.json","slug":"package-json","link":"#package-json","children":[]},{"level":3,"title":"tsconfig.json","slug":"tsconfig-json","link":"#tsconfig-json","children":[]},{"level":3,"title":".fes.js","slug":"fes-js","link":"#fes-js","children":[]},{"level":3,"title":"mock.js","slug":"mock-js","link":"#mock-js","children":[]},{"level":3,"title":".env","slug":"env","link":"#env","children":[]},{"level":3,"title":"dist 目录","slug":"dist-目录","link":"#dist-目录","children":[]},{"level":3,"title":"public 目录","slug":"public-目录","link":"#public-目录","children":[]},{"level":3,"title":"index.html","slug":"index-html","link":"#index-html","children":[]},{"level":3,"title":"src 目录","slug":"src-目录","link":"#src-目录","children":[]},{"level":3,"title":".fes 目录","slug":"fes-目录","link":"#fes-目录","children":[]},{"level":3,"title":"pages 目录","slug":"pages-目录","link":"#pages-目录","children":[]},{"level":3,"title":"app.js","slug":"app-js","link":"#app-js","children":[]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"guide/directory-structure.md"}');export{e as data};
|
||||
@ -1,46 +0,0 @@
|
||||
import{_ as o,r as p,o as c,c as l,b as s,d as n,a as t,f as e}from"./app.136d0839.js";const i={},r=s("h1",{id:"fesjs-plugin-monaco-editor",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#fesjs-plugin-monaco-editor","aria-hidden":"true"},"#"),n(" @fesjs/plugin-monaco-editor")],-1),d=s("h2",{id:"介绍",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),n(" 介绍")],-1),u=s("code",null,"json",-1),k=s("code",null,"javascript",-1),h=s("code",null,"python",-1),v={href:"https://github.com/Microsoft/monaco-editor",target:"_blank",rel:"noopener noreferrer"},m=s("code",null,"Monaco Editor",-1),g=s("code",null,"Monaco Editor",-1),b=s("code",null,"1.9.1",-1),f=e(`<h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
|
||||
<span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-monaco-editor"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="编译时配置" tabindex="-1"><a class="header-anchor" href="#编译时配置" aria-hidden="true">#</a> 编译时配置</h2><p>在执行 <code>fes dev</code> 或者 <code>fes build</code> 时，通过此配置生成运行时的代码，在配置文件<code>.fes.js</code> 中配置：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'typescript'</span><span class="token punctuation">,</span> <span class="token string">'html'</span><span class="token punctuation">,</span> <span class="token string">'json'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,6),y=s("code",null,"monaco-editor-webpack-plugin",-1),_=s("code",null,"Monaco Editor",-1),j=s("code",null,"ESM",-1),x=s("code",null,"monaco-editor-webpack-plugin",-1),q={href:"https://github.com/Microsoft/monaco-editor-webpack-plugin",target:"_blank",rel:"noopener noreferrer"},w=e(`<h3 id="filename" tabindex="-1"><a class="header-anchor" href="#filename" aria-hidden="true">#</a> filename</h3><ul><li><strong>类型</strong>：自定义 worker 脚本名称</li><li><strong>默认值</strong>：<code>'[name].worker.js'</code></li></ul><h3 id="publicpath" tabindex="-1"><a class="header-anchor" href="#publicpath" aria-hidden="true">#</a> publicPath</h3><ul><li><strong>类型</strong>：自定义 worker 脚本的路径</li><li><strong>默认值</strong>：<code>''</code></li></ul><h3 id="languages" tabindex="-1"><a class="header-anchor" href="#languages" aria-hidden="true">#</a> languages</h3><ul><li><p><strong>类型</strong>：需要支持的语言类型</p></li><li><p><strong>默认值</strong>：<code>['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']</code></p></li><li><p><strong>详情</strong>：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如<code>javascript</code>依赖<code>typescript</code>，需要使用<code>javascript</code>时需要配置为：</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">monacoEditor</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">languages</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'javascript'</span><span class="token punctuation">,</span> <span class="token string">'typescript'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="monaco" tabindex="-1"><a class="header-anchor" href="#monaco" aria-hidden="true">#</a> monaco</h3>`,9),E={href:"https://microsoft.github.io/monaco-editor/",target:"_blank",rel:"noopener noreferrer"},M=e(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> monaco <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
|
||||
monaco<span class="token punctuation">.</span>editor<span class="token punctuation">.</span><span class="token function">defineTheme</span><span class="token punctuation">(</span><span class="token string">'myCoolTheme'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">'vs'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">inherit</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-info'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'808080'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-error'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'ff0000'</span><span class="token punctuation">,</span> <span class="token literal-property property">fontStyle</span><span class="token operator">:</span> <span class="token string">'bold'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-notice'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'FFA500'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> <span class="token literal-property property">token</span><span class="token operator">:</span> <span class="token string">'custom-date'</span><span class="token punctuation">,</span> <span class="token literal-property property">foreground</span><span class="token operator">:</span> <span class="token string">'008800'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="组件-monacoeditor" tabindex="-1"><a class="header-anchor" href="#组件-monacoeditor" aria-hidden="true">#</a> 组件 MonacoEditor</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MonacoEditor</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span> <span class="token attr-name">language</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>json<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>400px<span class="token punctuation">"</span></span> <span class="token attr-name">check</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MonacoEditor</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> MonacoEditor <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
MonacoEditor<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> json <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
json<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> props</h4><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>theme</td><td>编辑器的主题，使用其他主题需要先使用<code>monaco.editor.defineTheme</code>定义主题</td><td>string</td><td><code>defaultTheme</code></td></tr><tr><td>language</td><td>编辑器的语言</td><td>string</td><td>-</td></tr><tr><td>height</td><td>编辑器的高度</td><td>string</td><td><code>100%</code></td></tr><tr><td>width</td><td>编辑器的宽度</td><td>string</td><td><code>100%</code></td></tr><tr><td>modelValue(v-model)</td><td>编辑器的代码</td><td>string</td><td>-</td></tr><tr><td>readOnly</td><td>是否只读</td><td>boolean</td><td><code>false</code></td></tr><tr><td>options</td><td>编辑器的配置对象</td><td>object</td><td><code>{}</code></td></tr><tr><td>check</td><td>是否检查代码，如果检查不通过则不更新数据，目前只支持<code>json</code></td><td>boolean</td><td><code>false</code></td></tr></tbody></table><h4 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> events</h4><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>onload</td><td>编辑器初始化后触发</td><td>({monaco, editor, editorModel}) => void</td></tr><tr><td>scrollChange</td><td>滚动时触发</td><td>(e) => void</td></tr></tbody></table>`,7);function T(V,I){const a=p("ExternalLinkIcon");return c(),l("div",null,[r,d,s("p",null,[n("我们会遇到需要编辑代码的场景，比如编辑"),u,n("、"),k,n("、"),h,n("等等，"),s("a",v,[n("Monaco Editor"),t(a)]),n(" 是 \b 一个好用而且强大的的代码编辑器库，引入"),m,n("有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 "),g,n(" 版本是 "),b,n("。")]),f,s("p",null,[n("我们通过 "),y,n(" 集成 "),_,n(" 的 "),j,n("版本，所以编辑时其实就是 "),x,n(" 的配置，具体配置项参考"),s("a",q,[n("文档"),t(a)]),n("。")]),w,s("p",null,[n("编辑器的全局对象，提供扩展语言，自定义主题等等 API，具体用法请查看"),s("a",E,[n("monaco"),t(a)]),n("官方文档。")]),M])}const A=o(i,[["render",T],["__file","editor.html.vue"]]);export{A as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-323bda7e","path":"/reference/plugin/plugins/editor.html","title":"@fesjs/plugin-monaco-editor","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"编译时配置","slug":"编译时配置","link":"#编译时配置","children":[{"level":3,"title":"filename","slug":"filename","link":"#filename","children":[]},{"level":3,"title":"publicPath","slug":"publicpath","link":"#publicpath","children":[]},{"level":3,"title":"languages","slug":"languages","link":"#languages","children":[]}]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"monaco","slug":"monaco","link":"#monaco","children":[]},{"level":3,"title":"组件 MonacoEditor","slug":"组件-monacoeditor","link":"#组件-monacoeditor","children":[]}]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/editor.md"}');export{e as data};
|
||||
@ -1,130 +0,0 @@
|
||||
import{_ as n,o as s,c as a,f as t}from"./app.136d0839.js";const p={},e=t(`<h1 id="fesjs-plugin-enums" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-enums" aria-hidden="true">#</a> @fesjs/plugin-enums</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>日常业务开发中，有很多场景会使用到枚举值，比如 select-options、table-column。</p><p>该插件提供统一的枚举存取及丰富的函数来处理枚举。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
|
||||
<span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-enums"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置" aria-hidden="true">#</a> 配置</h2><h3 id="静态配置" tabindex="-1"><a class="header-anchor" href="#静态配置" aria-hidden="true">#</a> 静态配置</h3><p>在 <code>.fes.js</code> 中配置：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 配置格式：[[key, value], ...]</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">enums</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">status</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'无效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'有效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="动态配置" tabindex="-1"><a class="header-anchor" href="#动态配置" aria-hidden="true">#</a> 动态配置</h3><p>在业务代码中</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> enums <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 动态添加</span>
|
||||
enums<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'0'</span><span class="token punctuation">,</span> <span class="token string">'无效的'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'有效的'</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
|
||||
enums<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span> <span class="token comment">// 有效的</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="场景使用" tabindex="-1"><a class="header-anchor" href="#场景使用" aria-hidden="true">#</a> 场景使用</h2><ul><li><p>动态添加的枚举项支持数组和对象</p></li><li><p>枚举项为对象时，可以指定 keyName 和 valueName 属性名</p></li><li><p>导出枚举值，可指定取值的路径</p></li><li><p>导出枚举可扩展属性</p></li></ul><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 遍历枚举status --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in enumsGet('status')<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ item.value }}：{{ item.key }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 遍历枚举扩展后的roles --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item in roles<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item.key<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ item.name }}：{{ item.disabled }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token comment"><!-- 获取枚举roles为2的英文名 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>{{ enumsGet('roles', '2', { dir: 'eName' }) }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> enums <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 动态添加枚举，枚举项是对象，并指定key的属性名为id</span>
|
||||
enums<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
|
||||
<span class="token string">'roles'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'系统管理员'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'System'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">,</span> <span class="token string">'3'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'业务管理员'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'Business'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'3'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">cName</span><span class="token operator">:</span> <span class="token string">'普通用户'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">eName</span><span class="token operator">:</span> <span class="token string">'User'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">perm</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span> <span class="token literal-property property">keyName</span><span class="token operator">:</span> <span class="token string">'id'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 导出定制格式的roles，扩展枚举项新的属性name、disabled</span>
|
||||
<span class="token keyword">const</span> roles <span class="token operator">=</span> enums<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'roles'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'cName'</span><span class="token punctuation">,</span> <span class="token comment">// 指定取值路径，取属性cName的值</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 传入函数，获取结果值</span>
|
||||
<span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>value<span class="token punctuation">.</span>perm<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token operator">=></span> i <span class="token operator">>=</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">enumsGet</span><span class="token operator">:</span> enums<span class="token punctuation">.</span>get<span class="token punctuation">,</span>
|
||||
roles<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="get" tabindex="-1"><a class="header-anchor" href="#get" aria-hidden="true">#</a> get</h3><ul><li><p><code>get(name: string)</code> 获取指定名字的枚举</p></li><li><p><code>get(name: string, key: string)</code> 获取指定名字及键枚举默认值</p></li><li><p><code>get(name: string, opt: {extend: Array<Object>})</code> 获取指定名字的自定义格式枚举，<a href="#extend%E9%85%8D%E7%BD%AE">查看 extend 配置</a></p></li><li><p><code>get(name: string, key: string, opt: {dir: string})</code> 获取指定名字及键枚举<a href="#dir%E8%A7%84%E5%88%99">dir 规则</a>的值</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="push" tabindex="-1"><a class="header-anchor" href="#push" aria-hidden="true">#</a> push</h3><p>动态添加枚举，重复添加会覆盖</p><ul><li><code>push(name: string, _enum: Array<Array>)</code></li><li><code>push(name: string, _enum: Array<Object>, opt?: Object)</code><ul><li>opt.keyName 指定 key 的取值属性，默认是 key</li><li>opt.valueName 指定 value 的取值属性</li></ul></li></ul><p>枚举项为数组，枚举项的[0]解析为 key，枚举项的[1]解析为 value</p><p>枚举项为对象时，根据 opt 配置 keyName、valueName 取枚举项属性值分别作为 key 和 value，<code>如果valueName未设置则value就是枚举项</code></p><h3 id="remove" tabindex="-1"><a class="header-anchor" href="#remove" aria-hidden="true">#</a> remove</h3><ul><li>remove(name: string)</li></ul><p>移除指定的枚举</p><h3 id="concat" tabindex="-1"><a class="header-anchor" href="#concat" aria-hidden="true">#</a> concat</h3><p>基于现有的枚举，连接上新的枚举后返回新的枚举</p><ul><li><code>concat(name: string, _enum: Array<Array|Object>, opt?: Object))</code><ul><li>opt.keyName 指定 key 的取值属性，默认是 key</li><li>opt.valueName 指定 value 的取值属性</li><li>opt.before 是否添加在现有的之前，默认是 false</li><li>opt.extend：返回的枚举<a href="#extend%E9%85%8D%E7%BD%AE">extend 配置</a></li></ul></li></ul><h3 id="convert" tabindex="-1"><a class="header-anchor" href="#convert" aria-hidden="true">#</a> convert</h3><p>将传入的枚举格式转换为{key, value}的形式</p><ul><li><code>convert(name: string, _enum: Array<Array|Object>, opt?: Object))</code><ul><li>opt.keyName 指定 key 的取值属性，默认是 key</li><li>opt.valueName 指定 value 的取值属性</li></ul></li></ul><h3 id="extend-配置" tabindex="-1"><a class="header-anchor" href="#extend-配置" aria-hidden="true">#</a> extend 配置</h3><p>扩展枚举项属性的配置</p><ul><li><code>extend: Array<Object></code> _ <code>key</code> 指定扩展的属性名 _ <code>dir</code> 指定该属性的取值路径 * <code>transfer(item: {key: any, value: any})</code> 转换函数，参数未枚举项，返回就是该属性的值<div class="custom-container tip"><p class="custom-container-title">提示</p><p>同时设置<a href="#dir%E8%A7%84%E5%88%99">dir</a>和 transfer，transfer 优先</p></div></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'status'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'disabled'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">transfer</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>key <span class="token operator">===</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="dir-规则" tabindex="-1"><a class="header-anchor" href="#dir-规则" aria-hidden="true">#</a> dir 规则</h3><p>dir 是指定枚举项 value 的取值方式，规则如下：</p><ul><li>对象属性 <code>A</code>、<code>A.B</code></li><li>数组 <code>[0]</code>、<code>[0][1]</code></li><li>混合 <code>A[0]</code>、<code>[0].A</code>、<code>A[0].B</code></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 假如枚举项value的结构如下</span>
|
||||
<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'aring'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">role</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'管理员'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'业务操作员'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token comment">// 那么规则解析是：</span>
|
||||
dir value
|
||||
<span class="token string">'age'</span> <span class="token operator">=></span> <span class="token number">18</span>
|
||||
<span class="token string">'role[0]'</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'管理员'</span><span class="token punctuation">}</span>
|
||||
<span class="token string">'role[1].id'</span> <span class="token operator">=></span> <span class="token number">2</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">提示</p><p>枚举项 value 如果是基本类型，则规则不生效，value 就是当前值</p></div>`,44),o=[e];function c(l,i){return s(),a("div",null,o)}const r=n(p,[["render",c],["__file","enums.html.vue"]]);export{r as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-c253c956","path":"/reference/plugin/plugins/enums.html","title":"@fesjs/plugin-enums","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"配置","slug":"配置","link":"#配置","children":[{"level":3,"title":"静态配置","slug":"静态配置","link":"#静态配置","children":[]},{"level":3,"title":"动态配置","slug":"动态配置","link":"#动态配置","children":[]}]},{"level":2,"title":"场景使用","slug":"场景使用","link":"#场景使用","children":[]},{"level":2,"title":"API","slug":"api","link":"#api","children":[{"level":3,"title":"get","slug":"get","link":"#get","children":[]},{"level":3,"title":"push","slug":"push","link":"#push","children":[]},{"level":3,"title":"remove","slug":"remove","link":"#remove","children":[]},{"level":3,"title":"concat","slug":"concat","link":"#concat","children":[]},{"level":3,"title":"convert","slug":"convert","link":"#convert","children":[]},{"level":3,"title":"extend 配置","slug":"extend-配置","link":"#extend-配置","children":[]},{"level":3,"title":"dir 规则","slug":"dir-规则","link":"#dir-规则","children":[]}]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/enums.md"}');export{e as data};
|
||||
@ -1,18 +0,0 @@
|
||||
import{_ as o,r as n,o as l,c as p,b as e,d as a,a as s,w as d,f as r}from"./app.136d0839.js";const h={},u=r(`<h1 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量" aria-hidden="true">#</a> 环境变量</h1><p>在构建或者代码在端上运行中需要一些跟区分于环境的变量，用于配置构建流程或者运行时过程，这时候我们可以配置环境变量。</p><h2 id="配置环境变量" tabindex="-1"><a class="header-anchor" href="#配置环境变量" aria-hidden="true">#</a> 配置环境变量</h2><h3 id="命令行添加" tabindex="-1"><a class="header-anchor" href="#命令行添加" aria-hidden="true">#</a> 命令行添加</h3><p>比如：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># OS X, Linux</span>
|
||||
<span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> fes dev
|
||||
|
||||
<span class="token comment"># Windows (cmd.exe)</span>
|
||||
<span class="token builtin class-name">set</span> <span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span> <span class="token operator">&&</span> fes dev
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,6),v={href:"https://github.com/kentcdodds/cross-env",target:"_blank",rel:"noopener noreferrer"},b=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token function"},"pnpm"),a(),e("span",{class:"token function"},"add"),a(" cross-env "),e("span",{class:"token parameter variable"},"--dev"),a(`
|
||||
cross-env `),e("span",{class:"token assign-left variable"},"PORT"),e("span",{class:"token operator"},"="),e("span",{class:"token number"},"3000"),a(` fes dev
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),m=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token function"},"npm"),a(` i cross-env --save-dev
|
||||
cross-env `),e("span",{class:"token assign-left variable"},"PORT"),e("span",{class:"token operator"},"="),e("span",{class:"token number"},"3000"),a(` fes dev
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),f=r(`<h3 id="env-文件配置" tabindex="-1"><a class="header-anchor" href="#env-文件配置" aria-hidden="true">#</a> <code>.env</code> 文件配置</h3><p>Fes.js 中约定根目录下以 <code>.env</code> 开头的文件为环境变量配置文件。</p><p>比如：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">PORT</span><span class="token operator">=</span><span class="token number">3000</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>然后执行</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes dev
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>会以 3000 端口启动 dev server。</p><h4 id="本地临时配置" tabindex="-1"><a class="header-anchor" href="#本地临时配置" aria-hidden="true">#</a> 本地临时配置</h4><p>可以新建 <code>.env.local</code>，这份配置会和 <code>.env</code> 做合并后形成最终配置。</p><h4 id="环境配置" tabindex="-1"><a class="header-anchor" href="#环境配置" aria-hidden="true">#</a> 环境配置</h4><p>可以通过环境变量 <code>FES_ENV</code> 区分不同环境来指定配置，这时候必须在执行命令前添加 <code>FES_ENV</code> 保证执行加载环境变量配置文件逻辑前 <code>FES_ENV</code> 已设置。</p><p>举个 🌰 ：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token assign-left variable">FES_ENV</span><span class="token operator">=</span>sit fes dev
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>如果存在 <code>.env.sit</code> 文件，则会将 <code>.env.sit</code> 的配置和 <code>.env</code> 做合并后形成最终配置。</p><h4 id="配置优先级" tabindex="-1"><a class="header-anchor" href="#配置优先级" aria-hidden="true">#</a> 配置优先级</h4><p>本地临时配置 > 环境配置 > 基础配置</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p>如果多份配置中存在相同的配置项，<strong>则优先级高的会覆盖优先级低的</strong>。</p></div><h2 id="编译时配置列表" tabindex="-1"><a class="header-anchor" href="#编译时配置列表" aria-hidden="true">#</a> 编译时配置列表</h2><p>编译时配置是在构建过程需要的变量，开放给用户配置。</p><h3 id="fes-env" tabindex="-1"><a class="header-anchor" href="#fes-env" aria-hidden="true">#</a> FES_ENV</h3><p>指定当前的环境，不同环境各自的配置文件。</p><div class="custom-container tip"><p class="custom-container-title">提示</p><p><code>FES_ENV</code> 在会在加载<code>.env</code>前使用，所以只能用命令行方式配置。</p></div><h3 id="fes-presets" tabindex="-1"><a class="header-anchor" href="#fes-presets" aria-hidden="true">#</a> FES_PRESETS</h3><p>添加额外的插件集入口</p><h3 id="fes-plugins" tabindex="-1"><a class="header-anchor" href="#fes-plugins" aria-hidden="true">#</a> FES_PLUGINS</h3><p>添加额外的插件入口</p><h3 id="port" tabindex="-1"><a class="header-anchor" href="#port" aria-hidden="true">#</a> PORT</h3><p><code>fes dev</code> 时服务指定的端口号，默认是 <code>8000</code></p><h3 id="host" tabindex="-1"><a class="header-anchor" href="#host" aria-hidden="true">#</a> HOST</h3><p>默认是 <code>localhost</code>。</p><h3 id="https" tabindex="-1"><a class="header-anchor" href="#https" aria-hidden="true">#</a> HTTPS</h3><p>默认是 <code>false</code>。</p><h3 id="watch" tabindex="-1"><a class="header-anchor" href="#watch" aria-hidden="true">#</a> WATCH</h3><p>设为 none 时不监听文件变更。比如：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>WATCH=none fes dev
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="babel-cache" tabindex="-1"><a class="header-anchor" href="#babel-cache" aria-hidden="true">#</a> BABEL_CACHE</h3><p>默认开启 Babel 编译缓存，值为 none 时禁用缓存。</p><h3 id="analyze" tabindex="-1"><a class="header-anchor" href="#analyze" aria-hidden="true">#</a> ANALYZE</h3><p>用于分析 bundle 构成，默认关闭。</p><p>比如：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>ANALYZE=1 fes build
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="analyze-mode" tabindex="-1"><a class="header-anchor" href="#analyze-mode" aria-hidden="true">#</a> ANALYZE_MODE</h3><p>默认是<code>server</code></p><h3 id="analyze-port" tabindex="-1"><a class="header-anchor" href="#analyze-port" aria-hidden="true">#</a> ANALYZE_PORT</h3><p>默认是<code>8888</code></p><h3 id="clear-output" tabindex="-1"><a class="header-anchor" href="#clear-output" aria-hidden="true">#</a> CLEAR_OUTPUT</h3><p>仅仅在 <code>build</code> 时生效。如果设置为 <code>none</code>，就不会在构建前清除 <code>Output</code> 文件内容。</p><h3 id="rm-tmpdir" tabindex="-1"><a class="header-anchor" href="#rm-tmpdir" aria-hidden="true">#</a> RM_TMPDIR</h3><p>仅仅在 <code>build</code> 时生效。如果设置为 <code>none</code>，就不会在构建后清除 <code>.fes</code> 临时文件内容。</p><h2 id="process-env" tabindex="-1"><a class="header-anchor" href="#process-env" aria-hidden="true">#</a> p<wbr>rocess.env</h2><p>运行时配置需要以 <code>FES_APP_</code> 开头，比如在 <code>.env</code> 中配置：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>FES_APP_KEY=123456789
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>在代码中使用：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">FES_APP_KEY</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token comment">// 输出 123456789</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>除了用户自定义的以<code>FES_APP_</code>开头的变量，还提供如下配置：</p><ul><li><p><strong>NODE_ENV</strong>：Node 环境变量</p></li><li><p><strong>FES_ENV</strong>：Fes.js 环境变量</p></li><li><p><strong>BASE_URL</strong>：等同于 publicPath</p></li></ul>`,56);function g(_,x){const c=n("ExternalLinkIcon"),i=n("CodeGroupItem"),t=n("CodeGroup");return l(),p("div",null,[u,e("p",null,[a("如果要同时考虑 OS X 和 Windows，可借助三方工具 "),e("a",v,[a("cross-env"),s(c)])]),s(t,null,{default:d(()=>[s(i,{title:"PNPM",active:""},{default:d(()=>[b]),_:1}),s(i,{title:"NPM"},{default:d(()=>[m]),_:1})]),_:1}),f])}const E=o(h,[["render",g],["__file","env.html.vue"]]);export{E as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-ef8c5e10","path":"/guide/env.html","title":"环境变量","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"配置环境变量","slug":"配置环境变量","link":"#配置环境变量","children":[{"level":3,"title":"命令行添加","slug":"命令行添加","link":"#命令行添加","children":[]},{"level":3,"title":".env 文件配置","slug":"env-文件配置","link":"#env-文件配置","children":[]}]},{"level":2,"title":"编译时配置列表","slug":"编译时配置列表","link":"#编译时配置列表","children":[{"level":3,"title":"FES_ENV","slug":"fes-env","link":"#fes-env","children":[]},{"level":3,"title":"FES_PRESETS","slug":"fes-presets","link":"#fes-presets","children":[]},{"level":3,"title":"FES_PLUGINS","slug":"fes-plugins","link":"#fes-plugins","children":[]},{"level":3,"title":"PORT","slug":"port","link":"#port","children":[]},{"level":3,"title":"HOST","slug":"host","link":"#host","children":[]},{"level":3,"title":"HTTPS","slug":"https","link":"#https","children":[]},{"level":3,"title":"WATCH","slug":"watch","link":"#watch","children":[]},{"level":3,"title":"BABEL_CACHE","slug":"babel-cache","link":"#babel-cache","children":[]},{"level":3,"title":"ANALYZE","slug":"analyze","link":"#analyze","children":[]},{"level":3,"title":"ANALYZE_MODE","slug":"analyze-mode","link":"#analyze-mode","children":[]},{"level":3,"title":"ANALYZE_PORT","slug":"analyze-port","link":"#analyze-port","children":[]},{"level":3,"title":"CLEAR_OUTPUT","slug":"clear-output","link":"#clear-output","children":[]},{"level":3,"title":"RM_TMPDIR","slug":"rm-tmpdir","link":"#rm-tmpdir","children":[]}]},{"level":2,"title":"process.env","slug":"process-env","link":"#process-env","children":[]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"guide/env.md"}');export{e as data};
|
||||
@ -1,3 +0,0 @@
|
||||
import{_ as e,o as t,c as a,f as o}from"./app.136d0839.js";const c={},d=o(`<h1 id="常见问题" tabindex="-1"><a class="header-anchor" href="#常见问题" aria-hidden="true">#</a> 常见问题</h1><h4 id="为什么代码提示不生效" tabindex="-1"><a class="header-anchor" href="#为什么代码提示不生效" aria-hidden="true">#</a> 为什么代码提示不生效？</h4><ol><li>需要先运行一次<code>fes dev</code></li><li>检查tsconfig.json，<code>include</code>包含当前编辑文件，<code>compilerOptions.path</code>包含</li></ol><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>"@/*": ["./src/*"],
|
||||
"@@/*": ["./src/.fes/*"]
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div>`,4),i=[d];function s(n,r){return t(),a("div",null,i)}const u=e(c,[["render",s],["__file","faq.html.vue"]]);export{u as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-37e1c06f","path":"/guide/faq.html","title":"常见问题","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"guide/faq.md"}');export{e as data};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-fb0f0066","path":"/guide/getting-started.html","title":"快速上手","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"依赖环境","slug":"依赖环境","link":"#依赖环境","children":[]},{"level":2,"title":"创建项目","slug":"创建项目","link":"#创建项目","children":[]},{"level":2,"title":"启动项目","slug":"启动项目","link":"#启动项目","children":[]},{"level":2,"title":"部署发布","slug":"部署发布","link":"#部署发布","children":[{"level":3,"title":"构建","slug":"构建","link":"#构建","children":[]},{"level":3,"title":"本地验证","slug":"本地验证","link":"#本地验证","children":[]},{"level":3,"title":"部署","slug":"部署","link":"#部署","children":[]}]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"guide/getting-started.md"}');export{e as data};
|
||||
@ -1,73 +0,0 @@
|
||||
import{_ as o,r as t,o as u,c as m,b as e,d as n,a as s,w as a,f as r}from"./app.136d0839.js";const p={},h=e("h1",{id:"快速上手",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#快速上手","aria-hidden":"true"},"#"),n(" 快速上手")],-1),b=e("h2",{id:"依赖环境",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#依赖环境","aria-hidden":"true"},"#"),n(" 依赖环境")],-1),v={href:"https://nodejs.org/",target:"_blank",rel:"noopener noreferrer"},_=r(`<div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 打印 node 版本</span>
|
||||
<span class="token function">node</span> <span class="token parameter variable">-v</span>
|
||||
v12.13.0
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1),k={href:"https://pnpm.io/installation",target:"_blank",rel:"noopener noreferrer"},g=r(`<div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 全局安装 pnpm</span>
|
||||
<span class="token function">npm</span> i <span class="token function">pnpm</span> <span class="token parameter variable">-g</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="创建项目" tabindex="-1"><a class="header-anchor" href="#创建项目" aria-hidden="true">#</a> 创建项目</h2><p>这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。</p><h5 id="步骤-1-创建工作空间" tabindex="-1"><a class="header-anchor" href="#步骤-1-创建工作空间" aria-hidden="true">#</a> 步骤 1 创建工作空间</h5><p>如果工作空间不存在，则先创建：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 创建目录 workspace</span>
|
||||
<span class="token function">mkdir</span> workspace
|
||||
<span class="token comment"># 进入目录 workspace</span>
|
||||
<span class="token builtin class-name">cd</span> workspace
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果工作空间已存在，则直接进入</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token comment"># 进入目录 workspace</span>
|
||||
<span class="token builtin class-name">cd</span> workspace
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h5 id="步骤-2-在工作空间创建项目" tabindex="-1"><a class="header-anchor" href="#步骤-2-在工作空间创建项目" aria-hidden="true">#</a> 步骤 2 在工作空间创建项目</h5>`,9),f=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` create @fesjs/fes-app myapp
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),x=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(`
|
||||
npx @fesjs/create-fes-app myapp
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),w=e("p",null,[n("如果项目文件夹 "),e("code",null,"workspace/myapp"),n(" 已经存在，会提示目录已存在：")],-1),y=["src"],N=e("p",null,"你可以选择：",-1),C=e("ul",null,[e("li",null,[e("code",null,"Overwrite"),n(" 删除项目文件夹，重新创建项目。")]),e("li",null,[e("code",null,"Merge"),n(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),P=e("code",null,"Overwrite",-1),M=e("code",null,"Merge",-1),j=e("code",null,"workspace/myapp",-1),B=e("code",null,"template",-1),E=["src"],$=e("p",null,[n("你可以选默认适用于中后台前端应用的 "),e("code",null,"PC"),n(" 类型，也可以选适用于移动端的 "),e("code",null,"H5"),n(" 类型。")],-1),G=e("h5",{id:"步骤-3-安装依赖",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#步骤-3-安装依赖","aria-hidden":"true"},"#"),n(" 步骤 3 安装依赖")],-1),I=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 进入项目目录"),n(`
|
||||
`),e("span",{class:"token builtin class-name"},"cd"),n(` myapp
|
||||
`),e("span",{class:"token comment"},"# 安装依赖"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` i
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),O=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 进入项目目录"),n(`
|
||||
`),e("span",{class:"token builtin class-name"},"cd"),n(` myapp
|
||||
`),e("span",{class:"token comment"},"# 安装依赖"),n(`
|
||||
`),e("span",{class:"token function"},"npm"),n(` i
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),S=e("h2",{id:"启动项目",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#启动项目","aria-hidden":"true"},"#"),n(" 启动项目")],-1),T=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 开发调试"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` dev
|
||||
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` run v1.22.4
|
||||
$ fes dev
|
||||
Starting the development server http://localhost:8000 `),e("span",{class:"token punctuation"},".."),n(`.
|
||||
|
||||
✔ Webpack
|
||||
Compiled successfully `),e("span",{class:"token keyword"},"in"),n(),e("span",{class:"token number"},"15"),n(`.91s
|
||||
|
||||
DONE Compiled successfully `),e("span",{class:"token keyword"},"in"),n(" 15917ms "),e("span",{class:"token number"},"11"),n(`:17:08 AM
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),V=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 开发调试"),n(`
|
||||
`),e("span",{class:"token function"},"npm"),n(` run dev
|
||||
|
||||
`),e("span",{class:"token operator"},">"),n(` fes dev
|
||||
Starting the development server http://localhost:8000 `),e("span",{class:"token punctuation"},".."),n(`.
|
||||
|
||||
✔ Webpack
|
||||
Compiled successfully `),e("span",{class:"token keyword"},"in"),n(),e("span",{class:"token number"},"3"),n(`.66s
|
||||
|
||||
DONE Compiled successfully `),e("span",{class:"token keyword"},"in"),n(" 3662ms "),e("span",{class:"token number"},"11"),n(`:17:46 AM
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),W={href:"http://localhost:8000",target:"_blank",rel:"noopener noreferrer"},D=["src"],A=e("h2",{id:"部署发布",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#部署发布","aria-hidden":"true"},"#"),n(" 部署发布")],-1),F=e("h3",{id:"构建",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#构建","aria-hidden":"true"},"#"),n(" 构建")],-1),L=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 构建"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` build
|
||||
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` run v1.22.4
|
||||
$ fes build
|
||||
|
||||
✔ Webpack
|
||||
Compiled successfully `),e("span",{class:"token keyword"},"in"),n(),e("span",{class:"token number"},"45"),n(`.37s
|
||||
|
||||
✨ Done `),e("span",{class:"token keyword"},"in"),n(),e("span",{class:"token number"},"48"),n(`.87s.
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),H=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 构建"),n(`
|
||||
`),e("span",{class:"token function"},"npm"),n(` run build
|
||||
|
||||
`),e("span",{class:"token operator"},">"),n(` fes build
|
||||
|
||||
✔ Webpack
|
||||
Compiled successfully `),e("span",{class:"token keyword"},"in"),n(),e("span",{class:"token number"},"45"),n(`.37s
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),q=r(`<p>构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。</p><div class="language-base line-numbers-mode" data-ext="base"><pre class="language-base"><code>tree ./dist
|
||||
|
||||
dist
|
||||
├── chunk-vendors.27cd4686.js
|
||||
├── chunk-vendors.a5f5de67.css
|
||||
├── index.11411d43.css
|
||||
├── index.d72f1ba2.js
|
||||
├── index.html
|
||||
├── logo.png
|
||||
└── static
|
||||
└── logo.0f85bba0.png
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="本地验证" tabindex="-1"><a class="header-anchor" href="#本地验证" aria-hidden="true">#</a> 本地验证</h3>`,3),z={href:"https://github.com/vercel/serve",target:"_blank",rel:"noopener noreferrer"},J=e("code",null,"fes dev",-1),K=e("h3",{id:"部署",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#部署","aria-hidden":"true"},"#"),n(" 部署")],-1),Q=e("p",null,"本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。",-1);function R(c,U){const i=t("ExternalLinkIcon"),l=t("CodeGroupItem"),d=t("CodeGroup");return u(),m("div",null,[h,b,e("p",null,[n("首先得有 "),e("a",v,[n("Node.js"),s(i)]),n("，并确保 node 版本是 12.13 或以上。")]),_,e("p",null,[n("推荐使用 "),e("a",k,[n("pnpm"),s(i)]),n(" 管理 npm 依赖")]),g,s(d,null,{default:a(()=>[s(l,{title:"PNPM",active:""},{default:a(()=>[f]),_:1}),s(l,{title:"NPM"},{default:a(()=>[x]),_:1})]),_:1}),w,e("img",{src:c.$withBase("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,y),N,C,e("p",null,[n("当选择 "),P,n(" 或者 "),M,n(" 或者项目目录 "),j,n(" 不存在，会提示选取一个 "),B,n("： "),e("img",{src:c.$withBase("pickTemplate.png"),alt:"选择模板类型"},null,8,E)]),$,G,s(d,null,{default:a(()=>[s(l,{title:"PNPM",active:""},{default:a(()=>[I]),_:1}),s(l,{title:"NPM"},{default:a(()=>[O]),_:1})]),_:1}),S,s(d,null,{default:a(()=>[s(l,{title:"PNPM",active:""},{default:a(()=>[T]),_:1}),s(l,{title:"NPM"},{default:a(()=>[V]),_:1})]),_:1}),e("p",null,[n("Fes.js 会在 "),e("a",W,[n("http://localhost:8000"),s(i)]),n(" 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。")]),e("img",{src:c.$withBase("home.png"),alt:"home"},null,8,D),A,F,s(d,null,{default:a(()=>[s(l,{title:"PNPM",active:""},{default:a(()=>[L]),_:1}),s(l,{title:"NPM"},{default:a(()=>[H]),_:1})]),_:1}),q,e("p",null,[n("发布之前，可以通过 "),e("a",z,[n("serve"),s(i)]),n(" 做本地验证，验证结果应该跟执行 "),J,n(" 的结果一样。")]),K,Q])}const Y=o(p,[["render",R],["__file","getting-started.html.vue"]]);export{Y as default};
|
||||
1
assets/guide_builder.md.b359815f.js
Normal file
1
assets/guide_builder.md.b359815f.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,o as a,c as t,V as i}from"./chunks/framework.c1e1f082.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
assets/guide_builder.md.b359815f.lean.js
Normal file
1
assets/guide_builder.md.b359815f.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,o as a,c as t,V as i}from"./chunks/framework.c1e1f082.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};
|
||||
53
assets/guide_config.md.4e96018e.js
Normal file
53
assets/guide_config.md.4e96018e.js
Normal file
@ -0,0 +1,53 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.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:#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:#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:#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:#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,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.4e96018e.lean.js
Normal file
1
assets/guide_config.md.4e96018e.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.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
assets/guide_contributing.md.e88cef42.js
Normal file
1
assets/guide_contributing.md.e88cef42.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/guide_contributing.md.e88cef42.lean.js
Normal file
1
assets/guide_contributing.md.e88cef42.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{o as e,c as a,V as s}from"./chunks/framework.c1e1f082.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};
|
||||
12
assets/guide_css.md.dff6cb1a.js
Normal file
12
assets/guide_css.md.dff6cb1a.js
Normal file
@ -0,0 +1,12 @@
|
||||
import{_ as s,o as a,c as l,V as e}from"./chunks/framework.c1e1f082.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:#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:#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.dff6cb1a.lean.js
Normal file
1
assets/guide_css.md.dff6cb1a.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as l,V as e}from"./chunks/framework.c1e1f082.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};
|
||||
66
assets/guide_directory-structure.md.df257571.js
Normal file
66
assets/guide_directory-structure.md.df257571.js
Normal file
@ -0,0 +1,66 @@
|
||||
import{_ as s,o as a,c as n,V as o}from"./chunks/framework.c1e1f082.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.df257571.lean.js
Normal file
1
assets/guide_directory-structure.md.df257571.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as o}from"./chunks/framework.c1e1f082.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};
|
||||
8
assets/guide_env.md.a871b295.js
Normal file
8
assets/guide_env.md.a871b295.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/guide_env.md.a871b295.lean.js
Normal file
1
assets/guide_env.md.a871b295.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as a,o as s,c as e,V as o}from"./chunks/framework.c1e1f082.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};
|
||||
2
assets/guide_faq.md.82040b82.js
Normal file
2
assets/guide_faq.md.82040b82.js
Normal file
@ -0,0 +1,2 @@
|
||||
import{_ as e,o as a,c as o,V as t}from"./chunks/framework.c1e1f082.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
assets/guide_faq.md.82040b82.lean.js
Normal file
1
assets/guide_faq.md.82040b82.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,o as a,c as o,V as t}from"./chunks/framework.c1e1f082.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};
|
||||
60
assets/guide_getting-started.md.45f3aea6.js
Normal file
60
assets/guide_getting-started.md.45f3aea6.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.c1e1f082.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-EeKSN" id="tab-Hd38oid" checked="checked"><label for="tab-Hd38oid">pnpm</label><input type="radio" name="group-EeKSN" id="tab-POI8lvt"><label for="tab-POI8lvt">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-l9Qnl" id="tab-bimP4ed" checked="checked"><label for="tab-bimP4ed">pnpm</label><input type="radio" name="group-l9Qnl" id="tab-mYIvotI"><label for="tab-mYIvotI">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-MhS3m" id="tab-dKfqQUx" checked="checked"><label for="tab-dKfqQUx">pnpm</label><input type="radio" name="group-MhS3m" id="tab-nQh4V1T"><label for="tab-nQh4V1T">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),b=["src"],u=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-mwW16" id="tab-7H2m4gf" checked="checked"><label for="tab-7H2m4gf">pnpm</label><input type="radio" name="group-mwW16" id="tab-5eMoxo2"><label for="tab-5eMoxo2">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"},f=Object.assign(m,{setup(g){return(E,v)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),C,a(" 或者 "),y,a(" 或者项目目录 "),d,a(" 不存在，会提示选取一个 "),A,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,D)]),h,s("img",{src:n(l)("home.png"),alt:"home"},null,8,b),u]))}});export{_ as __pageData,f as default};
|
||||
1
assets/guide_getting-started.md.45f3aea6.lean.js
Normal file
1
assets/guide_getting-started.md.45f3aea6.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.c1e1f082.js";const t=p("",16),c=["src"],r=s("p",null,"你可以选择：",-1),i=s("ul",null,[s("li",null,[s("code",null,"Overwrite"),a(" 删除项目文件夹，重新创建项目。")]),s("li",null,[s("code",null,"Merge"),a(" 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。")])],-1),C=s("code",null,"Overwrite",-1),y=s("code",null,"Merge",-1),d=s("code",null,"workspace/myapp",-1),A=s("code",null,"template",-1),D=["src"],h=p("",6),b=["src"],u=p("",9),_=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md"}'),m={name:"guide/getting-started.md"},f=Object.assign(m,{setup(g){return(E,v)=>(e(),o("div",null,[t,s("img",{src:n(l)("pickTemplateTip.png"),alt:"目录已存在提示"},null,8,c),r,i,s("p",null,[a("当选择 "),C,a(" 或者 "),y,a(" 或者项目目录 "),d,a(" 不存在，会提示选取一个 "),A,a("： "),s("img",{src:n(l)("pickTemplate.png"),alt:"选择模板类型"},null,8,D)]),h,s("img",{src:n(l)("home.png"),alt:"home"},null,8,b),u]))}});export{_ as __pageData,f as default};
|
||||
16
assets/guide_image.md.cfb36581.js
Normal file
16
assets/guide_image.md.cfb36581.js
Normal file
@ -0,0 +1,16 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.c1e1f082.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:#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:#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:#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>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div>`,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
assets/guide_image.md.cfb36581.lean.js
Normal file
1
assets/guide_image.md.cfb36581.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.c1e1f082.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};
|
||||
5
assets/guide_index.md.b02ebfe7.js
Normal file
5
assets/guide_index.md.b02ebfe7.js
Normal file
@ -0,0 +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.c1e1f082.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
assets/guide_index.md.b02ebfe7.lean.js
Normal file
1
assets/guide_index.md.b02ebfe7.lean.js
Normal file
@ -0,0 +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.c1e1f082.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};
|
||||
156
assets/guide_mock.md.541ceb28.js
Normal file
156
assets/guide_mock.md.541ceb28.js
Normal file
@ -0,0 +1,156 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.c1e1f082.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:#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>
|
||||
<span class="line"><span style="color:#F07178;"> text</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">movie: movie/in_theaters_mock ~~~~~</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 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:#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>
|
||||
<span class="line"><span style="color:#F07178;"> text</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">mock: movie/test_mock</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 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>
|
||||
<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:#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>
|
||||
<span class="line"><span style="color:#F07178;"> text</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">通过 register 测试 mock watch: 初始状态</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 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>
|
||||
<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:#676E95;font-style:italic;">// cgiMock('/number', 666);</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;">/number</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">999</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;">// 返回一个json</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:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/json</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>
|
||||
<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;">400101</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;">不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> transactionTime</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">20170309171146</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> success</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</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>
|
||||
<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:#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:#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:#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:#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:#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:#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:#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:#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>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">Content-Type</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;">text/plain</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;">Content-Length</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;">123</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> ETag</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">12345</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;"> cookies</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;">myname</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> value</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:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> maxAge</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">900000</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> httpOnly</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:#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>
|
||||
<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:#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:#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:#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:#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>
|
||||
<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>
|
||||
<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:#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:#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:#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:#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.541ceb28.lean.js
Normal file
1
assets/guide_mock.md.541ceb28.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.c1e1f082.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};
|
||||
14
assets/guide_plugin.md.c99dbfa8.js
Normal file
14
assets/guide_plugin.md.c99dbfa8.js
Normal file
@ -0,0 +1,14 @@
|
||||
import{_ as s,o as a,c as e,V as o}from"./chunks/framework.c1e1f082.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.c99dbfa8.lean.js
Normal file
1
assets/guide_plugin.md.c99dbfa8.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as e,V as o}from"./chunks/framework.c1e1f082.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};
|
||||
12
assets/guide_public.md.eb9a78cd.js
Normal file
12
assets/guide_public.md.eb9a78cd.js
Normal file
@ -0,0 +1,12 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.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:#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:#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>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div>`,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
assets/guide_public.md.eb9a78cd.lean.js
Normal file
1
assets/guide_public.md.eb9a78cd.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.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};
|
||||
158
assets/guide_route.md.8754e456.js
Normal file
158
assets/guide_route.md.8754e456.js
Normal file
@ -0,0 +1,158 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.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:#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:#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:#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:#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:#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:#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:#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:#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:#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,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.8754e456.lean.js
Normal file
1
assets/guide_route.md.8754e456.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as n,V as l}from"./chunks/framework.c1e1f082.js";const i=JSON.parse('{"title":"路由","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};
|
||||
123
assets/guide_runtime-config.md.56bc8115.js
Normal file
123
assets/guide_runtime-config.md.56bc8115.js
Normal file
@ -0,0 +1,123 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.c1e1f082.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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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>
|
||||
<span class="line"><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;">harrywan</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:#F78C6C;">1000</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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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:#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 d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
1
assets/guide_runtime-config.md.56bc8115.lean.js
Normal file
1
assets/guide_runtime-config.md.56bc8115.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as n,c as a,V as l}from"./chunks/framework.c1e1f082.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};
|
||||
19
assets/guide_template.md.6735687b.js
Normal file
19
assets/guide_template.md.6735687b.js
Normal file
@ -0,0 +1,19 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.c1e1f082.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:#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:#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:#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.6735687b.lean.js
Normal file
1
assets/guide_template.md.6735687b.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,o as a,c as l,V as n}from"./chunks/framework.c1e1f082.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
assets/guide_upgrade3.md.f74882c1.js
Normal file
1
assets/guide_upgrade3.md.f74882c1.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,o as a,c as r,V as l}from"./chunks/framework.c1e1f082.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
assets/guide_upgrade3.md.f74882c1.lean.js
Normal file
1
assets/guide_upgrade3.md.f74882c1.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,o as a,c as r,V as l}from"./chunks/framework.c1e1f082.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 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-0a0e491c","path":"/reference/plugin/plugins/icon.html","title":"@fesjs/plugin-icon","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"介绍","slug":"介绍","link":"#介绍","children":[]},{"level":2,"title":"启用方式","slug":"启用方式","link":"#启用方式","children":[]},{"level":2,"title":"使用","slug":"使用","link":"#使用","children":[{"level":3,"title":"属性","slug":"属性","link":"#属性","children":[]}]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/plugin/plugins/icon.md"}');export{e as data};
|
||||
@ -1,8 +0,0 @@
|
||||
import{_ as t,o as e,c as n,f as a}from"./app.136d0839.js";const s={},o=a(`<h1 id="fesjs-plugin-icon" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-icon" aria-hidden="true">#</a> @fesjs/plugin-icon</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>提供以 <code>component</code> 的方式，直接使用 svg icon 的能力。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
|
||||
<span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">"@fesjs/fes"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span><span class="token punctuation">,</span>
|
||||
<span class="token property">"@fesjs/plugin-icon"</span><span class="token operator">:</span> <span class="token string">"^3.0.0"</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><p>新建 <code>src/icons</code> 目录，将 svg 文件放入其中，在 <code>component</code> 中引用：</p><div class="language-jsx line-numbers-mode" data-ext="jsx"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fes-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconName<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="属性" tabindex="-1"><a class="header-anchor" href="#属性" aria-hidden="true">#</a> 属性</h3><table><thead><tr><th style="text-align:left;">属性</th><th style="text-align:left;">说明</th><th style="text-align:left;">类型</th></tr></thead><tbody><tr><td style="text-align:left;">type</td><td style="text-align:left;">svg 文件名</td><td style="text-align:left;"><code>string</code></td></tr><tr><td style="text-align:left;">spin</td><td style="text-align:left;">是否无限旋转</td><td style="text-align:left;"><code>boolean</code></td></tr><tr><td style="text-align:left;">rotate</td><td style="text-align:left;">旋转角度</td><td style="text-align:left;"><code>number</code></td></tr></tbody></table>`,11),l=[o];function i(c,d){return e(),n("div",null,l)}const r=t(s,[["render",i],["__file","icon.html.vue"]]);export{r as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-528b8b6c","path":"/guide/image.html","title":"使用图片","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"使用图片","slug":"使用图片-1","link":"#使用图片-1","children":[{"level":3,"title":"Vue 里使用图片","slug":"vue-里使用图片","link":"#vue-里使用图片","children":[]},{"level":3,"title":"JS 里使用图片","slug":"js-里使用图片","link":"#js-里使用图片","children":[]},{"level":3,"title":"CSS 里使用图片","slug":"css-里使用图片","link":"#css-里使用图片","children":[]}]},{"level":2,"title":"public 文件夹","slug":"public-文件夹","link":"#public-文件夹","children":[{"level":3,"title":"在 HTML 模板中使用","slug":"在-html-模板中使用","link":"#在-html-模板中使用","children":[]},{"level":3,"title":"在.vue 文件中使用","slug":"在-vue-文件中使用","link":"#在-vue-文件中使用","children":[]}]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"guide/image.md"}');export{e as data};
|
||||
@ -1,21 +0,0 @@
|
||||
import{_ as a,o as n,c as s,f as e}from"./app.136d0839.js";const t={},p=e(`<h1 id="使用图片" tabindex="-1"><a class="header-anchor" href="#使用图片" aria-hidden="true">#</a> 使用图片</h1><h2 id="使用图片-1" tabindex="-1"><a class="header-anchor" href="#使用图片-1" aria-hidden="true">#</a> 使用图片</h2><p>假设在 <code>src/images</code> 目录下有 <code>logo.png</code>。</p><h3 id="vue-里使用图片" tabindex="-1"><a class="header-anchor" href="#vue-里使用图片" aria-hidden="true">#</a> Vue 里使用图片</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@/images/logo.png\`<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="js-里使用图片" tabindex="-1"><a class="header-anchor" href="#js-里使用图片" aria-hidden="true">#</a> JS 里使用图片</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> imageUrl <span class="token keyword">from</span> <span class="token string">'@/images/logo.png\`'</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="css-里使用图片" tabindex="-1"><a class="header-anchor" href="#css-里使用图片" aria-hidden="true">#</a> CSS 里使用图片</h3><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.logo</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'@/images/logo.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>注意：</p><ol><li>这是 <code>webpack</code> 的规则，如果切到其他打包工具，可能会有变化</li><li><code>less</code> 中同样适用</li></ol><h2 id="public-文件夹" tabindex="-1"><a class="header-anchor" href="#public-文件夹" aria-hidden="true">#</a> <code>public</code> 文件夹</h2><p>有些内容不需要经过 <code>webpack</code> 模块化处理，则可以将这些内容放在 <code>public</code> 文件夹，构建后会直接复制到 <code>dist</code> 目录，所以你需要通过<code>BASE_URL</code>来引入它们。</p><h3 id="在-html-模板中使用" tabindex="-1"><a class="header-anchor" href="#在-html-模板中使用" aria-hidden="true">#</a> 在 HTML 模板中使用</h3><p>在 <code>index.html</code> 中需要设置：</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= BASE_URL %>favicon.ico<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="在-vue-文件中使用" tabindex="-1"><a class="header-anchor" href="#在-vue-文件中使用" aria-hidden="true">#</a> 在.vue 文件中使用</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>\`\${publicPath}my-image.png\`<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">publicPath</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,18),c=[p];function o(l,i){return n(),s("div",null,c)}const d=a(t,[["render",o],["__file","image.html.vue"]]);export{d as default};
|
||||
@ -1 +0,0 @@
|
||||
var v=function(){return Boolean(window.location.hostname==="localhost"||window.location.hostname==="[::1]"||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/))},c;typeof window<"u"&&(typeof Promise<"u"?c=new Promise(function(t){return window.addEventListener("load",t)}):c={then:function(t){return window.addEventListener("load",t)}});function s(t,n){n===void 0&&(n={});var i=n.registrationOptions;i===void 0&&(i={}),delete n.registrationOptions;var e=function(r){for(var f=[],a=arguments.length-1;a-- >0;)f[a]=arguments[a+1];n&&n[r]&&n[r].apply(n,f)};"serviceWorker"in navigator&&c.then(function(){v()?(l(t,e,i),navigator.serviceWorker.ready.then(function(r){e("ready",r)}).catch(function(r){return o(e,r)})):(u(t,e,i),navigator.serviceWorker.ready.then(function(r){e("ready",r)}).catch(function(r){return o(e,r)}))})}function o(t,n){navigator.onLine||t("offline"),t("error",n)}function u(t,n,i){navigator.serviceWorker.register(t,i).then(function(e){if(n("registered",e),e.waiting){n("updated",e);return}e.onupdatefound=function(){n("updatefound",e);var r=e.installing;r.onstatechange=function(){r.state==="installed"&&(navigator.serviceWorker.controller?n("updated",e):n("cached",e))}}}).catch(function(e){return o(n,e)})}function l(t,n,i){fetch(t).then(function(e){e.status===404?(n("error",new Error("Service worker not found at "+t)),d()):e.headers.get("content-type").indexOf("javascript")===-1?(n("error",new Error("Expected "+t+" to have javascript content-type, but received "+e.headers.get("content-type"))),d()):u(t,n,i)}).catch(function(e){return o(n,e)})}function d(){"serviceWorker"in navigator&&navigator.serviceWorker.ready.then(function(t){t.unregister()}).catch(function(t){return o(emit,t)})}export{s as register,d as unregister};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-fffb8e28","path":"/guide/","title":"介绍","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"痛点","slug":"痛点","link":"#痛点","children":[]},{"level":2,"title":"Fes.js 是什么？","slug":"fes-js-是什么","link":"#fes-js-是什么","children":[]},{"level":2,"title":"Fes.js 如何工作？","slug":"fes-js-如何工作","link":"#fes-js-如何工作","children":[{"level":3,"title":"架构","slug":"架构","link":"#架构","children":[]},{"level":3,"title":"插件和插件集","slug":"插件和插件集","link":"#插件和插件集","children":[]},{"level":3,"title":".fes 临时文件","slug":"fes-临时文件","link":"#fes-临时文件","children":[]}]},{"level":2,"title":"为什么不是 ...?","slug":"为什么不是","link":"#为什么不是","children":[{"level":3,"title":"Vue CLI","slug":"vue-cli","link":"#vue-cli","children":[]},{"level":3,"title":"UMI","slug":"umi","link":"#umi","children":[]}]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"guide/README.md"}');export{e as data};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-76cb52e8","path":"/reference/cli/","title":"命令行工具","lang":"zh-CN","frontmatter":{"sidebar":"auto"},"excerpt":"","headers":[{"level":2,"title":"create-fes-app","slug":"create-fes-app","link":"#create-fes-app","children":[]},{"level":2,"title":"fes","slug":"fes","link":"#fes","children":[{"level":3,"title":"fes dev","slug":"fes-dev","link":"#fes-dev","children":[]},{"level":3,"title":"fes build","slug":"fes-build","link":"#fes-build","children":[]},{"level":3,"title":"fes help","slug":"fes-help","link":"#fes-help","children":[]},{"level":3,"title":"fes info","slug":"fes-info","link":"#fes-info","children":[]},{"level":3,"title":"fes webpack","slug":"fes-webpack","link":"#fes-webpack","children":[]}]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/cli/README.md"}');export{e as data};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-8daa1a0e","path":"/","title":"首页","lang":"zh-CN","frontmatter":{"home":true,"title":"首页","heroImage":"/logo.png","actions":[{"text":"快速上手","link":"/guide/getting-started.html","type":"primary"},{"text":"项目简介","link":"/guide/","type":"secondary"}],"features":[{"title":"Fast","details":"Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。"},{"title":"Easy","details":"基于Vue.js 3.0，上手非常简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。"},{"title":"Strong","details":"仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。"},{"title":"可扩展","details":"借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。"},{"title":"面向未来","details":"在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。"},{"title":"令人愉悦","details":"我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。"}],"footer":"MIT Licensed | Copyright © 2020-present Webank"},"excerpt":"","headers":[{"level":2,"title":"像数 1, 2, 3 一样容易","slug":"像数-1-2-3-一样容易","link":"#像数-1-2-3-一样容易","children":[]},{"level":2,"title":"反馈","slug":"反馈","link":"#反馈","children":[]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"README.md"}');export{e as data};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-d61a9282","path":"/reference/plugin/","title":"介绍","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"插件列表","slug":"插件列表","link":"#插件列表","children":[]},{"level":2,"title":"架构","slug":"架构","link":"#架构","children":[]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/plugin/README.md"}');export{e as data};
|
||||
@ -1,86 +0,0 @@
|
||||
import{_ as r,r as d,o as t,c as u,a as s,w as a,f as c,b as e,d as n}from"./app.136d0839.js";const o={},v=c(`<h1 id="命令行工具" tabindex="-1"><a class="header-anchor" href="#命令行工具" aria-hidden="true">#</a> 命令行工具</h1><h2 id="create-fes-app" tabindex="-1"><a class="header-anchor" href="#create-fes-app" aria-hidden="true">#</a> create-fes-app</h2><p>通过 <code>create-fes-app</code> 命令创建项目模板，输入<code>create-fes-app -h</code>则可以看到如下信息：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: create-fes-app <name>
|
||||
|
||||
Options:
|
||||
-v, --version Output the current version
|
||||
-h, --help Display help for command
|
||||
-f, --force Overwrite target directory if it exists
|
||||
-m, --merge Merge target directory if it exists
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>可以在本机安装后使用：</p>`,5),p=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 全局安装"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(" global "),e("span",{class:"token function"},"add"),n(` @fesjs/create-fes-app
|
||||
|
||||
`),e("span",{class:"token comment"},"# 创建模板"),n(`
|
||||
create-fes-app fes-app
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),m=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 全局安装"),n(`
|
||||
`),e("span",{class:"token function"},"npm"),n(" i "),e("span",{class:"token parameter variable"},"-g"),n(` @fesjs/create-fes-app
|
||||
|
||||
`),e("span",{class:"token comment"},"# 创建模板"),n(`
|
||||
create-fes-app fes-app
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),b=e("p",null,[n("推荐使用 "),e("code",null,"pnpm create"),n(" 和 "),e("code",null,"npx"),n(" 方式创建模板，一直使用最新的模板：")],-1),h=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` create @fesjs/fes-app myapp
|
||||
|
||||
`),e("span",{class:"token comment"},"# 安装依赖"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` i
|
||||
|
||||
`),e("span",{class:"token comment"},"# 运行"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` dev
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),f=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(`
|
||||
npx @fesjs/create-fes-app myapp
|
||||
|
||||
`),e("span",{class:"token comment"},"# 安装依赖"),n(`
|
||||
`),e("span",{class:"token function"},"npm"),n(),e("span",{class:"token function"},"install"),n(`
|
||||
|
||||
`),e("span",{class:"token comment"},"# 运行"),n(`
|
||||
`),e("span",{class:"token function"},"npm"),n(` run dev
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),g=c(`<h2 id="fes" tabindex="-1"><a class="header-anchor" href="#fes" aria-hidden="true">#</a> fes</h2><p>需要在项目根目录执行 <code>fes</code> 命令，输入<code>fes -h</code>则可以看到如下信息：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes <command> [options]
|
||||
|
||||
一个好用的前端应用解决方案
|
||||
|
||||
Options:
|
||||
-v, --vers output the current version
|
||||
-h, --help display help for command
|
||||
|
||||
Commands:
|
||||
build build application for production
|
||||
dev [options] start a local http service for development
|
||||
help show command helps
|
||||
info print debugging information about your environment
|
||||
webpack [options] inspect webpack configurations
|
||||
|
||||
Run fes <command> --help for detailed usage of given command.
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="fes-dev" tabindex="-1"><a class="header-anchor" href="#fes-dev" aria-hidden="true">#</a> fes dev</h3><p>启动本地开发服务器进行项目的开发调试。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes dev [options]
|
||||
|
||||
start a local http service for development
|
||||
|
||||
Options:
|
||||
--port http service port, like 8000
|
||||
--https whether to turn on the https service
|
||||
-h, --help display help for command
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes dev <span class="token parameter variable">--port</span><span class="token operator">=</span><span class="token number">8000</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-build" tabindex="-1"><a class="header-anchor" href="#fes-build" aria-hidden="true">#</a> fes build</h3><p>编译构建 web 产物。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes build [options]
|
||||
|
||||
build application for production
|
||||
|
||||
Options:
|
||||
-h, --help display help for command
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如：</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>fes build
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-help" tabindex="-1"><a class="header-anchor" href="#fes-help" aria-hidden="true">#</a> fes help</h3><p>打印帮助文档。 比如：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes <span class="token builtin class-name">help</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-info" tabindex="-1"><a class="header-anchor" href="#fes-info" aria-hidden="true">#</a> fes info</h3><p>打印当前项目的有用的环境信息，用来帮助定位问题。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes info [options]
|
||||
|
||||
print debugging information about your environment
|
||||
|
||||
Options:
|
||||
-h, --help display help for command
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes info
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h3 id="fes-webpack" tabindex="-1"><a class="header-anchor" href="#fes-webpack" aria-hidden="true">#</a> fes webpack</h3><p>查看项目使用的 webpack 配置。</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>Usage: fes webpack [options]
|
||||
|
||||
inspect webpack configurations
|
||||
|
||||
Options:
|
||||
--rule <ruleName> inspect a specific module rule
|
||||
--plugin <pluginName> inspect a specific plugin
|
||||
--rules list all module rule names
|
||||
--plugins list all plugin names
|
||||
--verbose show full function definitions in output
|
||||
-h, --help display help for command
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如：</p><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>fes webpack
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>`,26);function x(k,_){const i=d("CodeGroupItem"),l=d("CodeGroup");return t(),u("div",null,[v,s(l,null,{default:a(()=>[s(i,{title:"PNPM",active:""},{default:a(()=>[p]),_:1}),s(i,{title:"NPM"},{default:a(()=>[m]),_:1})]),_:1}),b,s(l,null,{default:a(()=>[s(i,{title:"PNPM",active:""},{default:a(()=>[h]),_:1}),s(i,{title:"NPM"},{default:a(()=>[f]),_:1})]),_:1}),g])}const y=r(o,[["render",x],["__file","index.html.vue"]]);export{y as default};
|
||||
@ -1,6 +0,0 @@
|
||||
import{_ as r,o as d,c as n,e as t,b as e,d as a,f as i}from"./app.136d0839.js";const l={},h=i('<h1 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h1><h2 id="痛点" tabindex="-1"><a class="header-anchor" href="#痛点" aria-hidden="true">#</a> 痛点</h2><p>在开发一个前端项目之前，我们可能需要做如下准备工作：</p><ul><li>搭建开发环境</li><li>约定代码规范</li><li>封装API请求</li><li>配置路由</li><li>实现布局、菜单、导航</li><li>实现登录</li><li>权限管理</li><li>...</li></ul><p>除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。</p><h2 id="fes-js-是什么" tabindex="-1"><a class="header-anchor" href="#fes-js-是什么" aria-hidden="true">#</a> Fes.js 是什么？</h2><p>Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。</p><p>它主要具备以下特点：</p><ul><li><p>🚀 <strong>快速</strong> ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。</p></li><li><p>🧨 <strong>简单</strong> ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。</p></li><li><p>💪 <strong>健壮</strong> ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。</p></li><li><p>📦 <strong>可扩展</strong> ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。</p></li><li><p>📡 <strong>面向未来</strong> ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。</p></li></ul><h2 id="fes-js-如何工作" tabindex="-1"><a class="header-anchor" href="#fes-js-如何工作" aria-hidden="true">#</a> Fes.js 如何工作？</h2><h3 id="架构" tabindex="-1"><a class="header-anchor" href="#架构" aria-hidden="true">#</a> 架构</h3>',11),c=["src"],o=e("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1),u=e("h3",{id:"插件和插件集",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#插件和插件集","aria-hidden":"true"},"#"),a(" 插件和插件集")],-1),p=["src"],f=i(`<h3 id="fes-临时文件" tabindex="-1"><a class="header-anchor" href="#fes-临时文件" aria-hidden="true">#</a> .fes 临时文件</h3><p>.fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。</p><p>你通常会在 .fes 下看到以下目录</p><div class="language-text line-numbers-mode" data-ext="text"><pre class="language-text"><code>+ .fes
|
||||
+ core # 内部插件生成
|
||||
+ pluginA # 外部插件生成
|
||||
+ presetB # 外部插件生成
|
||||
+ fes.js # 入口文件
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>临时文件是 Fes.js 中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。</p><p>你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 fes 时都会被删除并重新生成。</p><h2 id="为什么不是" tabindex="-1"><a class="header-anchor" href="#为什么不是" aria-hidden="true">#</a> 为什么不是 ...?</h2><h3 id="vue-cli" tabindex="-1"><a class="header-anchor" href="#vue-cli" aria-hidden="true">#</a> Vue CLI</h3><p>Vue CLI 是基于 Vue.js 进行快速开发的完整系统，提供交互式脚手架、丰富的官方插件，并且可通过插件进行扩展，他在打包层把体验做到了极致，但是不包含路由，不是框架。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。</p><h3 id="umi" tabindex="-1"><a class="header-anchor" href="#umi" aria-hidden="true">#</a> UMI</h3><p>UMI 是个很好的选择，Fes.js 很多功能是借鉴 UMI 做的。UMI 是基于 React 封装的应用级框架，贯彻着函数式编程的思维。而 Vue 有所不同，虽然 Vue 3.0 向函数式迈了一大步，但大家可能依然喜欢编写 <code>.vue</code>文件，而非 <code>.jsx</code> 文件。两种思维方式会导致部分API设计上有所差异，虽然 UMI 有 <code>plugin-vue</code> ，但不太 "vue"。推荐喜欢 React 的同学使用 UMI。</p>`,11);function m(s,g){return d(),n("div",null,[h,t('  '),e("img",{src:s.$withBase("framework.png"),alt:"架构"},null,8,c),o,u,e("p",null,[e("img",{src:s.$withBase("plugins.png"),alt:"插件",title:"插件",style:{width:"500px"},class:"medium-zoom-image"},null,8,p)]),a(" Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。 "),f])}const _=r(l,[["render",m],["__file","index.html.vue"]]);export{_ as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-76cd065c","path":"/reference/api/","title":"API","lang":"zh-CN","frontmatter":{"sidebar":"auto"},"excerpt":"","headers":[{"level":2,"title":"基础API","slug":"基础api","link":"#基础api","children":[{"level":3,"title":"plugin","slug":"plugin","link":"#plugin","children":[]},{"level":3,"title":"ApplyPluginsType","slug":"applypluginstype","link":"#applypluginstype","children":[]},{"level":3,"title":"defineRouteMeta","slug":"defineroutemeta","link":"#defineroutemeta","children":[]},{"level":3,"title":"defineBuildConfig","slug":"definebuildconfig","link":"#definebuildconfig","children":[]},{"level":3,"title":"defineRuntimeConfig","slug":"defineruntimeconfig","link":"#defineruntimeconfig","children":[]}]},{"level":2,"title":"路由API","slug":"路由api","link":"#路由api","children":[{"level":3,"title":"getRouter","slug":"getrouter","link":"#getrouter","children":[]},{"level":3,"title":"getHistory","slug":"gethistory","link":"#gethistory","children":[]},{"level":3,"title":"useRoute","slug":"useroute","link":"#useroute","children":[]},{"level":3,"title":"useRouter","slug":"userouter","link":"#userouter","children":[]},{"level":3,"title":"onBeforeRouteUpdate","slug":"onbeforerouteupdate","link":"#onbeforerouteupdate","children":[]},{"level":3,"title":"onBeforeRouteLeave","slug":"onbeforerouteleave","link":"#onbeforerouteleave","children":[]},{"level":3,"title":"createWebHashHistory","slug":"createwebhashhistory","link":"#createwebhashhistory","children":[]},{"level":3,"title":"createWebHistory","slug":"createwebhistory","link":"#createwebhistory","children":[]},{"level":3,"title":"createMemoryHistory","slug":"creatememoryhistory","link":"#creatememoryhistory","children":[]},{"level":3,"title":"createRouter","slug":"createrouter","link":"#createrouter","children":[]},{"level":3,"title":"RouterLink","slug":"routerlink","link":"#routerlink","children":[]},{"level":3,"title":"useLink","slug":"uselink","link":"#uselink","children":[]},{"level":3,"title":"RouterView","slug":"routerview","link":"#routerview","children":[]},{"level":3,"title":"其他 Router Methods","slug":"其他-router-methods","link":"#其他-router-methods","children":[]}]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/api/README.md"}');export{e as data};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as d,r as i,o,c as r,b as l,a as t,w as s,d as e,e as c}from"./app.136d0839.js";const a={},_=l("h1",{id:"介绍",tabindex:"-1"},[l("a",{class:"header-anchor",href:"#介绍","aria-hidden":"true"},"#"),e(" 介绍")],-1),h=l("h2",{id:"插件列表",tabindex:"-1"},[l("a",{class:"header-anchor",href:"#插件列表","aria-hidden":"true"},"#"),e(" 插件列表")],-1),f=l("thead",null,[l("tr",null,[l("th",null,"插件"),l("th",null,"介绍")])],-1),p=l("td",null,"提供对页面资源的权限控制能力",-1),g=l("td",null,"提供统一的枚举存取及丰富的函数来处理枚举",-1),m=l("td",null,"svg 文件自动注册为组件",-1),j=l("td",null,[e("基于 "),l("code",null,"Jest"),e("，提供单元测试、覆盖测试能力")],-1),w=l("td",null,"简单的配置即可拥有布局，包括导航以及侧边栏",-1),x=l("td",null,[e("基于 "),l("code",null,"Vue I18n"),e("，提供国际化能力")],-1),k=l("td",null,"简易的数据管理方案",-1),V=l("td",null,[e("基于 "),l("code",null,"Axios"),e(" 封装的 request，内置防止重复请求、请求节流、错误处理等功能")],-1),b=l("td",null,[e("基于 "),l("code",null,"Vuex"),e(", 提供状态管理能力")],-1),q=l("td",null,[e("基于 "),l("code",null,"qiankun"),e("，提供微服务能力")],-1),v=l("td",null,"样式支持sass",-1),C=l("td",null,[e("提供代码编辑器能力， 基于"),l("code",null,"monaco-editor"),e("（VS Code使用的代码编辑器）")],-1),B=l("td",null,[e("基于 "),l("code",null,"windicss"),e("，提供原子化 CSS 能力")],-1),N=l("td",null,[e("基于 "),l("code",null,"pinia"),e("，提供状态管理")],-1),y=l("td",null,"水印",-1),S=l("td",null,"swc",-1),F=l("h2",{id:"架构",tabindex:"-1"},[l("a",{class:"header-anchor",href:"#架构","aria-hidden":"true"},"#"),e(" 架构")],-1),L=["src"],R=l("p",null,"Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。",-1);function A(u,E){const n=i("RouterLink");return o(),r("div",null,[_,h,l("table",null,[f,l("tbody",null,[l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/access.html"},{default:s(()=>[e("@fesjs/plugin-access")]),_:1})]),p]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/enums.html"},{default:s(()=>[e("@fesjs/plugin-enums")]),_:1})]),g]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/icon.html"},{default:s(()=>[e("@fesjs/plugin-icon")]),_:1})]),m]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/jest.html"},{default:s(()=>[e("@fesjs/plugin-jest")]),_:1})]),j]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/layout.html"},{default:s(()=>[e("@fesjs/plugin-layout")]),_:1})]),w]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/locale.html"},{default:s(()=>[e("@fesjs/plugin-locale")]),_:1})]),x]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/model.html"},{default:s(()=>[e("@fesjs/plugin-model")]),_:1})]),k]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/request.html"},{default:s(()=>[e("@fesjs/plugin-request")]),_:1})]),V]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/vuex.html"},{default:s(()=>[e("@fesjs/plugin-vuex")]),_:1})]),b]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/qiankun.html"},{default:s(()=>[e("@fesjs/plugin-qiankun")]),_:1})]),q]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/sass.html"},{default:s(()=>[e("@fesjs/plugin-sass")]),_:1})]),v]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/editor.html"},{default:s(()=>[e("@fesjs/plugin-monaco-editor")]),_:1})]),C]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/windicss.html"},{default:s(()=>[e("@fesjs/plugin-windicss")]),_:1})]),B]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/pinia.html"},{default:s(()=>[e("@fesjs/plugin-pinia")]),_:1})]),N]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/watermark.html"},{default:s(()=>[e("@fesjs/plugin-watermark")]),_:1})]),y]),l("tr",null,[l("td",null,[t(n,{to:"/reference/plugin/plugins/swc.html"},{default:s(()=>[e("@fesjs/plugin-swc")]),_:1})]),S])])]),F,c('  '),l("img",{src:u.$withBase("framework.png"),alt:"架构"},null,8,L),R])}const J=d(a,[["render",A],["__file","index.html.vue"]]);export{J as default};
|
||||
@ -1,17 +0,0 @@
|
||||
import{_ as a,o as n,c as s,f as e}from"./app.136d0839.js";const p={},i=e(`<h1 id="插件介绍" tabindex="-1"><a class="header-anchor" href="#插件介绍" aria-hidden="true">#</a> 插件介绍</h1><h2 id="开始" tabindex="-1"><a class="header-anchor" href="#开始" aria-hidden="true">#</a> 开始</h2><p>一个插件是一个 <code>npm</code> 包，它能够为 Fes.js 创建的项目添加额外的功能，这些功能包括：</p><ul><li>项目的 webpack 配置。</li><li>修改项目的 babel 配置。</li><li>添加新的 fes 命令 - 例如 <code>@fes/plugin-jest</code> 添加了 <code>fes test</code> 命令，允许开发者运行单元测试。</li><li>集成 Vue 的插件。</li><li>修改路由配置</li><li>提供运行时 API</li><li>...</li></ul><p>插件的入口是一个函数，函数会以 API 对象作为第一个参数：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">api</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
api<span class="token punctuation">.</span><span class="token function">describe</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'esbuild'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">schema</span><span class="token punctuation">(</span><span class="token parameter">joi</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> joi<span class="token punctuation">.</span><span class="token function">object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">default</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">enableBy</span><span class="token operator">:</span> api<span class="token punctuation">.</span>EnableBy<span class="token punctuation">.</span>config<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>API 对象是构建流程管理 Service 类的实例，api 提供一些有用的方法帮助你开发插件。</p><p><code>api.describe</code>用来描述插件：</p><ul><li><strong>key</strong>， 插件的 <code>key</code>，可以理解为插件的名称，在 <code>.fes.js</code> 中用 <code>key</code> 配置此插件。</li><li><strong>config</strong>，插件的配置信息： <ul><li>schema，定义配置的类型</li><li>default，默认配置</li></ul></li><li><strong>enableBy</strong>， 是否开启插件，可配置某些场景下禁用插件。</li></ul><h2 id="创建插件" tabindex="-1"><a class="header-anchor" href="#创建插件" aria-hidden="true">#</a> 创建插件</h2><h5 id="第一步-安装create-fes-app" tabindex="-1"><a class="header-anchor" href="#第一步-安装create-fes-app" aria-hidden="true">#</a> 第一步：安装<code>create-fes-app</code></h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> @fesjs/create-fes-app
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第二步-创建插件项目" tabindex="-1"><a class="header-anchor" href="#第二步-创建插件项目" aria-hidden="true">#</a> 第二步：创建插件项目</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code>create-fes-app pluginName
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>在询问<code>Pick an template</code>时选择<code>Plugin</code>!</p><h5 id="第三步-进入插件目录-安装依赖" tabindex="-1"><a class="header-anchor" href="#第三步-进入插件目录-安装依赖" aria-hidden="true">#</a> 第三步：进入插件目录 & 安装依赖</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> pluginName <span class="token operator">&</span> <span class="token function">pnpm</span> i
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第四步-启动编译" tabindex="-1"><a class="header-anchor" href="#第四步-启动编译" aria-hidden="true">#</a> 第四步：启动编译</h5><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">pnpm</span> dev
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h5 id="第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" tabindex="-1"><a class="header-anchor" href="#第五步-使用插件-api-完成你的插件-可以参考其他插件理解-api-用法和场景" aria-hidden="true">#</a> 第五步：使用插件 API 完成你的插件！（可以参考其他插件理解 api 用法和场景）</h5><h2 id="发布到-npm" tabindex="-1"><a class="header-anchor" href="#发布到-npm" aria-hidden="true">#</a> 发布到 npm</h2><p>以 <code>@fesjs/preset-</code>、<code>@fesjs/plugin-</code>、<code>@webank/fes-preset-</code>、<code>@webank/fes-plugin-</code>、<code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头的依赖会被 Fes.js 自动注册为插件或插件集。</p><p>所以编写好的插件想发布到 npm 供其他人使用，包名必须是 <code>fes-preset-</code> 和 <code>fes-plugin-</code> 开头。</p>`,23),c=[i];function t(o,l){return n(),s("div",null,c)}const r=a(p,[["render",t],["__file","index.html.vue"]]);export{r as default};
|
||||
@ -1,17 +0,0 @@
|
||||
import{_ as i,r as a,o as r,c as d,a as s,w as t,b as e,d as n}from"./app.136d0839.js";const u={},m=e("h2",{id:"像数-1-2-3-一样容易",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#像数-1-2-3-一样容易","aria-hidden":"true"},"#"),n(" 像数 1, 2, 3 一样容易")],-1),p=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` create @fesjs/fes-app myapp
|
||||
|
||||
`),e("span",{class:"token comment"},"# 安装依赖"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` i
|
||||
|
||||
`),e("span",{class:"token comment"},"# 运行"),n(`
|
||||
`),e("span",{class:"token function"},"pnpm"),n(` dev
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),h=e("div",{class:"language-bash line-numbers-mode","data-ext":"sh"},[e("pre",{class:"language-bash"},[e("code",null,[e("span",{class:"token comment"},"# 创建模板"),n(`
|
||||
npx @fesjs/create-fes-app myapp
|
||||
|
||||
`),e("span",{class:"token comment"},"# 安装依赖"),n(`
|
||||
`),e("span",{class:"token function"},"npm"),n(),e("span",{class:"token function"},"install"),n(`
|
||||
|
||||
`),e("span",{class:"token comment"},"# 运行"),n(`
|
||||
`),e("span",{class:"token function"},"npm"),n(` run dev
|
||||
`)])]),e("div",{class:"line-numbers","aria-hidden":"true"},[e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"}),e("div",{class:"line-number"})])],-1),_=e("h2",{id:"反馈",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#反馈","aria-hidden":"true"},"#"),n(" 反馈")],-1),b=e("thead",null,[e("tr",null,[e("th",null,"Github Issue"),e("th",null,"Fes.js 开源运营小助手")])],-1),f={href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noopener noreferrer"},v=e("td",null,[e("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})],-1);function k(g,x){const l=a("CodeGroupItem"),c=a("CodeGroup"),o=a("ExternalLinkIcon");return r(),d("div",null,[m,s(c,null,{default:t(()=>[s(l,{title:"PNPM",active:""},{default:t(()=>[p]),_:1}),s(l,{title:"NPM"},{default:t(()=>[h]),_:1})]),_:1}),_,e("table",null,[b,e("tbody",null,[e("tr",null,[e("td",null,[e("a",f,[n("@fesjs/fes.js/issues"),s(o)])]),v])])])])}const C=i(u,[["render",k],["__file","index.html.vue"]]);export{C as default};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-2c05b6e0","path":"/reference/config/","title":"","lang":"zh-CN","frontmatter":{"sidebar":"auto"},"excerpt":"","headers":[{"level":2,"title":"配置文件","slug":"配置文件","link":"#配置文件","children":[{"level":3,"title":"配置文件解析","slug":"配置文件解析","link":"#配置文件解析","children":[]},{"level":3,"title":"配置智能提示","slug":"配置智能提示","link":"#配置智能提示","children":[]}]},{"level":2,"title":"共享配置","slug":"共享配置","link":"#共享配置","children":[{"level":3,"title":"alias","slug":"alias","link":"#alias","children":[]},{"level":3,"title":"autoprefixer","slug":"autoprefixer","link":"#autoprefixer","children":[]},{"level":3,"title":"base","slug":"base","link":"#base","children":[]},{"level":3,"title":"builder","slug":"builder","link":"#builder","children":[]},{"level":3,"title":"define","slug":"define","link":"#define","children":[]},{"level":3,"title":"dynamicImport","slug":"dynamicimport","link":"#dynamicimport","children":[]},{"level":3,"title":"inlineLimit","slug":"inlinelimit","link":"#inlinelimit","children":[]},{"level":3,"title":"mock","slug":"mock","link":"#mock","children":[]},{"level":3,"title":"mountElementId","slug":"mountelementid","link":"#mountelementid","children":[]},{"level":3,"title":"outputPath","slug":"outputpath","link":"#outputpath","children":[]},{"level":3,"title":"plugins","slug":"plugins","link":"#plugins","children":[]},{"level":3,"title":"proxy","slug":"proxy","link":"#proxy","children":[]},{"level":3,"title":"publicPath","slug":"publicpath","link":"#publicpath","children":[]},{"level":3,"title":"router","slug":"router","link":"#router","children":[]},{"level":3,"title":"singular","slug":"singular","link":"#singular","children":[]},{"level":3,"title":"targets","slug":"targets","link":"#targets","children":[]},{"level":3,"title":"terserOptions","slug":"terseroptions","link":"#terseroptions","children":[]},{"level":3,"title":"title","slug":"title","link":"#title","children":[]}]},{"level":2,"title":"webpack 专属配置","slug":"webpack-专属配置","link":"#webpack-专属配置","children":[{"level":3,"title":"analyze","slug":"analyze","link":"#analyze","children":[]},{"level":3,"title":"chainWebpack","slug":"chainwebpack","link":"#chainwebpack","children":[]},{"level":3,"title":"cssLoader","slug":"cssloader","link":"#cssloader","children":[]},{"level":3,"title":"copy","slug":"copy","link":"#copy","children":[]},{"level":3,"title":"devServer","slug":"devserver","link":"#devserver","children":[]},{"level":3,"title":"devtool","slug":"devtool","link":"#devtool","children":[]},{"level":3,"title":"extraCSS","slug":"extracss","link":"#extracss","children":[]},{"level":3,"title":"exportStatic","slug":"exportstatic","link":"#exportstatic","children":[]},{"level":3,"title":"externals","slug":"externals","link":"#externals","children":[]},{"level":3,"title":"extraBabelPlugins","slug":"extrababelplugins","link":"#extrababelplugins","children":[]},{"level":3,"title":"extraBabelPresets","slug":"extrababelpresets","link":"#extrababelpresets","children":[]},{"level":3,"title":"extraPostCSSPlugins","slug":"extrapostcssplugins","link":"#extrapostcssplugins","children":[]},{"level":3,"title":"html","slug":"html","link":"#html","children":[]},{"level":3,"title":"lessLoader","slug":"lessloader","link":"#lessloader","children":[]},{"level":3,"title":"nodeModulesTransform","slug":"nodemodulestransform","link":"#nodemodulestransform","children":[]},{"level":3,"title":"postcssLoader","slug":"postcssloader","link":"#postcssloader","children":[]},{"level":3,"title":"vueLoader","slug":"vueloader","link":"#vueloader","children":[]}]},{"level":2,"title":"Vite 专属配置","slug":"vite-专属配置","link":"#vite-专属配置","children":[{"level":3,"title":"viteOption","slug":"viteoption","link":"#viteoption","children":[]},{"level":3,"title":"viteVuePlugin","slug":"vitevueplugin","link":"#vitevueplugin","children":[]},{"level":3,"title":"viteVueJsx","slug":"vitevuejsx","link":"#vitevuejsx","children":[]},{"level":3,"title":"viteLegacy","slug":"vitelegacy","link":"#vitelegacy","children":[]},{"level":3,"title":"viteHtml","slug":"vitehtml","link":"#vitehtml","children":[]}]},{"level":2,"title":"更多配置项","slug":"更多配置项","link":"#更多配置项","children":[]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/config/README.md"}');export{e as data};
|
||||
@ -1 +0,0 @@
|
||||
const e=JSON.parse('{"key":"v-494b840e","path":"/reference/plugin/dev/","title":"插件介绍","lang":"zh-CN","frontmatter":{},"excerpt":"","headers":[{"level":2,"title":"开始","slug":"开始","link":"#开始","children":[]},{"level":2,"title":"创建插件","slug":"创建插件","link":"#创建插件","children":[]},{"level":2,"title":"发布到 npm","slug":"发布到-npm","link":"#发布到-npm","children":[]}],"git":{"updatedTime":1682250578000,"contributors":[{"name":"听海","email":"445436867@qq.com","commits":1}]},"filePathRelative":"reference/plugin/dev/README.md"}');export{e as data};
|
||||
File diff suppressed because one or more lines are too long
@ -1,78 +0,0 @@
|
||||
import{_ as p,r as o,o as i,c as r,b as s,d as n,a as e,f as t}from"./app.136d0839.js";const c={},l=t(`<h1 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h1><p>Fes.js 统一了API的出口，所有运行时API（包含Fes.js内置API和插件提供的API）全部通过<code>@fesjs/fes</code>导出。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> someApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="基础api" tabindex="-1"><a class="header-anchor" href="#基础api" aria-hidden="true">#</a> 基础API</h2><h3 id="plugin" tabindex="-1"><a class="header-anchor" href="#plugin" aria-hidden="true">#</a> plugin</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>主要在插件里面使用，项目代码中一般用不到。</p></div><p>运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> plugin<span class="token punctuation">,</span> ApplyPluginsType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// 注册插件</span>
|
||||
plugin<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">apply</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dva</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'foo'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
plugin<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">apply</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dva</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">bar</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// 执行插件</span>
|
||||
<span class="token comment">// 得到 { foo: 1, bar: 1 }</span>
|
||||
plugin<span class="token punctuation">.</span><span class="token function">applyPlugins</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'dva'</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">type</span><span class="token operator">:</span> ApplyPluginsType<span class="token punctuation">.</span>modify<span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">initialValue</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">args</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">async</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="plugin-register-参数包含" tabindex="-1"><a class="header-anchor" href="#plugin-register-参数包含" aria-hidden="true">#</a> <strong>plugin.register</strong> 参数包含:</h4><ul><li>apply 插件文件导出的内容</li><li>path 插件文件路径</li></ul><h4 id="plugin-applyplugins-参数包含" tabindex="-1"><a class="header-anchor" href="#plugin-applyplugins-参数包含" aria-hidden="true">#</a> <strong>plugin.applyPlugins</strong> 参数包含:</h4><ul><li>key，坑位的 key</li><li>type，执行方式类型，详见 <a href="#applypluginstype">ApplyPluginsType</a></li><li>initialValue，初始值</li><li>args，参数</li><li>async，是否异步执行且返回 Promise</li></ul><h3 id="applypluginstype" tabindex="-1"><a class="header-anchor" href="#applypluginstype" aria-hidden="true">#</a> ApplyPluginsType</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>主要在插件里面使用，项目代码中一般用不到。</p></div><p>运行时插件执行类型，enum 类型，包含三个属性：</p><ul><li>compose，用于合并执行多个函数，函数可决定前序函数的执行时机</li><li>modify，用于修改值</li><li>event，用于执行事件，前面没有依赖关系</li></ul><h3 id="defineroutemeta" tabindex="-1"><a class="header-anchor" href="#defineroutemeta" aria-hidden="true">#</a> defineRouteMeta</h3><p>定义页面的元信息</p><h3 id="definebuildconfig" tabindex="-1"><a class="header-anchor" href="#definebuildconfig" aria-hidden="true">#</a> defineBuildConfig</h3><p>定义构建配置</p><h3 id="defineruntimeconfig" tabindex="-1"><a class="header-anchor" href="#defineruntimeconfig" aria-hidden="true">#</a> defineRuntimeConfig</h3><p>定义运行时配置</p><h2 id="路由api" tabindex="-1"><a class="header-anchor" href="#路由api" aria-hidden="true">#</a> 路由API</h2>`,23),u={href:"https://next.router.vuejs.org/introduction.html",target:"_blank",rel:"noopener noreferrer"},d=t(`<h3 id="getrouter" tabindex="-1"><a class="header-anchor" href="#getrouter" aria-hidden="true">#</a> getRouter</h3><p>返回当前 <code>router</code> 实例。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">getRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="gethistory" tabindex="-1"><a class="header-anchor" href="#gethistory" aria-hidden="true">#</a> getHistory</h3><p>返回当前路由的History</p><h3 id="useroute" tabindex="-1"><a class="header-anchor" href="#useroute" aria-hidden="true">#</a> useRoute</h3><p>返回当前 <code>route</code> 实例，相当于在模板内使用 <code>$route</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRoute <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token function">useRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="userouter" tabindex="-1"><a class="header-anchor" href="#userouter" aria-hidden="true">#</a> useRouter</h3><p>返回 <code>router</code> 实例，相当于在模板语法中使用 <code>$router</code>。必须在 <code>setup</code> 函数内调用。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onbeforerouteupdate" tabindex="-1"><a class="header-anchor" href="#onbeforerouteupdate" aria-hidden="true">#</a> onBeforeRouteUpdate</h3><p>添加导航守卫，在当前路由即将更新时触发。类似于之前的<code>beforeRouteUpdate</code>，但是可用于任何组件。卸载组件时，将移除守卫。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onBeforeRouteUpdate <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
<span class="token function">onBeforeRouteUpdate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="onbeforerouteleave" tabindex="-1"><a class="header-anchor" href="#onbeforerouteleave" aria-hidden="true">#</a> onBeforeRouteLeave</h3><p>添加导航守卫，在当前路由即将离开时触发。类似于之前的<code>beforeRouteLeave</code>，但可用于任何组件。卸载组件时，将移除守卫。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> onBeforeRouteLeave <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@fesjs/fes"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
<span class="token function">onBeforeRouteLeave</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="createwebhashhistory" tabindex="-1"><a class="header-anchor" href="#createwebhashhistory" aria-hidden="true">#</a> createWebHashHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意URL时这非常有用。注意：如果 SEO 对你很重要，你应该使用 <code>createWebHistory</code>。</p><h3 id="createwebhistory" tabindex="-1"><a class="header-anchor" href="#createwebhistory" aria-hidden="true">#</a> createWebHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。</p><h3 id="creatememoryhistory" tabindex="-1"><a class="header-anchor" href="#creatememoryhistory" aria-hidden="true">#</a> createMemoryHistory</h3><div class="custom-container tip"><p class="custom-container-title">提示</p><p>在开发插件时可能用上，平时一般用不上</p></div><p>创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。</p><h3 id="createrouter" tabindex="-1"><a class="header-anchor" href="#createrouter" aria-hidden="true">#</a> createRouter</h3>`,27),k={href:"https://next.router.vuejs.org/api/#routeroptions",target:"_blank",rel:"noopener noreferrer"},v=t(`<h3 id="routerlink" tabindex="-1"><a class="header-anchor" href="#routerlink" aria-hidden="true">#</a> RouterLink</h3><p>使用自定义组件路由器链接来创建链接，而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Go to About<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-link</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div>`,3),h={href:"https://next.router.vuejs.org/api/#router-link-props",target:"_blank",rel:"noopener noreferrer"},m={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},b=s("h3",{id:"uselink",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#uselink","aria-hidden":"true"},"#"),n(" useLink")],-1),g={href:"https://next.router.vuejs.org/api/#router-link-s-v-slot",target:"_blank",rel:"noopener noreferrer"},f=t(`<div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> RouterLink<span class="token punctuation">,</span> useLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@fesjs/fes'</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'AppLink'</span><span class="token punctuation">,</span>
|
||||
|
||||
<span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// add @ts-ignore if using TypeScript</span>
|
||||
<span class="token operator">...</span>RouterLink<span class="token punctuation">.</span>props<span class="token punctuation">,</span>
|
||||
<span class="token literal-property property">inactiveClass</span><span class="token operator">:</span> String<span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
|
||||
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// \`props\` contains \`to\` and any other prop that can be passed to <router-link></span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> navigate<span class="token punctuation">,</span> href<span class="token punctuation">,</span> route<span class="token punctuation">,</span> isActive<span class="token punctuation">,</span> isExactActive <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useLink</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
|
||||
|
||||
<span class="token comment">// profit!</span>
|
||||
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span> isExternalLink <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="routerview" tabindex="-1"><a class="header-anchor" href="#routerview" aria-hidden="true">#</a> RouterView</h3><p>router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方，以适应你的布局。</p><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>router-view</span> <span class="token attr-name">v-slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ Component, route }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>component</span> <span class="token attr-name">:is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Component<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>router-view</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,4),y={href:"https://next.router.vuejs.org/api/#router-view-props",target:"_blank",rel:"noopener noreferrer"},x={href:"https://next.router.vuejs.org/api/#router-view-s-v-slot",target:"_blank",rel:"noopener noreferrer"},_=s("h3",{id:"其他-router-methods",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#其他-router-methods","aria-hidden":"true"},"#"),n(" 其他 Router Methods")],-1),w={href:"https://next.router.vuejs.org/api/#router-methods",target:"_blank",rel:"noopener noreferrer"};function j(R,L){const a=o("ExternalLinkIcon");return i(),r("div",null,[l,s("p",null,[n("Fes.js 路由基于 "),s("a",u,[n("Vue Router 4.0"),e(a)]),n("，想了解更多的同学可以看看官方文档。")]),d,s("p",null,[n("创建一个路由器实例，该实例可用于 Vue 应用程序。查看"),s("a",k,[n("路由器选项"),e(a)]),n("，了解可以传递的所有属性的列表。")]),v,s("p",null,[n("可以查看"),s("a",h,[n("官方文档"),e(a)]),n("了解更多 RouterLink 的 Porps。查看"),s("a",m,[n("官方文档"),e(a)]),n("了解 RouterLink 的作用域插槽。")]),b,s("p",null,[n("返回的结果跟 RouterLink 的作用域插槽的属性一致，查看"),s("a",g,[n("官方API"),e(a)]),n("了解更多。")]),f,s("p",null,[n("可以查看"),s("a",y,[n("官方文档"),e(a)]),n("了解更多 RouterView 的 Porps。查看"),s("a",x,[n("官方文档"),e(a)]),n("了解 RouterView 的作用域插槽。")]),_,s("p",null,[n("查看"),s("a",w,[n("vue-router 官方文档"),e(a)]),n("了解更多。")])])}const A=p(c,[["render",j],["__file","index.html.vue"]]);export{A as default};
|
||||
15
assets/index.md.e5088b28.js
Normal file
15
assets/index.md.e5088b28.js
Normal file
@ -0,0 +1,15 @@
|
||||
import{_ as a,o as t,c as n,I as o,E as c,J as p,C as s,a as e}from"./chunks/framework.c1e1f082.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"}'),i={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-YPp5r",id:"tab-6P0lgp_",checked:"checked"}),s("label",{for:"tab-6P0lgp_"},"pnpm"),s("input",{type:"radio",name:"group-YPp5r",id:"tab-cCXBL8Y"}),s("label",{for:"tab-cCXBL8Y"},"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:"#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:"#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:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"install")]),e(`
|
||||
`),s("span",{class:"line"}),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 运行")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"run"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])])])],-1),y=s("h2",{id:"反馈",tabindex:"-1"},[e("反馈 "),s("a",{class:"header-anchor",href:"#反馈","aria-label":'Permalink to "反馈"'},"")],-1),C=s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Github Issue"),s("th",null,"Fes.js 开源运营小助手")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("a",{href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noreferrer"},"@fesjs/fes.js/issues")]),s("td",null,[s("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})])])])],-1);function h(u,m,g,f,b,_){const l=p("HomeContent");return t(),n("div",null,[o(l,null,{default:c(()=>[r,d,y,C]),_:1})])}const F=a(i,[["render",h]]);export{D as __pageData,F as default};
|
||||
15
assets/index.md.e5088b28.lean.js
Normal file
15
assets/index.md.e5088b28.lean.js
Normal file
@ -0,0 +1,15 @@
|
||||
import{_ as a,o as t,c as n,I as o,E as c,J as p,C as s,a as e}from"./chunks/framework.c1e1f082.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"}'),i={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-YPp5r",id:"tab-6P0lgp_",checked:"checked"}),s("label",{for:"tab-6P0lgp_"},"pnpm"),s("input",{type:"radio",name:"group-YPp5r",id:"tab-cCXBL8Y"}),s("label",{for:"tab-cCXBL8Y"},"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:"#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:"#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:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"install")]),e(`
|
||||
`),s("span",{class:"line"}),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#676E95","font-style":"italic"}},"# 运行")]),e(`
|
||||
`),s("span",{class:"line"},[s("span",{style:{color:"#FFCB6B"}},"npm"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"run"),s("span",{style:{color:"#A6ACCD"}}," "),s("span",{style:{color:"#C3E88D"}},"dev")])])])])])],-1),y=s("h2",{id:"反馈",tabindex:"-1"},[e("反馈 "),s("a",{class:"header-anchor",href:"#反馈","aria-label":'Permalink to "反馈"'},"")],-1),C=s("table",null,[s("thead",null,[s("tr",null,[s("th",null,"Github Issue"),s("th",null,"Fes.js 开源运营小助手")])]),s("tbody",null,[s("tr",null,[s("td",null,[s("a",{href:"https://github.com/WeBankFinTech/fes.js/issues",target:"_blank",rel:"noreferrer"},"@fesjs/fes.js/issues")]),s("td",null,[s("img",{src:"https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg",height:"250"})])])])],-1);function h(u,m,g,f,b,_){const l=p("HomeContent");return t(),n("div",null,[o(l,null,{default:c(()=>[r,d,y,C]),_:1})])}const F=a(i,[["render",h]]);export{D as __pageData,F as default};
|
||||
BIN
assets/inter-italic-cyrillic-ext.33bd5a8e.woff2
Normal file
BIN
assets/inter-italic-cyrillic-ext.33bd5a8e.woff2
Normal file
Binary file not shown.
BIN
assets/inter-italic-cyrillic.ea42a392.woff2
Normal file
BIN
assets/inter-italic-cyrillic.ea42a392.woff2
Normal file
Binary file not shown.
BIN
assets/inter-italic-greek-ext.4fbe9427.woff2
Normal file
BIN
assets/inter-italic-greek-ext.4fbe9427.woff2
Normal file
Binary file not shown.
BIN
assets/inter-italic-greek.8f4463c4.woff2
Normal file
BIN
assets/inter-italic-greek.8f4463c4.woff2
Normal file
Binary file not shown.
BIN
assets/inter-italic-latin-ext.bd8920cc.woff2
Normal file
BIN
assets/inter-italic-latin-ext.bd8920cc.woff2
Normal file
Binary file not shown.
BIN
assets/inter-italic-latin.bd3b6f56.woff2
Normal file
BIN
assets/inter-italic-latin.bd3b6f56.woff2
Normal file
Binary file not shown.
BIN
assets/inter-italic-vietnamese.6ce511fb.woff2
Normal file
BIN
assets/inter-italic-vietnamese.6ce511fb.woff2
Normal file
Binary file not shown.
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