# @aziontech/webkit 中文文档

规范地址：https://npmcn.com/package/%40aziontech/webkit/

版本：5\.9\.0
npm 元数据更新时间：2026-11-04T17:21:53.437Z
中文译文更新时间：2026-11-07T16:58:33.753Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40aziontech/webkit
原文对照：https://npmcn.com/package/%40aziontech/webkit/?lang=original
项目主页：https://github.com/aziontech/webkit#readme
源码仓库：https://github.com/aziontech/webkit

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

- 包体积（解压后）：16.1 MB，2359 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：8 个
- peer 依赖：vue ^3\.5\.29，eslint \>=9，stylelint \>=16，vue-eslint-parser \>=9
- 首次发布：2026-03-11T17:44:49.978Z
- 最新版本发布：2026-11-04T17:21:53.124Z
- 近 30 天下载量：4237（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：107（近 12 个月 107 个）

## 中文简介

用于构建Azion网络接口的可再使用的UI组件和设计系统公用设施.

## 安装

```sh
npm install @aziontech/webkit
```

也可以使用：`pnpm add @aziontech/webkit`、`yarn add @aziontech/webkit`、`bun add @aziontech/webkit`

## README

# @aziontech/webkit (英语)

Azion为Vue 3——100+可访问,由符号驱动的组件设计系统,外加 工具,使每个项目都使用它们:一个ESLint插件(每个规则) `error`),一个Stylelint配置,一个指导AI编码工具的MCP服务器,以及一个CLI 统统用一个命令.

-   **播放场 :** 每个元件都会在故事书中播放互动故事,每个道具都有控制.
-   **样式指南 :** [`docs/STYLEGUIDE.md`](https://npmcn.com/package/%40aziontech/webkit/docs/STYLEGUIDE.md) 每一个代码标准都是完全的,每个门都挡住.
-   **准则:** [`docs/GUIDELINES.md`](https://npmcn.com/package/%40aziontech/webkit/docs/GUIDELINES.md) ——一页文摘(建设并使用平面版).

## 开始

### 快速从AI开始

使用 Claude 代码, Cursor, 还是另一个 AI 编码工具? 把这个粘入您的代理 :

> 安装 `@aziontech/webkit`, (中文(简体) ), `@aziontech/theme`,以及 `@aziontech/icons` 在这个项目中, 然后运行 `npx @aziontech/webkit init` 给线条、MCP服务器和代理文件.

它的 MCP 服务器给您的 AI 完整组件目录(`list_components`, (中文(简体) ), `get_component`, (中文(简体) ), `list_tokens`, (中文(简体) ), `suggest_component`, (中文(简体) ), `get_best_practices`, (中文(简体) ), `validate_usage`)——所以在第一次尝试时写出正确的导入,道具和符号.

### 1) 安装

```bash
npm install @aziontech/webkit @aziontech/theme @aziontech/icons
```

然后将项目(lint预设,MCP,预承诺,代理文件)线入一个命令:

```bash
npx @aziontech/webkit init
```

`init` 首先读取您的工程, 并且绝不刻录已有文件 `--dry-run` 预览计划。 见 [`docs/toolkit/cli.md`](https://npmcn.com/package/%40aziontech/webkit/docs/toolkit/cli.md)。 。 。 .

### 2-增加主题CSS

在您的应用程序条目( 如 . `src/main.js`:

```js
import '@aziontech/theme/globals.css' // design tokens (light/dark aware)
import '@aziontech/icons' // the icon font
```

用尾风? 主题还包括一个预设—— `@aziontech/theme/tailwind-preset` 这样啊 语义公用事业`text-body-sm`, (中文(简体) ), `bg-[var(--primary)]`在你的建筑中决心.

### 3 添加您的第一个组件

每个部件都是平坦的、可树动的进口 `@aziontech/webkit/<name>`数字 :

```vue
<script setup>
import Button from '@aziontech/webkit/button'
import FieldText from '@aziontech/webkit/field-text'
</script>

<template>
  <FieldText name="email" label="Email" />
  <Button kind="primary" @click="submit">Create account</Button>
</template>
```

组分成分暴露出化合物API(`Table.Row`, (中文(简体) ), `Table.Cell`)和a 数据 树能震动的根(`@aziontech/webkit/table-root`当你只需要根.

### 4- 在操场试一试

故事书是现场游乐场:每个组成部分都传出它的故事 **默认** 故事是交互式的,每个道具都有控件——加上复制版已准备好的"显示代码" 被贴入你的应用软件时,片段是按原样运行的.

```bash
# in this repo
pnpm storybook:dev
```

出版的《童话》 [https://webkit.azion.app/ 页面存档备份,存于互联网档案馆](https://webkit.azion.app/). 当地为撰稿人(事先要求、运行和建立《故事书》)的设置 [仓库读取器](https://npmcn.com/package/README.md#run-the-storybook)。 。 。 .

### 5) 保持原样(记起时的花纹)

`init` 启用 Webkit ESLint 预设, 在哪里 **每个规则都是 `error`** - 错了 导入、深路/内部路由、样式覆盖组件、硬码颜色以及 被折旧的组件会失败您的 lint 而不是运输 :

```js
// eslint.config.js
import webkit from '@aziontech/webkit/eslint-plugin'
export default [...webkit.configs.recommended]
```

完整的图案目录——如何用手构建一个组件,如何使用我们的组件——已经进入 [`docs/GUIDELINES.md`](https://npmcn.com/package/%40aziontech/webkit/docs/GUIDELINES.md)。 。 。 .

### 6- 从终点站探索

```bash
npx @aziontech/webkit doctor   # verify the wiring is healthy (lint, MCP, theme)
npx webkit-mcp                 # the MCP server your AI tools connect to
```

## 软件包

| 软件包 | 这是什么 |
| --- | --- |
| `@aziontech/webkit` | 组件 + eslint- plugin, 样式lint- 配置, MCP, CLI |
| `@aziontech/theme` | 设计标志, `globals.css`尾风预设 |
| `@aziontech/icons` | 图标字体( CSS/ woff2) + 目录 |

## 所需资源

-   Vue 3.5+(使用组件) `defineModel` 财务报告和审定财务报表 `useId`(中文(简体) )
-   VeeValidate 4.x (仅格式字段)

## 许可证

麻省理工学院

## 常见问题

### @aziontech/webkit 是什么？

用于构建Azion网络接口的可再使用的UI组件和设计系统公用设施\.

### 如何安装 @aziontech/webkit？

在项目目录运行 npm install @aziontech/webkit，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.29）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 webkit、webkit-mcp，可以用 npx webkit 直接运行。

### @aziontech/webkit 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/aziontech\_\_webkit 是否存在。

### @aziontech/webkit 支持 ESM 还是 CommonJS？

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

### @aziontech/webkit 可以商用吗？

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

### @aziontech/webkit 的下载量有多少？

根据 npm 官方下载统计，@aziontech/webkit 在 2026/10/08 – 2026/11/06 这 30 天内被下载 4,237 次，日均约 141 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aziontech/webkit 还在维护吗？

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