@melt-js/docs-bag 0.0.0-stage → 2026.11.7-1

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.
Files changed (139) hide show
  1. package/README.md +44 -2
  2. package/dist/404.html +22 -0
  3. package/dist/README.html +33 -0
  4. package/dist/assets/README.md.DGU5lUfa.js +9 -0
  5. package/dist/assets/README.md.DGU5lUfa.lean.js +1 -0
  6. package/dist/assets/app.Ds2SzgsS.js +1 -0
  7. package/dist/assets/chunks/@localSearchIndexroot.UvrVlibN.js +1 -0
  8. package/dist/assets/chunks/VPLocalSearchBox.vT7UNiG_.js +9 -0
  9. package/dist/assets/chunks/framework.DaGrNpXH.js +20 -0
  10. package/dist/assets/chunks/theme.Caar5PdV.js +2 -0
  11. package/dist/assets/guide_complete-host-app.md.BK8IlbVU.js +174 -0
  12. package/dist/assets/guide_complete-host-app.md.BK8IlbVU.lean.js +1 -0
  13. package/dist/assets/guide_create-project.md.DdUrJ9TP.js +34 -0
  14. package/dist/assets/guide_create-project.md.DdUrJ9TP.lean.js +1 -0
  15. package/dist/assets/guide_deployment.md.Bok2OVNY.js +42 -0
  16. package/dist/assets/guide_deployment.md.Bok2OVNY.lean.js +1 -0
  17. package/dist/assets/guide_dictionary-system.md.CBwI_GoJ.js +32 -0
  18. package/dist/assets/guide_dictionary-system.md.CBwI_GoJ.lean.js +1 -0
  19. package/dist/assets/guide_getting-started.md.DY8_yjmu.js +9 -0
  20. package/dist/assets/guide_getting-started.md.DY8_yjmu.lean.js +1 -0
  21. package/dist/assets/guide_host_auth-and-permissions.md.0lZV8yHP.js +139 -0
  22. package/dist/assets/guide_host_auth-and-permissions.md.0lZV8yHP.lean.js +1 -0
  23. package/dist/assets/guide_host_bootstrap.md.lEHuoLl6.js +87 -0
  24. package/dist/assets/guide_host_bootstrap.md.lEHuoLl6.lean.js +1 -0
  25. package/dist/assets/guide_host_routing-and-menu.md.BoIgnh8N.js +103 -0
  26. package/dist/assets/guide_host_routing-and-menu.md.BoIgnh8N.lean.js +1 -0
  27. package/dist/assets/guide_introduction.md.iXNk9q0Q.js +14 -0
  28. package/dist/assets/guide_introduction.md.iXNk9q0Q.lean.js +1 -0
  29. package/dist/assets/guide_local-debugging.md.DUTHJNrd.js +15 -0
  30. package/dist/assets/guide_local-debugging.md.DUTHJNrd.lean.js +1 -0
  31. package/dist/assets/guide_network-request.md.CNxuQztV.js +256 -0
  32. package/dist/assets/guide_network-request.md.CNxuQztV.lean.js +1 -0
  33. package/dist/assets/guide_official-plugins_index.md.BoDXHNxM.js +15 -0
  34. package/dist/assets/guide_official-plugins_index.md.BoDXHNxM.lean.js +1 -0
  35. package/dist/assets/guide_official-plugins_install-and-toggle.md.Dr7JbEG0.js +45 -0
  36. package/dist/assets/guide_official-plugins_install-and-toggle.md.Dr7JbEG0.lean.js +1 -0
  37. package/dist/assets/guide_official-plugins_shop.md.DiOYHXuP.js +49 -0
  38. package/dist/assets/guide_official-plugins_shop.md.DiOYHXuP.lean.js +1 -0
  39. package/dist/assets/guide_official-plugins_sys-setting.md.zAtX0VM9.js +26 -0
  40. package/dist/assets/guide_official-plugins_sys-setting.md.zAtX0VM9.lean.js +1 -0
  41. package/dist/assets/guide_package-core.md.C4zUrJyx.js +45 -0
  42. package/dist/assets/guide_package-core.md.C4zUrJyx.lean.js +1 -0
  43. package/dist/assets/guide_package-ecosystem.md.D7XqIXVb.js +1 -0
  44. package/dist/assets/guide_package-ecosystem.md.D7XqIXVb.lean.js +1 -0
  45. package/dist/assets/guide_package-plugin-shop.md.fAmp9PnM.js +9 -0
  46. package/dist/assets/guide_package-plugin-shop.md.fAmp9PnM.lean.js +1 -0
  47. package/dist/assets/guide_package-plugin-sys-setting.md.B_eYlFsp.js +9 -0
  48. package/dist/assets/guide_package-plugin-sys-setting.md.B_eYlFsp.lean.js +1 -0
  49. package/dist/assets/guide_package-publishing.md.B457Mv-9.js +7 -0
  50. package/dist/assets/guide_package-publishing.md.B457Mv-9.lean.js +1 -0
  51. package/dist/assets/guide_package-request.md.BxsPauw8.js +195 -0
  52. package/dist/assets/guide_package-request.md.BxsPauw8.lean.js +1 -0
  53. package/dist/assets/guide_package-ui.md.BTeJ94Oh.js +50 -0
  54. package/dist/assets/guide_package-ui.md.BTeJ94Oh.lean.js +1 -0
  55. package/dist/assets/guide_permissions.md.DAZn1vjP.js +83 -0
  56. package/dist/assets/guide_permissions.md.DAZn1vjP.lean.js +1 -0
  57. package/dist/assets/guide_plugin-development.md.BUmEsBpT.js +226 -0
  58. package/dist/assets/guide_plugin-development.md.BUmEsBpT.lean.js +1 -0
  59. package/dist/assets/guide_plugins_admin-plugin.md.DPkzLbtK.js +52 -0
  60. package/dist/assets/guide_plugins_admin-plugin.md.DPkzLbtK.lean.js +1 -0
  61. package/dist/assets/guide_plugins_create-plugin.md.DvTO3X0-.js +109 -0
  62. package/dist/assets/guide_plugins_create-plugin.md.DvTO3X0-.lean.js +1 -0
  63. package/dist/assets/guide_plugins_debug-and-publish.md.6Vl--EVC.js +92 -0
  64. package/dist/assets/guide_plugins_debug-and-publish.md.6Vl--EVC.lean.js +1 -0
  65. package/dist/assets/guide_plugins_lifecycle-and-dependencies.md.D4pLzazK.js +45 -0
  66. package/dist/assets/guide_plugins_lifecycle-and-dependencies.md.D4pLzazK.lean.js +1 -0
  67. package/dist/assets/guide_plugins_permissions-and-settings.md.t7QTgL3Q.js +78 -0
  68. package/dist/assets/guide_plugins_permissions-and-settings.md.t7QTgL3Q.lean.js +1 -0
  69. package/dist/assets/guide_plugins_routes-menus-locales.md.yqtK9Ucl.js +100 -0
  70. package/dist/assets/guide_plugins_routes-menus-locales.md.yqtK9Ucl.lean.js +1 -0
  71. package/dist/assets/guide_pro-form.md.CMhQ6QRl.js +116 -0
  72. package/dist/assets/guide_pro-form.md.CMhQ6QRl.lean.js +1 -0
  73. package/dist/assets/guide_pro-table.md.I6fEG_lQ.js +54 -0
  74. package/dist/assets/guide_pro-table.md.I6fEG_lQ.lean.js +1 -0
  75. package/dist/assets/guide_request-and-components.md.BQIKZknw.js +175 -0
  76. package/dist/assets/guide_request-and-components.md.BQIKZknw.lean.js +1 -0
  77. package/dist/assets/guide_routing-and-menu.md.BWLWiMg1.js +74 -0
  78. package/dist/assets/guide_routing-and-menu.md.BWLWiMg1.lean.js +1 -0
  79. package/dist/assets/guide_theme-tokens.md.BZ_Qwz_U.js +53 -0
  80. package/dist/assets/guide_theme-tokens.md.BZ_Qwz_U.lean.js +1 -0
  81. package/dist/assets/index.md.RFoPWDBP.js +1 -0
  82. package/dist/assets/index.md.RFoPWDBP.lean.js +1 -0
  83. package/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  84. package/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  85. package/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  86. package/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  87. package/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  88. package/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  89. package/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  90. package/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  91. package/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  92. package/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  93. package/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  94. package/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  95. package/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  96. package/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  97. package/dist/assets/style.BUkIHM41.css +1 -0
  98. package/dist/guide/complete-host-app.html +198 -0
  99. package/dist/guide/create-project.html +58 -0
  100. package/dist/guide/deployment.html +66 -0
  101. package/dist/guide/dictionary-system.html +56 -0
  102. package/dist/guide/getting-started.html +33 -0
  103. package/dist/guide/host/auth-and-permissions.html +163 -0
  104. package/dist/guide/host/bootstrap.html +111 -0
  105. package/dist/guide/host/routing-and-menu.html +127 -0
  106. package/dist/guide/introduction.html +38 -0
  107. package/dist/guide/local-debugging.html +39 -0
  108. package/dist/guide/network-request.html +280 -0
  109. package/dist/guide/official-plugins/index.html +39 -0
  110. package/dist/guide/official-plugins/install-and-toggle.html +69 -0
  111. package/dist/guide/official-plugins/shop.html +73 -0
  112. package/dist/guide/official-plugins/sys-setting.html +50 -0
  113. package/dist/guide/package-core.html +69 -0
  114. package/dist/guide/package-ecosystem.html +25 -0
  115. package/dist/guide/package-plugin-shop.html +33 -0
  116. package/dist/guide/package-plugin-sys-setting.html +33 -0
  117. package/dist/guide/package-publishing.html +31 -0
  118. package/dist/guide/package-request.html +219 -0
  119. package/dist/guide/package-ui.html +74 -0
  120. package/dist/guide/permissions.html +107 -0
  121. package/dist/guide/plugin-development.html +250 -0
  122. package/dist/guide/plugins/admin-plugin.html +76 -0
  123. package/dist/guide/plugins/create-plugin.html +133 -0
  124. package/dist/guide/plugins/debug-and-publish.html +116 -0
  125. package/dist/guide/plugins/lifecycle-and-dependencies.html +69 -0
  126. package/dist/guide/plugins/permissions-and-settings.html +102 -0
  127. package/dist/guide/plugins/routes-menus-locales.html +124 -0
  128. package/dist/guide/pro-form.html +140 -0
  129. package/dist/guide/pro-table.html +78 -0
  130. package/dist/guide/request-and-components.html +199 -0
  131. package/dist/guide/routing-and-menu.html +98 -0
  132. package/dist/guide/theme-tokens.html +77 -0
  133. package/dist/hashmap.json +1 -0
  134. package/dist/index.html +25 -0
  135. package/dist/logo.png +0 -0
  136. package/dist/logo.svg +1 -0
  137. package/dist/vp-icons.css +1 -0
  138. package/dist/wechat-group-qr.png +0 -0
  139. package/package.json +24 -4
package/dist/guide/complete-host-app.html ADDED
@@ -0,0 +1,198 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-US" dir="ltr">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>完整宿主示例 | Vue-Bag-Admin</title>
7
+ <meta name="description" content="基于 Vue3 + Vite6 + Naive UI + Pinia + Strapi5 的中后台系统框架">
8
+ <meta name="generator" content="VitePress v1.6.4">
9
+ <link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.7-1/dist/assets/style.BUkIHM41.css" as="style">
10
+ <link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.7-1/dist/vp-icons.css" as="style">
11
+
12
+ <script type="module" src="/@melt-js/docs-bag@2026.11.7-1/dist/assets/app.Ds2SzgsS.js"></script>
13
+ <link rel="preload" href="/@melt-js/docs-bag@2026.11.7-1/dist/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
14
+ <link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.7-1/dist/assets/chunks/theme.Caar5PdV.js">
15
+ <link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.7-1/dist/assets/chunks/framework.DaGrNpXH.js">
16
+ <link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.7-1/dist/assets/guide_complete-host-app.md.BK8IlbVU.lean.js">
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
+ <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
+ </head>
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-1/dist/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/@melt-js/docs-bag@2026.11.7-1/dist/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-1/dist/" 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-1/dist/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-1/dist/#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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1_dist_guide_complete-host-app" data-v-39a288b8><div><h1 id="完整宿主示例" tabindex="-1">完整宿主示例 <a class="header-anchor" href="#完整宿主示例" aria-label="Permalink to &quot;完整宿主示例&quot;">​</a></h1><p>如果你已经过了“先跑起来”这个阶段，准备把权限、字典、请求、官方插件和设置面板一起接进来，就看这一页。</p><p>这里放一版接近真实项目的宿主入口示例，代码参考外部联调项目 <code>E:\web_test_loca\loca_test</code>。</p><p>你通常会先碰到这 3 个文件：</p><ul><li><code>src/main.ts</code>：初始化宿主、路由、i18n、请求和插件</li><li><code>src/routes.ts</code>：宿主自己的基础路由</li><li><code>src/App.vue</code>：真正挂载 <code>HostApp</code></li></ul><h2 id="src-main-ts" tabindex="-1"><code>src/main.ts</code> <a class="header-anchor" href="#src-main-ts" aria-label="Permalink to &quot;`src/main.ts`&quot;">​</a></h2><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createApp } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span></span>
22
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createPinia } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;pinia&#39;</span></span>
23
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createDiscreteApi } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;naive-ui&#39;</span></span>
24
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./App.vue&#39;</span></span>
25
+ <span class="line"></span>
26
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 先引宿主库样式，再引项目自己的样式，避免覆盖顺序出问题。</span></span>
27
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry/style.css&#39;</span></span>
28
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./style.css&#39;</span></span>
29
+ <span class="line"></span>
30
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
31
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> PermissionAccess,</span></span>
32
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> bootstrapPlugins,</span></span>
33
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createStrapiAuthProvider,</span></span>
34
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createHostI18n,</span></span>
35
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> createHostRouter,</span></span>
36
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> getHostNavigationConfig,</span></span>
37
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> registerPermissionDirective,</span></span>
38
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setAuthProvider,</span></span>
39
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> setupHttp,</span></span>
40
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> useUserStore</span></span>
41
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry&#39;</span></span>
42
+ <span class="line"></span>
43
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { setupBuiltinDictionaries } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./dictionaries&#39;</span></span>
44
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { exampleRoutes } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./routes&#39;</span></span>
45
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> shopPlugin </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/comps-bag-shop&#39;</span></span>
46
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> sysSettingPlugin </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/comps-bag-sys&#39;</span></span>
47
+ <span class="line"></span>
48
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createDiscreteApi</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span>
49
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> strapiAuthProvider</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createStrapiAuthProvider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
50
+ <span class="line"></span>
51
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setupApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
52
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App)</span></span>
53
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> pinia</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createPinia</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
54
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> i18n</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createHostI18n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
55
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 这里先挂宿主自己的基础路由，插件路由后面交给 bootstrapPlugins()。</span></span>
56
+ <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>
57
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> routes: exampleRoutes,</span></span>
58
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> auth: {</span></span>
59
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> enabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
60
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> homePath: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/dashboard&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
61
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> loginPath: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/login&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
62
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> profilePath: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/profile&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
63
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> forbiddenPath: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/403&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
64
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onProfileError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
65
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;logout&#39;</span></span>
66
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
67
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
68
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
69
+ <span class="line"></span>
70
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(pinia)</span></span>
71
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(i18n)</span></span>
72
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setAuthProvider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(strapiAuthProvider)</span></span>
73
+ <span class="line"></span>
74
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 字典、权限组件和权限指令通常都在入口阶段注册。</span></span>
75
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setupBuiltinDictionaries</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
76
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;PermissionAccess&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, PermissionAccess)</span></span>
77
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> registerPermissionDirective</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app)</span></span>
78
+ <span class="line"></span>
79
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> userStore</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useUserStore</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
80
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> navigation</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getHostNavigationConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
81
+ <span class="line"></span>
82
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 在这里接管 token、鉴权失败和通用服务端错误。</span></span>
83
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setupHttp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
84
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> baseURL: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.env.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">VITE_API_URL</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
85
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getToken</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> userStore.token,</span></span>
86
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onUnauthorized</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
87
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> userStore.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">logout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
88
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">replace</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
89
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: navigation.loginPath,</span></span>
90
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> query: { redirect: router.currentRoute.value.fullPath }</span></span>
91
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
92
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
93
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onForbidden</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
94
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">warning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;当前账号没有访问权限&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
95
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">replace</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(navigation.forbiddenPath)</span></span>
96
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
97
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onServerError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
98
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;服务异常，请稍后重试&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
99
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
100
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
101
+ <span class="line"></span>
102
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 这里不只是挂插件，也会把插件自己的路由和多语言资源一并接进来。</span></span>
103
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bootstrapPlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
104
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app,</span></span>
105
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router,</span></span>
106
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i18n,</span></span>
107
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [sysSettingPlugin, shopPlugin]</span></span>
108
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
109
+ <span class="line"></span>
110
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isReady</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
111
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
112
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
113
+ <span class="line"></span>
114
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setupApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span></code></pre></div><p>先看这几个点：</p><ul><li>样式顺序别写反，先引 <code>@melt-js/libs-bag-entry/style.css</code>，再引项目自己的 <code>style.css</code></li><li><code>createHostRouter()</code> 先接宿主自己的基础路由；带登录的后台项目建议显式传 <code>auth: { enabled: true }</code>，并配置首页、登录页、个人中心和 403 路径</li><li><code>setAuthProvider()</code> 用来注入认证适配器，默认可以使用 <code>createStrapiAuthProvider()</code></li><li><code>setupHttp()</code> 负责接住 token、401、403 和服务端异常</li><li><code>bootstrapPlugins()</code> 不只是挂插件，它也会顺手把插件路由注册进去</li></ul><p>如果你直接照这段 <code>main.ts</code> 来写，先准备一个最小 <code>.env</code>：</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:#24292E;--shiki-dark:#E1E4E8;">VITE_API_URL</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">http://localhost:60010</span></span></code></pre></div><p>如果你暂时不接后端，也可以先把 <code>setupHttp()</code> 这一段注释掉，等接口联调时再接回来。</p><h2 id="src-routes-ts" tabindex="-1"><code>src/routes.ts</code> <a class="header-anchor" href="#src-routes-ts" aria-label="Permalink to &quot;`src/routes.ts`&quot;">​</a></h2><p>宿主自己的基础路由通常不用很多，常见就是登录页、仪表盘、403、404 这些：</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;"> { AdminRouteRecordRaw } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry&#39;</span></span>
115
+ <span class="line"></span>
116
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> exampleRoutes</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AdminRouteRecordRaw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
117
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
118
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 宿主首页通常直接重定向到一个默认工作台页面。</span></span>
119
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
120
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> redirect: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/dashboard&#39;</span></span>
121
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
122
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
123
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/login&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
124
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Login&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
125
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./views/Login.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
126
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> meta: {</span></span>
127
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;blank&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
128
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> public: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
129
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
130
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
131
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
132
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/dashboard&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
133
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Dashboard&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
134
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./views/Dashboard.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
135
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> meta: {</span></span>
136
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 这里建议写 i18n key，后面做多语言切换更省事。</span></span>
137
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;menu.dashboard&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
138
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span></span>
139
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
140
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
141
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
142
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/profile&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
143
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Profile&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
144
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./views/Profile.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
145
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> meta: {</span></span>
146
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;sysSetting.profile&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
147
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span></span>
148
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
149
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
150
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
151
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/403&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
152
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Forbidden&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
153
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./views/Forbidden.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
154
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> meta: {</span></span>
155
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span></span>
156
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
157
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
158
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
159
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/404&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
160
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;NotFound&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
161
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./views/NotFound.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
162
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> meta: {</span></span>
163
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
164
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> public: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
165
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
166
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
167
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
168
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/redirect&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
169
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Redirect&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
170
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;./views/Redirect.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
171
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> meta: {</span></span>
172
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Redirect 页面一般只做内部跳转中转，不出现在菜单和标签栏里。</span></span>
173
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;blank&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
174
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> public: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
175
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> hidden: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
176
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> noCache: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
177
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
178
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
179
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
180
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> path: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/:pathMatch(.*)*&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
181
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> redirect: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/404&#39;</span></span>
182
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
183
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre></div><p><code>meta.title</code> 这里最容易出问题。</p><ul><li>如果你传的是国际化 key，比如 <code>menu.dashboard</code>、<code>sysSetting.profile</code>，宿主会按 i18n 处理</li><li>直接写中文也能显示，但写 key 更适合后面做中英文切换</li></ul><h2 id="src-app-vue" tabindex="-1"><code>src/App.vue</code> <a class="header-anchor" href="#src-app-vue" aria-label="Permalink to &quot;`src/App.vue`&quot;">​</a></h2><p>再看最外层宿主组件。它通常很薄：</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
184
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">HostApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
185
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
186
+ <span class="line"></span>
187
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
188
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { HostApp } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry&#39;</span></span>
189
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>这里有一个使用细节：</p><ul><li><p>默认情况下，<code>HostApp</code> 会挂载内置外观配置抽屉</p></li><li><p>如果你显式传了 <code>#settings</code> 插槽，宿主会渲染你的插槽内容，并跳过内置抽屉，避免出现两套设置面板</p></li><li><p><code>HostApp</code> 负责布局、菜单、标签页、主题、权限这些宿主能力</p></li><li><p>插件里的系统设置页可以通过 <code>useAppConfigStore()</code> 修改主题色或打开外观抽屉，不需要直接读写 <code>localStorage</code></p></li></ul><h2 id="接入顺序" tabindex="-1">接入顺序 <a class="header-anchor" href="#接入顺序" aria-label="Permalink to &quot;接入顺序&quot;">​</a></h2><p>可以按这个顺序来：</p><ol><li>先把 <code>main.ts</code> 跑通</li><li>再补 <code>routes.ts</code> 里的宿主基础页面</li><li>然后决定要不要挂官方插件</li><li>再接自己的业务插件或本地 demo 插件</li></ol><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;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bootstrapPlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
190
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app,</span></span>
191
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router,</span></span>
192
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i18n,</span></span>
193
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: []</span></span>
194
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>先把宿主空壳跑起来，再一点点加业务。</p><p>如果你接下来要处理的是本地 <code>link:</code> 联调、外部使用方验证，直接继续看：</p><ul><li><a href="./local-debugging.html">本地联调</a></li><li><a href="./package-publishing.html">发包流程</a></li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>Last updated: <time datetime="2026-11-07T09:53:20.000Z" data-v-e98dd255></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/@melt-js/docs-bag@2026.11.7-1/dist/guide/introduction.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>项目介绍</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2026-present Vue-Bag-Admin</p></div></footer><!--[--><!--]--></div></div>
195
+ <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_complete-host-app.md\":\"BK8IlbVU\",\"guide_create-project.md\":\"DdUrJ9TP\",\"guide_deployment.md\":\"Bok2OVNY\",\"guide_dictionary-system.md\":\"CBwI_GoJ\",\"guide_getting-started.md\":\"DY8_yjmu\",\"guide_host_auth-and-permissions.md\":\"0lZV8yHP\",\"guide_host_bootstrap.md\":\"lEHuoLl6\",\"guide_host_routing-and-menu.md\":\"BoIgnh8N\",\"guide_introduction.md\":\"iXNk9q0Q\",\"guide_local-debugging.md\":\"DUTHJNrd\",\"guide_network-request.md\":\"CNxuQztV\",\"guide_official-plugins_index.md\":\"BoDXHNxM\",\"guide_official-plugins_install-and-toggle.md\":\"Dr7JbEG0\",\"guide_official-plugins_shop.md\":\"DiOYHXuP\",\"guide_official-plugins_sys-setting.md\":\"zAtX0VM9\",\"guide_package-core.md\":\"C4zUrJyx\",\"guide_package-ecosystem.md\":\"D7XqIXVb\",\"guide_package-plugin-shop.md\":\"fAmp9PnM\",\"guide_package-plugin-sys-setting.md\":\"B_eYlFsp\",\"guide_package-publishing.md\":\"B457Mv-9\",\"guide_package-request.md\":\"BxsPauw8\",\"guide_package-ui.md\":\"BTeJ94Oh\",\"guide_permissions.md\":\"DAZn1vjP\",\"guide_plugin-development.md\":\"BUmEsBpT\",\"guide_plugins_admin-plugin.md\":\"DPkzLbtK\",\"guide_plugins_create-plugin.md\":\"DvTO3X0-\",\"guide_plugins_debug-and-publish.md\":\"6Vl--EVC\",\"guide_plugins_lifecycle-and-dependencies.md\":\"D4pLzazK\",\"guide_plugins_permissions-and-settings.md\":\"t7QTgL3Q\",\"guide_plugins_routes-menus-locales.md\":\"yqtK9Ucl\",\"guide_pro-form.md\":\"CMhQ6QRl\",\"guide_pro-table.md\":\"I6fEG_lQ\",\"guide_request-and-components.md\":\"BQIKZknw\",\"guide_routing-and-menu.md\":\"BWLWiMg1\",\"guide_theme-tokens.md\":\"BZ_Qwz_U\",\"index.md\":\"RFoPWDBP\",\"readme.md\":\"DGU5lUfa\"}");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.7-1/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.7\",\"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>
196
+
197
+ </body>
198
+ </html>
package/dist/guide/create-project.html ADDED
@@ -0,0 +1,58 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-US" dir="ltr">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>创建项目 | Vue-Bag-Admin</title>
7
+ <meta name="description" content="基于 Vue3 + Vite6 + Naive UI + Pinia + Strapi5 的中后台系统框架">
8
+ <meta name="generator" content="VitePress v1.6.4">
9
+ <link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.7-1/dist/assets/style.BUkIHM41.css" as="style">
10
+ <link rel="preload stylesheet" href="/@melt-js/docs-bag@2026.11.7-1/dist/vp-icons.css" as="style">
11
+
12
+ <script type="module" src="/@melt-js/docs-bag@2026.11.7-1/dist/assets/app.Ds2SzgsS.js"></script>
13
+ <link rel="preload" href="/@melt-js/docs-bag@2026.11.7-1/dist/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
14
+ <link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.7-1/dist/assets/chunks/theme.Caar5PdV.js">
15
+ <link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.7-1/dist/assets/chunks/framework.DaGrNpXH.js">
16
+ <link rel="modulepreload" href="/@melt-js/docs-bag@2026.11.7-1/dist/assets/guide_create-project.md.DdUrJ9TP.lean.js">
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
+ <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
+ </head>
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-1/dist/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/@melt-js/docs-bag@2026.11.7-1/dist/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-1/dist/" 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-1/dist/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-1/dist/#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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1/dist/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-1_dist_guide_create-project" data-v-39a288b8><div><h1 id="创建项目" tabindex="-1">创建项目 <a class="header-anchor" href="#创建项目" aria-label="Permalink to &quot;创建项目&quot;">​</a></h1><p><code>@melt-js/libs-bag-create</code> 用来生成一个独立的 Vue 3 宿主项目。生成结果可以直接作为业务仓库使用，不依赖当前 Monorepo。</p><h2 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-label="Permalink to &quot;基本用法&quot;">​</a></h2><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:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">项目目</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">录</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span></span></code></pre></div><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;"> operations-admin</span></span>
22
+ <span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> operations-admin</span></span>
23
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span></span>
24
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><p>脚手架当前使用内置的 <code>basic</code> 模板。</p><h2 id="命令参数" tabindex="-1">命令参数 <a class="header-anchor" href="#命令参数" aria-label="Permalink to &quot;命令参数&quot;">​</a></h2><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>create-vue-bag-admin &lt;project-name&gt; [options]</span></span>
25
+ <span class="line"><span></span></span>
26
+ <span class="line"><span>--bag-version &lt;version&gt; 指定 @melt-js/libs-bag-entry 版本，默认 latest</span></span>
27
+ <span class="line"><span>--force 允许写入非空目录</span></span>
28
+ <span class="line"><span>-h, --help 查看帮助</span></span></code></pre></div><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;"> operations-admin</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --bag-version</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2026.11.7</span></span></code></pre></div><p><code>--force</code> 会允许脚手架向非空目录写入文件，可能覆盖同名模板文件。只有确认目标目录内容可以被替换时才使用。</p><h2 id="目录说明" tabindex="-1">目录说明 <a class="header-anchor" href="#目录说明" aria-label="Permalink to &quot;目录说明&quot;">​</a></h2><p>生成后的主要结构如下：</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>operations-admin/</span></span>
29
+ <span class="line"><span>├── src/</span></span>
30
+ <span class="line"><span>│ ├── main.ts</span></span>
31
+ <span class="line"><span>│ ├── routes.ts</span></span>
32
+ <span class="line"><span>│ ├── App.vue</span></span>
33
+ <span class="line"><span>│ ├── style.css</span></span>
34
+ <span class="line"><span>│ ├── plugins/</span></span>
35
+ <span class="line"><span>│ │ ├── workspace.ts</span></span>
36
+ <span class="line"><span>│ │ ├── content.ts</span></span>
37
+ <span class="line"><span>│ │ └── system.ts</span></span>
38
+ <span class="line"><span>│ └── views/</span></span>
39
+ <span class="line"><span>├── index.html</span></span>
40
+ <span class="line"><span>├── package.json</span></span>
41
+ <span class="line"><span>├── tailwind.config.js</span></span>
42
+ <span class="line"><span>├── vite.config.ts</span></span>
43
+ <span class="line"><span>└── tsconfig*.json</span></span></code></pre></div><h3 id="src-main-ts" tabindex="-1"><code>src/main.ts</code> <a class="header-anchor" href="#src-main-ts" aria-label="Permalink to &quot;`src/main.ts`&quot;">​</a></h3><p>应用入口，负责创建 Vue、Pinia、i18n 和 Router，并注入认证、请求配置和插件列表。</p><h3 id="src-routes-ts" tabindex="-1"><code>src/routes.ts</code> <a class="header-anchor" href="#src-routes-ts" aria-label="Permalink to &quot;`src/routes.ts`&quot;">​</a></h3><p>只放宿主必须拥有的基础路由，例如登录页、Dashboard、403、404 和重定向页。具体业务路由建议放在插件中。</p><h3 id="src-plugins" tabindex="-1"><code>src/plugins</code> <a class="header-anchor" href="#src-plugins" aria-label="Permalink to &quot;`src/plugins`&quot;">​</a></h3><p>脚手架自带三个本地插件，用来演示不同场景：</p><table tabindex="0"><thead><tr><th>插件</th><th>演示内容</th></tr></thead><tbody><tr><td><code>workspace.ts</code></td><td>多级菜单、同组件多路由和 <code>cacheKey</code></td></tr><tr><td><code>content.ts</code></td><td>列表、创建、详情页和 <code>activeMenu</code></td></tr><tr><td><code>system.ts</code></td><td>插件排序和 <code>dependsOn</code> 依赖</td></tr></tbody></table><p>本地插件和 npm 插件遵循相同的 <code>AdminPlugin</code> 协议。业务稳定后，可以把其中一个目录迁移为独立包。</p><h3 id="src-app-vue" tabindex="-1"><code>src/App.vue</code> <a class="header-anchor" href="#src-app-vue" aria-label="Permalink to &quot;`src/App.vue`&quot;">​</a></h3><p>默认只挂载宿主根组件：</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
44
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">HostApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
45
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
46
+ <span class="line"></span>
47
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
48
+ <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { HostApp } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@melt-js/libs-bag-entry&#39;</span></span>
49
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="创建后先做什么" tabindex="-1">创建后先做什么 <a class="header-anchor" href="#创建后先做什么" aria-label="Permalink to &quot;创建后先做什么&quot;">​</a></h2><p>建议按下面顺序改造模板。</p><h3 id="_1-保留一个示例插件" tabindex="-1">1. 保留一个示例插件 <a class="header-anchor" href="#_1-保留一个示例插件" aria-label="Permalink to &quot;1. 保留一个示例插件&quot;">​</a></h3><p>先不要同时重写所有内容。选择最接近业务的插件作为参考，删除另外两个，再确认项目仍能启动。</p><p>例如只保留 <code>workspacePlugin</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;">await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> bootstrapPlugins</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
50
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app,</span></span>
51
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> router,</span></span>
52
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> i18n,</span></span>
53
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> plugins: [workspacePlugin]</span></span>
54
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h3 id="_2-替换演示认证" tabindex="-1">2. 替换演示认证 <a class="header-anchor" href="#_2-替换演示认证" aria-label="Permalink to &quot;2. 替换演示认证&quot;">​</a></h3><p>模板中的 <code>admin / 123456</code> 是前端演示逻辑，不应直接用于生产环境。</p><p>接入真实后端时，需要：</p><ol><li>删除 <code>demoAuthProvider</code>。</li><li>实现自己的 <code>AuthProvider</code>，或使用 <code>createStrapiAuthProvider()</code>。</li><li>通过 <code>setAuthProvider()</code> 注入。</li><li>配置 <code>VITE_API_URL</code>。</li></ol><h3 id="_3-配置接口地址" tabindex="-1">3. 配置接口地址 <a class="header-anchor" href="#_3-配置接口地址" aria-label="Permalink to &quot;3. 配置接口地址&quot;">​</a></h3><p>在项目根目录创建 <code>.env.development</code>：</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:#24292E;--shiki-dark:#E1E4E8;">VITE_API_URL</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">http://localhost:60010</span></span></code></pre></div><p>生产环境可以使用 <code>.env.production</code> 配置对应地址。</p><h3 id="_4-替换品牌和示例页面" tabindex="-1">4. 替换品牌和示例页面 <a class="header-anchor" href="#_4-替换品牌和示例页面" aria-label="Permalink to &quot;4. 替换品牌和示例页面&quot;">​</a></h3><p>修改项目名称、Logo、主题色和 Dashboard，然后再开始添加业务插件。这样可以先确认宿主能力稳定，再进入业务开发。</p><h2 id="不使用脚手架" tabindex="-1">不使用脚手架 <a class="header-anchor" href="#不使用脚手架" aria-label="Permalink to &quot;不使用脚手架&quot;">​</a></h2><p>已有 Vite + Vue 3 项目也可以手动安装：</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;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @melt-js/libs-bag-entry</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> naive-ui</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> pinia</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vue-i18n</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> vue-router</span></span></code></pre></div><p>但你需要自己准备入口文件、基础路由、登录页、403 和 404 页面。第一次接入时更推荐从脚手架开始，再把现有业务逐步迁入。</p><h2 id="下一步" tabindex="-1">下一步 <a class="header-anchor" href="#下一步" aria-label="Permalink to &quot;下一步&quot;">​</a></h2><p>继续阅读 <a href="./host/bootstrap.html">初始化宿主</a>，了解 <code>main.ts</code> 中各个初始化步骤为什么要按当前顺序执行。</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>Last updated: <time datetime="2026-11-07T09:53:20.000Z" data-v-e98dd255></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/@melt-js/docs-bag@2026.11.7-1/dist/guide/getting-started.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>快速上手</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/@melt-js/docs-bag@2026.11.7-1/dist/guide/host/bootstrap.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>初始化宿主</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2026-present Vue-Bag-Admin</p></div></footer><!--[--><!--]--></div></div>
55
+ <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_complete-host-app.md\":\"BK8IlbVU\",\"guide_create-project.md\":\"DdUrJ9TP\",\"guide_deployment.md\":\"Bok2OVNY\",\"guide_dictionary-system.md\":\"CBwI_GoJ\",\"guide_getting-started.md\":\"DY8_yjmu\",\"guide_host_auth-and-permissions.md\":\"0lZV8yHP\",\"guide_host_bootstrap.md\":\"lEHuoLl6\",\"guide_host_routing-and-menu.md\":\"BoIgnh8N\",\"guide_introduction.md\":\"iXNk9q0Q\",\"guide_local-debugging.md\":\"DUTHJNrd\",\"guide_network-request.md\":\"CNxuQztV\",\"guide_official-plugins_index.md\":\"BoDXHNxM\",\"guide_official-plugins_install-and-toggle.md\":\"Dr7JbEG0\",\"guide_official-plugins_shop.md\":\"DiOYHXuP\",\"guide_official-plugins_sys-setting.md\":\"zAtX0VM9\",\"guide_package-core.md\":\"C4zUrJyx\",\"guide_package-ecosystem.md\":\"D7XqIXVb\",\"guide_package-plugin-shop.md\":\"fAmp9PnM\",\"guide_package-plugin-sys-setting.md\":\"B_eYlFsp\",\"guide_package-publishing.md\":\"B457Mv-9\",\"guide_package-request.md\":\"BxsPauw8\",\"guide_package-ui.md\":\"BTeJ94Oh\",\"guide_permissions.md\":\"DAZn1vjP\",\"guide_plugin-development.md\":\"BUmEsBpT\",\"guide_plugins_admin-plugin.md\":\"DPkzLbtK\",\"guide_plugins_create-plugin.md\":\"DvTO3X0-\",\"guide_plugins_debug-and-publish.md\":\"6Vl--EVC\",\"guide_plugins_lifecycle-and-dependencies.md\":\"D4pLzazK\",\"guide_plugins_permissions-and-settings.md\":\"t7QTgL3Q\",\"guide_plugins_routes-menus-locales.md\":\"yqtK9Ucl\",\"guide_pro-form.md\":\"CMhQ6QRl\",\"guide_pro-table.md\":\"I6fEG_lQ\",\"guide_request-and-components.md\":\"BQIKZknw\",\"guide_routing-and-menu.md\":\"BWLWiMg1\",\"guide_theme-tokens.md\":\"BZ_Qwz_U\",\"index.md\":\"RFoPWDBP\",\"readme.md\":\"DGU5lUfa\"}");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.7-1/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.7\",\"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>
56
+
57
+ </body>
58
+ </html>