mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
Updates
This commit is contained in:
chenghongxing
commit
0505efe728
19
404.html
Normal file
19
404.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/12.01a276f6.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/2.8c76fef9.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>There's nothing here.</blockquote> <a href="/" class="router-link-active">
|
||||
Take me home.
|
||||
</a></div></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/12.01a276f6.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
51
advance/api.html
Normal file
51
advance/api.html
Normal file
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>全局API | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/15.288a0b46.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><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="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" aria-current="page" class="active sidebar-link">全局API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/advance/api.html#多页签" class="sidebar-link">多页签</a></li><li class="sidebar-sub-header"><a href="/advance/api.html#权限" class="sidebar-link">权限</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="全局api"><a href="#全局api" class="header-anchor">#</a> 全局API</h1> <p>我们提供了一些全局Api，在日常功能开发中或许会有帮助，它们均被绑定到了页面组件或子组件实例上。<br>
|
||||
在组件内可以直接通过<code>this.$[apiName]</code>的方式调用。如下：</p> <h2 id="多页签"><a href="#多页签" class="header-anchor">#</a> 多页签</h2> <h3 id="closepage-closeroute-nextroute"><a href="#closepage-closeroute-nextroute" class="header-anchor">#</a> $closePage(closeRoute, nextRoute)</h3> <p>该api用于关闭当前已打开的页签，接收两个参数：</p> <ul><li><strong>closeRoute</strong><br>
|
||||
要关闭的页签对应的 route 对象，可简写为路由的 fullPath 字符串值。</li> <li><strong>nextRoute</strong><br>
|
||||
关闭页签要后跳转的 route 对象，可不传，不传则会自动选择打开页签（临近原则）。</li></ul> <h3 id="refreshpage-route"><a href="#refreshpage-route" class="header-anchor">#</a> $refreshPage(route)</h3> <p>该api用于刷新路由对应的页签，接收一个参数：</p> <ul><li><strong>route</strong><br>
|
||||
要刷新的页签对应的 route 对象，可简写为路由的 fullPath 字符串值。</li></ul> <h3 id="openpage-route-title"><a href="#openpage-route-title" class="header-anchor">#</a> $openPage(route, title)</h3> <p>该api用于打开一个新页签，接收两个参数：</p> <ul><li><strong>route</strong><br>
|
||||
要打开的页签对应的 route 对象，可简写为路由的 fullPath 字符串值。</li> <li><strong>title</strong><br>
|
||||
设置打开页签的标题，可不传。</li></ul> <h3 id="setpagetitle-route-title"><a href="#setpagetitle-route-title" class="header-anchor">#</a> $setPageTitle(route, title)</h3> <p>该api用于设置页签的标题，接收两个参数：</p> <ul><li><strong>route</strong><br>
|
||||
要设置的页签对应的 route 对象，可简写为路由的 fullPath 字符串值。</li> <li><strong>title</strong><br>
|
||||
页签的标题。</li></ul> <h2 id="权限"><a href="#权限" class="header-anchor">#</a> 权限</h2> <h3 id="auth-check-type"><a href="#auth-check-type" class="header-anchor">#</a> $auth(check, type)</h3> <p>该api可以用于操作权限校验，接收两个参数：</p> <ul><li><strong>check</strong><br>
|
||||
需要要校验的操作权限</li> <li><strong>type</strong><br>
|
||||
操作权限校验类别，可选 <code>permission</code> 和 <code>role</code>，即通过权限校验还是角色进行校验，可不传（不传的话，会对两种类型都进行匹配，任意一种匹配成功即校验通过）。</li></ul></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/api.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/29/2020, 2:45:05 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/advance/interceptors.html" class="prev">
|
||||
拦截器配置
|
||||
</a></span> <span class="next"><a href="/other/upgrade.html">
|
||||
更新日志
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/15.288a0b46.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
240
advance/async.html
Normal file
240
advance/async.html
Normal file
@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>异步路由和菜单 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/16.82c281d4.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><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="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" aria-current="page" class="active sidebar-link">异步路由和菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/advance/async.html#异步加载路由" class="sidebar-link">异步加载路由</a></li><li class="sidebar-sub-header"><a href="/advance/async.html#异步加载菜单" class="sidebar-link">异步加载菜单</a></li></ul></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="异步路由和菜单"><a href="#异步路由和菜单" class="header-anchor">#</a> 异步路由和菜单</h1> <p>在现实业务中，存在这样的场景，系统的路由和菜单会根据用户的角色变化而变化，或者路由菜单根据用户的权限动态生成。我们为此准备了一套完整的异步加载方案，
|
||||
可以让你很方便的从服务端加载路由和菜单配置，并应用到系统中。</p> <h2 id="异步加载路由"><a href="#异步加载路由" class="header-anchor">#</a> 异步加载路由</h2> <p>动态路由的实现主要有以下四个步骤：</p> <h3 id="开启异步路由设置"><a href="#开启异步路由设置" class="header-anchor">#</a> 开启异步路由设置</h3> <p>在 <code>/config/config.js</code> 文件中设置 <code>asyncRoutes</code> 的值为 true:</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
asyncRoutes<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//异步加载路由，true:开启，false:不开启</span>
|
||||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="注册路由组件"><a href="#注册路由组件" class="header-anchor">#</a> 注册路由组件</h3> <p>基础路由组件包含路由基本配置和对应的视图组件，我们统一在 <code>/router/async/router.map.js</code> 文件中注册它们。它和正常的路由配置基本无异，相当于把完整的路由拆分成单个的路由配置进行注册，为后面的路由动态配置打好基础。<br>
|
||||
一个单独的路由组件注册示例如下：</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code>registerName<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//路由组件注册名称，唯一标识</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'path'</span><span class="token punctuation">,</span> <span class="token comment">//路由path，可缺省，默认取路由注册名称 registerName 的值</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'演示页'</span><span class="token punctuation">,</span> <span class="token comment">//路由名称</span>
|
||||
redirect<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token comment">//路由重定向</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//路由视图</span>
|
||||
icon<span class="token operator">:</span> <span class="token string">'permission'</span><span class="token punctuation">,</span> <span class="token comment">//路由的菜单icon，会注入到路由元数据meta中</span>
|
||||
invisible<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//是否隐藏菜单项，true 隐藏，false 不隐藏，会注入到路由元数据meta中。</span>
|
||||
authority<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//路由权限配置，会注入到路由元数据meta中。可缺省，默认为 ‘*’, 即无权限限制</span>
|
||||
permission<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span> <span class="token comment">//路由需要的权限 </span>
|
||||
role<span class="token operator">:</span> <span class="token string">'admin'</span> <span class="token comment">//路由需要的角色。当permission未设置，通过 role 检查权限</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
page<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//路由的页面数据，会注入到路由元数据meta中</span>
|
||||
title<span class="token operator">:</span> <span class="token string">'演示页'</span><span class="token punctuation">,</span> <span class="token comment">//页面标题</span>
|
||||
breadcrumb<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'首页'</span><span class="token punctuation">,</span> <span class="token string">'演示页'</span><span class="token punctuation">]</span> <span class="token comment">//页面面包屑</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><details class="custom-block details"><summary>点击查看完整的路由注册示例：</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 视图组件</span>
|
||||
<span class="token keyword">const</span> view <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">tabs</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/layouts/tabs'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">blank</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/layouts/BlankView'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">page</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/layouts/PageView'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token comment">// 路由组件注册</span>
|
||||
<span class="token keyword">const</span> routerMap <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
login<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
authority<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">'/login'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/login'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
demo<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'演示页'</span><span class="token punctuation">,</span>
|
||||
renderMenu<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
exp403<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
authority<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'exp403'</span><span class="token punctuation">,</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'403'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/exception/403'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
exp404<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'exp404'</span><span class="token punctuation">,</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'404'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/exception/404'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
exp500<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'exp500'</span><span class="token punctuation">,</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'500'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/exception/500'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
root<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'首页'</span><span class="token punctuation">,</span>
|
||||
redirect<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
|
||||
component<span class="token operator">:</span> view<span class="token punctuation">.</span>tabs
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
parent1<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'父级路由1'</span><span class="token punctuation">,</span>
|
||||
icon<span class="token operator">:</span> <span class="token string">'dashboard'</span><span class="token punctuation">,</span>
|
||||
component<span class="token operator">:</span> view<span class="token punctuation">.</span>blank
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
parent2<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'父级路由2'</span><span class="token punctuation">,</span>
|
||||
icon<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span>
|
||||
component<span class="token operator">:</span> view<span class="token punctuation">.</span>page
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
exception<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'异常页'</span><span class="token punctuation">,</span>
|
||||
icon<span class="token operator">:</span> <span class="token string">'warning'</span><span class="token punctuation">,</span>
|
||||
component<span class="token operator">:</span> view<span class="token punctuation">.</span>blank
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> routerMap
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br></div></div></details> <h3 id="配置基本路由"><a href="#配置基本路由" class="header-anchor">#</a> 配置基本路由</h3> <p>如果没有任何路由，你的应用是无法访问的，所以我们需要在本地配置一些基本的路由，比如登录页、404、403 等。你可以在 <code>/router/async/config.async.js</code> 文件中配置一些本地必要的路由。如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> routesConfig <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">'login'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册的 registerName = login 的路由</span>
|
||||
<span class="token string">'root'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册的 registerName = root 的路由</span>
|
||||
<span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'exp404'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册的 registerName = exp404 的路由</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token comment">//重写 exp404 路由的 path 属性</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'404'</span> <span class="token comment">//重写 exp404 路由的 name 属性</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'exp403'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册的 registerName = exp403 的路由</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'/403'</span><span class="token punctuation">,</span> <span class="token comment">//重写 exp403 路由的 path 属性</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'403'</span> <span class="token comment">//重写 exp403 路由的 name 属性</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>完成配置后，即可通过 <code>routesConfig</code> 和已注册的 <code>routerMap</code> 生成 <a href="https://router.vuejs.org/zh/api/#router-%E6%9E%84%E5%BB%BA%E9%80%89%E9%A1%B9" target="_blank" rel="noopener noreferrer">router.options.routes<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> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
routes<span class="token operator">:</span> <span class="token function">parseRoutes</span><span class="token punctuation">(</span>routesConfig<span class="token punctuation">,</span> routerMap<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><details class="custom-block details"><summary>点击查看完整的 config.async.js 代码</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> routerMap <span class="token keyword">from</span> <span class="token string">'./router.map'</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>parseRoutes<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/routerUtil'</span>
|
||||
|
||||
<span class="token comment">// 异步路由配置</span>
|
||||
<span class="token keyword">const</span> routesConfig <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||||
<span class="token string">'login'</span><span class="token punctuation">,</span>
|
||||
<span class="token string">'root'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'exp404'</span><span class="token punctuation">,</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'404'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'exp403'</span><span class="token punctuation">,</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'/403'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'403'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
routes<span class="token operator">:</span> <span class="token function">parseRoutes</span><span class="token punctuation">(</span>routesConfig<span class="token punctuation">,</span> routerMap<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> options
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div></details> <p>完成以上设置后，本地就已经有了包含 login、404、403 页面的路由，并且这些路由是可以直接访问的。</p> <h3 id="异步获取路由配置"><a href="#异步获取路由配置" class="header-anchor">#</a> 异步获取路由配置</h3> <p>当用户登录后（或者其它的前提条件），你可能想根据不同用户加载不同的路由和菜单。
|
||||
那么我们就需要先从后端服务获取异步路由配置，后端返回的异步路由配置 <code>routesConfig</code> 是一个异步路由配置数组， 应当如下格式：</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'root'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = root 的路由</span>
|
||||
children<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">//root 路由的子路由配置</span>
|
||||
<span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'dashboard'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = dashboard 的路由</span>
|
||||
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'workplace'</span><span class="token punctuation">,</span> <span class="token string">'analysis'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//dashboard 路由的子路由配置，依次匹配 registerName 为 workplace 和 analysis 的路由</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = form 的路由</span>
|
||||
children<span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token comment">//form 路由的子路由配置</span>
|
||||
<span class="token string">'basicForm'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = basicForm 的路由</span>
|
||||
<span class="token string">'stepForm'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = stepForm 的路由</span>
|
||||
<span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'advanceForm'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = advanceForm 的路由</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'advance'</span> <span class="token comment">//重写 advanceForm 路由的 path 属性</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'basicForm'</span><span class="token punctuation">,</span> <span class="token comment">//匹配 router.map.js 中注册名 registerName = basicForm 的路由</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'验权表单'</span><span class="token punctuation">,</span> <span class="token comment">//重写 basicForm 路由的 name 属性</span>
|
||||
icon<span class="token operator">:</span> <span class="token string">'file-excel'</span><span class="token punctuation">,</span> <span class="token comment">//重写 basicForm 路由的 icon 属性</span>
|
||||
authority<span class="token operator">:</span> <span class="token string">'form'</span> <span class="token comment">//重写 basicForm 路由的 authority 属性</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p>其中 <code>router</code> 属性 对应 <code>router.map.js</code> 中已注册的<code>基础路由</code>的注册名称 <code>registerName</code>，<code>children</code> 属性为路由的嵌套子路由配置。<br>
|
||||
有些情况下你可能想重写已注册路由的属性，你可以为 <code>routesConfig</code> 配置同名属性去覆盖它。如上面的<code>验权表单</code>路由覆盖了注册路由的 <code>name</code>、<code>icon</code>、<code>authority</code> 属性。</p> <h3 id="加载路由并应用"><a href="#加载路由并应用" class="header-anchor">#</a> 加载路由并应用</h3> <p>我们提供了一个路由加载工具，你只需调用 <code>/utils/routerUtil.js</code> 中的 <code>loadRoutes</code> 方法加载上一步获取到的 <code>routesConfig</code> 即可，如下：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br></div><pre class="language-js"><code><span class="token function">getRoutesConfig</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">result</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> routesConfig <span class="token operator">=</span> result<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data
|
||||
<span class="token function">loadRoutes</span><span class="token punctuation">(</span>routesConfig<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>至此，异步路由的加载就完成了，你可以访问异步加载的路由了。</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>上面获取异步路由的代码，在 /pages/login/Login.vue 文件中可以找到。<br>
|
||||
loadRoutes 方法会合并 /router/async/config.async.js 文件中配置的基本路由。</p></div> <details class="custom-block details"><summary>点击查看 loadRoutes 的详细代码</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
|
||||
* 加载路由
|
||||
* @param routesConfig 路由配置
|
||||
*/</span>
|
||||
<span class="token keyword">function</span> <span class="token function">loadRoutes</span><span class="token punctuation">(</span><span class="token parameter">routesConfig</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// 如果 routesConfig 有值，则更新到本地，否则从本地获取</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>routesConfig<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'account/setRoutesConfig'</span><span class="token punctuation">,</span> routesConfig<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
routesConfig <span class="token operator">=</span> store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token string">'account/routesConfig'</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token comment">// 如果开启了异步路由，则加载异步路由配置</span>
|
||||
<span class="token keyword">const</span> asyncRoutes <span class="token operator">=</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>setting<span class="token punctuation">.</span>asyncRoutes
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>asyncRoutes<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>routesConfig <span class="token operator">&&</span> routesConfig<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token function">parseRoutes</span><span class="token punctuation">(</span>routesConfig<span class="token punctuation">,</span> routerMap<span class="token punctuation">)</span>
|
||||
<span class="token function">formatAuthority</span><span class="token punctuation">(</span>routes<span class="token punctuation">)</span>
|
||||
<span class="token keyword">const</span> finalRoutes <span class="token operator">=</span> <span class="token function">mergeRoutes</span><span class="token punctuation">(</span>router<span class="token punctuation">.</span>options<span class="token punctuation">.</span>routes<span class="token punctuation">,</span> routes<span class="token punctuation">)</span>
|
||||
router<span class="token punctuation">.</span>options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span>router<span class="token punctuation">.</span>options<span class="token punctuation">,</span> routes<span class="token operator">:</span> finalRoutes<span class="token punctuation">}</span>
|
||||
router<span class="token punctuation">.</span>matcher <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span>router<span class="token punctuation">.</span>options<span class="token punctuation">,</span> routes<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span>matcher
|
||||
router<span class="token punctuation">.</span><span class="token function">addRoutes</span><span class="token punctuation">(</span>finalRoutes<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token comment">// 初始化Admin后台菜单数据</span>
|
||||
<span class="token keyword">const</span> rootRoute <span class="token operator">=</span> router<span class="token punctuation">.</span>options<span class="token punctuation">.</span>routes<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/'</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">const</span> menuRoutes <span class="token operator">=</span> rootRoute <span class="token operator">&&</span> rootRoute<span class="token punctuation">.</span>children
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>menuRoutes<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">mergeI18nFromRoutes</span><span class="token punctuation">(</span>i18n<span class="token punctuation">,</span> menuRoutes<span class="token punctuation">)</span>
|
||||
store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setting/setMenuData'</span><span class="token punctuation">,</span> menuRoutes<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div></details> <h2 id="异步加载菜单"><a href="#异步加载菜单" class="header-anchor">#</a> 异步加载菜单</h2> <p>Vue Antd Admin 的菜单，是根据路由配置自动生成的，默认获取根路由 <code>‘/’</code> 下所有子路由作为菜单配置。<br>
|
||||
当你完成了异步路由的加载，菜单也会随之改变，无需你做其它额外的操作。主要代码如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 初始化Admin后台菜单数据</span>
|
||||
<span class="token keyword">const</span> rootRoute <span class="token operator">=</span> router<span class="token punctuation">.</span>options<span class="token punctuation">.</span>routes<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">'/'</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">const</span> menuRoutes <span class="token operator">=</span> rootRoute <span class="token operator">&&</span> rootRoute<span class="token punctuation">.</span>children
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>menuRoutes<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">mergeI18nFromRoutes</span><span class="token punctuation">(</span>i18n<span class="token punctuation">,</span> menuRoutes<span class="token punctuation">)</span>
|
||||
store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'setting/setMenuData'</span><span class="token punctuation">,</span> menuRoutes<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>如果你不想从根路由 <code>‘/’</code> 下获取菜单数据，可以根据自己的需求更改。</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/async.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/22/2020, 11:42:27 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/advance/i18n.html" class="prev">
|
||||
国际化
|
||||
</a></span> <span class="next"><a href="/advance/authority.html">
|
||||
权限管理
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/16.82c281d4.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
175
advance/authority.html
Normal file
175
advance/authority.html
Normal file
@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>权限管理 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/10.700eec62.js" as="script"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><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="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" aria-current="page" class="active sidebar-link">权限管理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/advance/authority.html#角色和权限" class="sidebar-link">角色和权限</a></li><li class="sidebar-sub-header"><a href="/advance/authority.html#页面权限" class="sidebar-link">页面权限</a></li><li class="sidebar-sub-header"><a href="/advance/authority.html#操作权限" class="sidebar-link">操作权限</a></li><li class="sidebar-sub-header"><a href="/advance/authority.html#异步路由权限" class="sidebar-link">异步路由权限</a></li></ul></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="权限管理"><a href="#权限管理" class="header-anchor">#</a> 权限管理</h1> <p>权限控制是中后台系统中常见的需求之一，你可以利用 Vue Antd Admin 提供的权限控制脚手架，实现一些基本的权限控制功能。</p> <h2 id="角色和权限"><a href="#角色和权限" class="header-anchor">#</a> 角色和权限</h2> <p>通常情况下有两种方式可以控制用户权限，一种是通过用户角色 role 来控制权限，另一种是通过更细致的权限 permission 来控制。
|
||||
这两种方式 Vue Antd Admin 都支持。<br>
|
||||
我们定义了 role 和 permission 的基本格式，如果你获取的 role 和 permission 数据格式与 Vue Antd Admin 不一致，
|
||||
你需要在获取到 role 和 permission 后将其转换为 Vue Antd Admin 的格式。</p> <h3 id="角色"><a href="#角色" class="header-anchor">#</a> 角色</h3> <p>Vue Antd Admin 的 <code>角色/role</code> 包含 <code>id</code> 和 <code>operation</code> 两个属性。其中 <code>id</code> 为 <code>角色/role</code> 的 id，<code>operation</code> 为 <code>角色/role</code> 具有的操作权限，是一个字符串数组。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>role <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
id<span class="token operator">:</span> <span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token comment">//角色ID</span>
|
||||
operation<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'add'</span><span class="token punctuation">,</span> <span class="token string">'delete'</span><span class="token punctuation">,</span> <span class="token string">'edit'</span><span class="token punctuation">,</span> <span class="token string">'close'</span><span class="token punctuation">]</span> <span class="token comment">//角色的操作权限</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>你也可以设置 role 的值为字符串，比如 role = 'admin', 它等同于：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>role <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
id<span class="token operator">:</span> <span class="token string">'admin'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="权限"><a href="#权限" class="header-anchor">#</a> 权限</h3> <p>Vue Antd Admin 的 <code>权限/permission</code> 也包含 <code>id</code> 和 <code>operation</code> 两个属性。其中 <code>id</code> 为 <code>权限/permission</code> 的 id，<code>operation</code> 为 <code>权限/permission</code> 下的操作权限，是一个字符串数组。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>permission <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
id<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span> <span class="token comment">//权限ID</span>
|
||||
operation<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'add'</span><span class="token punctuation">,</span> <span class="token string">'delete'</span><span class="token punctuation">,</span> <span class="token string">'edit'</span><span class="token punctuation">,</span> <span class="token string">'close'</span><span class="token punctuation">]</span> <span class="token comment">//权限下的操作权限</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>你也可以设置 permission 的值为字符串，比如 permission = 'form', 它等同于：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>permission <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
id<span class="token operator">:</span> <span class="token string">'form'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="设置用户的角色和权限"><a href="#设置用户的角色和权限" class="header-anchor">#</a> 设置用户的角色和权限</h3> <p>你只需为用户配置 roles 和 permissions 两者中的其中一种，即可完成权限管理功能。当然你也可以两者都配置。</p> <p>获取到用户权限或角色后，将其格式化转为 Vue Antd Admin 可用的格式，然后使用 <code>store.commit('account/setPermissions', permissions)</code> 或 <code>store.commit('account/setRoles', roles)</code>
|
||||
将其存在本地即可。如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">getPermissions</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">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> permissions <span class="token operator">=</span> res<span class="token punctuation">.</span>data
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'account/setPermissions'</span><span class="token punctuation">,</span> permissions<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token function">getRoles</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">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> roles <span class="token operator">=</span> res<span class="token punctuation">.</span>data
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'account/setRoles'</span><span class="token punctuation">,</span> roles<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>注意，存在本地的 permissions 和 roles 都应该是数组。<br>
|
||||
你可以在 /pages/login/Login.vue 查看完整的用户角色和权限设置代码。</p></div> <h2 id="页面权限"><a href="#页面权限" class="header-anchor">#</a> 页面权限</h2> <p>如果你想给一些页面设置准入权限，只需要给该页面对应的路由设置元数据 authority 即可。 authority 的值可以是一个字符串，也可以是对象。</p> <p>如下路由配置，则表明 <code>验权页面</code> 需要准入权限(permission): <code>form</code></p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
name<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">'auth/demo'</span><span class="token punctuation">,</span>
|
||||
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
authority<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>下面是 authority 的值为对象的写法，这种写法和上面字符串的写法具有相同的效果：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
name<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">'auth/demo'</span><span class="token punctuation">,</span>
|
||||
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
authority<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
permission<span class="token operator">:</span> <span class="token string">'form'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>有时你可能需要通过用户角色来配置页面权限，我们同样支持，用法和上面类似。</p> <p>如下配置，表明 <code>验权页面</code> 需要准入角色(role) <code>admin</code>：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> route <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
name<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">'auth/demo'</span><span class="token punctuation">,</span>
|
||||
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
authority<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
role<span class="token operator">:</span> <span class="token string">'admin'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>当你未设置 authority 或 设置 authority 的值 为 <code>*</code> 时，等同于该页面无需权限限制，我们会忽略此页面的权限检查。</p></div> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>当 authority 的值为字符串时，会以 <a href="#%E6%9D%83%E9%99%90">权限/permission</a> 验证权限。如果你需要以 <a href="#%E8%A7%92%E8%89%B2">角色/role</a> 验证权限，请以对象形式设置 authority 的值。</p></div> <h2 id="操作权限"><a href="#操作权限" class="header-anchor">#</a> 操作权限</h2> <p>在一些复杂的些场景下，权限可能不仅仅是页面层级这么简单。在一些页面你可能需要校验用户是否具有某些操作的权限，比如 增、删、改、查等。<br>
|
||||
为此，我们提供了 <code>权限校验注入</code> 和 <code>权限校验指令</code> 两个实用的功能。</p> <h3 id="权限校验注入"><a href="#权限校验注入" class="header-anchor">#</a> 权限校验注入</h3> <p>通过对Vue组件的实例方法进行 <code>权限校验注入</code>，我们可以控制该实例方法的执行权限，从而精准且安全的验证用户操作。</p> <p>比如，QueryList 页面的 deleteRecord 方法，我们希望具有操作权限 <code>delete</code> 的用户才能调用此方法。
|
||||
只需为 <code>deleteRecord</code> 方法注入权限校验，按如下方式配置 <code>authorize</code> 即可：</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><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>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 operator">...</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'QueryList'</span><span class="token punctuation">,</span>
|
||||
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
authorize<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//权限校验注入设置</span>
|
||||
deleteRecord<span class="token operator">:</span> <span class="token string">'delete'</span> <span class="token comment">//key为需要注入权限校验的方法名，这里为 deleteRecord 方法；值为需要校验的操作权限，这里为 delete 操作权限</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">deleteRecord</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>dataSource <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>dataSource<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>key <span class="token operator">!==</span> key<span class="token punctuation">)</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>selectedRows <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>selectedRows<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> item<span class="token punctuation">.</span>key <span class="token operator">!==</span> key<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p>如果用户没有 <code>delete</code> 权限，调用 deleteRecord 方法，会看到如下提示：</p> <p><img src="/assets/img/permission.a4be38e9.png" alt="无此权限"></p> <h3 id="操作权限校验的类型"><a href="#操作权限校验的类型" class="header-anchor">#</a> 操作权限校验的类型</h3> <p><code>authorize</code> 会根据当前页面匹配到的权限类型(<a href="#%E6%9D%83%E9%99%90">permission</a> / <a href="#%E8%A7%92%E8%89%B2">role</a>)，来判断是使用 <code>permission.operation</code> 还是 <code>role.operation</code> 来进行权限校验。
|
||||
如果当前页面同时匹配到了 permission 和 role 权限，则默认通过 permission.operation 来进行操作权限校验。</p> <p>当然你也可以指定操作权限校验的类型，如下设置即可：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><pre class="language-js"><code>authorize<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
deleteRecord<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//需要 注入权限校验 的方法名：deleteRecord</span>
|
||||
check<span class="token operator">:</span> <span class="token string">'delete'</span><span class="token punctuation">,</span> <span class="token comment">//需要校验的操作权限：check</span>
|
||||
type<span class="token operator">:</span> <span class="token string">'role'</span> <span class="token comment">//指定操作权限校验的类型，可选 permission 和 role。这里指定以 role.operation 校验操作权限</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="权限校验指令"><a href="#权限校验指令" class="header-anchor">#</a> 权限校验指令</h3> <p>有时我们可能希望用户能够更直观的了解自己的操作权限。比如给没有操作权限的控件应用 disable 样式，禁用 click 事件等。
|
||||
我们提供了权限校验指令 <code>v-auth</code> 来实现这个功能。</p> <p>比如，我们想为 QueryList 页面的删除控件进行 <code>delete</code> 操作权限校验，只需为删除控件设置 v-auth="`delete`" 指令即可，如下：</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><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>a-card</span><span class="token punctuation">></span></span>...
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>standard-table</span> <span class="token attr-name">...</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>action<span class="token punctuation">"</span></span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{text, record}<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>a</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>deleteRecord(record.key)<span class="token punctuation">"</span></span> <span class="token attr-name">v-auth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`delete`<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>a-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>delete<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>a</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>standard-table</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-card</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>假如用户没有 <code>delete</code> 操作权限，则控件会被应用 disable 样式，且 click 事件无效，如下图：</p> <p><img src="/assets/img/auth.42fb947d.png" alt="权限校验指令"></p> <div class="custom-block warning"><p class="custom-block-title">重要！！！</p> <p>v-auth 是我们自定义的一个 <a href="https://cn.vuejs.org/v2/guide/custom-directive.html#ad" target="_blank" rel="noopener noreferrer">Vue指令<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>。因为 <code>Vue指令</code> 的值需要是一个 javascript 表达式，因此你不能直接给 v-auth 赋值为字符串，
|
||||
需要把 v-auth 的字符串值用 <code>``</code> 包裹起来，否则可能会报 undefined 错误。</p></div> <h3 id="权限校验指令的类型"><a href="#权限校验指令的类型" class="header-anchor">#</a> 权限校验指令的类型</h3> <p>你同样也可以指定 v-auth 的权限校验类型，可选 <a href="#%E6%9D%83%E9%99%90">permission</a> 和 <a href="#%E8%A7%92%E8%89%B2">role</a>。它的校验方式和 <a href="#%E6%9D%83%E9%99%90%E6%A0%A1%E9%AA%8C%E6%B3%A8%E5%85%A5">authorize</a> 类似，如未指定则会自动识别。
|
||||
<code>v-auth:role</code> 表示通过 <code>role.operation</code> 进行校验，<code>v-auth:permission</code> 表示通过 <code>permission.operation</code> 进行校验。</p> <p>如下，指定通过 <code>role.operation</code> 校验删除控件的操作权限：</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-vue"><code><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>action<span class="token punctuation">"</span></span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{text, record}<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>a</span> <span class="token attr-name"><span class="token namespace">v-auth:</span>role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>`delete`<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>a-icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>delete<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>a</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>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="异步路由权限"><a href="#异步路由权限" class="header-anchor">#</a> 异步路由权限</h2> <p>异步路由同样可以进行权限校验配置，它和正常的路由权限配置基本无异，只是无需把 <a href="#%E9%A1%B5%E9%9D%A2%E6%9D%83%E9%99%90">authority</a> 配置在元数据属性 meta 里。
|
||||
你可以在路由组件注册时设置 authority，也可以在异步路由配置里设置 authority。</p> <p>路由组件注册时设置 <a href="#%E9%A1%B5%E9%9D%A2%E6%9D%83%E9%99%90">authority</a>：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-js"><code><span class="token comment">// 路由组件注册</span>
|
||||
<span class="token keyword">const</span> routerMap <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>
|
||||
demo<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'演示页'</span><span class="token punctuation">,</span>
|
||||
authority<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/demo'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>异步路由配置里设置 <a href="#%E9%A1%B5%E9%9D%A2%E6%9D%83%E9%99%90">authority</a>：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> routesConfig <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'root'</span><span class="token punctuation">,</span>
|
||||
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'demo'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>router<span class="token operator">:</span> <span class="token string">'parent1'</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">{</span>
|
||||
router<span class="token operator">:</span> <span class="token string">'demo'</span><span class="token punctuation">,</span>
|
||||
icon<span class="token operator">:</span> <span class="token string">'file-ppt'</span><span class="token punctuation">,</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'auth/demo'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'验权页面'</span><span class="token punctuation">,</span>
|
||||
authority<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
permission<span class="token operator">:</span> <span class="token string">'form'</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/authority.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">9/26/2021, 11:15:12 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/advance/async.html" class="prev">
|
||||
异步路由和菜单
|
||||
</a></span> <span class="next"><a href="/advance/login.html">
|
||||
登录认证
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/10.700eec62.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
33
advance/chart.html
Normal file
33
advance/chart.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>图表 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/17.100d788a.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="图表"><a href="#图表" class="header-anchor">#</a> 图表</h1> <h3 id="作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"><a href="#作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页" class="header-anchor">#</a> 作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页</h3></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/chart.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">7/10/2020, 12:37:46 PM</span></div></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/17.100d788a.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
33
advance/error.html
Normal file
33
advance/error.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>错误处理 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/18.5be3472b.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="错误处理"><a href="#错误处理" class="header-anchor">#</a> 错误处理</h1> <h3 id="作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"><a href="#作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页" class="header-anchor">#</a> 作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页</h3></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/error.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">7/10/2020, 12:37:46 PM</span></div></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/18.5be3472b.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
117
advance/guard.html
Normal file
117
advance/guard.html
Normal file
@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>路由守卫 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/19.03245e8d.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><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="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" aria-current="page" class="active sidebar-link">路由守卫</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/advance/guard.html#前置守卫" class="sidebar-link">前置守卫</a></li><li class="sidebar-sub-header"><a href="/advance/guard.html#后置守卫" class="sidebar-link">后置守卫</a></li><li class="sidebar-sub-header"><a href="/advance/guard.html#导出守卫配置" class="sidebar-link">导出守卫配置</a></li></ul></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="路由守卫"><a href="#路由守卫" class="header-anchor">#</a> 路由守卫</h1> <p>Vue Antd Admin 使用 vue-router 实现路由导航功能，因此可以为路由配置一些守卫。<br>
|
||||
我们统一把导航守卫配置在 router/guards.js 文件中。</p> <h2 id="前置守卫"><a href="#前置守卫" class="header-anchor">#</a> 前置守卫</h2> <p>Vue Antd Admin 为每个前置导航守卫函数注入 to,from,next,options 四个参数：</p> <ul><li><code>to: Route</code>: 即将要进入的目标<a href="https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1" target="_blank" rel="noopener noreferrer">路由对象<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></li> <li><code>from: Route</code>: 当前导航正要离开的路由对象</li> <li><code>next: Function</code>: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。详情查看 <a href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html" 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></li> <li><code>options: Object</code>: 应用配置，包含: {router, i18n, store, message}，可根据需要扩展。<br>
|
||||
如下，是登录拦截导航守卫的定义</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">loginGuard</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span>message<span class="token punctuation">}</span> <span class="token operator">=</span> options
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>loginIgnore<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token operator">!</span><span class="token function">checkAuthorization</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
message<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'登录已失效，请重新登录'</span><span class="token punctuation">)</span>
|
||||
<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">{</span>path<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="后置守卫"><a href="#后置守卫" class="header-anchor">#</a> 后置守卫</h2> <p>你也可以定义后置导航守卫，Vue Antd Admin 为每个后置导航函数注入 to,from,options 三个参数：</p> <ul><li><code>to: Route</code>: 即将要进入的目标<a href="https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1" target="_blank" rel="noopener noreferrer">路由对象<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></li> <li><code>from: Route</code>: 当前导航正要离开的路由对象</li> <li><code>options: Object</code>: 应用配置，包含: {router, i18n, store, message}，可根据需要扩展。<br>
|
||||
如下，是一个后置导航守卫的定义</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">afterGuard</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span>store<span class="token punctuation">,</span> message<span class="token punctuation">}</span> <span class="token operator">=</span> options
|
||||
<span class="token comment">// 做些什么</span>
|
||||
message<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'do something'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="导出守卫配置"><a href="#导出守卫配置" class="header-anchor">#</a> 导出守卫配置</h2> <p>定义好导航守卫后，只需按照类别在 guard.js 中导出即可。分为两类，<code>前置守卫</code>和<code>后置守卫</code>。如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
beforeEach<span class="token operator">:</span> <span class="token punctuation">[</span>loginGuard<span class="token punctuation">,</span> authorityGuard<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
afterEach<span class="token operator">:</span> <span class="token punctuation">[</span>afterGuard<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><details class="custom-block details"><summary>点击查看完整的导航守卫配置</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>loginIgnore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/router/index'</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>checkAuthorization<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/request'</span>
|
||||
|
||||
<span class="token comment">/**
|
||||
* 登录守卫
|
||||
* @param to
|
||||
* @param form
|
||||
* @param next
|
||||
* @param options
|
||||
*/</span>
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">loginGuard</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span>message<span class="token punctuation">}</span> <span class="token operator">=</span> options
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>loginIgnore<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token operator">!</span><span class="token function">checkAuthorization</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
message<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span><span class="token string">'登录已失效，请重新登录'</span><span class="token punctuation">)</span>
|
||||
<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">{</span>path<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token comment">/**
|
||||
* 权限守卫
|
||||
* @param to
|
||||
* @param form
|
||||
* @param next
|
||||
* @param options
|
||||
*/</span>
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">authorityGuard</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span>store<span class="token punctuation">,</span> message<span class="token punctuation">}</span> <span class="token operator">=</span> options
|
||||
<span class="token keyword">const</span> permissions <span class="token operator">=</span> store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token string">'account/permissions'</span><span class="token punctuation">]</span>
|
||||
<span class="token keyword">const</span> roles <span class="token operator">=</span> store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token string">'account/roles'</span><span class="token punctuation">]</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">hasAuthority</span><span class="token punctuation">(</span>to<span class="token punctuation">,</span> permissions<span class="token punctuation">,</span> roles<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
message<span class="token punctuation">.</span><span class="token function">warning</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>to<span class="token punctuation">.</span>fullPath<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">，请联系管理员</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
|
||||
<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">{</span>path<span class="token operator">:</span> <span class="token string">'/403'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token comment">/**
|
||||
* 后置守卫
|
||||
* @param to
|
||||
* @param form
|
||||
* @param options
|
||||
*/</span>
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">afterGuard</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span>store<span class="token punctuation">,</span> message<span class="token punctuation">}</span> <span class="token operator">=</span> options
|
||||
<span class="token comment">// 做些什么</span>
|
||||
message<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span><span class="token string">'do something'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
beforeEach<span class="token operator">:</span> <span class="token punctuation">[</span>loginGuard<span class="token punctuation">,</span> authorityGuard<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
afterEach<span class="token operator">:</span> <span class="token punctuation">[</span>afterGuard<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br></div></div></details></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/guard.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">9/5/2020, 9:07:00 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/advance/login.html" class="prev">
|
||||
登录认证
|
||||
</a></span> <span class="next"><a href="/advance/interceptors.html">
|
||||
拦截器配置
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/19.03245e8d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
131
advance/i18n.html
Normal file
131
advance/i18n.html
Normal file
@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>国际化 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/20.3d708930.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><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="/advance/i18n.html" aria-current="page" class="active sidebar-link">国际化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/advance/i18n.html#菜单和路由" class="sidebar-link">菜单和路由</a></li><li class="sidebar-sub-header"><a href="/advance/i18n.html#添加语言" class="sidebar-link">添加语言</a></li></ul></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="国际化"><a href="#国际化" class="header-anchor">#</a> 国际化</h1> <p>vue-antd-admin 采用 <a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer">vue-i18n<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> <blockquote><p>如果你还没有看快速入门，请先移步查看: <a href="/develop/page.html#i18n国际化配置">页面 -> i18n国际化配置</a></p></blockquote> <h2 id="菜单和路由"><a href="#菜单和路由" class="header-anchor">#</a> 菜单和路由</h2> <h3 id="默认情况"><a href="#默认情况" class="header-anchor">#</a> 默认情况</h3> <p>如果你没有对菜单进行国际化配置，admin 默认会从路由数据中提取数据作为国际化配置。route.name 作为中文语言，route.path 作为英文语言。<br>
|
||||
国际化提取函数定义在 <code>@/utils/i18n.js</code> 文件中，会在路由加载时调用，如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
|
||||
* 从路由提取国际化数据
|
||||
* @param i18n
|
||||
* @param routes
|
||||
*/</span>
|
||||
<span class="token keyword">function</span> <span class="token function">mergeI18nFromRoutes</span><span class="token punctuation">(</span><span class="token parameter">i18n<span class="token punctuation">,</span> routes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">formatFullPath</span><span class="token punctuation">(</span>routes<span class="token punctuation">)</span>
|
||||
<span class="token keyword">const</span> <span class="token constant">CN</span> <span class="token operator">=</span> <span class="token function">generateI18n</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> routes<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">const</span> <span class="token constant">US</span> <span class="token operator">=</span> <span class="token function">generateI18n</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> routes<span class="token punctuation">,</span> <span class="token string">'path'</span><span class="token punctuation">)</span>
|
||||
i18n<span class="token punctuation">.</span><span class="token function">mergeLocaleMessage</span><span class="token punctuation">(</span><span class="token string">'CN'</span><span class="token punctuation">,</span> <span class="token constant">CN</span><span class="token punctuation">)</span>
|
||||
i18n<span class="token punctuation">.</span><span class="token function">mergeLocaleMessage</span><span class="token punctuation">(</span><span class="token string">'US'</span><span class="token punctuation">,</span> <span class="token constant">US</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">const</span> messages <span class="token operator">=</span> routesI18n<span class="token punctuation">.</span>messages
|
||||
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>messages<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">lang</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
i18n<span class="token punctuation">.</span><span class="token function">mergeLocaleMessage</span><span class="token punctuation">(</span>lang<span class="token punctuation">,</span> messages<span class="token punctuation">[</span>lang<span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="自定义"><a href="#自定义" class="header-anchor">#</a> 自定义</h3> <p>如果你想自定义菜单国际化数据，可在 <code>@/router/i18n.js</code> 文件中配置。我们以路由的 path 作为 key（嵌套path 的写法也会被解析），name 作为 国际化语言的值。<br>
|
||||
假设你有一个路由的配置如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'parent'</span><span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>
|
||||
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'self'</span><span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||||
|
||||
or
|
||||
|
||||
<span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'other'</span><span class="token punctuation">,</span>
|
||||
<span class="token operator">...</span>
|
||||
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'/parent/self'</span><span class="token punctuation">,</span> <span class="token comment">// 在国际化配置中 key 会解析为 parent.self</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>那么你需要在 <code>@/router/i18n.js</code> 中这样配置：</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code> messages<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token constant">CN</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
parent<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'父級菜單'</span><span class="token punctuation">,</span>
|
||||
self<span class="token operator">:</span> <span class="token punctuation">{</span>name<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 constant">US</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
parent<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'parent menu'</span><span class="token punctuation">,</span>
|
||||
self<span class="token operator">:</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'menu name'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token constant">HK</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
parent<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'父級菜單'</span><span class="token punctuation">,</span>
|
||||
self<span class="token operator">:</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'菜單名'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="添加语言"><a href="#添加语言" class="header-anchor">#</a> 添加语言</h2> <p>首先在 <code>@/layouts/header/AdminHeader.vue</code> ，新增一门语言 (多个同理)。</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br></div><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>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 operator">...</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token function">data</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>
|
||||
langList<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>key<span class="token operator">:</span> <span class="token string">'CN'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'简体中文'</span><span class="token punctuation">,</span> alias<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>key<span class="token operator">:</span> <span class="token string">'HK'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'繁體中文'</span><span class="token punctuation">,</span> alias<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>key<span class="token operator">:</span> <span class="token string">'US'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'English'</span><span class="token punctuation">,</span> alias<span class="token operator">:</span> <span class="token string">'English'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token comment">// 新增一个语言选项, key是i18n的索引，name是菜单显示名称</span>
|
||||
<span class="token punctuation">{</span>key<span class="token operator">:</span> <span class="token string">'JP'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Japanese'</span><span class="token punctuation">,</span> alias<span class="token operator">:</span> <span class="token string">'Japanese'</span><span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
searchActive<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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><blockquote><p>TIP: 后续开发建议把这里改成动态配置的方式！</p></blockquote> <p>然后开始往 <code>@/router/i18n.js</code> 和 <code>@/pages/你的页面/i18n.js</code> 里面分别添加上语言的翻译。</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br></div><pre class="language-vue"><code>module.exports = {
|
||||
messages: {
|
||||
CN: {
|
||||
home: {name: '首页'},
|
||||
},
|
||||
US: {
|
||||
home: {name: 'home'},
|
||||
},
|
||||
HK: {
|
||||
home: {name: '首頁'},
|
||||
},
|
||||
JP: {
|
||||
home: {name: '最初のページ'},
|
||||
},
|
||||
}
|
||||
}
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><blockquote><p>Notice: 更多用法请移步到 <a href="https://kazupon.github.io/vue-i18n/" target="_blank" rel="noopener noreferrer">vue-i18n<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></blockquote></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/i18n.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/6/2020, 11:14:16 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/develop/mock.html" class="prev">
|
||||
Mock
|
||||
</a></span> <span class="next"><a href="/advance/async.html">
|
||||
异步路由和菜单
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/20.3d708930.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
33
advance/index.html
Normal file
33
advance/index.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>进阶 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/14.4f2e11ab.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="进阶"><a href="#进阶" class="header-anchor">#</a> 进阶</h1></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/README.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">6/27/2020, 9:49:04 PM</span></div></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/14.4f2e11ab.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
127
advance/interceptors.html
Normal file
127
advance/interceptors.html
Normal file
File diff suppressed because one or more lines are too long
79
advance/login.html
Normal file
79
advance/login.html
Normal file
@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>登录认证 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/22.5db4e883.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><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="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" aria-current="page" class="active sidebar-link">登录认证</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/advance/login.html#token名称" class="sidebar-link">token名称</a></li><li class="sidebar-sub-header"><a href="/advance/login.html#token-设置" class="sidebar-link">token 设置</a></li><li class="sidebar-sub-header"><a href="/advance/login.html#token-校验" class="sidebar-link">token 校验</a></li><li class="sidebar-sub-header"><a href="/advance/login.html#api" class="sidebar-link">Api</a></li></ul></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="登录认证"><a href="#登录认证" class="header-anchor">#</a> 登录认证</h1> <p>Vue Antd Admin 使用 js-cookie.js 管理用户的 token，结合 axios 配置，可以为每个请求头加上 token 信息。</p> <h2 id="token名称"><a href="#token名称" class="header-anchor">#</a> token名称</h2> <p>后端系统通常会从请求 header 中获取用户的 token，因此我们需要配置好 token 名称，好让后端能正确的识别到用户 token。
|
||||
Vue Antd Admin 默认token 名称为 <code>Authorization</code>，你可以在 /utils/request.js 中修改它。</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br></div><pre class="language-js"><code><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span>
|
||||
<span class="token keyword">import</span> Cookie <span class="token keyword">from</span> <span class="token string">'js-cookie'</span>
|
||||
|
||||
<span class="token comment">// 跨域认证信息 header 名</span>
|
||||
<span class="token keyword">const</span> xsrfHeaderName <span class="token operator">=</span> <span class="token string">'Authorization'</span>
|
||||
<span class="token operator">...</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="token-设置"><a href="#token-设置" class="header-anchor">#</a> token 设置</h2> <p>调用登录接口后拿到用户的 token 和 token 过期时间（如无过期时间，可忽略），并使用 /utils/request.js #setAuthorization 方法保存token。</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br></div><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>setAuthorization<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/request'</span>
|
||||
|
||||
<span class="token function">login</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> password<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">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span>token<span class="token punctuation">,</span> expireAt<span class="token punctuation">}</span> <span class="token operator">=</span> res<span class="token punctuation">.</span>data
|
||||
<span class="token function">setAuthorization</span><span class="token punctuation">(</span><span class="token punctuation">{</span>token<span class="token punctuation">,</span> expireAt<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>expireAt<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="token-校验"><a href="#token-校验" class="header-anchor">#</a> token 校验</h2> <p>Vue Antd Admin 默认添加了登录导航守卫，如检查到本地cookie 中不包含 token 信息，则会拦截跳转至登录页。你可以在 /router/index.js 中配置
|
||||
不需要登录拦截的路由</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 不需要登录拦截的路由配置</span>
|
||||
<span class="token keyword">const</span> loginIgnore <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
names<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'404'</span><span class="token punctuation">,</span> <span class="token string">'403'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//根据路由名称匹配</span>
|
||||
paths<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'/login'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//根据路由fullPath匹配</span>
|
||||
<span class="token comment">/**
|
||||
* 判断路由是否包含在该配置中
|
||||
* @param route vue-router 的 route 对象
|
||||
* @returns {boolean}
|
||||
*/</span>
|
||||
<span class="token function">includes</span><span class="token punctuation">(</span><span class="token parameter">route</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>names<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>route<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>paths<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>route<span class="token punctuation">.</span>path<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>或者在 /router/guards.js 中移出登录守卫</p> <div class="language-diff line-numbers-mode"><pre class="language-diff"><code>...
|
||||
export default {
|
||||
<span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> beforeEach: [loginGuard, authorityGuard, redirectGuard],
|
||||
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> beforeEach: [authorityGuard, redirectGuard],
|
||||
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> afterEach: []
|
||||
</span></span>}
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="api"><a href="#api" class="header-anchor">#</a> Api</h2> <h3 id="setauthorization-auth-authtype"><a href="#setauthorization-auth-authtype" class="header-anchor">#</a> setAuthorization(auth, authType)</h3> <p>来源：/utils/request.js<br>
|
||||
该方法用于保存用户 token，接收两个参数:</p> <ul><li><strong>auth</strong><br>
|
||||
认证信息，包含 token、expireAt 等认证数据。</li> <li><strong>authType</strong><br>
|
||||
认证类型，默认为 <code>AUTH_TYPE.BEARER</code>（AUTH_TYPE.BEARER 默认会给token 加上 Bearer 识别前缀），可根据自己的认证类型自行扩展。</li></ul> <h3 id="checkauthorization-authtype"><a href="#checkauthorization-authtype" class="header-anchor">#</a> checkAuthorization(authType)</h3> <p>该方法用于校验用户 token 是否过期，接收一个参数:</p> <ul><li><strong>authType</strong><br>
|
||||
认证类型，默认为 <code>AUTH_TYPE.BEARER</code>。</li></ul> <h3 id="removeauthorization-authtype"><a href="#removeauthorization-authtype" class="header-anchor">#</a> removeAuthorization(authType)</h3> <p>该方法用于移出用户本地存储的 token，接收一个参数:</p> <ul><li><strong>authType</strong><br>
|
||||
认证类型，默认为 <code>AUTH_TYPE.BEARER</code>。</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>以上 Api 均可在 /utils/request.js 文件中找到。</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/login.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">9/5/2020, 12:36:37 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/advance/authority.html" class="prev">
|
||||
权限管理
|
||||
</a></span> <span class="next"><a href="/advance/guard.html">
|
||||
路由守卫
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/22.5db4e883.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
33
advance/skill.html
Normal file
33
advance/skill.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>108个小技巧 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/23.9725697e.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="_108个小技巧"><a href="#_108个小技巧" class="header-anchor">#</a> 108个小技巧</h1> <h2 id="自定义菜单icon"><a href="#自定义菜单icon" class="header-anchor">#</a> 自定义菜单icon</h2> <h2 id="隐藏页面标题"><a href="#隐藏页面标题" class="header-anchor">#</a> 隐藏页面标题</h2> <h2 id="关闭页签api"><a href="#关闭页签api" class="header-anchor">#</a> 关闭页签API</h2> <h2 id="权限校验pi"><a href="#权限校验pi" class="header-anchor">#</a> 权限校验PI</h2></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/skill.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">8/28/2020, 11:09:07 AM</span></div></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/23.9725697e.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
33
advance/theme.html
Normal file
33
advance/theme.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zn-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>更换主题 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/24.ed3d58d4.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="更换主题"><a href="#更换主题" class="header-anchor">#</a> 更换主题</h1> <h3 id="作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"><a href="#作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页" class="header-anchor">#</a> 作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页</h3></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/advance/theme.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">7/10/2020, 12:37:46 PM</span></div></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/24.ed3d58d4.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
1
assets/css/0.styles.6e02fda8.css
Normal file
1
assets/css/0.styles.6e02fda8.css
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/img/admin-layout.538ade29.png
Normal file
BIN
assets/img/admin-layout.538ade29.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
assets/img/auth.42fb947d.png
Normal file
BIN
assets/img/auth.42fb947d.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
assets/img/blank-view.d5483c86.png
Normal file
BIN
assets/img/blank-view.d5483c86.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
assets/img/common-layout.1680e466.png
Normal file
BIN
assets/img/common-layout.1680e466.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
assets/img/menu-demo.6d51ae42.png
Normal file
BIN
assets/img/menu-demo.6d51ae42.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
assets/img/mode-dark.178ff571.png
Normal file
BIN
assets/img/mode-dark.178ff571.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
assets/img/mode-light.e460a721.png
Normal file
BIN
assets/img/mode-light.e460a721.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
assets/img/mode-night.16c831f4.png
Normal file
BIN
assets/img/mode-night.16c831f4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
assets/img/new-page-2.930ca3c7.png
Normal file
BIN
assets/img/new-page-2.930ca3c7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
BIN
assets/img/new-page-us.60b25f14.png
Normal file
BIN
assets/img/new-page-us.60b25f14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
assets/img/new-page.4da2ccce.png
Normal file
BIN
assets/img/new-page.4da2ccce.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
assets/img/page-layout.a45de70f.png
Normal file
BIN
assets/img/page-layout.a45de70f.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
assets/img/page-view.5fe6cc90.png
Normal file
BIN
assets/img/page-view.5fe6cc90.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
assets/img/permission.a4be38e9.png
Normal file
BIN
assets/img/permission.a4be38e9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
1
assets/img/search.83621669.svg
Normal file
1
assets/img/search.83621669.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
|
||||
|
After Width: | Height: | Size: 216 B |
BIN
assets/img/tabs-view.64ed8eb1.png
Normal file
BIN
assets/img/tabs-view.64ed8eb1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
1
assets/js/10.700eec62.js
Normal file
1
assets/js/10.700eec62.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/11.45b1f56d.js
Normal file
1
assets/js/11.45b1f56d.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/12.01a276f6.js
Normal file
1
assets/js/12.01a276f6.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{371:function(t,e,s){"use strict";s.r(e);var n=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){return n[Math.floor(Math.random()*n.length)]}}},i=s(18),h=Object(i.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
|
||||
1
assets/js/13.48c77c6e.js
Normal file
1
assets/js/13.48c77c6e.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{376:function(t,e,n){"use strict";n.r(e);var s=n(18),l=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);e.default=l.exports}}]);
|
||||
1
assets/js/14.4f2e11ab.js
Normal file
1
assets/js/14.4f2e11ab.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{375:function(t,s,e){"use strict";e.r(s);var n=e(18),r=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"进阶"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#进阶"}},[this._v("#")]),this._v(" 进阶")])])}),[],!1,null,null,null);s.default=r.exports}}]);
|
||||
1
assets/js/15.288a0b46.js
Normal file
1
assets/js/15.288a0b46.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{378:function(t,e,r){"use strict";r.r(e);var a=r(18),s=Object(a.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"全局api"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#全局api"}},[t._v("#")]),t._v(" 全局API")]),t._v(" "),r("p",[t._v("我们提供了一些全局Api，在日常功能开发中或许会有帮助，它们均被绑定到了页面组件或子组件实例上。"),r("br"),t._v("\n在组件内可以直接通过"),r("code",[t._v("this.$[apiName]")]),t._v("的方式调用。如下：")]),t._v(" "),r("h2",{attrs:{id:"多页签"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#多页签"}},[t._v("#")]),t._v(" 多页签")]),t._v(" "),r("h3",{attrs:{id:"closepage-closeroute-nextroute"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#closepage-closeroute-nextroute"}},[t._v("#")]),t._v(" $closePage(closeRoute, nextRoute)")]),t._v(" "),r("p",[t._v("该api用于关闭当前已打开的页签，接收两个参数：")]),t._v(" "),r("ul",[r("li",[r("strong",[t._v("closeRoute")]),r("br"),t._v("\n要关闭的页签对应的 route 对象，可简写为路由的 fullPath 字符串值。")]),t._v(" "),r("li",[r("strong",[t._v("nextRoute")]),r("br"),t._v("\n关闭页签要后跳转的 route 对象，可不传，不传则会自动选择打开页签（临近原则）。")])]),t._v(" "),r("h3",{attrs:{id:"refreshpage-route"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#refreshpage-route"}},[t._v("#")]),t._v(" $refreshPage(route)")]),t._v(" "),r("p",[t._v("该api用于刷新路由对应的页签，接收一个参数：")]),t._v(" "),r("ul",[r("li",[r("strong",[t._v("route")]),r("br"),t._v("\n要刷新的页签对应的 route 对象，可简写为路由的 fullPath 字符串值。")])]),t._v(" "),r("h3",{attrs:{id:"openpage-route-title"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#openpage-route-title"}},[t._v("#")]),t._v(" $openPage(route, title)")]),t._v(" "),r("p",[t._v("该api用于打开一个新页签，接收两个参数：")]),t._v(" "),r("ul",[r("li",[r("strong",[t._v("route")]),r("br"),t._v("\n要打开的页签对应的 route 对象，可简写为路由的 fullPath 字符串值。")]),t._v(" "),r("li",[r("strong",[t._v("title")]),r("br"),t._v("\n设置打开页签的标题，可不传。")])]),t._v(" "),r("h3",{attrs:{id:"setpagetitle-route-title"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#setpagetitle-route-title"}},[t._v("#")]),t._v(" $setPageTitle(route, title)")]),t._v(" "),r("p",[t._v("该api用于设置页签的标题，接收两个参数：")]),t._v(" "),r("ul",[r("li",[r("strong",[t._v("route")]),r("br"),t._v("\n要设置的页签对应的 route 对象，可简写为路由的 fullPath 字符串值。")]),t._v(" "),r("li",[r("strong",[t._v("title")]),r("br"),t._v("\n页签的标题。")])]),t._v(" "),r("h2",{attrs:{id:"权限"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#权限"}},[t._v("#")]),t._v(" 权限")]),t._v(" "),r("h3",{attrs:{id:"auth-check-type"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#auth-check-type"}},[t._v("#")]),t._v(" $auth(check, type)")]),t._v(" "),r("p",[t._v("该api可以用于操作权限校验，接收两个参数：")]),t._v(" "),r("ul",[r("li",[r("strong",[t._v("check")]),r("br"),t._v("\n需要要校验的操作权限")]),t._v(" "),r("li",[r("strong",[t._v("type")]),r("br"),t._v("\n操作权限校验类别，可选 "),r("code",[t._v("permission")]),t._v(" 和 "),r("code",[t._v("role")]),t._v("，即通过权限校验还是角色进行校验，可不传（不传的话，会对两种类型都进行匹配，任意一种匹配成功即校验通过）。")])])])}),[],!1,null,null,null);e.default=s.exports}}]);
|
||||
1
assets/js/16.82c281d4.js
Normal file
1
assets/js/16.82c281d4.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/17.100d788a.js
Normal file
1
assets/js/17.100d788a.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{377:function(t,s,a){"use strict";a.r(s);var e=a(18),r=Object(e.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"图表"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#图表"}},[this._v("#")]),this._v(" 图表")]),this._v(" "),s("h3",{attrs:{id:"作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"}},[this._v("#")]),this._v(" 作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页")])])}),[],!1,null,null,null);s.default=r.exports}}]);
|
||||
1
assets/js/18.5be3472b.js
Normal file
1
assets/js/18.5be3472b.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{379:function(t,s,a){"use strict";a.r(s);var e=a(18),r=Object(e.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"错误处理"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#错误处理"}},[this._v("#")]),this._v(" 错误处理")]),this._v(" "),s("h3",{attrs:{id:"作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"}},[this._v("#")]),this._v(" 作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页")])])}),[],!1,null,null,null);s.default=r.exports}}]);
|
||||
1
assets/js/19.03245e8d.js
Normal file
1
assets/js/19.03245e8d.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/2.8c76fef9.js
Normal file
1
assets/js/2.8c76fef9.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/20.3d708930.js
Normal file
1
assets/js/20.3d708930.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/21.c054b79e.js
Normal file
1
assets/js/21.c054b79e.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/22.5db4e883.js
Normal file
1
assets/js/22.5db4e883.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/23.9725697e.js
Normal file
1
assets/js/23.9725697e.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{384:function(t,a,s){"use strict";s.r(a);var r=s(18),e=Object(r.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"_108个小技巧"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#_108个小技巧"}},[t._v("#")]),t._v(" 108个小技巧")]),t._v(" "),s("h2",{attrs:{id:"自定义菜单icon"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#自定义菜单icon"}},[t._v("#")]),t._v(" 自定义菜单icon")]),t._v(" "),s("h2",{attrs:{id:"隐藏页面标题"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#隐藏页面标题"}},[t._v("#")]),t._v(" 隐藏页面标题")]),t._v(" "),s("h2",{attrs:{id:"关闭页签api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#关闭页签api"}},[t._v("#")]),t._v(" 关闭页签API")]),t._v(" "),s("h2",{attrs:{id:"权限校验pi"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#权限校验pi"}},[t._v("#")]),t._v(" 权限校验PI")])])}),[],!1,null,null,null);a.default=e.exports}}]);
|
||||
1
assets/js/24.ed3d58d4.js
Normal file
1
assets/js/24.ed3d58d4.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{389:function(t,s,a){"use strict";a.r(s);var e=a(18),r=Object(e.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"更换主题"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#更换主题"}},[this._v("#")]),this._v(" 更换主题")]),this._v(" "),s("h3",{attrs:{id:"作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"}},[this._v("#")]),this._v(" 作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页")])])}),[],!1,null,null,null);s.default=r.exports}}]);
|
||||
1
assets/js/25.49453e27.js
Normal file
1
assets/js/25.49453e27.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{386:function(t,s,e){"use strict";e.r(s);var n=e(18),r=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"开发"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开发"}},[this._v("#")]),this._v(" 开发")])])}),[],!1,null,null,null);s.default=r.exports}}]);
|
||||
1
assets/js/26.5d9fccfd.js
Normal file
1
assets/js/26.5d9fccfd.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{387:function(t,s,a){"use strict";a.r(s);var e=a(18),r=Object(e.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"mock"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#mock"}},[this._v("#")]),this._v(" Mock")]),this._v(" "),s("h3",{attrs:{id:"作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"}},[this._v("#")]),this._v(" 作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页")])])}),[],!1,null,null,null);s.default=r.exports}}]);
|
||||
1
assets/js/27.13660c40.js
Normal file
1
assets/js/27.13660c40.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/28.826bdb2a.js
Normal file
1
assets/js/28.826bdb2a.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{393:function(t,s,e){"use strict";e.r(s);var n=e(18),r=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"其它"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#其它"}},[this._v("#")]),this._v(" 其它")])])}),[],!1,null,null,null);s.default=r.exports}}]);
|
||||
1
assets/js/29.fb0b9607.js
Normal file
1
assets/js/29.fb0b9607.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{395:function(t,a,s){"use strict";s.r(a);var r=s(18),e=Object(r.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"社区"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#社区"}},[t._v("#")]),t._v(" 社区")]),t._v(" "),s("h2",{attrs:{id:"交流学习"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#交流学习"}},[t._v("#")]),t._v(" 交流学习")]),t._v(" "),s("h3",{attrs:{id:"qq群：812277510、610090280（已满）"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#qq群：812277510、610090280（已满）"}},[t._v("#")]),t._v(" QQ群：812277510、610090280（已满）")])])}),[],!1,null,null,null);a.default=e.exports}}]);
|
||||
1
assets/js/3.6d23cf69.js
Normal file
1
assets/js/3.6d23cf69.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/30.472c91a2.js
Normal file
1
assets/js/30.472c91a2.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{397:function(t,s,e){"use strict";e.r(s);var n=e(18),r=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"更新日志"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#更新日志"}},[this._v("#")]),this._v(" 更新日志")])])}),[],!1,null,null,null);s.default=r.exports}}]);
|
||||
1
assets/js/31.a79ce13e.js
Normal file
1
assets/js/31.a79ce13e.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{398:function(t,s,e){"use strict";e.r(s);var n=e(18),r=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h2",{attrs:{id:"开始"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开始"}},[this._v("#")]),this._v(" 开始")])])}),[],!1,null,null,null);s.default=r.exports}}]);
|
||||
1
assets/js/32.53b87dae.js
Normal file
1
assets/js/32.53b87dae.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{396:function(t,e,n){"use strict";n.r(e);var r=n(18),a=Object(r.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"常见问题"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#常见问题"}},[t._v("#")]),t._v(" 常见问题")]),t._v(" "),n("h3",{attrs:{id:"为什么不是-ant-design-pro-vue-？"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#为什么不是-ant-design-pro-vue-？"}},[t._v("#")]),t._v(" 为什么不是 Ant Design Pro Vue ？")]),t._v(" "),n("p",[n("a",{attrs:{href:"https://github.com/vueComponent/ant-design-vue-pro",target:"_blank",rel:"noopener noreferrer"}},[t._v("Ant Design Pro Vue"),n("OutboundLink")],1),t._v(" 是 "),n("a",{attrs:{href:"https://github.com/ant-design/ant-design-pro",target:"_blank",rel:"noopener noreferrer"}},[t._v("Ant Design Pro"),n("OutboundLink")],1),t._v(" 的 Vue 版本，其中项目结构、组件、\n布局和使用方法等基本与 Ant Design Pro 的 react 版本保持一致。如果你比较熟悉 react 版，或者你已经在使用它，这确实是一个不错的选择。")]),t._v(" "),n("p",[n("a",{attrs:{href:"https://github.com/iczer/vue-antd-admin",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue Antd Admin"),n("OutboundLink")],1),t._v(" 同样实现了 Ant Design Pro 的所有功能。与此同时，我们还根据 Vue 的特性，对 Ant Design Pro 的一些组件和布局作出了相应的修改及优化，同时不影响保持与 Ant Design Pro 的一致。")]),t._v(" "),n("p",[t._v("另外，我们还在添加一些 Ant Design Pro 没有的功能，比如全局动画、多页签模式等。")]),t._v(" "),n("p",[t._v("如果你想使用 Ant Design Pro，但又觉得它缺乏一些你想要的功能，不妨看看 "),n("a",{attrs:{href:"https://github.com/iczer/vue-antd-admin",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue Antd Admin"),n("OutboundLink")],1),t._v("，我们会认真考虑每个用户的需求。")]),t._v(" "),n("p",[t._v("因此，如果你有一些不错的想法和建议，欢迎随时和我们交流，很可能你的想法就在我们下一个版本中实现。")]),t._v(" "),n("h3",{attrs:{id:"如何使用-vue-antd-admin-？"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#如何使用-vue-antd-admin-？"}},[t._v("#")]),t._v(" 如何使用 Vue Antd Admin ？")]),t._v(" "),n("p",[t._v("请阅读文档 "),n("RouterLink",{attrs:{to:"/start/use.html"}},[t._v("开始使用")]),t._v("。有任何疑问，欢迎在 github 上给我们提交 "),n("a",{attrs:{href:"https://github.com/iczer/vue-antd-admin/issues/new",target:"_blank",rel:"noopener noreferrer"}},[t._v("issue"),n("OutboundLink")],1),t._v("。")],1),t._v(" "),n("h3",{attrs:{id:"是否支持国际化-？"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#是否支持国际化-？"}},[t._v("#")]),t._v(" 是否支持国际化 ？")]),t._v(" "),n("p",[t._v("Vue Antd Admin 引入了 vue-i18n 支持。因此你可以使用 vue-i18n 的特性对项目做国际化修改，详细请查看 "),n("RouterLink",{attrs:{to:"/advance/i18n.html"}},[t._v("国际化")])],1)])}),[],!1,null,null,null);e.default=a.exports}}]);
|
||||
1
assets/js/33.09a90ca2.js
Normal file
1
assets/js/33.09a90ca2.js
Normal file
File diff suppressed because one or more lines are too long
8
assets/js/4.1817d874.js
Normal file
8
assets/js/4.1817d874.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/5.b598fcf7.js
Normal file
1
assets/js/5.b598fcf7.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/6.24459446.js
Normal file
1
assets/js/6.24459446.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/7.1b0a900f.js
Normal file
1
assets/js/7.1b0a900f.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{320:function(t,e,n){},365:function(t,e,n){"use strict";var o=n(320);n.n(o).a},372:function(t,e,n){"use strict";n.r(e);var o={name:"Alert",props:["show"],data:function(){return{top:100}},mounted:function(){var t=this;console.log(this),setTimeout((function(){t.$el.remove()}),1e3)}},s=(n(365),n(18)),i=Object(s.a)(o,(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"alert",style:"top: "+this.top+"px"},[this._t("default")],2)}),[],!1,null,"0da1f1dd",null);e.default=i.exports}}]);
|
||||
1
assets/js/8.fe7f978a.js
Normal file
1
assets/js/8.fe7f978a.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{321:function(t,o,n){},366:function(t,o,n){"use strict";var s=n(321);n.n(s).a},373:function(t,o,n){"use strict";n.r(o);var s={name:"ColorList",props:["colors"]},r=(n(366),n(18)),c=Object(r.a)(s,(function(){var t=this.$createElement,o=this._self._c||t;return o("div",this._l(this.colors,(function(t,n){return o("color",{key:n,staticClass:"color",attrs:{color:t}})})),1)}),[],!1,null,"09dc489b",null);o.default=c.exports}}]);
|
||||
1
assets/js/9.b6ba06c2.js
Normal file
1
assets/js/9.b6ba06c2.js
Normal file
@ -0,0 +1 @@
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{323:function(t,e,n){},369:function(t,e,n){"use strict";var i=n(323);n.n(i).a},401:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(369),n(18)),a=Object(r.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=a.exports}}]);
|
||||
13
assets/js/app.1db8bb78.js
Normal file
13
assets/js/app.1db8bb78.js
Normal file
File diff suppressed because one or more lines are too long
33
develop/index.html
Normal file
33
develop/index.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>开发 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/25.49453e27.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="开发"><a href="#开发" class="header-anchor">#</a> 开发</h1></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/develop/README.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/6/27 22:18:38</span></div></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/25.49453e27.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
72
develop/layout.html
Normal file
72
develop/layout.html
Normal file
File diff suppressed because one or more lines are too long
41
develop/mock.html
Normal file
41
develop/mock.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Mock | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/26.5d9fccfd.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><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="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" aria-current="page" class="active sidebar-link">Mock</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="mock"><a href="#mock" class="header-anchor">#</a> Mock</h1> <h3 id="作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页"><a href="#作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页" class="header-anchor">#</a> 作者还没来得及编辑该页面，如果你感兴趣，可以点击下方链接，帮助作者完善此页</h3></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/develop/mock.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/7/10 12:37:46</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/develop/service.html" class="prev">
|
||||
服务端交互
|
||||
</a></span> <span class="next"><a href="/advance/i18n.html">
|
||||
国际化
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/26.5d9fccfd.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
212
develop/page.html
Normal file
212
develop/page.html
Normal file
@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>页面 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/5.b598fcf7.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><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="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" aria-current="page" class="active sidebar-link">页面</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/develop/page.html#新建页面文件" class="sidebar-link">新建页面文件</a></li><li class="sidebar-sub-header"><a href="/develop/page.html#配置路由" class="sidebar-link">配置路由</a></li><li class="sidebar-sub-header"><a href="/develop/page.html#i18n国际化配置" class="sidebar-link">i18n国际化配置</a></li></ul></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="页面"><a href="#页面" class="header-anchor">#</a> 页面</h1> <p>这里的『页面』包含新建页面文件，配置路由、样式文件及i18n国际化等。通常情况下，你仅需简单的配置就可以添加一个新的页面。</p> <h2 id="新建页面文件"><a href="#新建页面文件" class="header-anchor">#</a> 新建页面文件</h2> <p>在 src/pages 下创建新的 .vue 文件。如果页面相关文件过多，您可以创建一个文件夹来放置这些文件。</p> <div class="language-diff line-numbers-mode"><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> ├── public
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── src
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ ├── assets # 本地静态资源
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> : :
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ ├── pages # 页面组件和通用模板
|
||||
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> │ │ └── NewPage.vue # 新页面文件
|
||||
</span></span>or
|
||||
<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> │ │ └── newPage # 为新页面创建一个文件夹
|
||||
</span><span class="token prefix inserted">+</span><span class="token line"> │ │ ├── NewPage.vue # 新页面文件
|
||||
</span><span class="token prefix inserted">+</span><span class="token line"> │ │ ├── index.less # 页面样式文件
|
||||
</span><span class="token prefix inserted">+</span><span class="token line"> │ │ └── index.js # import 引导文件
|
||||
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> : :
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ └── main.js # 应用入口js
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── package.json # package.json
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── README.md # README.md
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> └── vue.config.js # vue 配置文件
|
||||
</span></span></code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>为了更好地演示，我们初始化 NewPage.vue 文件如下：</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-page<span class="token punctuation">"</span></span> <span class="token attr-name">:</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">`min-height: $</span><span class="token punctuation">{</span>pageMinHeight<span class="token punctuation">}</span>px`</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>h1</span><span class="token punctuation">></span></span>演示页面<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>mapState<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'NewPage'</span><span class="token punctuation">,</span>
|
||||
<span class="token function">data</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>
|
||||
desc<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>
|
||||
computed<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'setting'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'pageMinHeight'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||||
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"index.less"</span><span class="token punctuation">;</span></span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><p>index.less 文件：</p> <div class="language-less line-numbers-mode"><pre class="language-less"><code><span class="token selector">.new-page</span><span class="token punctuation">{</span>
|
||||
<span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
|
||||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token variable">@base-bg-color</span><span class="token punctuation">;</span>
|
||||
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||||
<span class="token property">padding</span><span class="token punctuation">:</span> 200px 0 0 0<span class="token punctuation">;</span>
|
||||
<span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token operator">-</span>24px<span class="token punctuation">;</span>
|
||||
<span class="token selector">h1</span><span class="token punctuation">{</span>
|
||||
<span class="token property">font-size</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>index.js 文件：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> NewPage <span class="token keyword">from</span> <span class="token string">'./NewPage'</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> NewPage
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="配置路由"><a href="#配置路由" class="header-anchor">#</a> 配置路由</h2> <p>路由配置在 src/router/config.js 文件中，我们把上面创建的页面文件加入路由配置中</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
routes<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 operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'首页'</span><span class="token punctuation">,</span>
|
||||
component<span class="token operator">:</span> TabsView<span class="token punctuation">,</span>
|
||||
redirect<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
|
||||
children<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'newPage'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'新页面'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/newPage'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'dashboard'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'Dashboard'</span><span class="token punctuation">,</span>
|
||||
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
icon<span class="token operator">:</span> <span class="token string">'dashboard'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
component<span class="token operator">:</span> BlankView<span class="token punctuation">,</span>
|
||||
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>我们建议使用英文设置路由的 path 属性，用中文设置路由的 name 属性。因为系统将自动提取路由的 path 和 name 属性作为国际化配置。这在后面的章节
|
||||
<a href="/advance/i18n.html">进阶>国际化</a>中将会讲到。
|
||||
当然，如果你的项目不需要国际化，可以忽略。</p></div> <p>启动服务，你将看到新增页面如下：
|
||||
<img src="/assets/img/new-page.4da2ccce.png" alt="newPage">
|
||||
如果你想把它配置为二级页面或更深层级的页面，只需为它配置一个父级路由，并为父级路由配置一个<a href="/develop/layout.html#admin-的视图">视图组件</a>，
|
||||
这里我们选择 <a href="https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue" target="_blank" rel="noopener noreferrer">PageView<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> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
routes<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 operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'首页'</span><span class="token punctuation">,</span>
|
||||
component<span class="token operator">:</span> TabsView<span class="token punctuation">,</span>
|
||||
redirect<span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
|
||||
children<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'parent'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'父级路由'</span><span class="token punctuation">,</span>
|
||||
component<span class="token operator">:</span> PageView<span class="token punctuation">,</span>
|
||||
children<span class="token operator">:</span> <span class="token punctuation">[</span>
|
||||
<span class="token punctuation">{</span>
|
||||
path<span class="token operator">:</span> <span class="token string">'newPage'</span><span class="token punctuation">,</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'新页面'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/pages/newPage'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</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">'dashboard'</span><span class="token operator">...</span><span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">]</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>页面所有父级路由的组件必须配置为<a href="/develop/layout.html#admin-的视图">视图组件</a>，否则页面的内容可能不会显示。<br>
|
||||
目前有 <a href="https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue" target="_blank" rel="noopener noreferrer">PageView<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>、
|
||||
<a href="https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/tabs/TabsView.vue" target="_blank" rel="noopener noreferrer">TabsView<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> 和
|
||||
<a href="https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/BlankView.vue" target="_blank" rel="noopener noreferrer">BlankView<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> 可选，
|
||||
你也可以自己创建视图组件。（<a href="/develop/layout.html#admin-的视图">什么是视图组件？</a>）</p></div> <p>页面如下：
|
||||
<img src="/assets/img/new-page-2.930ca3c7.png" alt="newPage2"></p> <h2 id="i18n国际化配置"><a href="#i18n国际化配置" class="header-anchor">#</a> i18n国际化配置</h2> <p>如果你想为页面增加i18n国际化配置，只需在页面同级文件夹下创建 i18n.js 文件，然后在页面文件中引入并使用即可。<br>
|
||||
创建 i18n.js 文件：</p> <div class="language-diff line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-diff"><code><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> ├── public
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── src
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ ├── assets # 本地静态资源
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> : :
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ ├── pages # 页面组件和通用模板
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ │ └── newPage # 为新页面创建一个文件夹
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ │ ├── NewPage.vue # 新页面文件
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ │ ├── index.less # 页面样式文件
|
||||
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> │ │ ├── i18n.js # i18n 国际化配置文件
|
||||
</span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> │ │ └── index.js # import 引导文件
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> : :
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> │ └── main.js # 应用入口js
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── package.json # package.json
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> ├── README.md # README.md
|
||||
</span><span class="token prefix unchanged"> </span><span class="token line"> └── vue.config.js # vue 配置文件
|
||||
</span></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>i18n.js 文件内容：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
messages<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token constant">CN</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
content<span class="token operator">:</span> <span class="token string">'演示页面'</span><span class="token punctuation">,</span>
|
||||
description<span class="token operator">:</span> <span class="token string">'这是一个演示页面'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token constant">HK</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
content<span class="token operator">:</span> <span class="token string">'演示頁面'</span><span class="token punctuation">,</span>
|
||||
description<span class="token operator">:</span> <span class="token string">'這是一個演示頁面'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token constant">US</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
content<span class="token operator">:</span> <span class="token string">'Demo Page'</span><span class="token punctuation">,</span>
|
||||
description<span class="token operator">:</span> <span class="token string">'This is a demo page'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>在 NewPage.vue 文件中引入 i18n.js，并添加需要国际化的内容。如下修改：</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br><br><div class="highlighted"> </div><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-page<span class="token punctuation">"</span></span> <span class="token attr-name">:</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token selector">`min-height: $</span><span class="token punctuation">{</span>pageMinHeight<span class="token punctuation">}</span>px`</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>h1</span><span class="token punctuation">></span></span>{{$t('content')}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>mapState<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'NewPage'</span><span class="token punctuation">,</span>
|
||||
i18n<span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./i18n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
computed<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">'setting'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'pageMinHeight'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token function">desc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">'description'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>less<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||||
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"index"</span><span class="token punctuation">;</span></span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>然后页面右上角语言项选择 <code>English</code>，你会发现，页面语言切换为英文了。如下：
|
||||
<img src="/assets/img/new-page-us.60b25f14.png" alt="newPageUs">
|
||||
一切就是这么的简单！</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>如果你尝试切换为繁体语言，可能会发现<code>页面标题</code>和<code>面包屑</code>显示为英文。<br>
|
||||
这涉及到路由的国际化配置，在章节 <a href="/advance/i18n.html">进阶 > 国际化</a> 中，我们会对此作详细讲解。</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/develop/page.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/8/6 14:42:44</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/develop/router.html" class="prev">
|
||||
路由和菜单
|
||||
</a></span> <span class="next"><a href="/develop/theme.html">
|
||||
主题定制
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/5.b598fcf7.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
126
develop/router.html
Normal file
126
develop/router.html
Normal file
File diff suppressed because one or more lines are too long
148
develop/service.html
Normal file
148
develop/service.html
Normal file
@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>服务端交互 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/27.13660c40.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><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="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" aria-current="page" class="active sidebar-link">服务端交互</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/develop/service.html#服务交互流程" class="sidebar-link">服务交互流程</a></li><li class="sidebar-sub-header"><a href="/develop/service.html#服务模块结构" class="sidebar-link">服务模块结构</a></li><li class="sidebar-sub-header"><a href="/develop/service.html#request-js" class="sidebar-link">request.js</a></li><li class="sidebar-sub-header"><a href="/develop/service.html#base-url-配置" class="sidebar-link">Base url 配置</a></li><li class="sidebar-sub-header"><a href="/develop/service.html#跨域设置" class="sidebar-link">跨域设置</a></li></ul></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="服务端交互"><a href="#服务端交互" class="header-anchor">#</a> 服务端交互</h1> <p>数据服务是一个应用的灵魂，它驱动着应用的各个功能模块的正常运转。Vue Antd Admin 在 service 模块封装了服务端交互，通过 API 的形式可以和任何技术栈的服务端应用一起工作。</p> <h2 id="服务交互流程"><a href="#服务交互流程" class="header-anchor">#</a> 服务交互流程</h2> <p>在 Vue Antd Admin 中，服务端交互流程如下：</p> <ul><li>组件内调用 service 服务 API</li> <li>service 服务 API 封装请求数据，通过 request.js 发送请求</li> <li>组件获取 service 返回的数据，更新视图数据或触发其它行为</li></ul> <p>我们以登录为例，Login.vue 组件内，用户输入账号密码，点击登录，调用 services/user/login api</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br></div><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>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>login<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/services/user'</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'Login'</span><span class="token punctuation">,</span>
|
||||
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">onSubmit</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>logging <span class="token operator">=</span> <span class="token boolean">true</span>
|
||||
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">getFieldValue</span><span class="token punctuation">(</span><span class="token string">'name'</span><span class="token punctuation">)</span>
|
||||
<span class="token keyword">const</span> password <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">getFieldValue</span><span class="token punctuation">(</span><span class="token string">'password'</span><span class="token punctuation">)</span>
|
||||
<span class="token function">login</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> password<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">res</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">afterLogin</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p><code>services/user/login</code> 封装账户密码数据，通过 <code>request.js</code> 发送登录服务请求</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>request<span class="token punctuation">,</span> <span class="token constant">METHOD</span><span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/request'</span>
|
||||
<span class="token comment">/**
|
||||
* 登录服务
|
||||
* @param name 账户名
|
||||
* @param password 账户密码
|
||||
* @returns {Promise<AxiosResponse<T>>}
|
||||
*/</span>
|
||||
<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">login</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> password</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token constant">LOGIN</span><span class="token punctuation">,</span> <span class="token constant">METHOD</span><span class="token punctuation">.</span><span class="token constant">POST</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> name<span class="token punctuation">,</span>
|
||||
password<span class="token operator">:</span> password
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>Login.vue 获取登录服务返回的数据，进行后续操作</p> <div class="language-vue line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br></div><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>template</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span>login<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/services/user'</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'Login'</span><span class="token punctuation">,</span>
|
||||
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">onSubmit</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>form<span class="token punctuation">.</span><span class="token function">validateFields</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token function">login</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> password<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">res</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">afterLogin</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</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">afterLogin</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>code <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//登录成功</span>
|
||||
<span class="token operator">...</span>
|
||||
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">//登录失败</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>error <span class="token operator">=</span> loginRes<span class="token punctuation">.</span>message
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h2 id="服务模块结构"><a href="#服务模块结构" class="header-anchor">#</a> 服务模块结构</h2> <p>服务模块结构如下：</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token punctuation">..</span>.
|
||||
├── src
|
||||
│ └── services <span class="token comment"># 数据服务模块</span>
|
||||
│ ├── user.js <span class="token comment"># 用户数据服务</span>
|
||||
│ ├── product.js <span class="token comment"># 产品服务</span>
|
||||
│ <span class="token punctuation">..</span>.
|
||||
│ ├── api.js <span class="token comment"># api 地址管理</span>
|
||||
│ └── index.js <span class="token comment"># 服务模块导出</span>
|
||||
<span class="token punctuation">..</span>.
|
||||
│ └── utils <span class="token comment"># 数据服务模块</span>
|
||||
│ ├── request.js <span class="token comment"># 基于 axios 的 http 请求工具</span>
|
||||
<span class="token punctuation">..</span>.
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>services 文件夹下， api.js 用于服务请求地址的统一管理，index.js 用于模块化导出服务，其它 *.js 文件对应各个服务模块。</p> <h2 id="request-js"><a href="#request-js" class="header-anchor">#</a> request.js</h2> <p>request.js 基于 axios 封装了一些常用的函数，如下：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token punctuation">{</span>
|
||||
<span class="token constant">METHOD</span><span class="token punctuation">,</span> <span class="token comment">//http method 常量</span>
|
||||
<span class="token constant">AUTH_TYPE</span><span class="token punctuation">,</span> <span class="token comment">//凭证认证类型 常量</span>
|
||||
request<span class="token punctuation">,</span> <span class="token comment">//http请求函数</span>
|
||||
setAuthorization<span class="token punctuation">,</span> <span class="token comment">//设置身份凭证函数</span>
|
||||
removeAuthorization<span class="token punctuation">,</span> <span class="token comment">//移除身份凭证函数</span>
|
||||
checkAuthorization <span class="token comment">//检查身份凭证是否过期函数</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>凭证认证类型默认为 <a href="https://www.jianshu.com/p/8f7009456abc" target="_blank" rel="noopener noreferrer">Bearer<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></div> <h2 id="base-url-配置"><a href="#base-url-配置" class="header-anchor">#</a> Base url 配置</h2> <p>你可以在项目根目录下的环境变量文件(.env 和 .env.development)中配置你的 API 服务 base url 地址。</p> <p>生产环境，.env 文件</p> <div class="language-properties line-numbers-mode"><pre class="language-properties"><code><span class="token attr-name">VUE_APP_API_BASE_URL</span><span class="token punctuation">=</span><span class="token attr-value">https://www.server.com</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>开发环境，.env.development 文件：</p> <div class="language-properties line-numbers-mode"><pre class="language-properties"><code><span class="token attr-name">VUE_APP_API_BASE_URL</span><span class="token punctuation">=</span><span class="token attr-value">https://localhost:8000</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="跨域设置"><a href="#跨域设置" class="header-anchor">#</a> 跨域设置</h2> <p>在开发环境中，通常我们的Vue应用和服务应用运行在不同的地址或端口上。我们可以通过简单的设置，代理前端请求，来避免跨域问题。如下：</p> <p>首先，在 services/api.js 文件中设置 API_PROXY_PREFIX 常量，BASE_URL 像下面这样设置：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><div class="highlighted"> </div><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code><span class="token comment">//跨域代理前缀</span>
|
||||
<span class="token keyword">const</span> <span class="token constant">API_PROXY_PREFIX</span><span class="token operator">=</span><span class="token string">'/api'</span>
|
||||
<span class="token comment">//base url</span>
|
||||
<span class="token keyword">const</span> <span class="token constant">BASE_URL</span> <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'production'</span> <span class="token operator">?</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VUE_APP_API_BASE_URL</span> <span class="token operator">:</span> <span class="token constant">API_PROXY_PREFIX</span>
|
||||
<span class="token comment">//导出api服务地址</span>
|
||||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token constant">LOGIN</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">BASE_URL</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/login</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
|
||||
<span class="token constant">ROUTES</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">BASE_URL</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/routes</span><span class="token template-punctuation string">`</span></span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>然后，在 vue.config.js 文件中配置代理：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>model<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
devServer<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
proxy<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">'/api'</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">//此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致</span>
|
||||
target<span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VUE_APP_API_BASE_URL</span><span class="token punctuation">,</span>
|
||||
changeOrigin<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
pathRewrite<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token string">'^/api'</span><span class="token operator">:</span> <span class="token string">''</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>此代理配置仅适用于开发环境，生产环境的跨域代理请在自己的web服务器配置。</p></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/develop/service.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/8/8 21:51:40</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/develop/theme.html" class="prev">
|
||||
主题定制
|
||||
</a></span> <span class="next"><a href="/develop/mock.html">
|
||||
Mock
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/27.13660c40.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
147
develop/theme.html
Normal file
147
develop/theme.html
Normal file
@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>主题定制 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/6.24459446.js" as="script"><link rel="preload" href="/assets/js/4.1817d874.js" as="script"><link rel="preload" href="/assets/js/8.fe7f978a.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><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="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" aria-current="page" class="active sidebar-link">主题定制</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/develop/theme.html#主题颜色" class="sidebar-link">主题颜色</a></li><li class="sidebar-sub-header"><a href="/develop/theme.html#主题模式" class="sidebar-link">主题模式</a></li><li class="sidebar-sub-header"><a href="/develop/theme.html#导航布局" class="sidebar-link">导航布局</a></li><li class="sidebar-sub-header"><a href="/develop/theme.html#动画" class="sidebar-link">动画</a></li><li class="sidebar-sub-header"><a href="/develop/theme.html#其它" class="sidebar-link">其它</a></li></ul></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></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> <h3 id="主题色"><a href="#主题色" class="header-anchor">#</a> 主题色</h3> <p>我们内置了一个色盘供您选择</p> <div data-clipboard-text="#fa541c" class="color" style="background-color:#fa541c;" data-v-4d7d65d2></div> <div data-clipboard-text="#fadb14" class="color" style="background-color:#fadb14;" data-v-4d7d65d2></div> <div data-clipboard-text="#3eaf7c" class="color" style="background-color:#3eaf7c;" data-v-4d7d65d2></div> <div data-clipboard-text="#13c2c2" class="color" style="background-color:#13c2c2;" data-v-4d7d65d2></div> <div data-clipboard-text="#1890ff" class="color" style="background-color:#1890ff;" data-v-4d7d65d2></div> <div data-clipboard-text="#722ed1" class="color" style="background-color:#722ed1;" data-v-4d7d65d2></div> <div data-clipboard-text="#eb2f96" class="color" style="background-color:#eb2f96;" data-v-4d7d65d2></div> <p>如果这不能满足你的需求，你也可以使用任何你喜欢的颜色，只需要在 src/config/config.js 文件中配置你的主题色即可。如：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span> <span class="token comment">//换成任何你喜欢的颜色，支持 hex 色值</span>
|
||||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>当你设置好主题色后，系统会根据这个主题色为你生成一系列配套的颜色，并应用到vue组件中。</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>你可以在你的样式文件中直接使用 less 变量 <code>@theme-color</code>。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>主题色目前只支持 <code>hex</code> 模式的色值。如果设置为 <code>rgb</code> 或其它模式的色值，可能会导致配套颜色无法生成。</p></div> <h3 id="功能色"><a href="#功能色" class="header-anchor">#</a> 功能色</h3> <p>除了主题色，系统还有一些功能性颜色，分别为：成功色、警告色和错误色。默认色值分别为：</p> <table><thead><tr><th style="text-align:center;">名称</th> <th style="text-align:center;">success</th> <th style="text-align:center;">warning</th> <th style="text-align:center;">error</th></tr></thead> <tbody><tr><td style="text-align:center;">色值</td> <td style="text-align:center;"><code>#52c41a</code></td> <td style="text-align:center;"><code>#faad14</code></td> <td style="text-align:center;"><code>#f5222d</code></td></tr> <tr><td style="text-align:center;">颜色</td> <td style="text-align:center;"><div data-clipboard-text="#52c41a" class="color" style="background-color:#52c41a;" data-v-4d7d65d2></div></td> <td style="text-align:center;"><div data-clipboard-text="#faad14" class="color" style="background-color:#faad14;" data-v-4d7d65d2></div></td> <td style="text-align:center;"><div data-clipboard-text="#f5222d" class="color" style="background-color:#f5222d;" data-v-4d7d65d2></div></td></tr> <tr><td style="text-align:center;">less变量</td> <td style="text-align:center;">@success-color</td> <td style="text-align:center;">@warning-color</td> <td style="text-align:center;">@error-color</td></tr></tbody></table> <p>你也可以在 src/config/config.js 重新定义这些功能色</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||||
mode<span class="token operator">:</span> <span class="token string">'night'</span><span class="token punctuation">,</span>
|
||||
success<span class="token operator">:</span> <span class="token string">'#52c41a'</span><span class="token punctuation">,</span> <span class="token comment">//定义成功色，支持 hex 色值</span>
|
||||
warning<span class="token operator">:</span> <span class="token string">'#faad14'</span><span class="token punctuation">,</span> <span class="token comment">//定义警告色，支持 hex 色值</span>
|
||||
error<span class="token operator">:</span> <span class="token string">'#f5222d'</span> <span class="token comment">//定义错误色，支持 hex 色值</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>想在在你的样式文件中使用以上各功能色，引用各功能色对应的 less 变量即可。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>功能色目前也只支持 <code>hex</code> 模式的色值。如果设置为 <code>rgb</code> 或其它模式的色值，可能会导致配套颜色无法生成。</p></div> <h3 id="文本色"><a href="#文本色" class="header-anchor">#</a> 文本色</h3> <table style="text-align:center;"><tr><th>主题模式</th> <th>标题色</th> <th>文本色</th> <th>次级文本色</th></tr> <tr><td rowspan="2">light/dark</td> <td><div data-clipboard-text="rgba(0,0,0,0.85)" class="color" style="background-color:rgba(0,0,0,0.85);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(0,0,0,0.65)" class="color" style="background-color:rgba(0,0,0,0.65);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(0,0,0,0.45)" class="color" style="background-color:rgba(0,0,0,0.45);" data-v-4d7d65d2></div></td></tr> <tr><td><code>rgba(0,0,0,0.85)</code></td> <td><code>rgba(0,0,0,0.65)</code></td> <td><code>rgba(0,0,0,0.45)</code></td></tr> <tr><td rowspan="2">night</td> <td><div data-clipboard-text="rgba(255,255,255,0.85)" class="color" style="background-color:rgba(255,255,255,0.85);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(255,255,255,0.65)" class="color" style="background-color:rgba(255,255,255,0.65);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(255,255,255,0.45)" class="color" style="background-color:rgba(255,255,255,0.45);" data-v-4d7d65d2></div></td></tr> <tr><td><code>rgba(255,255,255,0.85)</code></td> <td><code>rgba(255,255,255,0.65)</code></td> <td><code>rgba(255,255,255,0.45)</code></td></tr> <tr><td>less变量</td> <td>@title-color</td> <td>@text-color</td> <td>@text-color-second</td></tr></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>想在在你的样式文件中使用以上文本色，引用各文本色对应的 less 变量即可。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>目前不支持自定义文本色，因为涉及到主题模式切换时文本色的置换问题。如强行修改，可能会导致主题模式切换时出现样式异常。
|
||||
如果你的项目不需要主题模式切换，可自行替换以上文本色。</p></div> <h3 id="背景色"><a href="#背景色" class="header-anchor">#</a> 背景色</h3> <table style="text-align:center;"><tr><th>主题模式</th> <th>布局背景色</th> <th>基础背景色</th> <th>hover背景色</th> <th>边框颜色</th> <th>阴影颜色</th></tr> <tr><td rowspan="2">light/dark</td> <td><div data-clipboard-text="#f0f2f5" class="color" style="background-color:#f0f2f5;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="#fff" class="color" style="background-color:#fff;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(0,0,0,0.025)" class="color" style="background-color:rgba(0,0,0,0.025);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="#f0f0f0" class="color" style="background-color:#f0f0f0;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(0,0,0,0.15)" class="color" style="background-color:rgba(0,0,0,0.15);" data-v-4d7d65d2></div></td></tr> <tr><td><code>#f0f2f5</code></td> <td><code>#fff</code></td> <td><code>rgba(0,0,0,0.025)</code></td> <td><code>#f0f0f0</code></td> <td><code>rgba(0,0,0,0.15)</code></td></tr> <tr><td rowspan="2">night</td> <td><div data-clipboard-text="#000" class="color" style="background-color:#000;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="#141414" class="color" style="background-color:#141414;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(255,255,255,0.025)" class="color" style="background-color:rgba(255,255,255,0.025);" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="#303030" class="color" style="background-color:#303030;" data-v-4d7d65d2></div></td> <td><div data-clipboard-text="rgba(255,255,255,0.15)" class="color" style="background-color:rgba(255,255,255,0.15);" data-v-4d7d65d2></div></td></tr> <tr><td><code>#000</code></td> <td><code>#141414</code></td> <td><code>rgba(255,255,255,0.025)</code></td> <td><code>#303030</code></td> <td><code>rgba(255,255,255,0.15)</code></td></tr> <tr><td>less变量</td> <td>@layout-bg-color</td> <td>@base-bg-color</td> <td>@hover-bg-color</td> <td>@border-color</td> <td>@shadow-color</td></tr></table> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>想在在你的样式文件中使用以上背景色，引用各背景色对应的 less 变量即可。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>目前也不支持自定义背景色，因为涉及到主题模式切换时背景色的置换问题。如强行修改，可能会导致主题模式切换时出现样式异常。
|
||||
如果你的项目不需要主题模式切换，可自行替换以上背景色。</p></div> <h3 id="antd-的色系"><a href="#antd-的色系" class="header-anchor">#</a> antd 的色系</h3> <p>除了以上颜色，我们还引入了 ant-design 内置的色系。如下：</p> <table style="text-align:center;"><tr><th>色系</th> <th>类型</th> <th>颜色</th></tr> <tr><td rowspan="2">blue/拂晓蓝</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#e6f7ff" class="color color" style="background-color:#e6f7ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#bae7ff" class="color color" style="background-color:#bae7ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#91d5ff" class="color color" style="background-color:#91d5ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#69c0ff" class="color color" style="background-color:#69c0ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#40a9ff" class="color color" style="background-color:#40a9ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#1890ff" class="color color" style="background-color:#1890ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#096dd9" class="color color" style="background-color:#096dd9;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#0050b3" class="color color" style="background-color:#0050b3;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#003a8c" class="color color" style="background-color:#003a8c;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#002766" class="color color" style="background-color:#002766;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@blue-1</code>、
|
||||
<code>@blue-2</code> <code>...</code> <code>@blue-10</code></td></tr> <tr><td rowspan="2">purple/酱紫</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#f9f0ff" class="color color" style="background-color:#f9f0ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#efdbff" class="color color" style="background-color:#efdbff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d3adf7" class="color color" style="background-color:#d3adf7;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#b37feb" class="color color" style="background-color:#b37feb;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#9254de" class="color color" style="background-color:#9254de;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#722ed1" class="color color" style="background-color:#722ed1;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#531dab" class="color color" style="background-color:#531dab;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#391085" class="color color" style="background-color:#391085;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#22075e" class="color color" style="background-color:#22075e;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#120338" class="color color" style="background-color:#120338;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@purple-1</code>、
|
||||
<code>@purple-2</code> <code>...</code> <code>@purple-10</code></td></tr> <tr><td rowspan="2">cyan/明青</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#e6fffb" class="color color" style="background-color:#e6fffb;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#b5f5ec" class="color color" style="background-color:#b5f5ec;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#87e8de" class="color color" style="background-color:#87e8de;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#5cdbd3" class="color color" style="background-color:#5cdbd3;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#36cfc9" class="color color" style="background-color:#36cfc9;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#13c2c2" class="color color" style="background-color:#13c2c2;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#08979c" class="color color" style="background-color:#08979c;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#006d75" class="color color" style="background-color:#006d75;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#00474f" class="color color" style="background-color:#00474f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#002329" class="color color" style="background-color:#002329;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@cyan-1</code>、
|
||||
<code>@cyan-2</code> <code>...</code> <code>@cyan-10</code></td></tr> <tr><td rowspan="2">green/极光绿</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#f6ffed" class="color color" style="background-color:#f6ffed;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d9f7be" class="color color" style="background-color:#d9f7be;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#b7eb8f" class="color color" style="background-color:#b7eb8f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#95de64" class="color color" style="background-color:#95de64;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#73d13d" class="color color" style="background-color:#73d13d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#52c41a" class="color color" style="background-color:#52c41a;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#389e0d" class="color color" style="background-color:#389e0d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#237804" class="color color" style="background-color:#237804;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#135200" class="color color" style="background-color:#135200;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#092b00" class="color color" style="background-color:#092b00;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@green-1</code>、
|
||||
<code>@green-2</code> <code>...</code> <code>@green-10</code></td></tr> <tr><td rowspan="2">magenta/法式洋红</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fff0f6" class="color color" style="background-color:#fff0f6;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffd6e7" class="color color" style="background-color:#ffd6e7;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffadd2" class="color color" style="background-color:#ffadd2;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ff85c0" class="color color" style="background-color:#ff85c0;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#f759ab" class="color color" style="background-color:#f759ab;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#eb2f96" class="color color" style="background-color:#eb2f96;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#c41d7f" class="color color" style="background-color:#c41d7f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#9e1068" class="color color" style="background-color:#9e1068;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#780650" class="color color" style="background-color:#780650;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#520339" class="color color" style="background-color:#520339;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@magenta-1</code>、
|
||||
<code>@magenta-2</code> <code>...</code> <code>@magenta-10</code></td></tr> <tr><td rowspan="2">red/薄暮</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fff1f0" class="color color" style="background-color:#fff1f0;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffccc7" class="color color" style="background-color:#ffccc7;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffa39e" class="color color" style="background-color:#ffa39e;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ff7875" class="color color" style="background-color:#ff7875;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ff4d4f" class="color color" style="background-color:#ff4d4f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#f5222d" class="color color" style="background-color:#f5222d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#cf1322" class="color color" style="background-color:#cf1322;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#a8071a" class="color color" style="background-color:#a8071a;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#820014" class="color color" style="background-color:#820014;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#5c0011" class="color color" style="background-color:#5c0011;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@red-1</code>、
|
||||
<code>@red-2</code> <code>...</code> <code>@red-10</code></td></tr> <tr><td rowspan="2">orange/日暮</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fff7e6" class="color color" style="background-color:#fff7e6;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffe7ba" class="color color" style="background-color:#ffe7ba;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffd591" class="color color" style="background-color:#ffd591;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffc069" class="color color" style="background-color:#ffc069;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffa940" class="color color" style="background-color:#ffa940;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fa8c16" class="color color" style="background-color:#fa8c16;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d46b08" class="color color" style="background-color:#d46b08;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ad4e00" class="color color" style="background-color:#ad4e00;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#873800" class="color color" style="background-color:#873800;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#612500" class="color color" style="background-color:#612500;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@orange-1</code>、
|
||||
<code>@orange-2</code> <code>...</code> <code>@orange-10</code></td></tr> <tr><td rowspan="2">yellow/日出</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#feffe6" class="color color" style="background-color:#feffe6;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffffb8" class="color color" style="background-color:#ffffb8;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fffb8f" class="color color" style="background-color:#fffb8f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fff566" class="color color" style="background-color:#fff566;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffec3d" class="color color" style="background-color:#ffec3d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fadb14" class="color color" style="background-color:#fadb14;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d4b106" class="color color" style="background-color:#d4b106;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ad8b00" class="color color" style="background-color:#ad8b00;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#876800" class="color color" style="background-color:#876800;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#614700" class="color color" style="background-color:#614700;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@yellow-1</code>、
|
||||
<code>@yellow-2</code> <code>...</code> <code>@yellow-10</code></td></tr> <tr><td rowspan="2">volcano/火山</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fff2e8" class="color color" style="background-color:#fff2e8;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffd8bf" class="color color" style="background-color:#ffd8bf;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffbb96" class="color color" style="background-color:#ffbb96;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ff9c6e" class="color color" style="background-color:#ff9c6e;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ff7a45" class="color color" style="background-color:#ff7a45;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fa541c" class="color color" style="background-color:#fa541c;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d4380d" class="color color" style="background-color:#d4380d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ad2102" class="color color" style="background-color:#ad2102;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#871400" class="color color" style="background-color:#871400;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#610b00" class="color color" style="background-color:#610b00;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@volcano-1</code>、
|
||||
<code>@volcano-2</code> <code>...</code> <code>@volcano-10</code></td></tr> <tr><td rowspan="2">geekblue/极客蓝</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#f0f5ff" class="color color" style="background-color:#f0f5ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d6e4ff" class="color color" style="background-color:#d6e4ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#adc6ff" class="color color" style="background-color:#adc6ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#85a5ff" class="color color" style="background-color:#85a5ff;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#597ef7" class="color color" style="background-color:#597ef7;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#2f54eb" class="color color" style="background-color:#2f54eb;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#1d39c4" class="color color" style="background-color:#1d39c4;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#10239e" class="color color" style="background-color:#10239e;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#061178" class="color color" style="background-color:#061178;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#030852" class="color color" style="background-color:#030852;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@geekblue-1</code>、
|
||||
<code>@geekblue-2</code> <code>...</code> <code>@geekblue-10</code></td></tr> <tr><td rowspan="2">lime/青柠</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fcffe6" class="color color" style="background-color:#fcffe6;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#f4ffb8" class="color color" style="background-color:#f4ffb8;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#eaff8f" class="color color" style="background-color:#eaff8f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d3f261" class="color color" style="background-color:#d3f261;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#bae637" class="color color" style="background-color:#bae637;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#a0d911" class="color color" style="background-color:#a0d911;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#7cb305" class="color color" style="background-color:#7cb305;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#5b8c00" class="color color" style="background-color:#5b8c00;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#3f6600" class="color color" style="background-color:#3f6600;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#254000" class="color color" style="background-color:#254000;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@lime-1</code>、
|
||||
<code>@lime-2</code> <code>...</code> <code>@lime-10</code></td></tr> <tr><td rowspan="2">gold/金盏花</td> <td>色盘</td> <td><div data-v-09dc489b><div data-clipboard-text="#fffbe6" class="color color" style="background-color:#fffbe6;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#fff1b8" class="color color" style="background-color:#fff1b8;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffe58f" class="color color" style="background-color:#ffe58f;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffd666" class="color color" style="background-color:#ffd666;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ffc53d" class="color color" style="background-color:#ffc53d;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#faad14" class="color color" style="background-color:#faad14;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#d48806" class="color color" style="background-color:#d48806;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#ad6800" class="color color" style="background-color:#ad6800;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#874d00" class="color color" style="background-color:#874d00;" data-v-4d7d65d2 data-v-09dc489b></div><div data-clipboard-text="#613400" class="color color" style="background-color:#613400;" data-v-4d7d65d2 data-v-09dc489b></div></div></td></tr> <tr><td>less变量</td> <td><code>@gold-1</code>、
|
||||
<code>@gold-2</code> <code>...</code> <code>@gold-10</code></td></tr></table>
|
||||
以上色系对应的less变量均可以在你的样式代码中直接使用。
|
||||
<div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>我们建议在开发中使用 <code>less变量</code> 而不是直接使用 <code>颜色值</code> 来设置颜色。这样做对主题色和主题模式切换很有帮助。</p></div> <h2 id="主题模式"><a href="#主题模式" class="header-anchor">#</a> 主题模式</h2> <p>Vue Antd Admin 有三种主题模式，分别为：<code>light/亮色菜单模式</code>、<code>dark/暗色菜单模式</code> 和 <code>night/黑夜模式</code>。</p> <p>light / 亮色菜单模式:
|
||||
<img src="/assets/img/mode-light.e460a721.png" alt="light">
|
||||
dark / 暗色菜单模式:
|
||||
<img src="/assets/img/mode-dark.178ff571.png" alt="dark">
|
||||
night / 黑夜模式:
|
||||
<img src="/assets/img/mode-night.16c831f4.png" alt="night"></p> <p>你可以在这三种模式之间随意切换，也可以在 src/config/config.js 中设置默认的主题模式。</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||||
mode<span class="token operator">:</span> <span class="token string">'night'</span> <span class="token comment">//设置你的默认主题模式，可选 light、dark 和 night</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="导航布局"><a href="#导航布局" class="header-anchor">#</a> 导航布局</h2> <p>Vue Antd Admin 有两种导航布局，<code>side/侧边导航</code> 和 <code>head/顶部导航</code>。<br>
|
||||
默认为侧边导航，你可以在 src/config/config.js 中修改导航布局</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
layout<span class="token operator">:</span> <span class="token string">'side'</span><span class="token punctuation">,</span> <span class="token comment">//设置你的默认导航布局，有 side 和 head 可选</span>
|
||||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="动画"><a href="#动画" class="header-anchor">#</a> 动画</h2> <p>Vue Antd Admin 内置了 <a href="https://animate.style" target="_blank" rel="noopener noreferrer">animate.css<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> 动画库，在页面切换时会应用动画效果。你可以在 src/config/config.js 中配置动画效果或者禁用动画。</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
disabled<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//禁用动画，true:禁用，false:启用</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span> <span class="token comment">//动画效果，支持的动画效果可参考 src/config/default/animate.config.js</span>
|
||||
direction<span class="token operator">:</span> <span class="token string">'default'</span> <span class="token comment">//动画方向，切换页面时动画的方向，参考 src/config/default/animate.config.js</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>支持的动画特效种类，可以参考 src/config/default/animate.config.js 文件。</p> <h2 id="其它"><a href="#其它" class="header-anchor">#</a> 其它</h2> <h3 id="色弱模式"><a href="#色弱模式" class="header-anchor">#</a> 色弱模式</h3> <p>对于有视觉障碍的群体，我们提供了色弱模式，你可以通过配置 src/config/config.js 启用色弱模式</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
||||
weekMode<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//色弱模式，true:开启，false:不开启</span>
|
||||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="多页签"><a href="#多页签" class="header-anchor">#</a> 多页签</h3> <p>在 src/config/config.js 设置 multiPage 来启用或关闭多页签模式</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
color<span class="token operator">:</span> <span class="token string">'#13c2c2'</span><span class="token punctuation">,</span>
|
||||
mode<span class="token operator">:</span> <span class="token string">'night'</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
multiPage<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//多页签模式，true:开启，false:不开启</span>
|
||||
animate<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'roll'</span><span class="token punctuation">,</span>
|
||||
direction<span class="token operator">:</span> <span class="token string">'default'</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>完整的系统设置参考 src/config/default/setting.config.js</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>以上所有主题设置项，均已映射到 vuex/setting 模块的 state 中，你可以通过提交 setting/mutations 实时修改设置项。<br>
|
||||
如何使用 <a href="https://vuex.vuejs.org/zh/guide/mutations.html" target="_blank" rel="noopener noreferrer">mutations<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></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/develop/theme.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/7/23 14:42:10</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/develop/page.html" class="prev">
|
||||
页面
|
||||
</a></span> <span class="next"><a href="/develop/service.html">
|
||||
服务端交互
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/6.24459446.js" defer></script><script src="/assets/js/4.1817d874.js" defer></script><script src="/assets/js/8.fe7f978a.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
41
index.html
Normal file
41
index.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/13.48c77c6e.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><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="/" aria-current="page" class="home-link router-link-exact-active router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><img src="/logo.png" alt="hero"> <h1 id="main-title">
|
||||
Vue Antd Admin
|
||||
</h1> <p class="description">
|
||||
开箱即用的中台前端/设计解决方案
|
||||
</p> <p class="action"><a href="/start/use.html" class="nav-link action-button">
|
||||
快速上手 →
|
||||
</a></p></header> <div class="features"><div class="feature"><h2>简洁</h2> <p>以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。</p></div><div class="feature"><h2>优雅</h2> <p>享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。</p></div><div class="feature"><h2>自然</h2> <p>VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。</p></div></div> <div class="theme-default-content custom content__default"></div> <div class="footer">
|
||||
MIT Licensed | Copyright © 2018-present iczer
|
||||
</div></main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/13.48c77c6e.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
37
other/community.html
Normal file
37
other/community.html
Normal file
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>社区 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/29.fb0b9607.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><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="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" aria-current="page" class="active sidebar-link">社区</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/other/community.html#交流学习" class="sidebar-link">交流学习</a></li></ul></li></ul></section></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> <h3 id="qq群：812277510、610090280（已满）"><a href="#qq群：812277510、610090280（已满）" class="header-anchor">#</a> QQ群：812277510、610090280（已满）</h3></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/other/community.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/11/9 09:45:12</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/other/upgrade.html" class="prev">
|
||||
更新日志
|
||||
</a></span> <!----></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/29.fb0b9607.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
33
other/index.html
Normal file
33
other/index.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>其它 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/28.826bdb2a.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="其它"><a href="#其它" class="header-anchor">#</a> 其它</h1></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/other/README.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/6/27 21:49:04</span></div></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/28.826bdb2a.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
41
other/upgrade.html
Normal file
41
other/upgrade.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>更新日志 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/30.472c91a2.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><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="/other/upgrade.html" aria-current="page" class="active sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="更新日志"><a href="#更新日志" class="header-anchor">#</a> 更新日志</h1></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/other/upgrade.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/6/27 21:49:04</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/advance/api.html" class="prev">
|
||||
全局API
|
||||
</a></span> <span class="next"><a href="/other/community.html">
|
||||
社区
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/30.472c91a2.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
42
start/faq.html
Normal file
42
start/faq.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>常见问题 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/32.53b87dae.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" aria-current="page" class="active sidebar-link">常见问题</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="常见问题"><a href="#常见问题" class="header-anchor">#</a> 常见问题</h1> <h3 id="为什么不是-ant-design-pro-vue-？"><a href="#为什么不是-ant-design-pro-vue-？" class="header-anchor">#</a> 为什么不是 Ant Design Pro Vue ？</h3> <p><a href="https://github.com/vueComponent/ant-design-vue-pro" target="_blank" rel="noopener noreferrer">Ant Design Pro Vue<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> 是 <a href="https://github.com/ant-design/ant-design-pro" target="_blank" rel="noopener noreferrer">Ant Design Pro<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> 的 Vue 版本，其中项目结构、组件、
|
||||
布局和使用方法等基本与 Ant Design Pro 的 react 版本保持一致。如果你比较熟悉 react 版，或者你已经在使用它，这确实是一个不错的选择。</p> <p><a href="https://github.com/iczer/vue-antd-admin" target="_blank" rel="noopener noreferrer">Vue Antd Admin<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> 同样实现了 Ant Design Pro 的所有功能。与此同时，我们还根据 Vue 的特性，对 Ant Design Pro 的一些组件和布局作出了相应的修改及优化，同时不影响保持与 Ant Design Pro 的一致。</p> <p>另外，我们还在添加一些 Ant Design Pro 没有的功能，比如全局动画、多页签模式等。</p> <p>如果你想使用 Ant Design Pro，但又觉得它缺乏一些你想要的功能，不妨看看 <a href="https://github.com/iczer/vue-antd-admin" target="_blank" rel="noopener noreferrer">Vue Antd Admin<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> <p>因此，如果你有一些不错的想法和建议，欢迎随时和我们交流，很可能你的想法就在我们下一个版本中实现。</p> <h3 id="如何使用-vue-antd-admin-？"><a href="#如何使用-vue-antd-admin-？" class="header-anchor">#</a> 如何使用 Vue Antd Admin ？</h3> <p>请阅读文档 <a href="/start/use.html">开始使用</a>。有任何疑问，欢迎在 github 上给我们提交 <a href="https://github.com/iczer/vue-antd-admin/issues/new" target="_blank" rel="noopener noreferrer">issue<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="是否支持国际化-？"><a href="#是否支持国际化-？" class="header-anchor">#</a> 是否支持国际化 ？</h3> <p>Vue Antd Admin 引入了 vue-i18n 支持。因此你可以使用 vue-i18n 的特性对项目做国际化修改，详细请查看 <a href="/advance/i18n.html">国际化</a></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/start/faq.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/6/29 21:44:46</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/start/use.html" class="prev">
|
||||
使用
|
||||
</a></span> <span class="next"><a href="/develop/layout.html">
|
||||
布局
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/32.53b87dae.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
33
start/index.html
Normal file
33
start/index.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>开始 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/31.a79ce13e.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/33.09a90ca2.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" class="sidebar-link">使用</a></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="开始"><a href="#开始" class="header-anchor">#</a> 开始</h2></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/start/README.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/6/27 21:49:04</span></div></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/31.a79ce13e.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
69
start/use.html
Normal file
69
start/use.html
Normal file
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>使用 | Vue Antd Admin</title>
|
||||
<meta name="generator" content="VuePress 1.5.2">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="description" content="Vue Antd Admin">
|
||||
<link rel="preload" href="/assets/css/0.styles.6e02fda8.css" as="style"><link rel="preload" href="/assets/js/app.1db8bb78.js" as="script"><link rel="preload" href="/assets/js/2.8c76fef9.js" as="script"><link rel="preload" href="/assets/js/33.09a90ca2.js" as="script"><link rel="prefetch" href="/assets/js/10.700eec62.js"><link rel="prefetch" href="/assets/js/11.45b1f56d.js"><link rel="prefetch" href="/assets/js/12.01a276f6.js"><link rel="prefetch" href="/assets/js/13.48c77c6e.js"><link rel="prefetch" href="/assets/js/14.4f2e11ab.js"><link rel="prefetch" href="/assets/js/15.288a0b46.js"><link rel="prefetch" href="/assets/js/16.82c281d4.js"><link rel="prefetch" href="/assets/js/17.100d788a.js"><link rel="prefetch" href="/assets/js/18.5be3472b.js"><link rel="prefetch" href="/assets/js/19.03245e8d.js"><link rel="prefetch" href="/assets/js/20.3d708930.js"><link rel="prefetch" href="/assets/js/21.c054b79e.js"><link rel="prefetch" href="/assets/js/22.5db4e883.js"><link rel="prefetch" href="/assets/js/23.9725697e.js"><link rel="prefetch" href="/assets/js/24.ed3d58d4.js"><link rel="prefetch" href="/assets/js/25.49453e27.js"><link rel="prefetch" href="/assets/js/26.5d9fccfd.js"><link rel="prefetch" href="/assets/js/27.13660c40.js"><link rel="prefetch" href="/assets/js/28.826bdb2a.js"><link rel="prefetch" href="/assets/js/29.fb0b9607.js"><link rel="prefetch" href="/assets/js/3.6d23cf69.js"><link rel="prefetch" href="/assets/js/30.472c91a2.js"><link rel="prefetch" href="/assets/js/31.a79ce13e.js"><link rel="prefetch" href="/assets/js/32.53b87dae.js"><link rel="prefetch" href="/assets/js/4.1817d874.js"><link rel="prefetch" href="/assets/js/5.b598fcf7.js"><link rel="prefetch" href="/assets/js/6.24459446.js"><link rel="prefetch" href="/assets/js/7.1b0a900f.js"><link rel="prefetch" href="/assets/js/8.fe7f978a.js"><link rel="prefetch" href="/assets/js/9.b6ba06c2.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.6e02fda8.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="/" class="home-link router-link-active"><img src="/logo.png" alt="Vue Antd Admin" class="logo"> <span class="site-name can-hide">Vue Antd Admin</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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/" class="nav-link">
|
||||
指南
|
||||
</a></div><div class="nav-item"><a href="/develop/layout.html" class="nav-link">
|
||||
配置
|
||||
</a></div><div class="nav-item"><a href="/advance/theme.html" class="nav-link">
|
||||
主题
|
||||
</a></div> <a href="https://github.com/iczer/vue-antd-admin" 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="/start/use.html" aria-current="page" class="active sidebar-link">使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/start/use.html#准备" class="sidebar-link">准备</a></li><li class="sidebar-sub-header"><a href="/start/use.html#安装" class="sidebar-link">安装</a></li><li class="sidebar-sub-header"><a href="/start/use.html#目录结构" class="sidebar-link">目录结构</a></li><li class="sidebar-sub-header"><a href="/start/use.html#本地开发" class="sidebar-link">本地开发</a></li></ul></li><li><a href="/start/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/develop/layout.html" class="sidebar-link">布局</a></li><li><a href="/develop/router.html" class="sidebar-link">路由和菜单</a></li><li><a href="/develop/page.html" class="sidebar-link">页面</a></li><li><a href="/develop/theme.html" class="sidebar-link">主题定制</a></li><li><a href="/develop/service.html" class="sidebar-link">服务端交互</a></li><li><a href="/develop/mock.html" class="sidebar-link">Mock</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/advance/i18n.html" class="sidebar-link">国际化</a></li><li><a href="/advance/async.html" class="sidebar-link">异步路由和菜单</a></li><li><a href="/advance/authority.html" class="sidebar-link">权限管理</a></li><li><a href="/advance/login.html" class="sidebar-link">登录认证</a></li><li><a href="/advance/guard.html" class="sidebar-link">路由守卫</a></li><li><a href="/advance/interceptors.html" class="sidebar-link">拦截器配置</a></li><li><a href="/advance/api.html" class="sidebar-link">全局API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>其它</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/other/upgrade.html" class="sidebar-link">更新日志</a></li><li><a href="/other/community.html" class="sidebar-link">社区</a></li></ul></section></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> <p>你的本地环境需要安装 yarn、node 和 git。我们的技术栈基于 ES2015+、Vue、Antd，提前学习这些知识会非常有帮助。</p> <h2 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h2> <p>克隆本项目到本地</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>$ <span class="token function">git</span> clone https://github.com/iczer/vue-antd-admin.git
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>安装依赖</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>$ <span class="token function">yarn</span> <span class="token function">install</span>
|
||||
or
|
||||
$ <span class="token function">npm</span> <span class="token function">install</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>master 分支是 Vue Antd Admin 的标准版代码，此分支代码适合用于用于学习研究，不推荐在此分支做正式开发。
|
||||
我们在 basic 分支提供了 Vue Antd Admin 的基础版代码，正式开发请切换至此分支，以便于后续的版本更新。</p></div> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>如果基于 <code>master分支</code> 进行开发，在版本更新时遇到的代码冲突问题请自行解决，我们不对基于 <code>master分支</code> 开发时遇到的问题提供技术支持。<br>
|
||||
再次强调，<code>master分支</code> 仅推荐用于学习参考，正式开发请切换至 <code>basic</code> 分支！！！</p></div> <h2 id="目录结构"><a href="#目录结构" class="header-anchor">#</a> 目录结构</h2> <p>我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>├── docs <span class="token comment"># 使用文档</span>
|
||||
├── public
|
||||
│ └── favicon.png <span class="token comment"># favicon</span>
|
||||
│ └── index.html <span class="token comment"># 入口 HTML</span>
|
||||
├── src
|
||||
│ ├── assets <span class="token comment"># 本地静态资源</span>
|
||||
│ ├── components <span class="token comment"># 内置通用组件</span>
|
||||
│ ├── config <span class="token comment"># 系统配置</span>
|
||||
│ ├── layouts <span class="token comment"># 通用布局</span>
|
||||
│ ├── mock <span class="token comment"># 本地 mock 数据</span>
|
||||
│ ├── pages <span class="token comment"># 页面组件和通用模板</span>
|
||||
│ ├── plugins <span class="token comment"># vue 插件</span>
|
||||
│ ├── router <span class="token comment"># 路由配置</span>
|
||||
│ ├── services <span class="token comment"># 数据服务模块</span>
|
||||
│ ├── store <span class="token comment"># vuex 状态管理配置</span>
|
||||
│ ├── theme <span class="token comment"># 主题相关</span>
|
||||
│ ├── utils <span class="token comment"># js 工具</span>
|
||||
│ ├── App.vue <span class="token comment"># 应用入口组件</span>
|
||||
│ ├── bootstrap.js <span class="token comment"># 应用启动引导js</span>
|
||||
│ └── main.js <span class="token comment"># 应用入口js</span>
|
||||
├── package.json <span class="token comment"># package.json</span>
|
||||
├── README.md <span class="token comment"># README.md</span>
|
||||
└── vue.config.js <span class="token comment"># vue 配置文件</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h2 id="本地开发"><a href="#本地开发" class="header-anchor">#</a> 本地开发</h2> <p>启动服务</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>$ <span class="token function">yarn</span> serve
|
||||
or
|
||||
$ <span class="token function">npm</span> run serve
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>启动成功后，会看到一个本地预览地址，通常是 http://localhost:8080 。接下来就可以修改代码，并实时预览修改结果啦！</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/iczer/vue-antd-admin/edit/master/docs/start/use.md" target="_blank" rel="noopener noreferrer">在 Github 上帮助我们编辑此页</a> <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></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2020/8/6 15:20:55</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/start/faq.html">
|
||||
常见问题
|
||||
</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
|
||||
<script src="/assets/js/app.1db8bb78.js" defer></script><script src="/assets/js/2.8c76fef9.js" defer></script><script src="/assets/js/33.09a90ca2.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user