mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-10-14 10:52:28 +08:00
349 lines
59 KiB
HTML
349 lines
59 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>目录结构 | Fes.js</title>
|
||
<meta name="generator" content="VuePress 1.5.4">
|
||
|
||
<meta name="description" content="中台应用前端快速解决方案">
|
||
<link rel="preload" href="/fes.js/assets/css/0.styles.b6d96aa7.css" as="style"><link rel="preload" href="/fes.js/assets/js/app.7ac13123.js" as="script"><link rel="preload" href="/fes.js/assets/js/2.56b3886c.js" as="script"><link rel="preload" href="/fes.js/assets/js/40.54266c8b.js" as="script"><link rel="preload" href="/fes.js/assets/js/10.2329d47f.js" as="script"><link rel="prefetch" href="/fes.js/assets/js/100.a8c0b37a.js"><link rel="prefetch" href="/fes.js/assets/js/101.d0d13c58.js"><link rel="prefetch" href="/fes.js/assets/js/102.fe4c5431.js"><link rel="prefetch" href="/fes.js/assets/js/103.1e0250da.js"><link rel="prefetch" href="/fes.js/assets/js/104.61dead22.js"><link rel="prefetch" href="/fes.js/assets/js/105.e7c079d9.js"><link rel="prefetch" href="/fes.js/assets/js/106.c7c5a406.js"><link rel="prefetch" href="/fes.js/assets/js/107.bfd74ae5.js"><link rel="prefetch" href="/fes.js/assets/js/108.5d6f1cb6.js"><link rel="prefetch" href="/fes.js/assets/js/109.3ed5c334.js"><link rel="prefetch" href="/fes.js/assets/js/11.b4d5367a.js"><link rel="prefetch" href="/fes.js/assets/js/110.caabd92b.js"><link rel="prefetch" href="/fes.js/assets/js/111.0141da48.js"><link rel="prefetch" href="/fes.js/assets/js/112.cfcc7229.js"><link rel="prefetch" href="/fes.js/assets/js/113.758f9823.js"><link rel="prefetch" href="/fes.js/assets/js/114.9f35bf06.js"><link rel="prefetch" href="/fes.js/assets/js/115.8ffbdd8d.js"><link rel="prefetch" href="/fes.js/assets/js/116.27f2e3de.js"><link rel="prefetch" href="/fes.js/assets/js/117.7aac4f7b.js"><link rel="prefetch" href="/fes.js/assets/js/118.a5d65639.js"><link rel="prefetch" href="/fes.js/assets/js/119.2a8725e5.js"><link rel="prefetch" href="/fes.js/assets/js/12.cbaf95bc.js"><link rel="prefetch" href="/fes.js/assets/js/120.c7f32a7f.js"><link rel="prefetch" href="/fes.js/assets/js/121.a1ec0e52.js"><link rel="prefetch" href="/fes.js/assets/js/122.b1ad092f.js"><link rel="prefetch" href="/fes.js/assets/js/123.86f0532a.js"><link rel="prefetch" href="/fes.js/assets/js/124.ec311481.js"><link rel="prefetch" href="/fes.js/assets/js/125.8045057a.js"><link rel="prefetch" href="/fes.js/assets/js/126.dff05f5f.js"><link rel="prefetch" href="/fes.js/assets/js/127.5220a27f.js"><link rel="prefetch" href="/fes.js/assets/js/128.d0f912e7.js"><link rel="prefetch" href="/fes.js/assets/js/129.a8202d99.js"><link rel="prefetch" href="/fes.js/assets/js/13.7788c802.js"><link rel="prefetch" href="/fes.js/assets/js/130.02a8d9aa.js"><link rel="prefetch" href="/fes.js/assets/js/131.3c5d70fe.js"><link rel="prefetch" href="/fes.js/assets/js/132.9ddbe3a4.js"><link rel="prefetch" href="/fes.js/assets/js/133.22227f49.js"><link rel="prefetch" href="/fes.js/assets/js/134.ade2d38f.js"><link rel="prefetch" href="/fes.js/assets/js/135.946abbf8.js"><link rel="prefetch" href="/fes.js/assets/js/136.c5915197.js"><link rel="prefetch" href="/fes.js/assets/js/137.89297891.js"><link rel="prefetch" href="/fes.js/assets/js/138.65574a12.js"><link rel="prefetch" href="/fes.js/assets/js/139.2cd935e4.js"><link rel="prefetch" href="/fes.js/assets/js/14.8fac330f.js"><link rel="prefetch" href="/fes.js/assets/js/140.293a0265.js"><link rel="prefetch" href="/fes.js/assets/js/141.e159c5b6.js"><link rel="prefetch" href="/fes.js/assets/js/142.dd4cdd5c.js"><link rel="prefetch" href="/fes.js/assets/js/143.6fdfc5f7.js"><link rel="prefetch" href="/fes.js/assets/js/144.2bd01d75.js"><link rel="prefetch" href="/fes.js/assets/js/145.9957ee9b.js"><link rel="prefetch" href="/fes.js/assets/js/146.a469b3a8.js"><link rel="prefetch" href="/fes.js/assets/js/147.c8aaada6.js"><link rel="prefetch" href="/fes.js/assets/js/148.0faccf52.js"><link rel="prefetch" href="/fes.js/assets/js/149.b475e1f0.js"><link rel="prefetch" href="/fes.js/assets/js/15.0d5c6b20.js"><link rel="prefetch" href="/fes.js/assets/js/150.17b2fa65.js"><link rel="prefetch" href="/fes.js/assets/js/151.59972751.js"><link rel="prefetch" href="/fes.js/assets/js/152.53506863.js"><link rel="prefetch" href="/fes.js/assets/js/153.a62dbdff.js"><link rel="prefetch" href="/fes.js/assets/js/154.1b94b041.js"><link rel="prefetch" href="/fes.js/assets/js/155.2f06d48e.js"><link rel="prefetch" href="/fes.js/assets/js/156.671e7902.js"><link rel="prefetch" href="/fes.js/assets/js/157.8b9e81df.js"><link rel="prefetch" href="/fes.js/assets/js/158.21377514.js"><link rel="prefetch" href="/fes.js/assets/js/159.cfb0cdcf.js"><link rel="prefetch" href="/fes.js/assets/js/16.f10005a4.js"><link rel="prefetch" href="/fes.js/assets/js/160.cc1540a1.js"><link rel="prefetch" href="/fes.js/assets/js/161.bd0fc3cd.js"><link rel="prefetch" href="/fes.js/assets/js/162.bde5a33d.js"><link rel="prefetch" href="/fes.js/assets/js/163.fe5c2089.js"><link rel="prefetch" href="/fes.js/assets/js/164.2e44dada.js"><link rel="prefetch" href="/fes.js/assets/js/165.e7d98f39.js"><link rel="prefetch" href="/fes.js/assets/js/166.71b72815.js"><link rel="prefetch" href="/fes.js/assets/js/167.cb126445.js"><link rel="prefetch" href="/fes.js/assets/js/168.51b6f9e4.js"><link rel="prefetch" href="/fes.js/assets/js/169.3187cae3.js"><link rel="prefetch" href="/fes.js/assets/js/17.80716878.js"><link rel="prefetch" href="/fes.js/assets/js/170.423e830e.js"><link rel="prefetch" href="/fes.js/assets/js/171.e10ad2c1.js"><link rel="prefetch" href="/fes.js/assets/js/172.b0b807d7.js"><link rel="prefetch" href="/fes.js/assets/js/173.3574e789.js"><link rel="prefetch" href="/fes.js/assets/js/174.2705e6bc.js"><link rel="prefetch" href="/fes.js/assets/js/175.fc49bba7.js"><link rel="prefetch" href="/fes.js/assets/js/176.1cf66e65.js"><link rel="prefetch" href="/fes.js/assets/js/177.346a4793.js"><link rel="prefetch" href="/fes.js/assets/js/178.c736e9d6.js"><link rel="prefetch" href="/fes.js/assets/js/179.dd1ccb6b.js"><link rel="prefetch" href="/fes.js/assets/js/18.7f22e3ec.js"><link rel="prefetch" href="/fes.js/assets/js/180.690eeb9b.js"><link rel="prefetch" href="/fes.js/assets/js/181.a809ffbb.js"><link rel="prefetch" href="/fes.js/assets/js/182.d2b7f97d.js"><link rel="prefetch" href="/fes.js/assets/js/183.0bb8dfc9.js"><link rel="prefetch" href="/fes.js/assets/js/184.6d240817.js"><link rel="prefetch" href="/fes.js/assets/js/185.d19a1c22.js"><link rel="prefetch" href="/fes.js/assets/js/186.0c358954.js"><link rel="prefetch" href="/fes.js/assets/js/187.1ec43d29.js"><link rel="prefetch" href="/fes.js/assets/js/188.dae3f98c.js"><link rel="prefetch" href="/fes.js/assets/js/189.024c389a.js"><link rel="prefetch" href="/fes.js/assets/js/19.702f97e5.js"><link rel="prefetch" href="/fes.js/assets/js/190.21969647.js"><link rel="prefetch" href="/fes.js/assets/js/191.58e5c5e5.js"><link rel="prefetch" href="/fes.js/assets/js/20.b265f3f4.js"><link rel="prefetch" href="/fes.js/assets/js/21.606a9299.js"><link rel="prefetch" href="/fes.js/assets/js/22.99c374c9.js"><link rel="prefetch" href="/fes.js/assets/js/23.ed43a371.js"><link rel="prefetch" href="/fes.js/assets/js/24.16673676.js"><link rel="prefetch" href="/fes.js/assets/js/25.d462e128.js"><link rel="prefetch" href="/fes.js/assets/js/26.abfba309.js"><link rel="prefetch" href="/fes.js/assets/js/27.c3088ae8.js"><link rel="prefetch" href="/fes.js/assets/js/28.16acfbcd.js"><link rel="prefetch" href="/fes.js/assets/js/29.ca572092.js"><link rel="prefetch" href="/fes.js/assets/js/3.5e11613d.js"><link rel="prefetch" href="/fes.js/assets/js/30.d39beb81.js"><link rel="prefetch" href="/fes.js/assets/js/31.e55a61a1.js"><link rel="prefetch" href="/fes.js/assets/js/32.add16ab1.js"><link rel="prefetch" href="/fes.js/assets/js/33.f605afe1.js"><link rel="prefetch" href="/fes.js/assets/js/34.de9ee359.js"><link rel="prefetch" href="/fes.js/assets/js/35.d6201419.js"><link rel="prefetch" href="/fes.js/assets/js/36.067393a5.js"><link rel="prefetch" href="/fes.js/assets/js/37.90e20ad7.js"><link rel="prefetch" href="/fes.js/assets/js/38.0c353308.js"><link rel="prefetch" href="/fes.js/assets/js/39.0dc359a2.js"><link rel="prefetch" href="/fes.js/assets/js/4.9d864fda.js"><link rel="prefetch" href="/fes.js/assets/js/41.e5915060.js"><link rel="prefetch" href="/fes.js/assets/js/42.ace93022.js"><link rel="prefetch" href="/fes.js/assets/js/43.38092443.js"><link rel="prefetch" href="/fes.js/assets/js/44.4b79e40d.js"><link rel="prefetch" href="/fes.js/assets/js/45.fb304e2c.js"><link rel="prefetch" href="/fes.js/assets/js/46.472c10a1.js"><link rel="prefetch" href="/fes.js/assets/js/47.ff5a356f.js"><link rel="prefetch" href="/fes.js/assets/js/48.86e85b89.js"><link rel="prefetch" href="/fes.js/assets/js/49.c5bb16cb.js"><link rel="prefetch" href="/fes.js/assets/js/5.3fe51578.js"><link rel="prefetch" href="/fes.js/assets/js/50.1900433a.js"><link rel="prefetch" href="/fes.js/assets/js/51.037ca69a.js"><link rel="prefetch" href="/fes.js/assets/js/52.a8d80c09.js"><link rel="prefetch" href="/fes.js/assets/js/53.2ed52ab3.js"><link rel="prefetch" href="/fes.js/assets/js/54.33ae21ce.js"><link rel="prefetch" href="/fes.js/assets/js/55.80412639.js"><link rel="prefetch" href="/fes.js/assets/js/56.3f904233.js"><link rel="prefetch" href="/fes.js/assets/js/57.5e6fe058.js"><link rel="prefetch" href="/fes.js/assets/js/58.8d1fc65c.js"><link rel="prefetch" href="/fes.js/assets/js/59.43427b99.js"><link rel="prefetch" href="/fes.js/assets/js/6.6fc44206.js"><link rel="prefetch" href="/fes.js/assets/js/60.b1bc1e0e.js"><link rel="prefetch" href="/fes.js/assets/js/61.969ddc3c.js"><link rel="prefetch" href="/fes.js/assets/js/62.798037ce.js"><link rel="prefetch" href="/fes.js/assets/js/63.4e2bb5e8.js"><link rel="prefetch" href="/fes.js/assets/js/64.4b661afe.js"><link rel="prefetch" href="/fes.js/assets/js/65.0fd9d81f.js"><link rel="prefetch" href="/fes.js/assets/js/66.5e6218d9.js"><link rel="prefetch" href="/fes.js/assets/js/67.eba75639.js"><link rel="prefetch" href="/fes.js/assets/js/68.bdf81488.js"><link rel="prefetch" href="/fes.js/assets/js/69.74a89467.js"><link rel="prefetch" href="/fes.js/assets/js/7.95ca4a58.js"><link rel="prefetch" href="/fes.js/assets/js/70.9e20bb29.js"><link rel="prefetch" href="/fes.js/assets/js/71.15c857e4.js"><link rel="prefetch" href="/fes.js/assets/js/72.0628eb14.js"><link rel="prefetch" href="/fes.js/assets/js/73.e22387d7.js"><link rel="prefetch" href="/fes.js/assets/js/74.f49b77ea.js"><link rel="prefetch" href="/fes.js/assets/js/75.8e2db202.js"><link rel="prefetch" href="/fes.js/assets/js/76.29f9246b.js"><link rel="prefetch" href="/fes.js/assets/js/77.684cf181.js"><link rel="prefetch" href="/fes.js/assets/js/78.41cd0a7e.js"><link rel="prefetch" href="/fes.js/assets/js/79.ac8c1e35.js"><link rel="prefetch" href="/fes.js/assets/js/8.298d27ef.js"><link rel="prefetch" href="/fes.js/assets/js/80.2e78c1da.js"><link rel="prefetch" href="/fes.js/assets/js/81.5c04171f.js"><link rel="prefetch" href="/fes.js/assets/js/82.97f83886.js"><link rel="prefetch" href="/fes.js/assets/js/83.d211f1d3.js"><link rel="prefetch" href="/fes.js/assets/js/84.3314ecc1.js"><link rel="prefetch" href="/fes.js/assets/js/85.089aabfe.js"><link rel="prefetch" href="/fes.js/assets/js/86.c1efb58b.js"><link rel="prefetch" href="/fes.js/assets/js/87.56369081.js"><link rel="prefetch" href="/fes.js/assets/js/88.bfcb3442.js"><link rel="prefetch" href="/fes.js/assets/js/89.2b1da9a0.js"><link rel="prefetch" href="/fes.js/assets/js/9.c994cdf9.js"><link rel="prefetch" href="/fes.js/assets/js/90.addff0a9.js"><link rel="prefetch" href="/fes.js/assets/js/91.a06f8cc8.js"><link rel="prefetch" href="/fes.js/assets/js/92.ddfaa402.js"><link rel="prefetch" href="/fes.js/assets/js/93.e5738182.js"><link rel="prefetch" href="/fes.js/assets/js/94.aaa2d9d8.js"><link rel="prefetch" href="/fes.js/assets/js/95.45e38043.js"><link rel="prefetch" href="/fes.js/assets/js/96.841b4360.js"><link rel="prefetch" href="/fes.js/assets/js/97.6068a1b7.js"><link rel="prefetch" href="/fes.js/assets/js/98.b5ea7b13.js"><link rel="prefetch" href="/fes.js/assets/js/99.4d5bd9b8.js">
|
||
<link rel="stylesheet" href="/fes.js/assets/css/0.styles.b6d96aa7.css">
|
||
</head>
|
||
<body>
|
||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/fes.js/" class="home-link router-link-active"><!----> <span class="site-name">Fes.js</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/fes.js/guide/" class="nav-link router-link-active">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/fes.js/api/" class="nav-link">
|
||
API参考
|
||
</a></div><div class="nav-item"><a href="/fes.js/ui/" class="nav-link">
|
||
组件
|
||
</a></div><div class="nav-item"><a href="/fes.js/cli/" class="nav-link">
|
||
CLI
|
||
</a></div> <a href="https://github.com/WeBankFinTech/fes.js" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/fes.js/guide/" class="nav-link router-link-active">
|
||
指南
|
||
</a></div><div class="nav-item"><a href="/fes.js/api/" class="nav-link">
|
||
API参考
|
||
</a></div><div class="nav-item"><a href="/fes.js/ui/" class="nav-link">
|
||
组件
|
||
</a></div><div class="nav-item"><a href="/fes.js/cli/" class="nav-link">
|
||
CLI
|
||
</a></div> <a href="https://github.com/WeBankFinTech/fes.js" target="_blank" rel="noopener noreferrer" class="repo-link">
|
||
GitHub
|
||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/fes.js/guide/" aria-current="page" class="sidebar-link">介绍</a></li><li><a href="/fes.js/guide/install.html" class="sidebar-link">安装</a></li><li><a href="/fes.js/guide/play.html" class="sidebar-link">快速上手</a></li><li><a href="/fes.js/guide/directory-structure.html" aria-current="page" class="active sidebar-link">目录结构</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fes.js/guide/directory-structure.html#目录规范" class="sidebar-link">目录规范</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/directory-structure.html#fes-config-js" class="sidebar-link">fes.config.js</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/directory-structure.html#mock-js" class="sidebar-link">mock.js</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/directory-structure.html#app-js" class="sidebar-link">app.js</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/directory-structure.html#src-assets" class="sidebar-link">src/assets</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/directory-structure.html#src-components" class="sidebar-link">src/components</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/directory-structure.html#src-pages" class="sidebar-link">src/pages</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/directory-structure.html#src-static" class="sidebar-link">src/static</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/directory-structure.html#webpack-config-js" class="sidebar-link">webpack.config.js</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/directory-structure.html#自定义目录结构" class="sidebar-link">自定义目录结构</a></li></ul></li><li><a href="/fes.js/guide/layout.html" class="sidebar-link">布局</a></li><li><a href="/fes.js/guide/route.html" class="sidebar-link">路由</a></li><li><a href="/fes.js/guide/permisson.html" class="sidebar-link">权限管理</a></li><li><a href="/fes.js/guide/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/fes.js/guide/option.html" class="sidebar-link">Vue增强</a></li><li><a href="/fes.js/guide/unit.html" class="sidebar-link">单元测试</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>插件</span> <!----></p> <!----></section></li><li><a href="/fes.js/guide/releaseNote.html" class="sidebar-link">Release 记录</a></li><li><a href="/fes.js/guide/contact.html" class="sidebar-link">联系我们</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="目录结构"><a href="#目录结构" class="header-anchor">#</a> 目录结构</h1> <p>在<a href="#/guide/play">快速入门</a>中，大家对框架应该有初步的印象，接下来我们了解下目录结构。</p> <h2 id="目录规范"><a href="#目录规范" class="header-anchor">#</a> 目录规范</h2> <p>Fes.js遵循 <strong>“约定优于配置”</strong> 的原则，推荐的目录结构如下:</p> <div class="language- extra-class"><pre class="language-text"><code>fes-project
|
||
├── .eslintrc.js
|
||
├── fes.config.js
|
||
├── mock.js(可选)
|
||
├── webpack.config.js(可选)
|
||
├── package.json
|
||
└── src
|
||
├── app.js
|
||
├── assets
|
||
│ ├── images
|
||
│ │ ├── bg.png
|
||
│ │ └── logo.png
|
||
│ ├── styles
|
||
│ │ ├── main.scss
|
||
│ │ └── variables.scss
|
||
│ └── utils.js
|
||
├── components
|
||
│ ├── fesHeader.vue
|
||
│ ├── fesLeft.vue
|
||
│ └── wbDate.vue
|
||
├── pages
|
||
│ ├── home
|
||
│ │ └── index.vue
|
||
│ └── list
|
||
│ ├── components
|
||
│ │ └── common.vue
|
||
│ ├── edit
|
||
│ │ └── index.vue
|
||
│ └── index.vue
|
||
└── static
|
||
└── favicon.ico
|
||
</code></pre></div><h2 id="fes-config-js"><a href="#fes-config-js" class="header-anchor">#</a> fes.config.js</h2> <p>配置文件</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 是否采用行内 sso 登录</span>
|
||
sso<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 可选有vertical、horizontal，默认vertical</span>
|
||
mode<span class="token operator">:</span> <span class="token string">'vertical'</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 可选有blue、dark，默认blue</span>
|
||
theme<span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 项目名称</span>
|
||
fesName<span class="token operator">:</span> <span class="token string">'xx 运营平台'</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 图标，可以将 favicon.ico 文件放入 src/static</span>
|
||
favicon<span class="token operator">:</span> <span class="token string">'static/favicon.ico'</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 是否显示左侧区域，默认true</span>
|
||
FesLeft<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 是否显示头部区域，默认为false</span>
|
||
FesHeader<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 是否开启路由懒加载</span>
|
||
lazyRouter<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 是否开启 gzip 压缩，也可以传一个 obj 声明压缩参数</span>
|
||
compress<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 环境变量配置, 默认使用local环境</span>
|
||
env<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 本地开发环境</span>
|
||
local<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
api<span class="token operator">:</span> <span class="token string">''</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 开发环境 fes [dev/build] --env=develop</span>
|
||
develop<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
api<span class="token operator">:</span> <span class="token string">'http://h.adm-test.webank.io'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 生产环境 fes [dev/build] --env=prod </span>
|
||
prod<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
api<span class="token operator">:</span> <span class="token string">'http://adm.webank.io'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 配置角色，控制显示的菜单内容和路由权限，使用FesApp.setRole('unLogin')来修改当前用户的角色</span>
|
||
roles<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
unLogin<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/home'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
service<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/list'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
admin<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/list'</span><span class="token punctuation">,</span> <span class="token string">'/api/fes'</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 数据字典</span>
|
||
map<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
status<span class="token operator">:</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 string">'2'</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 comment">// 左侧菜单配置，仅支持二级菜单</span>
|
||
menu<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token comment">// 一级菜单支持配置icon</span>
|
||
icon<span class="token operator">:</span> <span class="token string">'static/bell.png'</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 菜单名称</span>
|
||
title<span class="token operator">:</span> <span class="token string">'接口'</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 菜单对应的路由</span>
|
||
path<span class="token operator">:</span> <span class="token string">'/api'</span><span class="token punctuation">,</span>
|
||
<span class="token comment">// 子菜单</span>
|
||
subMenu<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
title<span class="token operator">:</span> <span class="token string">'Fes'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'/api/fes'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
title<span class="token operator">:</span> <span class="token string">'FesApp'</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'/api/fesApp'</span>
|
||
<span class="token punctuation">}</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">// 国际化 默认为zh-cn</span>
|
||
i18n<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
locale<span class="token operator">:</span> <span class="token string">'en'</span><span class="token punctuation">,</span>
|
||
messages<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string">'zh-cn'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
menu<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">'接口'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
overview<span class="token operator">:</span> <span class="token string">'概述'</span><span class="token punctuation">,</span>
|
||
i18n<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
internationalization<span class="token operator">:</span> <span class="token string">'国际化，基于'</span><span class="token punctuation">,</span>
|
||
achieve<span class="token operator">:</span> <span class="token string">'实现。'</span><span class="token punctuation">,</span>
|
||
ui<span class="token operator">:</span> <span class="token string">'UI组件'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
title<span class="token operator">:</span> <span class="token string">'标题'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
en<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
menu<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">interface</span><span class="token operator">:</span> <span class="token string">'interface'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
overview<span class="token operator">:</span> <span class="token string">'Overview'</span><span class="token punctuation">,</span>
|
||
i18n<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
internationalization<span class="token operator">:</span> <span class="token string">'internationalization，base on'</span><span class="token punctuation">,</span>
|
||
achieve<span class="token operator">:</span> <span class="token string">'to achieve.'</span><span class="token punctuation">,</span>
|
||
ui<span class="token operator">:</span> <span class="token string">'UI components'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
title<span class="token operator">:</span> <span class="token string">'title'</span>
|
||
<span 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><h2 id="mock-js"><a href="#mock-js" class="header-anchor">#</a> mock.js</h2> <p>当运行环境<code>--env=local</code>时fes.js启动mock模拟后台服务，配置如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">cgiMock<span class="token punctuation">,</span> Mock<span class="token punctuation">,</span> faker</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
|
||
<span class="token keyword">var</span> Random <span class="token operator">=</span> Mock<span class="token punctuation">.</span>Random<span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">//前缀，全局（可选）</span>
|
||
cgiMock<span class="token punctuation">.</span>prefix <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 返回一个数字</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/number'</span><span class="token punctuation">,</span> <span class="token number">123</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 返回一个json</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
url<span class="token operator">:</span> <span class="token string">'/json'</span><span class="token punctuation">,</span>
|
||
result<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string">"code"</span><span class="token operator">:</span> <span class="token string">"400101"</span><span class="token punctuation">,</span>
|
||
<span class="token string">"msg"</span><span class="token operator">:</span> <span class="token string">"不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String"</span><span class="token punctuation">,</span>
|
||
<span class="token string">"transactionTime"</span><span class="token operator">:</span> <span class="token string">"20170309171146"</span><span class="token punctuation">,</span>
|
||
<span class="token string">"success"</span><span class="token operator">:</span> <span class="token boolean">false</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">//利用mock.js 产生随机文本</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/text'</span><span class="token punctuation">,</span> Random<span class="token punctuation">.</span><span class="token function">cparagraph</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 返回一个字符串 利用mock.js 产生随机字符</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/string'</span><span class="token punctuation">,</span> Mock<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token string">"string|1-10"</span><span class="token operator">:</span> <span class="token string">"★"</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 正则匹配url, 返回一个字符串</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token regex">/\/abc|\/xyz/</span><span class="token punctuation">,</span> <span class="token string">'regexp test!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token regex">/\/function$/</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'function test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 返回文本 fs.readFileSync</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/file'</span><span class="token punctuation">,</span> cgiMock<span class="token punctuation">.</span><span class="token function">file</span><span class="token punctuation">(</span><span class="token string">'./test.json'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 更复杂的规则配置</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
url<span class="token operator">:</span> <span class="token regex">/\/who/</span><span class="token punctuation">,</span>
|
||
method<span class="token operator">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">result</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>req<span class="token punctuation">.</span>query<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'kwan'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">'kwan'</span><span class="token operator">:</span> <span class="token string">'孤独患者'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||
res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">'Nooooooooooo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
headers<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'text/plain'</span><span class="token punctuation">,</span>
|
||
<span class="token string">'Content-Length'</span><span class="token operator">:</span> <span class="token string">'123'</span><span class="token punctuation">,</span>
|
||
<span class="token string">'ETag'</span><span class="token operator">:</span> <span class="token string">'12345'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
cookies<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'myname'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'kwan'</span><span class="token punctuation">,</span> maxAge<span class="token operator">:</span> <span class="token number">900000</span><span class="token punctuation">,</span> httpOnly<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 comment">//接口随机延迟</span>
|
||
timeout<span class="token operator">:</span> Mock<span class="token punctuation">.</span><span class="token function">mock</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token string">"number|1000-5000"</span><span class="token operator">:</span> <span class="token number">1000</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span>number
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 转发所有请求到指定URL，可以解决跨域</span>
|
||
cgiMock<span class="token punctuation">.</span><span class="token function">proxy</span><span class="token punctuation">(</span><span class="token string">'http://test-adm.weoa.com/xxx'</span><span class="token punctuation">)</span>
|
||
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><p>如果希望部分接口使用Mock，其他接口使用请求转发：</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">cgiMock<span class="token punctuation">,</span> Mock<span class="token punctuation">,</span> faker</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
|
||
<span class="token comment">//新的接口 走数据模拟</span>
|
||
<span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'new'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">//老的接口直接调后台接口</span>
|
||
cgiMock<span class="token punctuation">.</span><span class="token function">proxy</span><span class="token punctuation">(</span><span class="token string">'http://test-adm.weoa.com/xxx'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><h2 id="app-js"><a href="#app-js" class="header-anchor">#</a> app.js</h2> <p>在 <code>fes-core</code> 初始化内部逻辑后执行导出的函数，建议在<code>app.js</code>中编写全局设置，如引入其他第三方插件、注册全局事件、设置应用权限等。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> somePlugin <span class="token keyword">from</span> <span class="token string">'somePlugin'</span>
|
||
<span class="token keyword">import</span> <span class="token string">'./assets/styles/main.scss'</span><span class="token punctuation">;</span>
|
||
|
||
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>somePlugin<span class="token punctuation">)</span>
|
||
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
|
||
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>FesApp<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 boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 设置路由钩子</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>FesApp<span class="token punctuation">.</span><span class="token function">setBeforeRouter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">from</span><span class="token punctuation">,</span> to<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 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 keyword">this</span><span class="token punctuation">.</span>FesApp<span class="token punctuation">.</span><span class="token function">setAfterRouter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">route</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">您浏览到了</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>route<span class="token punctuation">.</span>path<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 设置AJAX配置</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>FesApi<span class="token punctuation">.</span><span class="token function">option</span><span class="token punctuation">(</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 keyword">this</span><span class="token punctuation">.</span>FesApi<span class="token punctuation">.</span><span class="token function">setResponse</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
successCode<span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
|
||
codePath<span class="token operator">:</span> <span class="token string">'code'</span><span class="token punctuation">,</span>
|
||
messagePath<span class="token operator">:</span> <span class="token string">'msg'</span><span class="token punctuation">,</span>
|
||
resultPath<span class="token operator">:</span> <span class="token string">'result'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><h2 id="src-assets"><a href="#src-assets" class="header-anchor">#</a> src/assets</h2> <p>存放公共静态资源，例如样式文件、图片资源等。</p> <h2 id="src-components"><a href="#src-components" class="header-anchor">#</a> src/components</h2> <p>在这个目录下的*.vue组件在编译后会自动注册为全局组件，可以直接在vue单文件的<code><template></template></code>中使用。</p> <h3 id="规则"><a href="#规则" class="header-anchor">#</a> 规则</h3> <p>读取文件名称作为组件名称进行注册，例如<code>src/components/message.vue</code>注册的全局组件名称为<code>message</code>，</p> <h3 id="特殊组件"><a href="#特殊组件" class="header-anchor">#</a> 特殊组件</h3> <p><code>fesHeader.vue</code><br>
|
||
用于自定义页面头部。参数<code>FesHeader</code>控制<code>fesHeader.vue</code> 是否显示。在<code>fes.config.js</code>中配置<code>FesHeader</code>定义全局的，也可以在页面组件中单独配置<code>FesHeader</code>。<br> <code>fesLeft.vue</code><br>
|
||
用于自定义菜单栏。配置参数<code>FesLeft</code>控制<code>fesLeft.vue</code> 是否显示。在<code>fes.config.js</code>中配置<code>FesLeft</code>定义全局的，也可以在页面组件中单独配置<code>FesLeft</code>。</p> <h2 id="src-pages"><a href="#src-pages" class="header-anchor">#</a> src/pages</h2> <p>在<code>pages</code>目录下编写页面，<code>Fes.js</code>会根据<code>pages</code>目录以及文件结构自动生成<a href="https://router.vuejs.org/zh-cn/" target="_blank" rel="noopener noreferrer">Vue-router<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>路由配置。</p> <h3 id="规则-2"><a href="#规则-2" class="header-anchor">#</a> 规则</h3> <div class="language-dir extra-class"><pre class="language-text"><code>pages
|
||
├── index.vue # 根路由页面 路径 index.html#/
|
||
├── a.vue # 路径 /a
|
||
├── b # 文件夹b
|
||
│ ├── index.vue # 路径 /b
|
||
│ ├── @id.vue # 动态路由 /b/:id
|
||
│ └── c.vue # 路径 /b/c
|
||
└── layout.vue # 根路由下所有page共用的外层
|
||
</code></pre></div><ol><li>如果目录下有<code>layout.vue</code>，则子目录对应的路径是当前目录对应路径的子路由。如果没有则子目录对应的路径和当前目录对应路径是平级的。</li> <li>带参数的路径使用<code>@id.vue</code>的形式</li></ol> <h3 id="编译"><a href="#编译" class="header-anchor">#</a> 编译</h3> <p>编译后在<code>.cache</code>目录下生成<code>routeConfig.js</code>，内容如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> layout <span class="token keyword">from</span> <span class="token string">'D:\\git\\fes-template\\src\\pages\\layout.vue'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> index <span class="token keyword">from</span> <span class="token string">'D:\\git\\fes-template\\src\\pages\\index.vue'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> a <span class="token keyword">from</span> <span class="token string">'D:\\git\\fes-template\\src\\pages\\a.vue'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> b_index <span class="token keyword">from</span> <span class="token string">'D:\\git\\fes-template\\src\\pages\\b\\index.vue'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> b__id <span class="token keyword">from</span> <span class="token string">'D:\\git\\fes-template\\src\\pages\\b\\@id.vue'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
<span class="token string">'/'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
component<span class="token operator">:</span> layout<span class="token punctuation">,</span>
|
||
subRoutes<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token string">'/'</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> index
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token string">'/a'</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> a
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token string">'/b'</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'b_index'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> b_index
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token string">'/b/:id'</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
name<span class="token operator">:</span> <span class="token string">'b__id'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> b__id
|
||
<span 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><h2 id="src-static"><a href="#src-static" class="header-anchor">#</a> src/static</h2> <p>不需要经过webpack编译处理的静态资源，可以在页面中通过 URL(static/xxx) 直接引用。<br>
|
||
例如有文件<code>src/static/1.txt</code>，在页面中使用如下：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<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>static/1.txt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
点击下载 1.txt
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><h2 id="webpack-config-js"><a href="#webpack-config-js" class="header-anchor">#</a> webpack.config.js</h2> <p>自定义<code>webpack</code>配置<br> <code>mode</code>是编译命令，<code>configs</code>则是编译中的默认配置</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> CspHtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'csp-html-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">mode<span class="token punctuation">,</span> configs<span class="token punctuation">,</span> webpack</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>mode <span class="token operator">===</span> <span class="token string">'build'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">CspHtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token string">'base-uri'</span><span class="token operator">:</span> <span class="token string">"'self'"</span><span class="token punctuation">,</span>
|
||
<span class="token string">'object-src'</span><span class="token operator">:</span> <span class="token string">"'none'"</span><span class="token punctuation">,</span>
|
||
<span class="token string">'script-src'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token string">"'self'"</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token string">'style-src'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token string">"'self'"</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token string">'connect-src'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token string">"'self'"</span><span class="token punctuation">,</span>
|
||
<span class="token string">'http://adm.webank.io'</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
<span class="token string">'img-src'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
||
<span class="token string">'data:'</span><span class="token punctuation">,</span>
|
||
<span class="token string">"'self'"</span>
|
||
<span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</code></pre></div><h2 id="自定义目录结构"><a href="#自定义目录结构" class="header-anchor">#</a> 自定义目录结构</h2> <p>除了上述目录结构，也可以根据自己的需要增加其他目录，但不能更改现有的目录结构。</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次编辑时间:</span> <span class="time">10/22/2020, 10:09:09 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||
←
|
||
<a href="/fes.js/guide/play.html" class="prev">
|
||
快速上手
|
||
</a></span> <span class="next"><a href="/fes.js/guide/layout.html">
|
||
布局
|
||
</a>
|
||
→
|
||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||
<script src="/fes.js/assets/js/app.7ac13123.js" defer></script><script src="/fes.js/assets/js/2.56b3886c.js" defer></script><script src="/fes.js/assets/js/40.54266c8b.js" defer></script><script src="/fes.js/assets/js/10.2329d47f.js" defer></script>
|
||
</body>
|
||
</html>
|