# @qhealth-design-system/core 中文文档

规范地址：https://npmcn.com/package/%40qhealth-design-system/core/

版本：1\.24\.6
npm 元数据更新时间：2026-11-02T05:21:19.494Z
中文译文更新时间：2026-11-02T06:17:58.889Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40qhealth-design-system/core
原文对照：https://npmcn.com/package/%40qhealth-design-system/core/?lang=original
项目主页：https://github.com/Qld-Health-Online-Team/design-system#readme
源码仓库：https://github.com/Qld-Health-Online-Team/design-system

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

- 包体积（解压后）：4.3 MB，388 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2022-12-08T05:47:31.879Z
- 最新版本发布：2026-11-02T05:21:19.356Z
- 已发布版本数：164（近 12 个月 24 个）

## 中文简介

这是昆士兰州政府设计系统的“香草”版本，由昆士兰州卫生部的数字体验团队建立和维护。

## 安装

```sh
npm install @qhealth-design-system/core
```

也可以使用：`pnpm add @qhealth-design-system/core`、`yarn add @qhealth-design-system/core`、`bun add @qhealth-design-system/core`

## README

# 昆士兰政府设计系统-香草

这是昆士兰州政府设计系统的“香草”版本，由昆士兰州卫生部的数字体验团队建立和维护。

这个代码库的设计原则是减少对第三方库和框架锁定的依赖。随着时间的推移，我们将继续减少这种依赖。

有关昆士兰州政府设计系统和其他代码库的更多信息，请访问- [昆士兰政府设计系统](https://www.designsystem.qld.gov.au/).

### 夹杂物

-   公共NPM发布包：
    -   https://www.npmjs.com/package/@qhealth-design-system/core
-   Figma
    -   [QGDS Figma](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?m=auto&node-id=6902-69802&t=q6FMpeH4XPs1hjP1-1)

## 技术概述

-   **Webpack** -捆绑、编译和资产优化
-   **Sass + PostCSS** —CSS预处理和自动前缀
-   **HandlebarsJS** -组件和HTML模板
-   **故事书** -组件开发，测试和文档
-   **热模块重新加载（HMR）** -在开发过程中实时更新HTML/JS/CSS
-   **Figma** -设计，原型和协作
-   **NPM** -包管理和构建自动化

## 文档

-   故事书文档可在 [https://qld-health-online-team.github.io/design-system](https://qld-health-online-team.github.io/design-system)

## 开发入门

### 要求

-   节点:v20.19.1
-   NPM: 10.8.2

下载回购

```bash
git clone https://github.com/Qld-Health-Online-Team/design-system.git
cd design-system
```

安装依赖关系

```bash
npm install
```

构建设计系统CSS， JS，组件和模板

```bash
npm run build
```

为组件开发构建故事书

```bash
npm run build-storybook
npm run storybook
```

线头

```bash
npm run lint
```

单元测试

```bash
npm run test
```

## GitHub的行为

-   [NPM包](https://www.npmjs.com/package/@qhealth-design-system/core) 出版和发行管理
-   自动化 [语义版本控制](https://semver.org/) 适用于补丁、次要和主要版本
-   拉取请求的自动CI/CD验证
-   自动化的GitHub io静态文档 [故事书](https://storybook.js.org/) 构建和部署工作流
-   [彩色](https://www.chromatic.com/) 在主分支和发布分支上进行可视化回归测试

您可以使用您选择的任何IDE。我们的开发团队使用Visual Studio Code （VS Code）和以下推荐的扩展：

-   更漂亮
-   ESLint
-   [HandlebarsJS](https://handlebarsjs.com/) 模板的支持

## 可访问性

此存储库根据Web内容可访问性指南（WCAG） 2.2级别A和AA进行测试，以帮助确保高标准的可访问性。 我们遵循昆士兰州政府的数字无障碍要求，以支持公平获取信息、服务和机会。

### 沟通

如果您有改进建议或发现问题，请在此存储库中提出问题。

## 常见问题

### @qhealth-design-system/core 是什么？

这是昆士兰州政府设计系统的“香草”版本，由昆士兰州卫生部的数字体验团队建立和维护。

### 如何安装 @qhealth-design-system/core？

在项目目录运行 npm install @qhealth-design-system/core，或使用 pnpm add / yarn add / bun add。

### @qhealth-design-system/core 支持 TypeScript 吗？

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

### @qhealth-design-system/core 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @qhealth-design-system/core 可以商用吗？

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

### @qhealth-design-system/core 还在维护吗？

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