@melt-js/tpl-vue3-admin-naive-bag

vue-bag-admin 生态里的 Vue 3 后台宿主模板（由上游 apps/admin 迁入），技术栈为 Vue 3.5 + Vite 6 + Naive UI + Tailwind CSS 3 + Pinia。路由、布局、权限、请求和插件机制都由同仓库的 libs-*-bag / comps-*-bag 提供，模板本身只保留宿主入口、页面与演示插件。

• 包名：@melt-js/tpl-vue3-admin-naive-bag（可发布，unpkg 入口 dist/index.html）
• 目录：tpl-vue3-admin-naive-bag/
• 端口：50170（dev）/ 50180（preview）

依赖的 workspace 包

| 包 | 作用 | | --- | --- | | @melt-js/libs-bag-entry | 统一入口（聚合 core / request / ui / host-vue） | | @melt-js/libs-bag-core | 插件、路由 meta、Schema、字典协议 | | @melt-js/libs-bag-request | HTTP / Fetch / WebSocket | | @melt-js/libs-bag-ui | PmProTable / PmProForm / PmSchemaForm / PmDictTag | | @melt-js/libs-bag-host | 宿主布局、权限、标签页、插件引导 | | @melt-js/comps-bag-shop | 官方商城插件 | | @melt-js/comps-bag-sys | 官方系统设置插件 |

vite.config.ts 与 tsconfig.app.json 都指向兄弟目录：运行时 alias 到各包的 src，vue-tsc 读取各包已构建的 dist/index.d.ts。因此 dev 可以直接启动，执行 build 前需要先构建依赖包。

启动

# 仓库根目录
pnpm bag:build:libs       # core → request → ui → host-vue → libs-bag-entry
pnpm bag:build:plugins    # comps-bag-shop / comps-bag-sys
pnpm bag:dev              # http://localhost:50170

也可以在本目录内：

pnpm dev
pnpm build
pnpm preview              # 50180

登录页默认使用前端 mock：账号 admin，密码 123456。要接参考后端时，把 .env.example 复制成 .env，VITE_API_URL / VITE_WS_URL 默认指向 http://localhost:60010（service-bag-strapi）。

发布

pnpm --filter @melt-js/tpl-vue3-admin-naive-bag run publish:stage

发布后 unpkg 入口：

https://unpkg.com/@melt-js/tpl-vue3-admin-naive-bag/dist/index.html

生产构建使用相对 base（./）和 hash 路由，VITE_BASE_URL 可覆盖部署子路径；dist 里已包含全部前端运行时代码。

说明

• 上游 apps/admin 的 Vite alias 从 ../../packages/*/src 改成本目录的兄弟目录（../libs-*-bag、../comps-*-bag），确保宿主、插件和 listRuntimePlugins() 读同一份运行时。
• Tailwind 3 的 content 显式列出所有依赖包的 src，远程组件/插件源码里的原子类也能被扫描到。
• pinia 与仓库其它 Vue 3 包统一为 3.0.4：打包后只保留一份 Pinia，避免宿主的 createPinia() 与库里的 useStore() 落在不同模块实例上（表现为生产构建启动时报 _s 相关错误）。
• 宿主页面（src/views/*）保留原项目的登录、Dashboard、403/404、Profile 和 Redirect；业务页面全部来自插件。