docs: 精简 README(结构/依赖/使用),细节移至 docs/integration.md
This commit is contained in:
24
docs/integration.md
Normal file
24
docs/integration.md
Normal file
@@ -0,0 +1,24 @@
|
||||
# 嵌入 mainPage
|
||||
|
||||
z449 可作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的子模块(git submodule)经构建期组件集成展示,位于 mainPage 的 `third_party/z449`。
|
||||
|
||||
## 便携式 App.vue
|
||||
|
||||
`src/App.vue` 是嵌入与独立两用的根组件:
|
||||
|
||||
- **嵌入时**:mainPage 侧包装器 `import` 本项目 `src/App.vue`,把父项目当前语言经 `:locale` prop 传入。`App.vue` 内 `watch` 该 prop,同步到本项目独立的 `vue-i18n` 实例 `locale`,从而跟随父项目语言开关响应式切换。文案来自本项目自有 locale 文件,不共享父项目的 messages。
|
||||
- **独立运行时**:不接收 prop,默认中文。
|
||||
|
||||
## i18n 桥接关键点
|
||||
|
||||
组件内用 `useLocale` composable **直接读自身模块级 i18n 实例**(`i18n.global`),而非 `useI18n({ useScope: 'global' })`。
|
||||
|
||||
原因:`useI18n({ useScope: 'global' })` 解析的是「当前运行 app 已安装的全局 i18n」。嵌入 mainPage 时那是父项目的实例(不含本项目 `mobileGame.*` 文案),会导致文案回退成 i18n key(显示 ID 而非文字)。改为直接引用本项目实例的 `.global`,无论是否 `app.use()` 都拿到本项目的 `t`。
|
||||
|
||||
## 样式隔离
|
||||
|
||||
子组件均为 scoped;全局重置(`variables.css` / `base.css`)仅在独立 app 的 `main.js` 加载,嵌入时不加载,复用宿主 `:root` 令牌级联。
|
||||
|
||||
## 集成 / 升级 / 移除
|
||||
|
||||
详见 mainPage 仓库的 [`docs/submodule-z449.md`](https://git.zikai.wang/zikai/zMainPage/src/branch/main/docs/submodule-z449.md)(克隆含子模块、升级 gitlink、移除页签等流程)。
|
||||
Reference in New Issue
Block a user