# @felix-health/vue-components-vue3 中文文档

规范地址：https://npmcn.com/package/%40felix-health/vue-components-vue3/

版本：5\.0\.2
npm 元数据更新时间：2026-11-05T15:23:38.192Z
中文译文更新时间：2026-11-14T14:00:27.890Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40felix-health/vue-components-vue3
原文对照：https://npmcn.com/package/%40felix-health/vue-components-vue3/?lang=original

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

- 包体积（解压后）：2.5 MB，252 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：24\.22\.2
- 运行依赖：15 个
- 首次发布：2023-12-18T20:02:24.023Z
- 最新版本发布：2026-11-05T15:23:37.932Z
- 近 30 天下载量：7984（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：258（近 12 个月 58 个）

## 中文简介

一个基于活字的单曲,包含所有Felix Health的活字组件和这些组件的文档. 当前支持Vue 3.

## 安装

```sh
npm install @felix-health/vue-components-vue3
```

也可以使用：`pnpm add @felix-health/vue-components-vue3`、`yarn add @felix-health/vue-components-vue3`、`bun add @felix-health/vue-components-vue3`

## README

# 费利克斯健康村组成部分图书馆

一个基于活字的单曲,包含所有Felix Health的活字组件和这些组件的文档. 当前支持Vue 3.

## 在项目中消耗

> 目前这个项目依赖于TailwindCSS(和我们的Tailwind) [设计系统](https://www.npmjs.com/package/@felix-health/felix-app-tailwind-design-system)) (中文(简体) ). 确保在您的项目中安装此功能作为先决条件 .

1.  安装软件包

```bash
npm i @felix-health/vue-components-vue3
```

2.  将库 css 导入到您的主 CCs 文件 :

```css
/* Vue 3 */
@import '@felix-health/vue-components-vue3/dist/style.css';
```

3.  导入您主 js 文件的所有组件 :

```js
/* Vue 3 */
import * as FelixComponents from '@felix-health/vue-components-vue3';

// Global registration in your main.js/App.vue file
Object.entries(FelixComponents).forEach((name, component) => {
  Vue.component([name, component]);
});
```

⚠️ **说明:** 如果您想要支持服务器渲染, 有些组件依赖于对象, 如 `document` 或者说 `window` 在服务器上不可用。 如果您想要在 SSR 上下文中使用, 您可能无法按照上述条件一次性导入所有组件, 而是需要识别这些组件, 并在仅针对客户端的情况下单独导入 .

## 项目结构

```
vue-components/
├── src/
│   ├── index.ts              # Main entry point (exports all components)
│   ├── components/            # All Vue components
│   │   └── ...
│   ├── assets/               # Styles, fonts, and static assets
│   ├── lib/                  # Utility functions and helpers
│   └── setupTests.ts         # Test configuration
├── dist/                     # Build output (generated)
├── .storybook/              # Storybook configuration
├── vite.config.ts           # Vite build configuration
├── vitest.config.ts         # Test configuration
├── tsconfig.json            # TypeScript configuration
├── package.json             # Package metadata and dependencies
└── README.md
```

## 项目本地设置

### 安装依赖关系

```bash
npm install
```

### 设置 Git 钩 (Husky)

在安装依赖性后, 设置 Git 钩子, 用于自动内嵌和格式化 :

```bash
npm run prepare
```

这将配置 Husky 在预承诺上运行已安装的 Lint- stage, 它会自动将您已设置的文件格式化为 Pretier .

### 生产大楼

```bash
npm run build
```

### 在当地进行另一个项目

**1\. 构建虚拟组件包**

```bash
## Build with hot reload
npm run build:watch
```

**2\. 安装软件包**

来自 Charm 或 Lucky 目录 : `npm i /[path-to-project]` (实例npmi) `../vue-components` 如果您的文件夹名为“ vue- 组件 ”)

### 测试

我们用 [Vue 测试库](https://testing-library.com/docs/vue-testing-library/intro) 与 [维特](https://vitest.dev/) 单位测试。 要写新测试,请添加 `.spec.js` 在您正在工作的组件文件旁边的文件 .

```bash
npm run test
```

### 格式化文件

使用 `lint-staged` 财务报告和审定财务报表 `husky` (运行后) `npm run prepare`) (中文(简体) ).

您也可以手动格式化文件 :

```bash
# checks files for formatting issues
npm run format:check
```

```bash
# fixes formatting issues
npm run format:write
```

### 如果您发现依赖性太新出错

您可以绕过最低释放年龄要求 :

```bash
npm config set min-release-age 0
npm install <package-name>
# Then set it back
npm config set min-release-age <original value in .npmrc>
```

## 捐款

### 增加新构成部分净额

在引入一个新的组成部分/修改现有的组成部分时,有一些选择。 在决定将您的新部分放在哪里时遵循这些步骤:

**1\. 决定该部分是否打算由应用程序共享** 这个组件是否被认为是"构件",并打算由我们的应用程序共享? 如果没有,考虑在应用程序中直接添加您的组件,它被用在库中而不是添加到库中.

**2\. 创建新的组成部分** 在内部创建组件 `src/components` 在最适合它的目录中(或创建新目录)

**3\. 编写组成部分文件和测试** 保证您编写故事书故事来记录您的新组件或更改 。 关于如何做到这一点的更多信息,见下文.

**4\. 在导出文件中添加组件** 完成后,将组件添加到 `src/index.ts` 作为导出.

### 组件文档( 与故事书一起开发)

写入 [故事书](https://storybook.js.org/) 在组件驱动开发中的故事,构建了松散相接和可重复使用的组件。 强调在改进我们的文件编制的同时,将各组成部分的关切分开.

轻而易举地开始我们 **倾斜** 锅炉板模板.

1.  开始故事本
    -   `npm run storybook`
2.  运行 `npm run plop` ,然后根据您正在工作的组件选择正确的模板.
3.  查找新创建的故事文件 **故事书** 并通过增加更多的故事来开发你的组件.
4.  尽可能使用 **联合来文** 文件评论. **故事书** 将自动选中它们并添加到文档中.

#### 生产大楼

**第3组** `npm run storybook:build`

测试建筑: `npx http-server ./path/to/build`

### 组件开发工具

如果您正在开发一个管理很多 **变体**, (中文(简体) ), [cva( 类变量授权)](https://cva.style/docs) 可供您使用。 此外,考虑使用 [后风相接](https://github.com/dcastil/tailwind-merge/blob/v2.5.4/docs/README.md) 如果您使用cva,只需使用 `cn`(简写为类Name) 工具函数在 `packages/vue-3/src/lib/utils.ts`复选 `AppButton` 更多细节.

### 字体支持

只能为 `vue-3`。如果您正在创建新组件,请将其添加到两个组件中 `index.js` 财务报告和审定财务报表 **`src/index.ts`** 作为 `src/index.ts` 是导出类型的主要文件.

## 发布到 npm

1.  前往 [https://github.com/Felix-Health/vue-组件/动作](https://github.com/Felix-Health/vue-components/actions)
2.  运行“ Publish Vue 3 包到 npm” 工作流程 `main` 分支

## 常见问题

### @felix-health/vue-components-vue3 是什么？

一个基于活字的单曲,包含所有Felix Health的活字组件和这些组件的文档\. 当前支持Vue 3\.

### 如何安装 @felix-health/vue-components-vue3？

在项目目录运行 npm install @felix-health/vue-components-vue3，或使用 pnpm add / yarn add / bun add。

### @felix-health/vue-components-vue3 支持 TypeScript 吗？

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

### @felix-health/vue-components-vue3 支持 ESM 还是 CommonJS？

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

### @felix-health/vue-components-vue3 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js 24\.22\.2。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @felix-health/vue-components-vue3 可以商用吗？

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

### @felix-health/vue-components-vue3 的下载量有多少？

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

### @felix-health/vue-components-vue3 还在维护吗？

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