# @avenirs-esr/avenirs-dsav 中文文档

规范地址：https://npmcn.com/package/%40avenirs-esr/avenirs-dsav/

版本：0\.1\.378
npm 元数据更新时间：2026-11-06T13:03:09.224Z
中文译文更新时间：2026-11-07T07:52:31.945Z
软件包许可：未声明

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

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

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

- 包体积（解压后）：3.7 MB，776 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=26\.0\.0
- 运行依赖：16 个
- peer 依赖：vue ^3\.5\.13，vitest ^4\.0\.0 \|\| ^5\.0\.0，vue-router ^4\.4\.3，@vue/test-utils ^2\.0\.0
- 首次发布：2025-09-19T08:23:33.946Z
- 最新版本发布：2026-11-06T13:03:08.865Z
- 近 30 天下载量：6412（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：368（近 12 个月 299 个）

## 中文简介

DSAV是AVENIR(s)项目的Deisgn系统,由一个 [**第3组**](https://v3.vuejs.org/) 项目的形式 **组件库**该系统还提供了处理组件样式的第一通用CSS框架.

## 安装

```sh
npm install @avenirs-esr/avenirs-dsav
```

也可以使用：`pnpm add @avenirs-esr/avenirs-dsav`、`yarn add @avenirs-esr/avenirs-dsav`、`bun add @avenirs-esr/avenirs-dsav`

## README

# Avenir( s) DSAV 服务器

## DSAV是什么? (英语)?

DSAV是AVENIR(s)项目的Deisgn系统,由一个 [**第3组**](https://v3.vuejs.org/) 项目的形式 **组件库**。 。 。 . 它还为处理部件的外型提供了通用第一CSS框架.

代码是 [在 GitHub 上打开并可用](https://github.com/avenirs-esr/avenirs-dsav/)

## 为什么是DSAV?

AVENIR(s)程序基于Vue 3. 选择了前端的技术堆栈.

AVENIR(s)程序需要自己的特性,因此它将在所有前端项目中使用这个设计系统.

## 完整文档

你可以找到我们所有的文件 [github 页面](https://avenirs-esr.github.io/avenirs-dsav/)。 。 。 .

## 故事书演示

你可以找到使用和演示我们的设计系统组件的例子 [github 页面](https://avenirs-esr.github.io/avenirs-dsav/storybook/)。 。 。 .

## 安装

在你的项目中,运行 `npm install @ævenirs-esr/avenirs-dsav`。 。 。 .

为了让风格从 `DSAV` 在您的工程中, 请确保导入主 `DSAV` 样式 `main.ts` 改为: `import '@avenirs-esr/avenirs-dsav/style.css'`。 。 。 .

## 使用 SCSS 混音器

DSAV提供SCSS混音器,用于您的项目. 要使用它们,请导入您 Vue 组件中的混音文件 `<style>` 块 :

```vue
<style lang="scss" scoped>
@use '@avenirs-esr/avenirs-dsav/mixins' as dsav;

.my-component {
  // Use responsive breakpoint mixins
  @include dsav.min-width(md) {
    width: 17.25rem;
  }

  @include dsav.max-width(lg) {
    padding: 1rem;
  }
}
</style>
```

### 可用的混合

#### 响应断点

-   `@include dsav.min-width($size)` - 对大于断点的屏幕应用样式
-   `@include dsav.max-width($size)` - 应用比断点小的屏幕样式

可用的断点 :

-   `sm` - 36雷姆(576px)
-   `md` - 48雷姆(768px)
-   `lg` - 64雷姆(1024px)
-   `xl` - 90雷姆(1440px)

示例

```scss
@use '@avenirs-esr/avenirs-dsav/mixins' as dsav;

.responsive-card {
  width: 100%;
  
  @include dsav.min-width(md) {
    width: 50%;
  }
  
  @include dsav.min-width(lg) {
    width: 33.33%;
  }
}
```

## 捐款

### 部署一个新的 npm 版本

当您的开发成功合并到 `develop` 或者说 `main`,你可以运行的工作 `Release new version to npm` 并选择该版本的出错类型 : `patch`, (中文(简体) ), `minor` 或者说 `release`。 。 。 .

### 提交公约

此寄存器使用 [委员会](https://commitlint.js.org/) 执行一致和常规的承诺信息.

此设置扩展了常规承诺配置( T)`@commitlint/config-conventional`)并添加自定义规则:

允许提交类型

允许下列承诺类型:

-   `feat` - 一个新特点
-   `fix` - 一个错误修复
-   `docs` - 文件更改
-   `refactor` - 代码重构( 没有特性或错误修正)
-   `test` - 添加或修改测试
-   `build` - 修改以构建工具或依赖性
-   `revert` - 恢复先前的承诺

QQ 提交信件规则

| 规则 | 说明 |
| --- | --- |
| `type-enum` | 只允许上述类型 |
| `type-case` | 提交类型必须是 **小写** |
| `type-empty` | 提交类型 **绝对不能** 为空 |
| `subject-case` | 对弹壳没有限制(规则因灵活性而失效) |

QQ 示例提交信件

```
feat: add user login functionality
fix: handle null pointer in dashboard
docs: update installation guide
```

### ARIA 作者做法指南

开发组件时,请参考 [ARIA 作者做法指南](https://www.w3.org/WAI/ARIA/apg/) 确保无障碍性得到遵守. 你们可以找到 [设计模式](https://www.w3.org/WAI/ARIA/apg/patterns/) 财务报告和审定财务报表 [最佳做法](https://www.w3.org/WAI/ARIA/apg/practices/) 用于实施可访问的网络组件.

## 使用DSAV的项目

-   [AVENIR(s) 组合](https://github.com/avenirs-esr/avenirs-cofolio-client) :高等教育和研究电子组合

## 常见问题

### @avenirs-esr/avenirs-dsav 是什么？

DSAV是AVENIR\(s\)项目的Deisgn系统,由一个 第3组 项目的形式 组件库该系统还提供了处理组件样式的第一通用CSS框架\.

### 如何安装 @avenirs-esr/avenirs-dsav？

在项目目录运行 npm install @avenirs-esr/avenirs-dsav，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.5\.13）、vue-router（^4\.4\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @avenirs-esr/avenirs-dsav 支持 TypeScript 吗？

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

### @avenirs-esr/avenirs-dsav 支持 ESM 还是 CommonJS？

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

### @avenirs-esr/avenirs-dsav 需要什么版本的 Node\.js？

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

### @avenirs-esr/avenirs-dsav 可以商用吗？

@avenirs-esr/avenirs-dsav 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @avenirs-esr/avenirs-dsav 的下载量有多少？

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

### @avenirs-esr/avenirs-dsav 还在维护吗？

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