asai-vue-css — CSS 样式动态加载模块

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-css | src/index.ts | AsaiVueCss → imComp | Feature |

概述

asai-vue-css 通过 import.meta.glob 扫描 components/ 下 Vue 组件并导出 imComp，用于主题/CSS 相关 UI 的按需组件化管理。

集成方式

// monorepo — webclient/src/App.vue（首屏同步）
import AsaiVueCss from './plugs/asai-vue-css/src/index';
// npm
// import AsaiVueCss from '@estun/asai-vue-css';

useProvide({ plugs: { AsaiVueCss } });
// 业务：ujt.$fn.AsaiVueCss / ujt.$fn.AsaiVueCss.AsCssTheme

独立性约束

• 禁止 cross-import 其它 plugs/*。
• buildCompMap 定义于插件内 src/useCompLoader.ts（npm 包自包含，不引用 app lib）。

主要 API / 导出

| 导出 | 说明 | |------|------| | default / imComp | { [ComponentName]: Component }，键名为 .vue 文件名 | | 示例 | imComp['AsCssTheme'] 等（以实际 components/ 为准） |

性能说明

• 首屏同步注册；各子组件经 buildCompMap → defineAsyncComponent，首次渲染才加载 chunk。
• glob 路径须为编译期字面量，在 index.ts 内写死。

peerDependencies 建议

{
  "peerDependencies": {
    "vue": "^3.4.0"
  }
}

使用说明

const { AsCssTheme } = ujt.$fn.AsaiVueCss;
// 或
import { imComp } from '@estun/asai-vue-css';

文件结构

asai-vue-css/
├── src/
│   ├── index.ts
│   ├── useCompLoader.ts    # 插件内 glob → async 组件
│   └── components/*.vue
└── README.md

技术细节

1. import.meta.glob(['./components/*.vue'])
2. getVueName() 提取组件键名
3. defineAsyncComponent 异步加载

npm 发包时随插件目录一并发布，无需依赖 monorepo lib/。