# @astrouxds/astro-web-components 中文文档

规范地址：https://npmcn.com/package/%40astrouxds/astro-web-components/

版本：8\.0\.1
npm 元数据更新时间：2026-10-29T13:57:35.115Z
中文译文更新时间：2026-11-07T01:17:24.084Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40astrouxds/astro-web-components
原文对照：https://npmcn.com/package/%40astrouxds/astro-web-components/?lang=original
项目主页：https://astro-components.netlify.app/?path=/story/astro-uxds-welcome-start-here--page
源码仓库：https://github.com/RocketCommunicationsInc/astro

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

- 包体积（解压后）：19.1 MB，13260 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- 首次发布：2021-06-24T00:20:05.767Z
- 最新版本发布：2026-10-29T13:57:34.771Z
- 近 30 天下载量：42835（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：97（近 12 个月 2 个）

## 中文简介

Astro 网络组件

## 安装

```sh
npm install @astrouxds/astro-web-components
```

也可以使用：`pnpm add @astrouxds/astro-web-components`、`yarn add @astrouxds/astro-web-components`、`bun add @astrouxds/astro-web-components`

## README

# 安装

## 快速启动

为了快速起起跑,Astro网络组件通过CDN提供. 在您的 `<head>`

```html
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    rel="stylesheet"
/>
<link
    rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css"
/>
<script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.esm.js"
></script>
```

Astro组件现在可以在您的应用程序中找到.

```html
<body>
    <rux-button>Hello World</rux-button>
</body>
```

### 一体化

1.  安装 `npm i @astrouxds/astro-web-components`
    
2.  导入 Astro 字体
    

```html
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    rel="stylesheet"
/>
```

[机器人](https://fonts.google.com/specimen/Roboto) 用于字体. 我们建议使用Google的CDN;然而,你也可以拉倒并服务你自己的字体拷贝.

3.  启动您的应用程序

#### 静态 HTML(w/无害环境管理模块)

```html
// Import Astro's base styles
<link
    rel="stylesheet"
    href="/node_modules/@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css"
/>
<script type="module">
    import { defineCustomElements } from '/node_modules/astro-web-components/loader'
    defineCustomElements()
</script>
```

#### 通用框架

```js
// Import Astro's base styles
import 'astro-web-components/dist/astro-web-components/astro-web-components.css'
import {
    applyPolyfills,
    defineCustomElements,
} from 'astro-web-components/loader'

applyPolyfills().then(() => {
    defineCustomElements()
})
```

#### 阴道

```js
import Vue from 'vue'
import App from './App.vue'

// Import Astro's base styles
import '@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css'
import {
    applyPolyfills,
    defineCustomElements,
} from '@astrouxds/astro-web-components/loader'

Vue.config.productionTip = false

// Tell Vue to ignore all components defined in the astro-web-components package
Vue.config.ignoredElements = [/rux-\w*/]

// Bind the custom elements to the window object
applyPolyfills().then(() => {
    defineCustomElements()
})

new Vue({
    render: (h) => h(App),
}).$mount('#app')
```

#### 角质

1.  包含 `AstroComponentsModule` 在任何使用Astro组件的模块中.

```js
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { AstroComponentsModule } from '@astrouxds/angular'

import { AppComponent } from './app.component'

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule, AstroComponentsModule],
    bootstrap: [AppComponent],
})
export class AppModule {}
```

或者,在主.ts中定义自定义元素

```js
import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

import { AppModule } from './app/app.module'
import { environment } from './environments/environment'

// Note: loader import location set using "esmLoaderPath" within the output target config
import { defineCustomElements } from '@astrouxds/astro-web-components/loader'

if (environment.production) {
    enableProdMode()
}

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.log(err))
defineCustomElements()
```

3.  为循环设置动态数据

```xml
<rux-classification-marking *ngFor="let type of types" [attr.classification]="type"></rux-classification-marking>
```

#### 反应

```js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'

import {
    applyPolyfills,
    defineCustomElements,
} from '@astrouxds/astro-web-components/loader'

ReactDOM.render(<App />, document.getElementById('root'))
registerServiceWorker()

applyPolyfills().then(() => {
    defineCustomElements()
})
```

### 树摇 + Bundlers

Astro飞船 配备了方便的懒人装填器 但是如果你更愿意控制你的建造过程 并使用现有的捆绑器 支持树摇动,你也可以只选择你实际使用的组件。 例如:

```js
import { RuxClock } from '@astrouxds/astro-web-components/dist/components/rux-clock.js'
customElements.define('rux-clock', RuxClock)
```

注:您需要手动呼叫 `customElements.define` 对于您想要使用的每个组件及其依赖关系. 参考每个组成部分的文档,看看它们的依赖性.

## 常见问题

### @astrouxds/astro-web-components 是什么？

Astro 网络组件

### 如何安装 @astrouxds/astro-web-components？

在项目目录运行 npm install @astrouxds/astro-web-components，或使用 pnpm add / yarn add / bun add。

### @astrouxds/astro-web-components 支持 TypeScript 吗？

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

### @astrouxds/astro-web-components 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @astrouxds/astro-web-components 可以商用吗？

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

### @astrouxds/astro-web-components 的下载量有多少？

根据 npm 官方下载统计，@astrouxds/astro-web-components 在 2026/10/07 – 2026/11/05 这 30 天内被下载 42,835 次，日均约 1,428 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @astrouxds/astro-web-components 还在维护吗？

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