@melt-js/docs-bag 2026.11.7 → 2026.11.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -3
- package/dist/404.html +5 -5
- package/dist/README.html +10 -10
- package/dist/assets/README.md.D8R8Eb23.js +9 -0
- package/dist/assets/README.md.D8R8Eb23.lean.js +1 -0
- package/dist/assets/{app.CPZ-gtYR.js → app.B2EI2o4q.js} +1 -1
- package/dist/assets/chunks/@localSearchIndexroot.Chqo2dFE.js +1 -0
- package/dist/assets/chunks/{VPLocalSearchBox.BVA3GWxn.js → VPLocalSearchBox.DY28kF4x.js} +5 -5
- package/dist/assets/chunks/{framework.B3lxS50j.js → framework.Olv9GB1A.js} +1 -1
- package/dist/assets/chunks/{theme.C4rSMcmz.js → theme.BJkR0Hu5.js} +2 -2
- package/dist/assets/{guide_complete-host-app.md.CDRzLz0E.js → guide_complete-host-app.md.CBuOgyl8.js} +1 -1
- package/dist/assets/{guide_complete-host-app.md.CDRzLz0E.lean.js → guide_complete-host-app.md.CBuOgyl8.lean.js} +1 -1
- package/dist/assets/{guide_create-project.md.LRNhDD9x.js → guide_create-project.md.B2KkXWnI.js} +1 -1
- package/dist/assets/{guide_create-project.md.LRNhDD9x.lean.js → guide_create-project.md.B2KkXWnI.lean.js} +1 -1
- package/dist/assets/{guide_deployment.md.B8aEUabm.js → guide_deployment.md.BrvgEFf0.js} +1 -1
- package/dist/assets/{guide_deployment.md.B8aEUabm.lean.js → guide_deployment.md.BrvgEFf0.lean.js} +1 -1
- package/dist/assets/{guide_dictionary-system.md.Dy0tQYMR.js → guide_dictionary-system.md.hS_2-jYz.js} +1 -1
- package/dist/assets/{guide_dictionary-system.md.Dy0tQYMR.lean.js → guide_dictionary-system.md.hS_2-jYz.lean.js} +1 -1
- package/dist/assets/{guide_getting-started.md.B-mobXxi.js → guide_getting-started.md.0nvT0khJ.js} +1 -1
- package/dist/assets/{guide_getting-started.md.B-mobXxi.lean.js → guide_getting-started.md.0nvT0khJ.lean.js} +1 -1
- package/dist/assets/{guide_host_auth-and-permissions.md.DWH3Vape.js → guide_host_auth-and-permissions.md.Pr66-VM-.js} +1 -1
- package/dist/assets/{guide_host_auth-and-permissions.md.DWH3Vape.lean.js → guide_host_auth-and-permissions.md.Pr66-VM-.lean.js} +1 -1
- package/dist/assets/{guide_host_bootstrap.md.DpbxPIZw.js → guide_host_bootstrap.md.DKFeJyTi.js} +1 -1
- package/dist/assets/{guide_host_bootstrap.md.DpbxPIZw.lean.js → guide_host_bootstrap.md.DKFeJyTi.lean.js} +1 -1
- package/dist/assets/{guide_host_routing-and-menu.md.BdCMIOxn.js → guide_host_routing-and-menu.md.CQaMO4vj.js} +1 -1
- package/dist/assets/{guide_host_routing-and-menu.md.BdCMIOxn.lean.js → guide_host_routing-and-menu.md.CQaMO4vj.lean.js} +1 -1
- package/dist/assets/{guide_introduction.md.1MiCcWyO.js → guide_introduction.md.tg6wBrpR.js} +1 -1
- package/dist/assets/{guide_introduction.md.1MiCcWyO.lean.js → guide_introduction.md.tg6wBrpR.lean.js} +1 -1
- package/dist/assets/{guide_local-debugging.md.CLJoKVb9.js → guide_local-debugging.md.DVHeXzws.js} +1 -1
- package/dist/assets/{guide_local-debugging.md.CLJoKVb9.lean.js → guide_local-debugging.md.DVHeXzws.lean.js} +1 -1
- package/dist/assets/{guide_network-request.md.DDlA8bc0.js → guide_network-request.md.BlxKmm59.js} +1 -1
- package/dist/assets/{guide_network-request.md.DDlA8bc0.lean.js → guide_network-request.md.BlxKmm59.lean.js} +1 -1
- package/dist/assets/{guide_official-plugins_index.md.DPwemCGy.js → guide_official-plugins_index.md.BF-gWYVU.js} +1 -1
- package/dist/assets/{guide_official-plugins_index.md.DPwemCGy.lean.js → guide_official-plugins_index.md.BF-gWYVU.lean.js} +1 -1
- package/dist/assets/{guide_official-plugins_install-and-toggle.md.Eq2hWjYn.js → guide_official-plugins_install-and-toggle.md.B35ne8VL.js} +1 -1
- package/dist/assets/{guide_official-plugins_install-and-toggle.md.Eq2hWjYn.lean.js → guide_official-plugins_install-and-toggle.md.B35ne8VL.lean.js} +1 -1
- package/dist/assets/{guide_official-plugins_shop.md.yBltEx-o.js → guide_official-plugins_shop.md.BGGP886L.js} +1 -1
- package/dist/assets/{guide_official-plugins_shop.md.yBltEx-o.lean.js → guide_official-plugins_shop.md.BGGP886L.lean.js} +1 -1
- package/dist/assets/{guide_official-plugins_sys-setting.md.BmkuOqGv.js → guide_official-plugins_sys-setting.md.BwiJzRiL.js} +1 -1
- package/dist/assets/{guide_official-plugins_sys-setting.md.BmkuOqGv.lean.js → guide_official-plugins_sys-setting.md.BwiJzRiL.lean.js} +1 -1
- package/dist/assets/{guide_package-core.md.-E29SYy8.js → guide_package-core.md.D1xrMRok.js} +1 -1
- package/dist/assets/{guide_package-core.md.-E29SYy8.lean.js → guide_package-core.md.D1xrMRok.lean.js} +1 -1
- package/dist/assets/{guide_package-ecosystem.md.Di3RcVpF.js → guide_package-ecosystem.md.Dl2r9NSa.js} +1 -1
- package/dist/assets/{guide_package-ecosystem.md.Di3RcVpF.lean.js → guide_package-ecosystem.md.Dl2r9NSa.lean.js} +1 -1
- package/dist/assets/{guide_package-plugin-shop.md.D-xXN7Yg.js → guide_package-plugin-shop.md.BaIhzPDV.js} +1 -1
- package/dist/assets/{guide_package-plugin-shop.md.D-xXN7Yg.lean.js → guide_package-plugin-shop.md.BaIhzPDV.lean.js} +1 -1
- package/dist/assets/{guide_package-plugin-sys-setting.md.Dx3nxHVF.js → guide_package-plugin-sys-setting.md.C0ROCk-O.js} +1 -1
- package/dist/assets/{guide_package-plugin-sys-setting.md.Dx3nxHVF.lean.js → guide_package-plugin-sys-setting.md.C0ROCk-O.lean.js} +1 -1
- package/dist/assets/{guide_package-publishing.md.B7hzTYDH.js → guide_package-publishing.md.De2Y0rte.js} +1 -1
- package/dist/assets/{guide_package-publishing.md.B7hzTYDH.lean.js → guide_package-publishing.md.De2Y0rte.lean.js} +1 -1
- package/dist/assets/{guide_package-request.md.DxaD65eM.js → guide_package-request.md.DugGGXSX.js} +1 -1
- package/dist/assets/{guide_package-request.md.DxaD65eM.lean.js → guide_package-request.md.DugGGXSX.lean.js} +1 -1
- package/dist/assets/{guide_package-ui.md.wBZ_iQLb.js → guide_package-ui.md.BPCpNCIF.js} +1 -1
- package/dist/assets/{guide_package-ui.md.wBZ_iQLb.lean.js → guide_package-ui.md.BPCpNCIF.lean.js} +1 -1
- package/dist/assets/{guide_permissions.md.B_5re4AR.js → guide_permissions.md.DHnKaha_.js} +1 -1
- package/dist/assets/{guide_permissions.md.B_5re4AR.lean.js → guide_permissions.md.DHnKaha_.lean.js} +1 -1
- package/dist/assets/{guide_plugin-development.md.BQzTwLRr.js → guide_plugin-development.md.DeFWVfLN.js} +1 -1
- package/dist/assets/{guide_plugin-development.md.BQzTwLRr.lean.js → guide_plugin-development.md.DeFWVfLN.lean.js} +1 -1
- package/dist/assets/{guide_plugins_admin-plugin.md.d_XC5U-4.js → guide_plugins_admin-plugin.md.XLffV1LB.js} +1 -1
- package/dist/assets/{guide_plugins_admin-plugin.md.d_XC5U-4.lean.js → guide_plugins_admin-plugin.md.XLffV1LB.lean.js} +1 -1
- package/dist/assets/{guide_plugins_create-plugin.md.C-wDq4Un.js → guide_plugins_create-plugin.md.Br3OIR1m.js} +1 -1
- package/dist/assets/{guide_plugins_create-plugin.md.C-wDq4Un.lean.js → guide_plugins_create-plugin.md.Br3OIR1m.lean.js} +1 -1
- package/dist/assets/{guide_plugins_debug-and-publish.md.CeTc01QN.js → guide_plugins_debug-and-publish.md.C5ZbCito.js} +1 -1
- package/dist/assets/{guide_plugins_debug-and-publish.md.CeTc01QN.lean.js → guide_plugins_debug-and-publish.md.C5ZbCito.lean.js} +1 -1
- package/dist/assets/{guide_plugins_lifecycle-and-dependencies.md.BtwKS5jY.js → guide_plugins_lifecycle-and-dependencies.md.CV7nFME-.js} +1 -1
- package/dist/assets/{guide_plugins_lifecycle-and-dependencies.md.BtwKS5jY.lean.js → guide_plugins_lifecycle-and-dependencies.md.CV7nFME-.lean.js} +1 -1
- package/dist/assets/{guide_plugins_permissions-and-settings.md.05CsB1I6.js → guide_plugins_permissions-and-settings.md.B_MrVXY_.js} +1 -1
- package/dist/assets/{guide_plugins_permissions-and-settings.md.05CsB1I6.lean.js → guide_plugins_permissions-and-settings.md.B_MrVXY_.lean.js} +1 -1
- package/dist/assets/{guide_plugins_routes-menus-locales.md.B2dzO2DN.js → guide_plugins_routes-menus-locales.md.heaL1_wi.js} +1 -1
- package/dist/assets/{guide_plugins_routes-menus-locales.md.B2dzO2DN.lean.js → guide_plugins_routes-menus-locales.md.heaL1_wi.lean.js} +1 -1
- package/dist/assets/{guide_pro-form.md.DbSHbrMu.js → guide_pro-form.md.L9CKqs5C.js} +1 -1
- package/dist/assets/{guide_pro-form.md.DbSHbrMu.lean.js → guide_pro-form.md.L9CKqs5C.lean.js} +1 -1
- package/dist/assets/{guide_pro-table.md.DBuYQYgG.js → guide_pro-table.md.DlhJG49R.js} +1 -1
- package/dist/assets/{guide_pro-table.md.DBuYQYgG.lean.js → guide_pro-table.md.DlhJG49R.lean.js} +1 -1
- package/dist/assets/{guide_request-and-components.md.BQXI_ZxY.js → guide_request-and-components.md.CeEnrOuY.js} +1 -1
- package/dist/assets/{guide_request-and-components.md.BQXI_ZxY.lean.js → guide_request-and-components.md.CeEnrOuY.lean.js} +1 -1
- package/dist/assets/{guide_routing-and-menu.md.-zrm3BV9.js → guide_routing-and-menu.md.09TL-ILh.js} +1 -1
- package/dist/assets/{guide_routing-and-menu.md.-zrm3BV9.lean.js → guide_routing-and-menu.md.09TL-ILh.lean.js} +1 -1
- package/dist/assets/{guide_theme-tokens.md.DXpbrOjS.js → guide_theme-tokens.md.Cfn7RM_2.js} +1 -1
- package/dist/assets/{guide_theme-tokens.md.DXpbrOjS.lean.js → guide_theme-tokens.md.Cfn7RM_2.lean.js} +1 -1
- package/dist/assets/{index.md.BUgI8r98.js → index.md.ClEmxxY1.js} +1 -1
- package/dist/assets/{index.md.BUgI8r98.lean.js → index.md.ClEmxxY1.lean.js} +1 -1
- package/dist/assets/style.IeUynjWL.css +1 -0
- package/dist/guide/complete-host-app.html +10 -10
- package/dist/guide/create-project.html +10 -10
- package/dist/guide/deployment.html +10 -10
- package/dist/guide/dictionary-system.html +10 -10
- package/dist/guide/getting-started.html +10 -10
- package/dist/guide/host/auth-and-permissions.html +10 -10
- package/dist/guide/host/bootstrap.html +10 -10
- package/dist/guide/host/routing-and-menu.html +10 -10
- package/dist/guide/introduction.html +10 -10
- package/dist/guide/local-debugging.html +10 -10
- package/dist/guide/network-request.html +10 -10
- package/dist/guide/official-plugins/index.html +10 -10
- package/dist/guide/official-plugins/install-and-toggle.html +10 -10
- package/dist/guide/official-plugins/shop.html +10 -10
- package/dist/guide/official-plugins/sys-setting.html +10 -10
- package/dist/guide/package-core.html +10 -10
- package/dist/guide/package-ecosystem.html +9 -9
- package/dist/guide/package-plugin-shop.html +10 -10
- package/dist/guide/package-plugin-sys-setting.html +10 -10
- package/dist/guide/package-publishing.html +10 -10
- package/dist/guide/package-request.html +10 -10
- package/dist/guide/package-ui.html +10 -10
- package/dist/guide/permissions.html +10 -10
- package/dist/guide/plugin-development.html +10 -10
- package/dist/guide/plugins/admin-plugin.html +10 -10
- package/dist/guide/plugins/create-plugin.html +10 -10
- package/dist/guide/plugins/debug-and-publish.html +10 -10
- package/dist/guide/plugins/lifecycle-and-dependencies.html +10 -10
- package/dist/guide/plugins/permissions-and-settings.html +10 -10
- package/dist/guide/plugins/routes-menus-locales.html +10 -10
- package/dist/guide/pro-form.html +10 -10
- package/dist/guide/pro-table.html +10 -10
- package/dist/guide/request-and-components.html +10 -10
- package/dist/guide/routing-and-menu.html +10 -10
- package/dist/guide/theme-tokens.html +10 -10
- package/dist/hashmap.json +1 -1
- package/dist/index.html +9 -9
- package/package.json +12 -9
- package/dist/assets/README.md.BEUJStMI.js +0 -9
- package/dist/assets/README.md.BEUJStMI.lean.js +0 -1
- package/dist/assets/chunks/@localSearchIndexroot.7ill5i5O.js +0 -1
- package/dist/assets/style.0snOvk0r.css +0 -1
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
<title>路由与菜单 | Vue-Bag-Admin</title>
|
|
7
7
|
<meta name="description" content="基于 Vue3 + Vite6 + Naive UI + Pinia + Strapi5 的中后台系统框架">
|
|
8
8
|
<meta name="generator" content="VitePress v1.6.4">
|
|
9
|
-
<link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.
|
|
10
|
-
<link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.
|
|
9
|
+
<link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.16/dist/assets/style.IeUynjWL.css" as="style">
|
|
10
|
+
<link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.16/dist/vp-icons.css" as="style">
|
|
11
11
|
|
|
12
|
-
<script type="module" src="/@melt-js/docs-bag@2026.11.
|
|
13
|
-
<link rel="preload" href="/@melt-js/docs-bag@2026.11.
|
|
14
|
-
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.
|
|
15
|
-
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.
|
|
16
|
-
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.
|
|
12
|
+
<script type="module" src="/@melt-js/docs-bag@2026.11.16/dist/assets/app.B2EI2o4q.js"></script>
|
|
13
|
+
<link rel="preload" href="/@melt-js/docs-bag@2026.11.16/dist/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
14
|
+
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.16/dist/assets/chunks/theme.BJkR0Hu5.js">
|
|
15
|
+
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.16/dist/assets/chunks/framework.Olv9GB1A.js">
|
|
16
|
+
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.16/dist/assets/guide_host_routing-and-menu.md.CQaMO4vj.lean.js">
|
|
17
17
|
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"dark",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
18
18
|
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
19
19
|
</head>
|
|
20
20
|
<body>
|
|
21
|
-
<div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/@melt-js/docs-bag@2026.11.7/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/@melt-js/docs-bag@2026.11.7/logo.png" alt data-v-8426fc1a><!--]--><span data-v-1168a8e4>Vue-Bag-Admin</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/@melt-js/docs-bag@2026.11.7/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/@melt-js/docs-bag@2026.11.7/guide/introduction.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://hangjob.github.io/vue-bag-admin/" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>在线预览</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><!----><span data-v-cf11d7a2>社区</span><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><div class="items" data-v-b98bc113><!--[--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link" href="/@melt-js/docs-bag@2026.11.7/#community" data-v-35975db6><!--[--><span data-v-35975db6>微信群</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://www.itnavs.com/" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>知航驿站</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://yh.itnavs.com/contact" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>合作机会</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://www.npmjs.com/package/@melt-js/libs-bag-entry" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>v2026.11.7</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/hangjob/vue-bag-admin/tree/next" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/hangjob/vue-bag-admin/tree/next" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>开始使用</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/introduction.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>项目介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>快速上手</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/create-project.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>创建项目</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>核心开发</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/host/bootstrap.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>初始化宿主</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/host/routing-and-menu.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>路由与菜单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/host/auth-and-permissions.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>登录与权限</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/request-and-components.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>请求与组件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>官方插件</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/official-plugins/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>插件总览</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/official-plugins/install-and-toggle.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>安装与启停</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/official-plugins/shop.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>商城插件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/official-plugins/sys-setting.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>系统设置插件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>插件开发</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/create-plugin.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>创建插件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/admin-plugin.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>AdminPlugin 配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/routes-menus-locales.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>路由、菜单与多语言</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/permissions-and-settings.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>权限与配置项</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/lifecycle-and-dependencies.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>生命周期与依赖</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/debug-and-publish.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>调试与发布</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _@melt-js_docs-bag@2026_11_7_guide_host_routing-and-menu" data-v-39a288b8><div><h1 id="路由与菜单" tabindex="-1">路由与菜单 <a class="header-anchor" href="#路由与菜单" aria-label="Permalink to "路由与菜单""></a></h1><p>在 Vue-Bag-Admin 中，路由和菜单是两份配置：</p><ul><li>路由决定一个地址能否访问、渲染哪个页面、使用什么布局。</li><li>菜单决定侧边栏显示什么、如何分组和排序。</li></ul><p>两者通常使用相同的 <code>path</code> 建立关联，但不会自动互相生成。</p><h2 id="宿主路由和插件路由" tabindex="-1">宿主路由和插件路由 <a class="header-anchor" href="#宿主路由和插件路由" aria-label="Permalink to "宿主路由和插件路由""></a></h2><p>宿主路由通过 <code>createHostRouter()</code> 注册：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> router</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createHostRouter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
21
|
+
<div id="app"><div class="Layout" data-v-0edfb049><!--[--><!--]--><!--[--><span tabindex="-1" data-v-7b519ef7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-7b519ef7>Skip to content</a><!--]--><!----><header class="VPNav" data-v-0edfb049 data-v-cd38b33d><div class="VPNavBar" data-v-cd38b33d data-v-61f8f22d><div class="wrapper" data-v-61f8f22d><div class="container" data-v-61f8f22d><div class="title" data-v-61f8f22d><div class="VPNavBarTitle has-sidebar" data-v-61f8f22d data-v-df65655a><a class="title" href="/@melt-js/docs-bag@2026.11.16/dist/" data-v-df65655a><!--[--><!--]--><!--[--><img class="VPImage logo" src="/@melt-js/docs-bag@2026.11.16/dist/logo.png" alt data-v-0be788e2><!--]--><span data-v-df65655a>Vue-Bag-Admin</span><!--[--><!--]--></a></div></div><div class="content" data-v-61f8f22d><div class="content-body" data-v-61f8f22d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-61f8f22d><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-61f8f22d data-v-52b0ba7e><span id="main-nav-aria-label" class="visually-hidden" data-v-52b0ba7e> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/@melt-js/docs-bag@2026.11.16/dist/" tabindex="0" data-v-52b0ba7e data-v-32d1898c><!--[--><span data-v-32d1898c>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/@melt-js/docs-bag@2026.11.16/dist/guide/introduction.html" tabindex="0" data-v-52b0ba7e data-v-32d1898c><!--[--><span data-v-32d1898c>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://hangjob.github.io/vue-bag-admin/" target="_blank" rel="noreferrer" tabindex="0" data-v-52b0ba7e data-v-32d1898c><!--[--><span data-v-32d1898c>在线预览</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-52b0ba7e data-v-af632b79><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-af632b79><span class="text" data-v-af632b79><!----><span data-v-af632b79>社区</span><span class="vpi-chevron-down text-icon" data-v-af632b79></span></span></button><div class="menu" data-v-af632b79><div class="VPMenu" data-v-af632b79 data-v-91f581de><div class="items" data-v-91f581de><!--[--><!--[--><div class="VPMenuLink" data-v-91f581de data-v-0a7b9194><a class="VPLink link" href="/@melt-js/docs-bag@2026.11.16/dist/#community" data-v-0a7b9194><!--[--><span data-v-0a7b9194>微信群</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-91f581de data-v-0a7b9194><a class="VPLink link vp-external-link-icon" href="https://www.itnavs.com/" target="_blank" rel="noreferrer" data-v-0a7b9194><!--[--><span data-v-0a7b9194>知航驿站</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-91f581de data-v-0a7b9194><a class="VPLink link vp-external-link-icon" href="https://yh.itnavs.com/contact" target="_blank" rel="noreferrer" data-v-0a7b9194><!--[--><span data-v-0a7b9194>合作机会</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://www.npmjs.com/package/@melt-js/libs-bag-entry" target="_blank" rel="noreferrer" tabindex="0" data-v-52b0ba7e data-v-32d1898c><!--[--><span data-v-32d1898c>v2026.11.16</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-61f8f22d data-v-dc17aa45><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-dc17aa45 data-v-685f7c6e data-v-e5c4a645><span class="check" data-v-e5c4a645><span class="icon" data-v-e5c4a645><!--[--><span class="vpi-sun sun" data-v-685f7c6e></span><span class="vpi-moon moon" data-v-685f7c6e></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-61f8f22d data-v-6ba2cce0 data-v-95361356><!--[--><a class="VPSocialLink no-icon" href="https://github.com/hangjob/vue-bag-admin/tree/next" aria-label="github" target="_blank" rel="noopener" data-v-95361356 data-v-ff15611b><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-61f8f22d data-v-6bf73ff9 data-v-af632b79><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-af632b79><span class="vpi-more-horizontal icon" data-v-af632b79></span></button><div class="menu" data-v-af632b79><div class="VPMenu" data-v-af632b79 data-v-91f581de><!----><!--[--><!--[--><!----><div class="group" data-v-6bf73ff9><div class="item appearance" data-v-6bf73ff9><p class="label" data-v-6bf73ff9>Appearance</p><div class="appearance-action" data-v-6bf73ff9><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-6bf73ff9 data-v-685f7c6e data-v-e5c4a645><span class="check" data-v-e5c4a645><span class="icon" data-v-e5c4a645><!--[--><span class="vpi-sun sun" data-v-685f7c6e></span><span class="vpi-moon moon" data-v-685f7c6e></span><!--]--></span></span></button></div></div></div><div class="group" data-v-6bf73ff9><div class="item social-links" data-v-6bf73ff9><div class="VPSocialLinks social-links-list" data-v-6bf73ff9 data-v-95361356><!--[--><a class="VPSocialLink no-icon" href="https://github.com/hangjob/vue-bag-admin/tree/next" aria-label="github" target="_blank" rel="noopener" data-v-95361356 data-v-ff15611b><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-61f8f22d data-v-633bcbbe><span class="container" data-v-633bcbbe><span class="top" data-v-633bcbbe></span><span class="middle" data-v-633bcbbe></span><span class="bottom" data-v-633bcbbe></span></span></button></div></div></div></div><div class="divider" data-v-61f8f22d><div class="divider-line" data-v-61f8f22d></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-0edfb049 data-v-a46b1e36><div class="container" data-v-a46b1e36><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a46b1e36><span class="vpi-align-left menu-icon" data-v-a46b1e36></span><span class="menu-text" data-v-a46b1e36>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a46b1e36 data-v-376aa372><button data-v-376aa372>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-0edfb049 data-v-4290678e><div class="curtain" data-v-4290678e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-4290678e><span class="visually-hidden" id="sidebar-aria-label" data-v-4290678e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-3a01ad27><section class="VPSidebarItem level-0" data-v-3a01ad27 data-v-e46237b3><div class="item" role="button" tabindex="0" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><h2 class="text" data-v-e46237b3>开始使用</h2><!----></div><div class="items" data-v-e46237b3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/introduction.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>项目介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/getting-started.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>快速上手</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/create-project.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>创建项目</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-3a01ad27><section class="VPSidebarItem level-0 has-active" data-v-3a01ad27 data-v-e46237b3><div class="item" role="button" tabindex="0" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><h2 class="text" data-v-e46237b3>核心开发</h2><!----></div><div class="items" data-v-e46237b3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/host/bootstrap.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>初始化宿主</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/host/routing-and-menu.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>路由与菜单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/host/auth-and-permissions.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>登录与权限</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/request-and-components.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>请求与组件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-3a01ad27><section class="VPSidebarItem level-0" data-v-3a01ad27 data-v-e46237b3><div class="item" role="button" tabindex="0" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><h2 class="text" data-v-e46237b3>官方插件</h2><!----></div><div class="items" data-v-e46237b3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/official-plugins/" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>插件总览</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/official-plugins/install-and-toggle.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>安装与启停</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/official-plugins/shop.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>商城插件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/official-plugins/sys-setting.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>系统设置插件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-3a01ad27><section class="VPSidebarItem level-0" data-v-3a01ad27 data-v-e46237b3><div class="item" role="button" tabindex="0" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><h2 class="text" data-v-e46237b3>插件开发</h2><!----></div><div class="items" data-v-e46237b3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/create-plugin.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>创建插件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/admin-plugin.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>AdminPlugin 配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/routes-menus-locales.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>路由、菜单与多语言</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/permissions-and-settings.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>权限与配置项</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/lifecycle-and-dependencies.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>生命周期与依赖</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/debug-and-publish.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>调试与发布</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-0edfb049 data-v-c786a43b><div class="VPDoc has-sidebar has-aside" data-v-c786a43b data-v-c1154bb5><!--[--><!--]--><div class="container" data-v-c1154bb5><div class="aside" data-v-c1154bb5><div class="aside-curtain" data-v-c1154bb5></div><div class="aside-container" data-v-c1154bb5><div class="aside-content" data-v-c1154bb5><div class="VPDocAside" data-v-c1154bb5 data-v-ac30bcc5><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-ac30bcc5 data-v-3870f070><div class="content" data-v-3870f070><div class="outline-marker" data-v-3870f070></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-3870f070>On this page</div><ul class="VPDocOutlineItem root" data-v-3870f070 data-v-d3fae412><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-ac30bcc5></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c1154bb5><div class="content-container" data-v-c1154bb5><!--[--><!--]--><main class="main" data-v-c1154bb5><div style="position:relative;" class="vp-doc _@melt-js_docs-bag@2026_11_16_dist_guide_host_routing-and-menu" data-v-c1154bb5><div><h1 id="路由与菜单" tabindex="-1">路由与菜单 <a class="header-anchor" href="#路由与菜单" aria-label="Permalink to "路由与菜单""></a></h1><p>在 Vue-Bag-Admin 中，路由和菜单是两份配置：</p><ul><li>路由决定一个地址能否访问、渲染哪个页面、使用什么布局。</li><li>菜单决定侧边栏显示什么、如何分组和排序。</li></ul><p>两者通常使用相同的 <code>path</code> 建立关联，但不会自动互相生成。</p><h2 id="宿主路由和插件路由" tabindex="-1">宿主路由和插件路由 <a class="header-anchor" href="#宿主路由和插件路由" aria-label="Permalink to "宿主路由和插件路由""></a></h2><p>宿主路由通过 <code>createHostRouter()</code> 注册：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> router</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createHostRouter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
22
22
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> routes: appRoutes,</span></span>
|
|
23
23
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> auth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
|
|
24
24
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>它们适合放登录页、Dashboard、403、404 等应用级页面。</p><p>业务路由通常由插件提供：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> contentPlugin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AdminPlugin</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
@@ -120,8 +120,8 @@
|
|
|
120
120
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
121
121
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
122
122
|
<span class="line"></span>
|
|
123
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> reportPlugin</span></span></code></pre></div><p>路由与菜单最好使用相同的权限条件。只隐藏菜单不能阻止用户直接输入 URL，真正的页面保护仍由路由守卫负责。</p><h2 id="常见约定" tabindex="-1">常见约定 <a class="header-anchor" href="#常见约定" aria-label="Permalink to "常见约定""></a></h2><ul><li>登录、403 等页面使用 <code>layout: 'blank'</code> 或不出现在菜单中。</li><li>列表页同时配置路由和菜单。</li><li>详情、编辑页只配置路由，并设置 <code>activeMenu</code>。</li><li>404 通配路由放在宿主路由数组最后。</li><li>路由 <code>name</code>、路由 <code>path</code>、菜单 <code>path</code> 和插件 <code>id</code> 都保持唯一。</li><li>业务页面尽量放到插件中，宿主只保留应用级页面。</li></ul><h2 id="下一步" tabindex="-1">下一步 <a class="header-anchor" href="#下一步" aria-label="Permalink to "下一步""></a></h2><p>继续阅读 <a href="./auth-and-permissions.html">登录与权限</a>，为路由和菜单接入真实用户状态。</p></div></div></main><footer class="VPDocFooter" data-v-
|
|
124
|
-
<script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_complete-host-app.md\":\"
|
|
123
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> reportPlugin</span></span></code></pre></div><p>路由与菜单最好使用相同的权限条件。只隐藏菜单不能阻止用户直接输入 URL，真正的页面保护仍由路由守卫负责。</p><h2 id="常见约定" tabindex="-1">常见约定 <a class="header-anchor" href="#常见约定" aria-label="Permalink to "常见约定""></a></h2><ul><li>登录、403 等页面使用 <code>layout: 'blank'</code> 或不出现在菜单中。</li><li>列表页同时配置路由和菜单。</li><li>详情、编辑页只配置路由，并设置 <code>activeMenu</code>。</li><li>404 通配路由放在宿主路由数组最后。</li><li>路由 <code>name</code>、路由 <code>path</code>、菜单 <code>path</code> 和插件 <code>id</code> 都保持唯一。</li><li>业务页面尽量放到插件中，宿主只保留应用级页面。</li></ul><h2 id="下一步" tabindex="-1">下一步 <a class="header-anchor" href="#下一步" aria-label="Permalink to "下一步""></a></h2><p>继续阅读 <a href="./auth-and-permissions.html">登录与权限</a>，为路由和菜单接入真实用户状态。</p></div></div></main><footer class="VPDocFooter" data-v-c1154bb5 data-v-1803e81a><!--[--><!--]--><div class="edit-info" data-v-1803e81a><!----><div class="last-updated" data-v-1803e81a><p class="VPLastUpdated" data-v-1803e81a data-v-3993c1fc>Last updated: <time datetime="2026-11-07T09:53:20.000Z" data-v-3993c1fc></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-1803e81a><span class="visually-hidden" id="doc-footer-aria-label" data-v-1803e81a>Pager</span><div class="pager" data-v-1803e81a><a class="VPLink link pager-link prev" href="/@melt-js/docs-bag@2026.11.16/dist/guide/host/bootstrap.html" data-v-1803e81a><!--[--><span class="desc" data-v-1803e81a>Previous page</span><span class="title" data-v-1803e81a>初始化宿主</span><!--]--></a></div><div class="pager" data-v-1803e81a><a class="VPLink link pager-link next" href="/@melt-js/docs-bag@2026.11.16/dist/guide/host/auth-and-permissions.html" data-v-1803e81a><!--[--><span class="desc" data-v-1803e81a>Next page</span><span class="title" data-v-1803e81a>登录与权限</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-0edfb049 data-v-5db284cc><div class="container" data-v-5db284cc><p class="message" data-v-5db284cc>Released under the MIT License.</p><p class="copyright" data-v-5db284cc>Copyright © 2026-present Vue-Bag-Admin</p></div></footer><!--[--><!--]--></div></div>
|
|
124
|
+
<script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_complete-host-app.md\":\"CBuOgyl8\",\"guide_create-project.md\":\"B2KkXWnI\",\"guide_deployment.md\":\"BrvgEFf0\",\"guide_dictionary-system.md\":\"hS_2-jYz\",\"guide_getting-started.md\":\"0nvT0khJ\",\"guide_host_auth-and-permissions.md\":\"Pr66-VM-\",\"guide_host_bootstrap.md\":\"DKFeJyTi\",\"guide_host_routing-and-menu.md\":\"CQaMO4vj\",\"guide_introduction.md\":\"tg6wBrpR\",\"guide_local-debugging.md\":\"DVHeXzws\",\"guide_network-request.md\":\"BlxKmm59\",\"guide_official-plugins_index.md\":\"BF-gWYVU\",\"guide_official-plugins_install-and-toggle.md\":\"B35ne8VL\",\"guide_official-plugins_shop.md\":\"BGGP886L\",\"guide_official-plugins_sys-setting.md\":\"BwiJzRiL\",\"guide_package-core.md\":\"D1xrMRok\",\"guide_package-ecosystem.md\":\"Dl2r9NSa\",\"guide_package-plugin-shop.md\":\"BaIhzPDV\",\"guide_package-plugin-sys-setting.md\":\"C0ROCk-O\",\"guide_package-publishing.md\":\"De2Y0rte\",\"guide_package-request.md\":\"DugGGXSX\",\"guide_package-ui.md\":\"BPCpNCIF\",\"guide_permissions.md\":\"DHnKaha_\",\"guide_plugin-development.md\":\"DeFWVfLN\",\"guide_plugins_admin-plugin.md\":\"XLffV1LB\",\"guide_plugins_create-plugin.md\":\"Br3OIR1m\",\"guide_plugins_debug-and-publish.md\":\"C5ZbCito\",\"guide_plugins_lifecycle-and-dependencies.md\":\"CV7nFME-\",\"guide_plugins_permissions-and-settings.md\":\"B_MrVXY_\",\"guide_plugins_routes-menus-locales.md\":\"heaL1_wi\",\"guide_pro-form.md\":\"L9CKqs5C\",\"guide_pro-table.md\":\"DlhJG49R\",\"guide_request-and-components.md\":\"CeEnrOuY\",\"guide_routing-and-menu.md\":\"09TL-ILh\",\"guide_theme-tokens.md\":\"Cfn7RM_2\",\"index.md\":\"ClEmxxY1\",\"readme.md\":\"D8R8Eb23\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vue-Bag-Admin\",\"description\":\"基于 Vue3 + Vite6 + Naive UI + Pinia + Strapi5 的中后台系统框架\",\"base\":\"/@melt-js/docs-bag@2026.11.16/dist/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"dark\",\"themeConfig\":{\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/guide/introduction\"},{\"text\":\"在线预览\",\"link\":\"https://hangjob.github.io/vue-bag-admin/\"},{\"text\":\"社区\",\"items\":[{\"text\":\"微信群\",\"link\":\"/#community\"},{\"text\":\"知航驿站\",\"link\":\"https://www.itnavs.com/\"},{\"text\":\"合作机会\",\"link\":\"https://yh.itnavs.com/contact\"}]},{\"text\":\"v2026.11.16\",\"link\":\"https://www.npmjs.com/package/@melt-js/libs-bag-entry\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"开始使用\",\"items\":[{\"text\":\"项目介绍\",\"link\":\"/guide/introduction\"},{\"text\":\"快速上手\",\"link\":\"/guide/getting-started\"},{\"text\":\"创建项目\",\"link\":\"/guide/create-project\"}]},{\"text\":\"核心开发\",\"items\":[{\"text\":\"初始化宿主\",\"link\":\"/guide/host/bootstrap\"},{\"text\":\"路由与菜单\",\"link\":\"/guide/host/routing-and-menu\"},{\"text\":\"登录与权限\",\"link\":\"/guide/host/auth-and-permissions\"},{\"text\":\"请求与组件\",\"link\":\"/guide/request-and-components\"}]},{\"text\":\"官方插件\",\"items\":[{\"text\":\"插件总览\",\"link\":\"/guide/official-plugins/\"},{\"text\":\"安装与启停\",\"link\":\"/guide/official-plugins/install-and-toggle\"},{\"text\":\"商城插件\",\"link\":\"/guide/official-plugins/shop\"},{\"text\":\"系统设置插件\",\"link\":\"/guide/official-plugins/sys-setting\"}]},{\"text\":\"插件开发\",\"items\":[{\"text\":\"创建插件\",\"link\":\"/guide/plugins/create-plugin\"},{\"text\":\"AdminPlugin 配置\",\"link\":\"/guide/plugins/admin-plugin\"},{\"text\":\"路由、菜单与多语言\",\"link\":\"/guide/plugins/routes-menus-locales\"},{\"text\":\"权限与配置项\",\"link\":\"/guide/plugins/permissions-and-settings\"},{\"text\":\"生命周期与依赖\",\"link\":\"/guide/plugins/lifecycle-and-dependencies\"},{\"text\":\"调试与发布\",\"link\":\"/guide/plugins/debug-and-publish\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/hangjob/vue-bag-admin/tree/next\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026-present Vue-Bag-Admin\"},\"search\":{\"provider\":\"local\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
|
125
125
|
|
|
126
126
|
</body>
|
|
127
127
|
</html>
|
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
<title>项目介绍 | Vue-Bag-Admin</title>
|
|
7
7
|
<meta name="description" content="基于 Vue3 + Vite6 + Naive UI + Pinia + Strapi5 的中后台系统框架">
|
|
8
8
|
<meta name="generator" content="VitePress v1.6.4">
|
|
9
|
-
<link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.
|
|
10
|
-
<link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.
|
|
9
|
+
<link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.16/dist/assets/style.IeUynjWL.css" as="style">
|
|
10
|
+
<link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.16/dist/vp-icons.css" as="style">
|
|
11
11
|
|
|
12
|
-
<script type="module" src="/@melt-js/docs-bag@2026.11.
|
|
13
|
-
<link rel="preload" href="/@melt-js/docs-bag@2026.11.
|
|
14
|
-
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.
|
|
15
|
-
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.
|
|
16
|
-
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.
|
|
12
|
+
<script type="module" src="/@melt-js/docs-bag@2026.11.16/dist/assets/app.B2EI2o4q.js"></script>
|
|
13
|
+
<link rel="preload" href="/@melt-js/docs-bag@2026.11.16/dist/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
14
|
+
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.16/dist/assets/chunks/theme.BJkR0Hu5.js">
|
|
15
|
+
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.16/dist/assets/chunks/framework.Olv9GB1A.js">
|
|
16
|
+
<link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.16/dist/assets/guide_introduction.md.tg6wBrpR.lean.js">
|
|
17
17
|
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"dark",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
18
18
|
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
19
19
|
</head>
|
|
20
20
|
<body>
|
|
21
|
-
<div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/@melt-js/docs-bag@2026.11.7/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/@melt-js/docs-bag@2026.11.7/logo.png" alt data-v-8426fc1a><!--]--><span data-v-1168a8e4>Vue-Bag-Admin</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/@melt-js/docs-bag@2026.11.7/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/@melt-js/docs-bag@2026.11.7/guide/introduction.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://hangjob.github.io/vue-bag-admin/" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>在线预览</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><!----><span data-v-cf11d7a2>社区</span><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><div class="items" data-v-b98bc113><!--[--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link" href="/@melt-js/docs-bag@2026.11.7/#community" data-v-35975db6><!--[--><span data-v-35975db6>微信群</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://www.itnavs.com/" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>知航驿站</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://yh.itnavs.com/contact" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>合作机会</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://www.npmjs.com/package/@melt-js/libs-bag-entry" target="_blank" rel="noreferrer" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>v2026.11.7</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/hangjob/vue-bag-admin/tree/next" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/hangjob/vue-bag-admin/tree/next" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>开始使用</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/introduction.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>项目介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>快速上手</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/create-project.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>创建项目</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>核心开发</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/host/bootstrap.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>初始化宿主</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/host/routing-and-menu.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>路由与菜单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/host/auth-and-permissions.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>登录与权限</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/request-and-components.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>请求与组件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>官方插件</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/official-plugins/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>插件总览</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/official-plugins/install-and-toggle.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>安装与启停</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/official-plugins/shop.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>商城插件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/official-plugins/sys-setting.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>系统设置插件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>插件开发</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/create-plugin.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>创建插件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/admin-plugin.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>AdminPlugin 配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/routes-menus-locales.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>路由、菜单与多语言</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/permissions-and-settings.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>权限与配置项</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/lifecycle-and-dependencies.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>生命周期与依赖</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.7/guide/plugins/debug-and-publish.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>调试与发布</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _@melt-js_docs-bag@2026_11_7_guide_introduction" data-v-39a288b8><div><h1 id="项目介绍" tabindex="-1">项目介绍 <a class="header-anchor" href="#项目介绍" aria-label="Permalink to "项目介绍""></a></h1><p>Vue-Bag-Admin 是一套面向 Vue 3 中后台项目的插件化开发框架。它把后台应用拆成稳定的宿主和可独立维护的业务插件，让项目可以先快速启动，再随着业务增长逐步拆分。</p><p>如果你第一次接触这个项目，先记住一句话：</p><blockquote><p>宿主负责把应用跑起来，插件负责把业务装进去。</p></blockquote><h2 id="它解决什么问题" tabindex="-1">它解决什么问题 <a class="header-anchor" href="#它解决什么问题" aria-label="Permalink to "它解决什么问题""></a></h2><p>普通后台项目通常从一个 <code>src/views</code> 开始。页面少时很直接，业务增加后容易遇到这些问题：</p><ul><li>路由、菜单和权限散落在不同文件中，新增模块要改很多地方。</li><li>商品、订单、系统设置等业务相互引用，很难独立复用。</li><li>多个后台项目需要相同能力时，只能复制代码。</li><li>公共布局、请求和组件不断被业务代码侵入，升级成本越来越高。</li></ul><p>Vue-Bag-Admin 通过宿主与插件分层，把这些职责重新归位：</p><table tabindex="0"><thead><tr><th>层级</th><th>负责什么</th></tr></thead><tbody><tr><td>宿主</td><td>应用初始化、布局、路由守卫、登录态、菜单容器和插件装载</td></tr><tr><td>插件</td><td>业务页面、路由、菜单、多语言和插件初始化</td></tr><tr><td>协议</td><td>统一插件、路由 Meta、菜单、权限、表单 Schema 等数据结构</td></tr><tr><td>基础能力</td><td>HTTP、Fetch、WebSocket、表格、表单和字典组件</td></tr></tbody></table><h2 id="两种使用方式" tabindex="-1">两种使用方式 <a class="header-anchor" href="#两种使用方式" aria-label="Permalink to "两种使用方式""></a></h2><h3 id="创建自己的后台项目" tabindex="-1">创建自己的后台项目 <a class="header-anchor" href="#创建自己的后台项目" aria-label="Permalink to "创建自己的后台项目""></a></h3><p>这是大多数使用者应该选择的方式。通过脚手架创建一个独立项目：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dlx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/libs-bag-create</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-admin</span></span></code></pre></div><p>生成后的项目只依赖统一入口包 <code>@melt-js/libs-bag-entry</code>，不需要复制整个 Monorepo。业务可以先写成本地插件，需要跨项目复用时再发布成独立 npm 包。</p><h3 id="开发框架仓库" tabindex="-1">开发框架仓库 <a class="header-anchor" href="#开发框架仓库" aria-label="Permalink to "开发框架仓库""></a></h3><p>如果你要修改框架、官方插件或参考后端，可以直接开发当前 Monorepo：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>tpl-vue3-admin-naive-bag 示例宿主</span></span>
|
|
21
|
+
<div id="app"><div class="Layout" data-v-0edfb049><!--[--><!--]--><!--[--><span tabindex="-1" data-v-7b519ef7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-7b519ef7>Skip to content</a><!--]--><!----><header class="VPNav" data-v-0edfb049 data-v-cd38b33d><div class="VPNavBar" data-v-cd38b33d data-v-61f8f22d><div class="wrapper" data-v-61f8f22d><div class="container" data-v-61f8f22d><div class="title" data-v-61f8f22d><div class="VPNavBarTitle has-sidebar" data-v-61f8f22d data-v-df65655a><a class="title" href="/@melt-js/docs-bag@2026.11.16/dist/" data-v-df65655a><!--[--><!--]--><!--[--><img class="VPImage logo" src="/@melt-js/docs-bag@2026.11.16/dist/logo.png" alt data-v-0be788e2><!--]--><span data-v-df65655a>Vue-Bag-Admin</span><!--[--><!--]--></a></div></div><div class="content" data-v-61f8f22d><div class="content-body" data-v-61f8f22d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-61f8f22d><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-61f8f22d data-v-52b0ba7e><span id="main-nav-aria-label" class="visually-hidden" data-v-52b0ba7e> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/@melt-js/docs-bag@2026.11.16/dist/" tabindex="0" data-v-52b0ba7e data-v-32d1898c><!--[--><span data-v-32d1898c>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/@melt-js/docs-bag@2026.11.16/dist/guide/introduction.html" tabindex="0" data-v-52b0ba7e data-v-32d1898c><!--[--><span data-v-32d1898c>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://hangjob.github.io/vue-bag-admin/" target="_blank" rel="noreferrer" tabindex="0" data-v-52b0ba7e data-v-32d1898c><!--[--><span data-v-32d1898c>在线预览</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-52b0ba7e data-v-af632b79><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-af632b79><span class="text" data-v-af632b79><!----><span data-v-af632b79>社区</span><span class="vpi-chevron-down text-icon" data-v-af632b79></span></span></button><div class="menu" data-v-af632b79><div class="VPMenu" data-v-af632b79 data-v-91f581de><div class="items" data-v-91f581de><!--[--><!--[--><div class="VPMenuLink" data-v-91f581de data-v-0a7b9194><a class="VPLink link" href="/@melt-js/docs-bag@2026.11.16/dist/#community" data-v-0a7b9194><!--[--><span data-v-0a7b9194>微信群</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-91f581de data-v-0a7b9194><a class="VPLink link vp-external-link-icon" href="https://www.itnavs.com/" target="_blank" rel="noreferrer" data-v-0a7b9194><!--[--><span data-v-0a7b9194>知航驿站</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-91f581de data-v-0a7b9194><a class="VPLink link vp-external-link-icon" href="https://yh.itnavs.com/contact" target="_blank" rel="noreferrer" data-v-0a7b9194><!--[--><span data-v-0a7b9194>合作机会</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://www.npmjs.com/package/@melt-js/libs-bag-entry" target="_blank" rel="noreferrer" tabindex="0" data-v-52b0ba7e data-v-32d1898c><!--[--><span data-v-32d1898c>v2026.11.16</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-61f8f22d data-v-dc17aa45><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-dc17aa45 data-v-685f7c6e data-v-e5c4a645><span class="check" data-v-e5c4a645><span class="icon" data-v-e5c4a645><!--[--><span class="vpi-sun sun" data-v-685f7c6e></span><span class="vpi-moon moon" data-v-685f7c6e></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-61f8f22d data-v-6ba2cce0 data-v-95361356><!--[--><a class="VPSocialLink no-icon" href="https://github.com/hangjob/vue-bag-admin/tree/next" aria-label="github" target="_blank" rel="noopener" data-v-95361356 data-v-ff15611b><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-61f8f22d data-v-6bf73ff9 data-v-af632b79><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-af632b79><span class="vpi-more-horizontal icon" data-v-af632b79></span></button><div class="menu" data-v-af632b79><div class="VPMenu" data-v-af632b79 data-v-91f581de><!----><!--[--><!--[--><!----><div class="group" data-v-6bf73ff9><div class="item appearance" data-v-6bf73ff9><p class="label" data-v-6bf73ff9>Appearance</p><div class="appearance-action" data-v-6bf73ff9><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-6bf73ff9 data-v-685f7c6e data-v-e5c4a645><span class="check" data-v-e5c4a645><span class="icon" data-v-e5c4a645><!--[--><span class="vpi-sun sun" data-v-685f7c6e></span><span class="vpi-moon moon" data-v-685f7c6e></span><!--]--></span></span></button></div></div></div><div class="group" data-v-6bf73ff9><div class="item social-links" data-v-6bf73ff9><div class="VPSocialLinks social-links-list" data-v-6bf73ff9 data-v-95361356><!--[--><a class="VPSocialLink no-icon" href="https://github.com/hangjob/vue-bag-admin/tree/next" aria-label="github" target="_blank" rel="noopener" data-v-95361356 data-v-ff15611b><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-61f8f22d data-v-633bcbbe><span class="container" data-v-633bcbbe><span class="top" data-v-633bcbbe></span><span class="middle" data-v-633bcbbe></span><span class="bottom" data-v-633bcbbe></span></span></button></div></div></div></div><div class="divider" data-v-61f8f22d><div class="divider-line" data-v-61f8f22d></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-0edfb049 data-v-a46b1e36><div class="container" data-v-a46b1e36><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a46b1e36><span class="vpi-align-left menu-icon" data-v-a46b1e36></span><span class="menu-text" data-v-a46b1e36>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a46b1e36 data-v-376aa372><button data-v-376aa372>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-0edfb049 data-v-4290678e><div class="curtain" data-v-4290678e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-4290678e><span class="visually-hidden" id="sidebar-aria-label" data-v-4290678e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-3a01ad27><section class="VPSidebarItem level-0 has-active" data-v-3a01ad27 data-v-e46237b3><div class="item" role="button" tabindex="0" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><h2 class="text" data-v-e46237b3>开始使用</h2><!----></div><div class="items" data-v-e46237b3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/introduction.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>项目介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/getting-started.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>快速上手</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/create-project.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>创建项目</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-3a01ad27><section class="VPSidebarItem level-0" data-v-3a01ad27 data-v-e46237b3><div class="item" role="button" tabindex="0" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><h2 class="text" data-v-e46237b3>核心开发</h2><!----></div><div class="items" data-v-e46237b3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/host/bootstrap.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>初始化宿主</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/host/routing-and-menu.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>路由与菜单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/host/auth-and-permissions.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>登录与权限</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/request-and-components.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>请求与组件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-3a01ad27><section class="VPSidebarItem level-0" data-v-3a01ad27 data-v-e46237b3><div class="item" role="button" tabindex="0" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><h2 class="text" data-v-e46237b3>官方插件</h2><!----></div><div class="items" data-v-e46237b3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/official-plugins/" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>插件总览</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/official-plugins/install-and-toggle.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>安装与启停</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/official-plugins/shop.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>商城插件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/official-plugins/sys-setting.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>系统设置插件</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-3a01ad27><section class="VPSidebarItem level-0" data-v-3a01ad27 data-v-e46237b3><div class="item" role="button" tabindex="0" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><h2 class="text" data-v-e46237b3>插件开发</h2><!----></div><div class="items" data-v-e46237b3><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/create-plugin.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>创建插件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/admin-plugin.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>AdminPlugin 配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/routes-menus-locales.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>路由、菜单与多语言</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/permissions-and-settings.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>权限与配置项</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/lifecycle-and-dependencies.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>生命周期与依赖</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e46237b3><div class="item" data-v-e46237b3><div class="indicator" data-v-e46237b3></div><a class="VPLink link link" href="/@melt-js/docs-bag@2026.11.16/dist/guide/plugins/debug-and-publish.html" data-v-e46237b3><!--[--><p class="text" data-v-e46237b3>调试与发布</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-0edfb049 data-v-c786a43b><div class="VPDoc has-sidebar has-aside" data-v-c786a43b data-v-c1154bb5><!--[--><!--]--><div class="container" data-v-c1154bb5><div class="aside" data-v-c1154bb5><div class="aside-curtain" data-v-c1154bb5></div><div class="aside-container" data-v-c1154bb5><div class="aside-content" data-v-c1154bb5><div class="VPDocAside" data-v-c1154bb5 data-v-ac30bcc5><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-ac30bcc5 data-v-3870f070><div class="content" data-v-3870f070><div class="outline-marker" data-v-3870f070></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-3870f070>On this page</div><ul class="VPDocOutlineItem root" data-v-3870f070 data-v-d3fae412><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-ac30bcc5></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c1154bb5><div class="content-container" data-v-c1154bb5><!--[--><!--]--><main class="main" data-v-c1154bb5><div style="position:relative;" class="vp-doc _@melt-js_docs-bag@2026_11_16_dist_guide_introduction" data-v-c1154bb5><div><h1 id="项目介绍" tabindex="-1">项目介绍 <a class="header-anchor" href="#项目介绍" aria-label="Permalink to "项目介绍""></a></h1><p>Vue-Bag-Admin 是一套面向 Vue 3 中后台项目的插件化开发框架。它把后台应用拆成稳定的宿主和可独立维护的业务插件，让项目可以先快速启动，再随着业务增长逐步拆分。</p><p>如果你第一次接触这个项目，先记住一句话：</p><blockquote><p>宿主负责把应用跑起来，插件负责把业务装进去。</p></blockquote><h2 id="它解决什么问题" tabindex="-1">它解决什么问题 <a class="header-anchor" href="#它解决什么问题" aria-label="Permalink to "它解决什么问题""></a></h2><p>普通后台项目通常从一个 <code>src/views</code> 开始。页面少时很直接，业务增加后容易遇到这些问题：</p><ul><li>路由、菜单和权限散落在不同文件中，新增模块要改很多地方。</li><li>商品、订单、系统设置等业务相互引用，很难独立复用。</li><li>多个后台项目需要相同能力时，只能复制代码。</li><li>公共布局、请求和组件不断被业务代码侵入，升级成本越来越高。</li></ul><p>Vue-Bag-Admin 通过宿主与插件分层，把这些职责重新归位：</p><table tabindex="0"><thead><tr><th>层级</th><th>负责什么</th></tr></thead><tbody><tr><td>宿主</td><td>应用初始化、布局、路由守卫、登录态、菜单容器和插件装载</td></tr><tr><td>插件</td><td>业务页面、路由、菜单、多语言和插件初始化</td></tr><tr><td>协议</td><td>统一插件、路由 Meta、菜单、权限、表单 Schema 等数据结构</td></tr><tr><td>基础能力</td><td>HTTP、Fetch、WebSocket、表格、表单和字典组件</td></tr></tbody></table><h2 id="两种使用方式" tabindex="-1">两种使用方式 <a class="header-anchor" href="#两种使用方式" aria-label="Permalink to "两种使用方式""></a></h2><h3 id="创建自己的后台项目" tabindex="-1">创建自己的后台项目 <a class="header-anchor" href="#创建自己的后台项目" aria-label="Permalink to "创建自己的后台项目""></a></h3><p>这是大多数使用者应该选择的方式。通过脚手架创建一个独立项目：</p><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dlx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/libs-bag-create</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> my-admin</span></span></code></pre></div><p>生成后的项目只依赖统一入口包 <code>@melt-js/libs-bag-entry</code>，不需要复制整个 Monorepo。业务可以先写成本地插件，需要跨项目复用时再发布成独立 npm 包。</p><h3 id="开发框架仓库" tabindex="-1">开发框架仓库 <a class="header-anchor" href="#开发框架仓库" aria-label="Permalink to "开发框架仓库""></a></h3><p>如果你要修改框架、官方插件或参考后端，可以直接开发当前 Monorepo：</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>tpl-vue3-admin-naive-bag 示例宿主</span></span>
|
|
22
22
|
<span class="line"><span>docs-bag 文档站</span></span>
|
|
23
23
|
<span class="line"><span>service-bag-strapi Strapi 参考后端</span></span>
|
|
24
24
|
<span class="line"><span>libs-*/comps-* 框架包、脚手架和官方插件</span></span></code></pre></div><p>这条路线面向框架维护者，不是创建业务项目的前置条件。</p><h2 id="核心运行模型" tabindex="-1">核心运行模型 <a class="header-anchor" href="#核心运行模型" aria-label="Permalink to "核心运行模型""></a></h2><p>应用启动时主要发生四件事：</p><ol><li>宿主创建 Vue、Pinia、i18n 和 Router 实例。</li><li>宿主注入认证和请求配置。</li><li><code>bootstrapPlugins()</code> 收集已启用插件，注册路由、菜单和语言包。</li><li><code>HostApp</code> 根据当前路由渲染布局、导航和业务页面。</li></ol><p>插件不是一个特殊的 Vue 应用。它本质上是一个符合 <code>AdminPlugin</code> 协议的对象：</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AdminPlugin } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@melt-js/libs-bag-entry'</span></span>
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> menus: []</span></span>
|
|
32
32
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
33
33
|
<span class="line"></span>
|
|
34
|
-
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> reportPlugin</span></span></code></pre></div><p>因此，本地业务模块和发布到 npm 的插件使用同一套接入方式。</p><h2 id="包的职责" tabindex="-1">包的职责 <a class="header-anchor" href="#包的职责" aria-label="Permalink to "包的职责""></a></h2><p>业务项目通常只需要直接安装 <code>@melt-js/libs-bag-entry</code>。它统一导出了下面几层公开能力：</p><table tabindex="0"><thead><tr><th>包</th><th>定位</th></tr></thead><tbody><tr><td><code>@melt-js/libs-bag-core</code></td><td>插件、路由、菜单、权限、字典和表单 Schema 协议</td></tr><tr><td><code>@melt-js/libs-bag-request</code></td><td>HTTP、Fetch、WebSocket 和请求状态控制</td></tr><tr><td><code>@melt-js/libs-bag-ui</code></td><td><code>PmProTable</code>、<code>PmProForm</code>、<code>PmSchemaForm</code> 等组件</td></tr><tr><td><code>@melt-js/libs-bag-host</code></td><td>宿主布局、路由守卫、权限和插件引导</td></tr><tr><td><code>@melt-js/libs-bag-entry</code></td><td>面向业务项目的统一入口</td></tr><tr><td><code>@melt-js/libs-bag-create</code></td><td>创建独立宿主项目的脚手架</td></tr><tr><td><code>@melt-js/comps-bag-*</code></td><td>可选的独立业务插件</td></tr></tbody></table><p>除非你在维护底层分包，否则业务代码建议统一从 <code>@melt-js/libs-bag-entry</code> 导入，避免项目中出现多套运行时入口。</p><h2 id="技术栈与边界" tabindex="-1">技术栈与边界 <a class="header-anchor" href="#技术栈与边界" aria-label="Permalink to "技术栈与边界""></a></h2><p>前端运行时基于 Vue 3.5、Vite 6、TypeScript、Vue Router 4、Pinia、Vue I18n、Naive UI 和 Tailwind CSS。</p><p>仓库同时提供 Strapi 5 与 MySQL 参考后端，但前端并不绑定 Strapi。只要认证接口能够返回 token、用户角色和权限点，就可以接入 Java、Go、PHP 或其他后端。</p><p>Vue-Bag-Admin 更适合：</p><ul><li>有多个业务域、需要长期演进的中后台。</li><li>希望在多个后台项目之间复用业务模块。</li><li>想统一路由、菜单、权限和页面搭建方式的团队。</li></ul><p>如果项目只有少量固定页面，并且不会复用或扩展，直接使用 Vue Router 和组件库可能更简单。</p><h2 id="推荐阅读顺序" tabindex="-1">推荐阅读顺序 <a class="header-anchor" href="#推荐阅读顺序" aria-label="Permalink to "推荐阅读顺序""></a></h2><p>第一次使用时，按这条链路阅读即可：</p><ol><li><a href="./getting-started.html">快速上手</a></li><li><a href="./create-project.html">创建项目</a></li><li><a href="./host/bootstrap.html">初始化宿主</a></li><li><a href="./host/routing-and-menu.html">路由与菜单</a></li><li><a href="./host/auth-and-permissions.html">登录与权限</a></li><li><a href="./request-and-components.html">请求与组件</a></li></ol><p>完成主线后，可以按目标继续阅读：</p><ul><li>安装现有能力：<a href="./official-plugins/">官方插件</a></li><li>开发业务扩展：<a href="./plugins/create-plugin.html">插件开发</a></li></ul></div></div></main><footer class="VPDocFooter" data-v-
|
|
35
|
-
<script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_complete-host-app.md\":\"
|
|
34
|
+
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> reportPlugin</span></span></code></pre></div><p>因此，本地业务模块和发布到 npm 的插件使用同一套接入方式。</p><h2 id="包的职责" tabindex="-1">包的职责 <a class="header-anchor" href="#包的职责" aria-label="Permalink to "包的职责""></a></h2><p>业务项目通常只需要直接安装 <code>@melt-js/libs-bag-entry</code>。它统一导出了下面几层公开能力：</p><table tabindex="0"><thead><tr><th>包</th><th>定位</th></tr></thead><tbody><tr><td><code>@melt-js/libs-bag-core</code></td><td>插件、路由、菜单、权限、字典和表单 Schema 协议</td></tr><tr><td><code>@melt-js/libs-bag-request</code></td><td>HTTP、Fetch、WebSocket 和请求状态控制</td></tr><tr><td><code>@melt-js/libs-bag-ui</code></td><td><code>PmProTable</code>、<code>PmProForm</code>、<code>PmSchemaForm</code> 等组件</td></tr><tr><td><code>@melt-js/libs-bag-host</code></td><td>宿主布局、路由守卫、权限和插件引导</td></tr><tr><td><code>@melt-js/libs-bag-entry</code></td><td>面向业务项目的统一入口</td></tr><tr><td><code>@melt-js/libs-bag-create</code></td><td>创建独立宿主项目的脚手架</td></tr><tr><td><code>@melt-js/comps-bag-*</code></td><td>可选的独立业务插件</td></tr></tbody></table><p>除非你在维护底层分包，否则业务代码建议统一从 <code>@melt-js/libs-bag-entry</code> 导入，避免项目中出现多套运行时入口。</p><h2 id="技术栈与边界" tabindex="-1">技术栈与边界 <a class="header-anchor" href="#技术栈与边界" aria-label="Permalink to "技术栈与边界""></a></h2><p>前端运行时基于 Vue 3.5、Vite 6、TypeScript、Vue Router 4、Pinia、Vue I18n、Naive UI 和 Tailwind CSS。</p><p>仓库同时提供 Strapi 5 与 MySQL 参考后端，但前端并不绑定 Strapi。只要认证接口能够返回 token、用户角色和权限点，就可以接入 Java、Go、PHP 或其他后端。</p><p>Vue-Bag-Admin 更适合：</p><ul><li>有多个业务域、需要长期演进的中后台。</li><li>希望在多个后台项目之间复用业务模块。</li><li>想统一路由、菜单、权限和页面搭建方式的团队。</li></ul><p>如果项目只有少量固定页面，并且不会复用或扩展，直接使用 Vue Router 和组件库可能更简单。</p><h2 id="推荐阅读顺序" tabindex="-1">推荐阅读顺序 <a class="header-anchor" href="#推荐阅读顺序" aria-label="Permalink to "推荐阅读顺序""></a></h2><p>第一次使用时，按这条链路阅读即可：</p><ol><li><a href="./getting-started.html">快速上手</a></li><li><a href="./create-project.html">创建项目</a></li><li><a href="./host/bootstrap.html">初始化宿主</a></li><li><a href="./host/routing-and-menu.html">路由与菜单</a></li><li><a href="./host/auth-and-permissions.html">登录与权限</a></li><li><a href="./request-and-components.html">请求与组件</a></li></ol><p>完成主线后，可以按目标继续阅读：</p><ul><li>安装现有能力：<a href="./official-plugins/">官方插件</a></li><li>开发业务扩展：<a href="./plugins/create-plugin.html">插件开发</a></li></ul></div></div></main><footer class="VPDocFooter" data-v-c1154bb5 data-v-1803e81a><!--[--><!--]--><div class="edit-info" data-v-1803e81a><!----><div class="last-updated" data-v-1803e81a><p class="VPLastUpdated" data-v-1803e81a data-v-3993c1fc>Last updated: <time datetime="2026-11-07T09:53:20.000Z" data-v-3993c1fc></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-1803e81a><span class="visually-hidden" id="doc-footer-aria-label" data-v-1803e81a>Pager</span><div class="pager" data-v-1803e81a><!----></div><div class="pager" data-v-1803e81a><a class="VPLink link pager-link next" href="/@melt-js/docs-bag@2026.11.16/dist/guide/getting-started.html" data-v-1803e81a><!--[--><span class="desc" data-v-1803e81a>Next page</span><span class="title" data-v-1803e81a>快速上手</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-0edfb049 data-v-5db284cc><div class="container" data-v-5db284cc><p class="message" data-v-5db284cc>Released under the MIT License.</p><p class="copyright" data-v-5db284cc>Copyright © 2026-present Vue-Bag-Admin</p></div></footer><!--[--><!--]--></div></div>
|
|
35
|
+
<script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_complete-host-app.md\":\"CBuOgyl8\",\"guide_create-project.md\":\"B2KkXWnI\",\"guide_deployment.md\":\"BrvgEFf0\",\"guide_dictionary-system.md\":\"hS_2-jYz\",\"guide_getting-started.md\":\"0nvT0khJ\",\"guide_host_auth-and-permissions.md\":\"Pr66-VM-\",\"guide_host_bootstrap.md\":\"DKFeJyTi\",\"guide_host_routing-and-menu.md\":\"CQaMO4vj\",\"guide_introduction.md\":\"tg6wBrpR\",\"guide_local-debugging.md\":\"DVHeXzws\",\"guide_network-request.md\":\"BlxKmm59\",\"guide_official-plugins_index.md\":\"BF-gWYVU\",\"guide_official-plugins_install-and-toggle.md\":\"B35ne8VL\",\"guide_official-plugins_shop.md\":\"BGGP886L\",\"guide_official-plugins_sys-setting.md\":\"BwiJzRiL\",\"guide_package-core.md\":\"D1xrMRok\",\"guide_package-ecosystem.md\":\"Dl2r9NSa\",\"guide_package-plugin-shop.md\":\"BaIhzPDV\",\"guide_package-plugin-sys-setting.md\":\"C0ROCk-O\",\"guide_package-publishing.md\":\"De2Y0rte\",\"guide_package-request.md\":\"DugGGXSX\",\"guide_package-ui.md\":\"BPCpNCIF\",\"guide_permissions.md\":\"DHnKaha_\",\"guide_plugin-development.md\":\"DeFWVfLN\",\"guide_plugins_admin-plugin.md\":\"XLffV1LB\",\"guide_plugins_create-plugin.md\":\"Br3OIR1m\",\"guide_plugins_debug-and-publish.md\":\"C5ZbCito\",\"guide_plugins_lifecycle-and-dependencies.md\":\"CV7nFME-\",\"guide_plugins_permissions-and-settings.md\":\"B_MrVXY_\",\"guide_plugins_routes-menus-locales.md\":\"heaL1_wi\",\"guide_pro-form.md\":\"L9CKqs5C\",\"guide_pro-table.md\":\"DlhJG49R\",\"guide_request-and-components.md\":\"CeEnrOuY\",\"guide_routing-and-menu.md\":\"09TL-ILh\",\"guide_theme-tokens.md\":\"Cfn7RM_2\",\"index.md\":\"ClEmxxY1\",\"readme.md\":\"D8R8Eb23\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vue-Bag-Admin\",\"description\":\"基于 Vue3 + Vite6 + Naive UI + Pinia + Strapi5 的中后台系统框架\",\"base\":\"/@melt-js/docs-bag@2026.11.16/dist/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"dark\",\"themeConfig\":{\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/guide/introduction\"},{\"text\":\"在线预览\",\"link\":\"https://hangjob.github.io/vue-bag-admin/\"},{\"text\":\"社区\",\"items\":[{\"text\":\"微信群\",\"link\":\"/#community\"},{\"text\":\"知航驿站\",\"link\":\"https://www.itnavs.com/\"},{\"text\":\"合作机会\",\"link\":\"https://yh.itnavs.com/contact\"}]},{\"text\":\"v2026.11.16\",\"link\":\"https://www.npmjs.com/package/@melt-js/libs-bag-entry\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"开始使用\",\"items\":[{\"text\":\"项目介绍\",\"link\":\"/guide/introduction\"},{\"text\":\"快速上手\",\"link\":\"/guide/getting-started\"},{\"text\":\"创建项目\",\"link\":\"/guide/create-project\"}]},{\"text\":\"核心开发\",\"items\":[{\"text\":\"初始化宿主\",\"link\":\"/guide/host/bootstrap\"},{\"text\":\"路由与菜单\",\"link\":\"/guide/host/routing-and-menu\"},{\"text\":\"登录与权限\",\"link\":\"/guide/host/auth-and-permissions\"},{\"text\":\"请求与组件\",\"link\":\"/guide/request-and-components\"}]},{\"text\":\"官方插件\",\"items\":[{\"text\":\"插件总览\",\"link\":\"/guide/official-plugins/\"},{\"text\":\"安装与启停\",\"link\":\"/guide/official-plugins/install-and-toggle\"},{\"text\":\"商城插件\",\"link\":\"/guide/official-plugins/shop\"},{\"text\":\"系统设置插件\",\"link\":\"/guide/official-plugins/sys-setting\"}]},{\"text\":\"插件开发\",\"items\":[{\"text\":\"创建插件\",\"link\":\"/guide/plugins/create-plugin\"},{\"text\":\"AdminPlugin 配置\",\"link\":\"/guide/plugins/admin-plugin\"},{\"text\":\"路由、菜单与多语言\",\"link\":\"/guide/plugins/routes-menus-locales\"},{\"text\":\"权限与配置项\",\"link\":\"/guide/plugins/permissions-and-settings\"},{\"text\":\"生命周期与依赖\",\"link\":\"/guide/plugins/lifecycle-and-dependencies\"},{\"text\":\"调试与发布\",\"link\":\"/guide/plugins/debug-and-publish\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/hangjob/vue-bag-admin/tree/next\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026-present Vue-Bag-Admin\"},\"search\":{\"provider\":\"local\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
|
|
36
36
|
|
|
37
37
|
</body>
|
|
38
38
|
</html>
|