asai-vue-host — 应用宿主框架（核心）

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-host | src/components/index.ts | $engineasai（provide/inject） | Host |

概述

asai-vue-host 是 AsaiWeb CMS 的核心应用宿主框架，提供应用加载、模块管理、Hash 路由分发、WebSocket 通信和数据库响应式 Provide。是整个前端架构的运行容器。

集成方式

// monorepo — webclient/src/utils/index.ts
import AsaiVueHost from '../plugs/asai-vue-host/src/components/index';
// import '/node_modules/asai-vue-host/dist/asai-vue-host.css';
// npm
// import AsaiVueHost from '@estun/asai-vue-host';

installModules.forEach((module) => module.install(app, lib));

独立性约束

• 禁止 cross-import 其它 plugs/*。
• 通过 LibInit 传入的 loadts / loadvue / loadfn 与宿主 app 耦合，不反向依赖 Feature 插件。

主要 API / 导出

| 导出 | 说明 | |------|------| | install(app, opt) | Vue 插件安装入口 | | Provide $engineasai | 主引擎 composable 与工具 | | providedb / providews / providefn / providedbwork | 全局 Provide 键 | | 全局组件 | asui/*/*.vue 懒加载注册（AsaiWebModule、PageLoad* 等） |

性能说明

• TS 模块（asengine）eager 加载；Vue 组件 lazy（eager: false），首次渲染拉 chunk。
• 核心首屏组件若出现白屏闪烁，可在业务侧对关键组件单独 eager。

peerDependencies 建议

{
  "peerDependencies": {
    "vue": "^3.4.0",
    "vue-router": "^4.0.0"
  }
}

功能

• 应用启动、模块管理、Hash 路由分发
• WebSocket 连接管理与事件系统
• IndexedDB / 本地数据响应式 Provide
• 加载状态与错误页面（404、PageLoadErr 等）

文件结构

asai-vue-host/
├── src/components/
│   ├── index.ts                       # install 入口
│   ├── asengine/provide/              # providedb / providews / providefn
│   └── asui/                          # app / common / page 组件
└── README.md

安装方式

app.use(AsaiVueHost, {
  loadts: (options) => { /* 加载 TypeScript 模块 */ },
  loadvue: (options) => { /* 加载 Vue 组件 */ },
  loadfn: (path) => { /* 加载函数 */ },
});

Provide 系统

| Provide Key | 说明 | |-------------|------| | $engineasai | 主引擎上下文 | | providedb | 数据库响应式数据 | | providews | WebSocket 数据 | | providefn | 功能函数 | | providedbwork | 数据库工作线程 |

核心组件

| 组件 | 说明 | |------|------| | AsaiWebServer | 服务器连接管理 | | AsaiWebModule | 模块容器 | | AsaiWebItemIndex | 应用主入口 | | AsPageBusy / AsLoadingCircle | 加载动画 | | PageLoadWs / PageLoadErr | 连接/错误页 | | Asai404 | 404 页面 |

技术细节

• Vue 插件 install(app, opt) 模式
• import.meta.glob 自动发现并注册组件
• 异步组件按需加载减少首屏体积