# @apollo-elements/core 中文文档
规范地址：https://npmcn.com/package/%40apollo-elements/core/
版本：3\.0\.1
npm 元数据更新时间：2026-07-21T05:54:53.973Z
中文译文更新时间：2026-11-06T10:47:52.280Z
软件包许可：ISC
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40apollo-elements/core
原文对照：https://npmcn.com/package/%40apollo-elements/core/?lang=original
项目主页：https://apolloelements.dev/api/core/
源码仓库：https://github.com/apollo-elements/apollo-elements
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：588 kB，75 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@apollo/client ^4\.0\.0，graphql ^15\.4\.0 \|\| ^16
- 首次发布：2021-06-17T10:20:26.623Z
- 最新版本发布：2026-07-21T05:54:53.839Z
- 近 30 天下载量：26814（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 1 个）
## 中文简介
阿波罗元素的核心等级
## 安装
```sh
npm install @apollo-elements/core
```
也可以使用：`pnpm add @apollo-elements/core`、`yarn add @apollo-elements/core`、`bun add @apollo-elements/core`
## README
# @ apollo- 要素/ 核心
[](https://www.npmjs.com/package/@apollo-elements/core) [](https://www.webcomponents.org/element/@apollo-elements/core) [](https://github.com/apollo-elements/apollo-elements/blob/main/LICENCE.md) [](https://github.com/apollo-elements/apollo-elements/actions)
**QQL 反应控制器**
**着陆员呼叫控制中心 请回答 完毕**
> 读取 [完整 API 文档](https://apolloelements.dev/api/libraries/core/) 🔎
## 目录
- [\* 安装](https://npmcn.com/package/%40apollo-elements/core/#readme--installation)
- [使用量](https://npmcn.com/package/%40apollo-elements/core/#readme--usage)
- [其他图书馆](https://npmcn.com/package/%40apollo-elements/core/#readme--other-libraries)
- [QQ 问题](https://npmcn.com/package/%40apollo-elements/core/#readme--faqs)
- [++ 维护者](https://npmcn.com/package/%40apollo-elements/core/#readme--maintainers)
## \* 安装
阿波罗元素通过 `npm`,节点包管理器。 在您的工程中安装最新版本的复制件 `node_modules` 目录, [在您的系统中安装 npm](https://www.npmjs.com/get-npm) 然后在工程的根目录中运行以下命令 :
```bash
npm install --save @apollo-elements/core
```
## 使用量
> 看我们的 [关于设置阿波罗客户端的文件](https://apolloelements.dev/guides/getting-started/apollo-client/) 因此,您的组件可以获取他们的数据.
首先,让我们定义我们 [图QL 查询](https://graphql.org/learn/queries/)。 。 。 .
```graphql
query HelloQuery {
helloWorld {
name
greeting
}
}
```
> 读我们 [开发期间使用 GraphQL 文件的文件](https://apolloelements.dev/guides/getting-started/buildless-development/) 财务报告和审定财务报表 [生产](https://apolloelements.dev/guides/getting-started/building-for-production/) 更多信息,请务必阅读 [从 GraphQL 生成类型脚本](https://apolloelements.dev/guides/getting-started/codegen/) 来增强开发者的经验并减少错误.
接下来,我们将定义我们的UI组件. 导入控制器、 查询和类型 :
进口
```ts
import { ApolloQueryController } from '@apollo-elements/core';
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { HelloQuery } from './Hello.query.graphql';
```
然后定义您的组件模板 。 确定设置 `query` 字段,因此您的组件开始自动获取数据.
```ts
@customElement('hello-world')
export class HelloWorldElement extends LitElement {
query = new ApolloQueryController(this, HelloQuery);
render() {
return html`
${(
this.query.error ? html`
😢 Such Sad, Much Error! 😰
${error.message}
`
: html`
${this.query.data?.helloWorld.greeting ?? 'Hello'},
${this.query.data?.helloWorld.name ?? 'Friend'}!
`
)}
`;
}
}
```
## QQ 问题
### 这个软件包只供Lit用户使用吗?
没有! 您可以在任何执行 `ReactiveControllerHost` 界面,甚至香草 `HTMLElement` 通过方式 `ControllerHostMixin`
```ts
import { ControllerHostMixin } from '@apollo-elements/mixins/controller-host-mixin';
import { ApolloQueryController } from '@apollo-elements/core/apollo-query-controller';
customElements.define('hello-world', class HelloWorldElement extends ControllerHostMixin(HTMLElement) {
query = new ApolloQueryController(this, HelloQuery);
update() {
const greeting = this.query.data?.helloWorld.greeting ?? 'Hello';
const name = this.query.data?.helloWorld.name ?? 'Friend';
// Just for demo purposes, Don't actually use innerHTML!
this.innerHTML = `${greeting}, ${name}!
`;
super.update();
}
});
```
## 其他图书馆
找别的图书馆吗? 想用阿波罗和香草 `extends HTMLElement` 组件? 看看我们 [文件站点](https://apolloelements.dev/)
## ++ 维护者
`apollo-elements` 由Benny Powers维持的社区项目.
[](https://www.codementor.io/bennyp?utm_source=github&utm_medium=button&utm_term=bennyp&utm_campaign=github)
## 常见问题
### @apollo-elements/core 是什么？
阿波罗元素的核心等级
### 如何安装 @apollo-elements/core？
在项目目录运行 npm install @apollo-elements/core，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@apollo/client（^4\.0\.0）、graphql（^15\.4\.0 \|\| ^16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @apollo-elements/core 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @apollo-elements/core 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @apollo-elements/core 可以商用吗？
@apollo-elements/core 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @apollo-elements/core 的下载量有多少？
根据 npm 官方下载统计，@apollo-elements/core 在 2026/10/07 – 2026/11/05 这 30 天内被下载 26,814 次，日均约 894 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @apollo-elements/core 还在维护吗？
最新版本 3\.0\.1 发布于 2026/07/21（3 个月前）；至今共发布 19 个版本，其中过去 12 个月发布了 1 个；首次发布于 2021/06/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。