# @cwa/nuxt 中文文档

规范地址：https://npmcn.com/package/%40cwa/nuxt/

版本：2\.0\.0-alpha\.32
npm 元数据更新时间：2026-10-31T20:19:16.845Z
中文译文更新时间：2026-10-31T22:03:24.993Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cwa/nuxt
原文对照：https://npmcn.com/package/%40cwa/nuxt/?lang=original
项目主页：https://github.com/components-web-app/cwa-nuxt-module#readme
源码仓库：https://github.com/components-web-app/cwa-nuxt-module

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.4 MB，746 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：32 个
- peer 依赖：satori \>=0\.47\.1，@resvg/resvg-js ^2\.6\.2
- 首次发布：2026-09-24T16:41:31.227Z
- 最新版本发布：2026-10-31T20:19:16.578Z
- 已发布版本数：32（近 12 个月 32 个）

## 中文简介

组件Web应用下一个模块。用于使用API Components Bundle创建组件驱动的web应用程序的UI

## 安装

```sh
npm install @cwa/nuxt
```

也可以使用：`pnpm add @cwa/nuxt`、`yarn add @cwa/nuxt`、`bun add @cwa/nuxt`

## README

# 下一个模块

\[! \[codecov\] (https://codecov。io / github components-web-app / cwa-nuxt-module /分公司/{{电流。分支}}/图表/ badge.svg ?令牌= Z6GQJN413O)\] (https://app.codecov。io / gh / components-web-app / cwa-nuxt-module /树/{{电流。分支}})

该模块设计用于 [API组件包](https://github.com/components-web-app/api-components-bundle) 并将提供一个完整的用户界面和实用程序，以方便地创建自定义web应用程序与先进的在线内容管理系统

## CWA模块在运行

### 模板使用该模块作为前端，API组件包作为后端

[https://github.com/components-web-app/components-web-app](https://github.com/components-web-app/components-web-app)

## 开发

-   运行 `pnpm run dev:prepare` 生成类型存根。
-   使用 `pnpm run dev` 开始 [操场上](https://npmcn.com/package/%40cwa/nuxt/playground) 处于开发模式。

### 产品毛羽

-   运行 `pnpm run lint` 或者 `pnpm run lint:fix`

### 测试

该模块分为四层进行测试。在这个模块中，每个特性都得到了验证。模板自己的e2e套件用于从模板构建的项目，而不是模块特性。

#### 1\. 单元和组件测试（Vitest）

-   `pnpm run test`：单次运行。规范位于它们所涵盖的代码旁边(`*.spec.ts`）。
-   `pnpm run test:coverage`一样，有保险。
-   `pnpm run test:watch` (或 `pnpm run test:watch:coverage`)：开发时的观看模式。
-   `pnpm vitest run --reporter=verbose path/to/file.spec.ts`：一个文件。

#### 2\. 构建输出警卫

`pnpm run test:e2e` 建造操场和跑步 `pnpm run test:e2e:guards` 针对这个构建：

-   **包预算:** 入口块和一个匿名访问者的页面预加载不持有管理或按需代码，并保持在他们的gzip预算(`test/e2e/entry-bundle-markers.mjs`， `test/e2e/visitor-page-preloads.mjs`）. 当捆绑收缩时，降低预算。永远不要为了通过而举起它。
-   **预取:** 管理块从不预取(`test/e2e/prefetch-hints.mjs`）。
-   **服务器响应:** 状态码，页面缓存报头错误，站点地图缓存报头，以及服务器的API URL永远不会发布到浏览器。

`pnpm run test:types` 对模块和游乐场进行类型检查。 `pnpm run test:fresh-install` 打包该包，并将其安装到一个一次性应用程序中。

#### 3\. 管理浏览器测试：针对真实API进行演练，在CI中重播

管理功能（选择，添加，排序，发布，克隆，移动，共享组件徽章等）在一个真实的浏览器中使用剧作家测试(`test/browser/admin.spec.mjs`）。

CI从不与实时API对话。每个场景都是 **排练** 一次针对真正的API，然后提交排练（每个请求和响应）。CI **回放** 它：记录的响应充当API的一部分，排练中缺少的任何请求都将失败。在CI中没有Docker或注册表的情况下，根据真正的bundle实际回答的内容测试模块。

**重播** （什么CI运行在左腿上）：

```bash
pnpm run dev:build
pnpm run test:browser                        # all scenarios
pnpm run test:browser --grep " 23\. "        # one scenario
```

**排练** （记录真实的API）每当一个场景，它的种子数据或模块的请求改变：

1.  在本地运行模板应用程序 `https://localhost` 与您正在测试的API组件包版本，以及 `admin`/`admin` 用户。
2.  `pnpm run dev:build`
3.  `pnpm run test:browser:rehearse` (或 `--grep " 23\. "` 对于一个场景)。
4.  提交更改后的文件 `test/browser/rehearsals/`.

规则:

-   **播种你自己的数据。** 每个场景都通过API (`test/browser/seed.mjs`)，并且从不依赖于模板的fixture。
-   **记录bundle版本。** 每个排练文件里都有。需要更新包的特性会针对该包进行排练，并且更改日志将其命名为最小版本。
-   **一个代理可以看到一切。** 代理(`test/browser/rehearsal.mjs`)位于游乐场和API之间，因此它可以看到服务器端和浏览器的请求。水星本身就是一条无声的流，所以记录是确定的。
-   **默认值:** 模板的Caddy根CA和bundle版本从 `components-web-app-php-1` 容器。用 `REHEARSAL_CA`， `REHEARSAL_BUNDLE`， `REHEARSAL_PHP_CONTAINER` 或者 `REHEARSAL_API`.
-   **没有睡觉。** 除非场景允许，否则控制台错误或页面错误会使场景失败。等待一个积极的信号，而不是一个固定的延迟。
-   **记录仪也进行了测试。** `test/browser/rehearsal.spec.ts` (部分 `pnpm run test`)记录一个虚假的API，并在停止的情况下重播。它涵盖了：一次写入后的应答、未记录的请求失败、 `path` 回退、原点和水星重写、cookie编校和CORS。

#### 4\. 在你推我之前

`pnpm run lint:fix`， `pnpm run test`, `pnpm run dev:build && pnpm run test:e2e:guards && pnpm run test:browser`.

## 分支的测试覆盖率 `{{ current.branch }}`

！\[解码的日冕图像\](https://codecov。io / github components-web-app / cwa-nuxt-module /分公司/{{电流。分支}}/图表/ sunburst.svg吗?令牌= Z6GQJN413O)

## 常见问题

### @cwa/nuxt 是什么？

组件Web应用下一个模块。用于使用API Components Bundle创建组件驱动的web应用程序的UI

### 如何安装 @cwa/nuxt？

在项目目录运行 npm install @cwa/nuxt，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 cwa，可以用 npx cwa 直接运行。

### @cwa/nuxt 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cwa/nuxt 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cwa/nuxt 可以商用吗？

@cwa/nuxt 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cwa/nuxt 还在维护吗？

最新版本 2\.0\.0-alpha\.32 发布于 2026/11/01（2 天前）；至今共发布 32 个版本，其中过去 12 个月发布了 32 个；首次发布于 2026/09/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。