@composy/app-vue

@composy/app-vue

LDesign 业务 web 应用的 Vue 3 起步模版：提供 createVueApp 与默认业务壳接线。

应用壳遵循 @composy/solution-core 的共享运行时契约：宿主需要与其它产品协调时，向 createVueApp 传入 runtime；未传入时应用会自建 product: 'app' 运行时，并在卸载时负责销毁。 该运行时还会经 @composy/solution-vue provide 到整棵 Vue 组件树。

该包是「双产物 web 包」：

• 可运行 web app：src/main.ts + index.html 由 @composy/launcher 驱动开发、构建与预览
• 可消费库：src/index.ts 由 @composy/builder 打成 es/esm/lib 和 dist/app-vue.umd(.min).js，供其它项目 import { createVueApp } from '@composy/app-vue' 接线引擎、路由、状态、模板等运行时

该包不是 CLI / 脚手架工具。pnpm create ldesign-vue my-app 类初始化体验应该由独立的 create-ldesign-vue 包承担，不要往这个 web 包里塞 bin。

安装

pnpm add @composy/app-vue

依赖由包内 dependencies 携带，无需额外安装 peer（Vue 3 运行时随 @composy/engine-vue 等依赖提供）。可选入口：./core、./core/types、./apps/restful、./types、 ./umd（浏览器直接加载）、./style.css。

命令

pnpm install
pnpm dev          # 启动开发服务器（默认 :8080）
pnpm build        # web 端生产构建到 dist/，并同步生成 npm 库与 UMD 产物
pnpm preview      # 预览生产产物
pnpm build:lib    # 构建 npm 库产物到 es/ esm/ lib/ 与 dist/app-vue.umd(.min).js
pnpm outputs:check # 校验 package.json exports 与实际构建产物
pnpm type-check
pnpm lint

快速创建

import '@composy/app-vue/style.css'
import { createVueApp } from '@composy/app-vue'

await createVueApp({ selector: '#app' })

Vue UMD 只外置 Vue 3；加载 Vue global、index.css 与 app-vue.umd.min.js 后，调用 ComposyAppVue.createVueApp({ selector: '#app' })。

API 速览

主入口 . 导出 createVueApp（含 default 导出）与类型 CreateVueAppOptions、AppVueShellConfig、LDesignVueApp、LDesignVueAppServices。

CreateVueAppOptions 常用字段：

LDesignVueAppServices 聚合 logger、config、event、api、auth、router 等 28 个已接线服务。

端口分配

apps 项目共用端口（不会同时运行），templates 项目各自独立端口（可同时开发）。

目录约定

• src/main.ts：浏览器入口，启动默认应用场景
• src/index.ts：npm 库入口，re-export src/core 与 src/core/types
• src/core/index.ts：框架适配稳定出口，暴露 createVueApp、服务接线、默认 shell 菜单/页面/外观 helper
• @composy/app-core：跨 Vanilla/Vue 复用的 registry 编排和默认 shell 数据来源；本包只保留 Vue 类型绑定与渲染适配
• src/core/services/<能力>/：每个 @composy/* 包的服务接线（api / auth / color / ...）
  • bootstrap/createVueApp.ts 是真正的引擎装配器
  • types/ 是规范化类型目录（从这里导入，而非 src/types/）
• src/types/：兼容转发层，全部 re-export ../core/types；不添加新类型
• src/apps/restful/：RESTful scenario 公开入口（npm 可 @composy/app-vue/apps/restful）
  • createRestfulVueApp 是推荐的应用构建函数
  • fallback-root/ 子目录含 shell: false 回退根组件，不在 npm exports 中暴露
• .ldesign/launcher.config.ts：dev/build/preview 配置
• .ldesign/tsconfig.json 与 .ldesign/eslint.config.js：规范权威配置；根目录同名文件仅作为发现兼容入口
• .ldesign/app.config.ts：launcher 注入用运行时元配置，遵循 @composy/app-core/shell 的 RuntimeAppConfig 契约
• .ldesign/builder.config.ts：库产物配置

认证后端接线

• api.backend 可注册登录、验证码校验、用户资料和令牌刷新接口，默认路径为 /auth/login、/captcha/text/verify、/auth/profile、/auth/refresh
• auth.backend 通过同一组 apiIds 调用认证后端；登录、验证码校验、资料拉取和刷新令牌都通过 api.manager.call() 执行
• api.backend.csrfPath 可配置 CSRF 握手路径；NestAPI preset 使用 /api/health，客户端会在登录、刷新和退出等变更请求前自动获取并携带 X-CSRF-Token
• NESTAPI_PRESET 只是内置示例 preset；如需显式导入请使用 @composy/app-vue/apps/restful，默认使用同源 /api/v1 contract；开发环境可通过 launcher proxy 转发到 server/nestapi

样式约定

• 所有样式都写在 .less 文件里，不要把 CSS 字符串拼到 TS 中
• 运行时入口 / 场景代码通过 import './styles/xxx.less' 引入，由 vite/launcher 处理；库构建也会在 es/ 保留这些外部化 Less 文件，避免包入口引用缺失产物
• 库产物 es/esm/lib 入口只走 src/{index,core,types}；其中被运行时模块外部化的 .less 导入会随 es/ 保留源码，并附带同目录编译后的 .css，esm/ 保留源码样式，供 Vite 等消费端解析