mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
161 lines
44 KiB
HTML
161 lines
44 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.54a65285.css" as="style"><link rel="preload" href="/fes.js/assets/js/app.d4a34833.js" as="script"><link rel="preload" href="/fes.js/assets/js/2.1380c702.js" as="script"><link rel="preload" href="/fes.js/assets/js/28.57f73fbb.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.c569829e.js"><link rel="prefetch" href="/fes.js/assets/js/101.4c4176fa.js"><link rel="prefetch" href="/fes.js/assets/js/102.ba7e3884.js"><link rel="prefetch" href="/fes.js/assets/js/103.ef62cdd7.js"><link rel="prefetch" href="/fes.js/assets/js/104.86034148.js"><link rel="prefetch" href="/fes.js/assets/js/105.3bb92ea5.js"><link rel="prefetch" href="/fes.js/assets/js/106.1df0d2ff.js"><link rel="prefetch" href="/fes.js/assets/js/107.b4c899e6.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.f26621ac.js"><link rel="prefetch" href="/fes.js/assets/js/110.dce23dd6.js"><link rel="prefetch" href="/fes.js/assets/js/111.2476f0f8.js"><link rel="prefetch" href="/fes.js/assets/js/112.bd22c4d5.js"><link rel="prefetch" href="/fes.js/assets/js/113.ca15de1c.js"><link rel="prefetch" href="/fes.js/assets/js/114.957579ae.js"><link rel="prefetch" href="/fes.js/assets/js/115.024593d0.js"><link rel="prefetch" href="/fes.js/assets/js/116.d5cddf01.js"><link rel="prefetch" href="/fes.js/assets/js/117.046ca7d6.js"><link rel="prefetch" href="/fes.js/assets/js/118.11815117.js"><link rel="prefetch" href="/fes.js/assets/js/119.b20cef58.js"><link rel="prefetch" href="/fes.js/assets/js/12.85a9013e.js"><link rel="prefetch" href="/fes.js/assets/js/120.bcc0046b.js"><link rel="prefetch" href="/fes.js/assets/js/121.5670d1e6.js"><link rel="prefetch" href="/fes.js/assets/js/122.7a268c65.js"><link rel="prefetch" href="/fes.js/assets/js/123.91d512e1.js"><link rel="prefetch" href="/fes.js/assets/js/124.b184f22d.js"><link rel="prefetch" href="/fes.js/assets/js/125.2e43132d.js"><link rel="prefetch" href="/fes.js/assets/js/126.ee7d5e3d.js"><link rel="prefetch" href="/fes.js/assets/js/127.45531c4f.js"><link rel="prefetch" href="/fes.js/assets/js/128.32f0a2e5.js"><link rel="prefetch" href="/fes.js/assets/js/129.ef73662a.js"><link rel="prefetch" href="/fes.js/assets/js/13.15a3084c.js"><link rel="prefetch" href="/fes.js/assets/js/130.8df92d78.js"><link rel="prefetch" href="/fes.js/assets/js/131.f76b7077.js"><link rel="prefetch" href="/fes.js/assets/js/132.0af231cd.js"><link rel="prefetch" href="/fes.js/assets/js/133.d597ece5.js"><link rel="prefetch" href="/fes.js/assets/js/134.92e05e2b.js"><link rel="prefetch" href="/fes.js/assets/js/135.9fb556eb.js"><link rel="prefetch" href="/fes.js/assets/js/136.1f72abea.js"><link rel="prefetch" href="/fes.js/assets/js/137.56bccf1e.js"><link rel="prefetch" href="/fes.js/assets/js/138.5a51bcda.js"><link rel="prefetch" href="/fes.js/assets/js/139.b4c67904.js"><link rel="prefetch" href="/fes.js/assets/js/14.4deadb95.js"><link rel="prefetch" href="/fes.js/assets/js/140.cb5be1e8.js"><link rel="prefetch" href="/fes.js/assets/js/141.8ac7a23e.js"><link rel="prefetch" href="/fes.js/assets/js/142.18fed108.js"><link rel="prefetch" href="/fes.js/assets/js/143.770929a1.js"><link rel="prefetch" href="/fes.js/assets/js/144.6575df5c.js"><link rel="prefetch" href="/fes.js/assets/js/145.577f2f6b.js"><link rel="prefetch" href="/fes.js/assets/js/146.185eeeb6.js"><link rel="prefetch" href="/fes.js/assets/js/147.600622ee.js"><link rel="prefetch" href="/fes.js/assets/js/148.ed0ee1ce.js"><link rel="prefetch" href="/fes.js/assets/js/149.96e5521b.js"><link rel="prefetch" href="/fes.js/assets/js/15.43f80fe4.js"><link rel="prefetch" href="/fes.js/assets/js/150.7182a2d1.js"><link rel="prefetch" href="/fes.js/assets/js/151.026f2738.js"><link rel="prefetch" href="/fes.js/assets/js/152.a81d4dfe.js"><link rel="prefetch" href="/fes.js/assets/js/153.4b22b740.js"><link rel="prefetch" href="/fes.js/assets/js/154.772272fb.js"><link rel="prefetch" href="/fes.js/assets/js/155.92d8f811.js"><link rel="prefetch" href="/fes.js/assets/js/156.220bfbea.js"><link rel="prefetch" href="/fes.js/assets/js/157.8807b8cc.js"><link rel="prefetch" href="/fes.js/assets/js/158.3c945605.js"><link rel="prefetch" href="/fes.js/assets/js/159.3c226b1b.js"><link rel="prefetch" href="/fes.js/assets/js/16.21608533.js"><link rel="prefetch" href="/fes.js/assets/js/160.5e21b174.js"><link rel="prefetch" href="/fes.js/assets/js/161.585be5a8.js"><link rel="prefetch" href="/fes.js/assets/js/162.df94370a.js"><link rel="prefetch" href="/fes.js/assets/js/163.a72fddff.js"><link rel="prefetch" href="/fes.js/assets/js/164.a99e2d54.js"><link rel="prefetch" href="/fes.js/assets/js/165.1b64cb5a.js"><link rel="prefetch" href="/fes.js/assets/js/166.b864ebc8.js"><link rel="prefetch" href="/fes.js/assets/js/167.9f5457b2.js"><link rel="prefetch" href="/fes.js/assets/js/168.31c84839.js"><link rel="prefetch" href="/fes.js/assets/js/169.fd9ef1ad.js"><link rel="prefetch" href="/fes.js/assets/js/17.628e539d.js"><link rel="prefetch" href="/fes.js/assets/js/170.3fc4f24a.js"><link rel="prefetch" href="/fes.js/assets/js/171.2c85e346.js"><link rel="prefetch" href="/fes.js/assets/js/172.811f8353.js"><link rel="prefetch" href="/fes.js/assets/js/173.da8fc25b.js"><link rel="prefetch" href="/fes.js/assets/js/174.a10e3d95.js"><link rel="prefetch" href="/fes.js/assets/js/175.5b6b9f95.js"><link rel="prefetch" href="/fes.js/assets/js/176.9ae11d97.js"><link rel="prefetch" href="/fes.js/assets/js/177.263c7c05.js"><link rel="prefetch" href="/fes.js/assets/js/178.8af820ff.js"><link rel="prefetch" href="/fes.js/assets/js/179.340f2124.js"><link rel="prefetch" href="/fes.js/assets/js/18.f74c470d.js"><link rel="prefetch" href="/fes.js/assets/js/180.1721f39e.js"><link rel="prefetch" href="/fes.js/assets/js/181.362ec251.js"><link rel="prefetch" href="/fes.js/assets/js/182.8be6f10c.js"><link rel="prefetch" href="/fes.js/assets/js/183.e0094e6b.js"><link rel="prefetch" href="/fes.js/assets/js/184.4ded5010.js"><link rel="prefetch" href="/fes.js/assets/js/185.ecfa04cc.js"><link rel="prefetch" href="/fes.js/assets/js/186.d85e6338.js"><link rel="prefetch" href="/fes.js/assets/js/187.45ee0ff9.js"><link rel="prefetch" href="/fes.js/assets/js/188.455e3ba7.js"><link rel="prefetch" href="/fes.js/assets/js/189.99089212.js"><link rel="prefetch" href="/fes.js/assets/js/19.adb191bd.js"><link rel="prefetch" href="/fes.js/assets/js/190.8db6e175.js"><link rel="prefetch" href="/fes.js/assets/js/191.58e5c5e5.js"><link rel="prefetch" href="/fes.js/assets/js/20.3c4a8246.js"><link rel="prefetch" href="/fes.js/assets/js/21.bceab9c1.js"><link rel="prefetch" href="/fes.js/assets/js/22.b9c001d7.js"><link rel="prefetch" href="/fes.js/assets/js/23.c3c204bd.js"><link rel="prefetch" href="/fes.js/assets/js/24.727208d4.js"><link rel="prefetch" href="/fes.js/assets/js/25.90ae11fd.js"><link rel="prefetch" href="/fes.js/assets/js/26.30023c0d.js"><link rel="prefetch" href="/fes.js/assets/js/27.81a4b14d.js"><link rel="prefetch" href="/fes.js/assets/js/29.fd64021e.js"><link rel="prefetch" href="/fes.js/assets/js/3.5e11613d.js"><link rel="prefetch" href="/fes.js/assets/js/30.76efdf4f.js"><link rel="prefetch" href="/fes.js/assets/js/31.e869900c.js"><link rel="prefetch" href="/fes.js/assets/js/32.b2e26eb6.js"><link rel="prefetch" href="/fes.js/assets/js/33.747fbc03.js"><link rel="prefetch" href="/fes.js/assets/js/34.de9ee359.js"><link rel="prefetch" href="/fes.js/assets/js/35.fec8dc48.js"><link rel="prefetch" href="/fes.js/assets/js/36.3bc574d9.js"><link rel="prefetch" href="/fes.js/assets/js/37.6bc69c79.js"><link rel="prefetch" href="/fes.js/assets/js/38.58d126e9.js"><link rel="prefetch" href="/fes.js/assets/js/39.c5630ef0.js"><link rel="prefetch" href="/fes.js/assets/js/4.8aad18e1.js"><link rel="prefetch" href="/fes.js/assets/js/40.b0d45bd4.js"><link rel="prefetch" href="/fes.js/assets/js/41.5389b6cf.js"><link rel="prefetch" href="/fes.js/assets/js/42.08a733d0.js"><link rel="prefetch" href="/fes.js/assets/js/43.faa7983a.js"><link rel="prefetch" href="/fes.js/assets/js/44.b9392e16.js"><link rel="prefetch" href="/fes.js/assets/js/45.c8f02fd6.js"><link rel="prefetch" href="/fes.js/assets/js/46.70c14108.js"><link rel="prefetch" href="/fes.js/assets/js/47.be381f75.js"><link rel="prefetch" href="/fes.js/assets/js/48.23b5f25e.js"><link rel="prefetch" href="/fes.js/assets/js/49.c8f41428.js"><link rel="prefetch" href="/fes.js/assets/js/5.ef7cb79c.js"><link rel="prefetch" href="/fes.js/assets/js/50.6b3a205c.js"><link rel="prefetch" href="/fes.js/assets/js/51.952169d3.js"><link rel="prefetch" href="/fes.js/assets/js/52.aa7f7958.js"><link rel="prefetch" href="/fes.js/assets/js/53.0c06e959.js"><link rel="prefetch" href="/fes.js/assets/js/54.7c361990.js"><link rel="prefetch" href="/fes.js/assets/js/55.fc8c73f5.js"><link rel="prefetch" href="/fes.js/assets/js/56.9f4b303c.js"><link rel="prefetch" href="/fes.js/assets/js/57.5750a64c.js"><link rel="prefetch" href="/fes.js/assets/js/58.fafee21e.js"><link rel="prefetch" href="/fes.js/assets/js/59.d3c586c7.js"><link rel="prefetch" href="/fes.js/assets/js/6.1f8c31c8.js"><link rel="prefetch" href="/fes.js/assets/js/60.6b493d4c.js"><link rel="prefetch" href="/fes.js/assets/js/61.6d4baf8a.js"><link rel="prefetch" href="/fes.js/assets/js/62.7a25fd87.js"><link rel="prefetch" href="/fes.js/assets/js/63.5e270828.js"><link rel="prefetch" href="/fes.js/assets/js/64.b17abb2c.js"><link rel="prefetch" href="/fes.js/assets/js/65.ecb4d044.js"><link rel="prefetch" href="/fes.js/assets/js/66.214baade.js"><link rel="prefetch" href="/fes.js/assets/js/67.e98811c2.js"><link rel="prefetch" href="/fes.js/assets/js/68.0b88d471.js"><link rel="prefetch" href="/fes.js/assets/js/69.37a9f9dc.js"><link rel="prefetch" href="/fes.js/assets/js/7.154f06b1.js"><link rel="prefetch" href="/fes.js/assets/js/70.b9276e8b.js"><link rel="prefetch" href="/fes.js/assets/js/71.ec413e60.js"><link rel="prefetch" href="/fes.js/assets/js/72.9b78f34a.js"><link rel="prefetch" href="/fes.js/assets/js/73.5cc116e1.js"><link rel="prefetch" href="/fes.js/assets/js/74.ed3f9134.js"><link rel="prefetch" href="/fes.js/assets/js/75.0ac19e88.js"><link rel="prefetch" href="/fes.js/assets/js/76.8fe79f15.js"><link rel="prefetch" href="/fes.js/assets/js/77.011411bc.js"><link rel="prefetch" href="/fes.js/assets/js/78.932d3724.js"><link rel="prefetch" href="/fes.js/assets/js/79.e5e592c9.js"><link rel="prefetch" href="/fes.js/assets/js/8.6a1e4d2c.js"><link rel="prefetch" href="/fes.js/assets/js/80.87be71a6.js"><link rel="prefetch" href="/fes.js/assets/js/81.55e1c975.js"><link rel="prefetch" href="/fes.js/assets/js/82.ab36fade.js"><link rel="prefetch" href="/fes.js/assets/js/83.14cd3a8f.js"><link rel="prefetch" href="/fes.js/assets/js/84.f413793b.js"><link rel="prefetch" href="/fes.js/assets/js/85.cf1d54c8.js"><link rel="prefetch" href="/fes.js/assets/js/86.9867ea44.js"><link rel="prefetch" href="/fes.js/assets/js/87.7d9d9c02.js"><link rel="prefetch" href="/fes.js/assets/js/88.1fb3748f.js"><link rel="prefetch" href="/fes.js/assets/js/89.c338aa8d.js"><link rel="prefetch" href="/fes.js/assets/js/9.fc7e7822.js"><link rel="prefetch" href="/fes.js/assets/js/90.5aa004be.js"><link rel="prefetch" href="/fes.js/assets/js/91.52c4697f.js"><link rel="prefetch" href="/fes.js/assets/js/92.876ffbbe.js"><link rel="prefetch" href="/fes.js/assets/js/93.0fc5d2e3.js"><link rel="prefetch" href="/fes.js/assets/js/94.159fad62.js"><link rel="prefetch" href="/fes.js/assets/js/95.a7ba2e4a.js"><link rel="prefetch" href="/fes.js/assets/js/96.7e1c7796.js"><link rel="prefetch" href="/fes.js/assets/js/97.171b9202.js"><link rel="prefetch" href="/fes.js/assets/js/98.13a9a6a3.js"><link rel="prefetch" href="/fes.js/assets/js/99.81556285.js">
|
||
<link rel="stylesheet" href="/fes.js/assets/css/0.styles.54a65285.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" aria-current="page" class="active sidebar-link">快速上手</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fes.js/guide/play.html#创建项目" class="sidebar-link">创建项目</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/play.html#项目初始化" class="sidebar-link">项目初始化</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/play.html#启动项目" class="sidebar-link">启动项目</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/play.html#创建一个页面" class="sidebar-link">创建一个页面</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/play.html#配置菜单" class="sidebar-link">配置菜单</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/play.html#实现一个简单的列表" class="sidebar-link">实现一个简单的列表</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/play.html#接口调用与mock数据" class="sidebar-link">接口调用与Mock数据</a></li><li class="sidebar-sub-header"><a href="/fes.js/guide/play.html#编译打包" class="sidebar-link">编译打包</a></li></ul></li><li><a href="/fes.js/guide/directory-structure.html" class="sidebar-link">目录结构</a></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> <h2 id="创建项目"><a href="#创建项目" class="header-anchor">#</a> 创建项目</h2> <div class="language-shell extra-class"><pre class="language-shell"><code>fes init <span class="token punctuation">[</span>projectName<span class="token punctuation">]</span>
|
||
</code></pre></div><h2 id="项目初始化"><a href="#项目初始化" class="header-anchor">#</a> 项目初始化</h2> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token builtin class-name">cd</span> <span class="token punctuation">[</span>projectName<span class="token punctuation">]</span> <span class="token operator">&&</span> <span class="token function">npm</span> i
|
||
</code></pre></div><h2 id="启动项目"><a href="#启动项目" class="header-anchor">#</a> 启动项目</h2> <p>进入工程目录，执行 <code>fes dev</code> 进入开发模式</p> <h2 id="创建一个页面"><a href="#创建一个页面" class="header-anchor">#</a> 创建一个页面</h2> <p>进入 <code>/src/pages</code> 目录，新建文件夹 <code>list</code> ，然后在 <code>list</code> 下新建 <code>index.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code>// list/index.vue
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>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">FesData</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 function">FesReady</span><span class="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><p>访问 <code>http://localhost:5000/#/list</code> 就是刚创建的页面。更多路由配置详见 <a href="/guide/route">路由章节</a>。</p> <h2 id="配置菜单"><a href="#配置菜单" class="header-anchor">#</a> 配置菜单</h2> <p>打开根目录下的 <code>fes.config.js</code></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 左侧菜单配置</span>
|
||
<span class="token string">'menu'</span><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">"列表"</span><span class="token punctuation">,</span>
|
||
path<span class="token operator">:</span> <span class="token string">'/list'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><p>此时左侧菜单栏出现名为 <code>列表</code> 的导航，更多子菜单配置详见 <a href="/fes.js/guide/directory-structure.html#fes-config-js">目录结构-fes.config.js</a>。</p> <h2 id="实现一个简单的列表"><a href="#实现一个简单的列表" class="header-anchor">#</a> 实现一个简单的列表</h2> <p>在上述的<code>index.vue</code>文件下实现一个列表，代码如下：</p> <div class="language-vue extra-class"><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>Fes-search-panel</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Wb-form</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>query<span class="token punctuation">"</span></span> <span class="token attr-name">:label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<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>Form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>姓名：<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wb-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>wb-input</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Form-item</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>身份证：<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>wb-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>wb-input</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Form-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Wb-form</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">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<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>Wb-button</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>primary<span class="token punctuation">"</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<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>Wb-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Fes-search-panel</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Fes-list-panel</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Wb-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data<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>Column</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>date<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>日期<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>Column</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Column</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>name<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>姓名<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>Column</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Column</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>age<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>年龄<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>Column</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Column</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>adr<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>地址<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>Column</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Column</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>status<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>等级<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>Column</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Wb-table</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Pagination</span> <span class="token attr-name">:page-size.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>paginationOption.pageSize<span class="token punctuation">"</span></span> <span class="token attr-name">:current-page.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>paginationOption.currentPage<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">:total-page.sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>paginationOption.totalPage<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">@pagination.change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>changePage<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>Pagination</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Fes-list-panel</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">FesData</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>
|
||
data<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">"张晓刚"</span><span class="token punctuation">,</span>
|
||
age<span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
|
||
date<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2016</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
adr<span class="token operator">:</span> <span class="token string">"北京市海淀区西二旗"</span><span class="token punctuation">,</span>
|
||
status<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>
|
||
name<span class="token operator">:</span> <span class="token string">"李晓红"</span><span class="token punctuation">,</span>
|
||
age<span class="token operator">:</span> <span class="token number">26</span><span class="token punctuation">,</span>
|
||
date<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">2016</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
adr<span class="token operator">:</span> <span class="token string">"北京市海淀区西二旗"</span><span class="token punctuation">,</span>
|
||
status<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>
|
||
paginationOption<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
pageSize<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||
currentPage<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
totalPage<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 punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function">FesReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
methods<span class="token operator">:</span><span class="token punctuation">{</span>
|
||
<span class="token function">search</span><span class="token punctuation">(</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">changePage</span><span class="token punctuation">(</span><span class="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><p>实现的效果如下：
|
||
<img src="/fes.js/assets/img/list.91578e85.png" alt="列表页">
|
||
Fes使用 <code>fes-ui</code> 组件库，具体使用方法详见 <a href="/fes.js/ui/">组件章节</a>，关于FesData数据用法详见 <a href="/fes.js/guide/option.html#fesdata">Vue增强章节</a></p> <h2 id="接口调用与mock数据"><a href="#接口调用与mock数据" class="header-anchor">#</a> 接口调用与Mock数据</h2> <p>打开根目录下的 <code>mock.js</code>，配置模拟接口：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">cgiMock</span><span class="token punctuation">(</span><span class="token string">'/api'</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 keyword">var</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span>req<span class="token punctuation">.</span>body<span class="token punctuation">.</span>pageSize<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||
list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
a<span class="token operator">:</span> i
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
code<span class="token operator">:</span> <span class="token string">"0"</span><span class="token punctuation">,</span>
|
||
msg<span class="token operator">:</span> <span class="token string">"this is message"</span><span class="token punctuation">,</span>
|
||
result<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
list<span class="token operator">:</span> list<span class="token punctuation">,</span>
|
||
page<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
pageSize<span class="token operator">:</span> req<span class="token punctuation">.</span>body<span class="token punctuation">.</span>pageSize<span class="token punctuation">,</span>
|
||
currentPage<span class="token operator">:</span> req<span class="token punctuation">.</span>body<span class="token punctuation">.</span>currentPage<span class="token punctuation">,</span>
|
||
totalPage<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><span 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><p>调用接口：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>FesApi<span class="token punctuation">.</span><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">"/api"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
pageSize<span class="token operator">:</span> <span class="token number">16</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">rst</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>rst<span 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><p>更多关于接口调用与Mock数据的使用方法详见 <a href="/fes.js/api/#fesapi-2">接口调用章节</a> 和 <a href="/fes.js/guide/directory-structure.html#mock-js">mock数据章节</a>。</p> <h2 id="编译打包"><a href="#编译打包" class="header-anchor">#</a> 编译打包</h2> <ul><li>进入工程目录</li> <li>执行 <code>fes build [--env=sit]</code></li> <li>命令执行完在根目录下生成 <code>dist</code> 目录，存放编译后的静态资源文件。</li> <li>使用<code>fes-upload-aomp</code>命令将资源文件打包压缩上传到aomp，执行发布。</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次编辑时间:</span> <span class="time">11/27/2020, 3:38:53 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||
←
|
||
<a href="/fes.js/guide/install.html" class="prev">
|
||
安装
|
||
</a></span> <span class="next"><a href="/fes.js/guide/directory-structure.html">
|
||
目录结构
|
||
</a>
|
||
→
|
||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||
<script src="/fes.js/assets/js/app.d4a34833.js" defer></script><script src="/fes.js/assets/js/2.1380c702.js" defer></script><script src="/fes.js/assets/js/28.57f73fbb.js" defer></script><script src="/fes.js/assets/js/10.2329d47f.js" defer></script>
|
||
</body>
|
||
</html>
|