洱海文档

外观

在 GitHub 上 Star遇到问题?喝杯奶茶

Npm 徽章

约 728 字大约 2 分钟

2025-12-25

Npm徽章组件用于显示npm包信息, 并提供相关的链接.

徽章由https://shields.io提供支持.

<NpmBadge />

单个 npm badge.

属性

nameOptionalstring

npm包名, 为空则从repo中获取.

repoOptionalstring

包github仓库地址, 格式为owner/repo, 当name为空时必填.

typeOptionalNpmBadgeType

徽章类型.

themeOptionalNpmBadgeTheme

flat

徽章主题.

labelOptionalstring

徽章标签.

colorOptionalstring

#32A9C3

徽章颜色.

labelColorOptionalstring

#1B3C4A

徽章标签颜色.

branchOptionalstring

main

仓库分支.

dirOptionalstring

包所在仓库目录, 适用于monorepo项目.

NpmBadgeType

  • github
    • source: github source.
    • stars: github stars.
    • forks: github forks.
    • license: github license.
  • npm
    • version: npm version.
    • dt: alias d18m.
    • d18m: npm最近18个月下载量.
    • dw: npm每周下载量.
    • dm: npm每月下载量.
    • dy: npm每年下载量.

NpmBadgeTheme

  • flat: 扁平主题.
  • flat-square: 扁平方形主题.
  • plastic: 塑料主题.
  • for-the-badge: 为徽章添加边框.
  • social: 社交主题.

示例

Github 徽章

  • <NpmBadge repo="Erhai-lake/ElakeDocs" type="source"/> - github source
  • <NpmBadge repo="Erhai-lake/ElakeDocs" type="stars"/> - github stars
  • <NpmBadge repo="Erhai-lake/ElakeDocs" type="forks"/> - github forks
  • <NpmBadge repo="Erhai-lake/ElakeDocs" type="license"/> - license

Npm 徽章

  • <NpmBadge name="vuepress-theme-plume" type="version"/> - npm version
  • <NpmBadge name="vuepress-theme-plume" type="dt"/> - npm downloads
  • <NpmBadge name="vuepress-theme-plume" type="d18m"/> - npm downloads
  • <NpmBadge name="vuepress-theme-plume" type="dy"/> - npm downloads
  • <NpmBadge name="vuepress-theme-plume" type="dm"/> - npm downloads
  • <NpmBadge name="vuepress-theme-plume" type="dw"/> - npm downloads

<NpmBadgeGroup />

属性

nameOptionalstring

npm包名, 为空则从repo中获取.

repoOptionalstring

包github仓库地址, 格式为owner/repo, 当name为空时必填.

itemsOptionalstring | NpmBadgeType[]

[]

徽章类型列表, 传入string时用','分隔, 会自动转换为NpmBadgeType[].

themeOptionalNpmBadgeTheme

徽章主题.

colorOptionalstring

徽章颜色.

labelColorOptionalstring

徽章标签颜色.

branchOptionalstring

仓库分支.

dirOptionalstring

包所在仓库目录, 适用于monorepo项目.

插槽

  • <NpmBadgeGroup />支持传入多个<NpmBadge />组件.
  • <NpmBadgeGroup />声明的属性将被注入到<NpmBadge />组件中. 通过这种方式来实现和简化徽章组合.

示例

<NpmBadgeGroup
repo="pengzhanbo/vuepress-theme-plume"
items="stars,version,dm,source"/>

github starsnpm versionnpm downloadsgithub source

使用<slot />灵活定义徽章组合

<NpmBadgeGroup repo="pengzhanbo/vuepress-theme-plume">
  <NpmBadge type="stars" />
  <NpmBadge type="version" label="npm" />
  <NpmBadge type="dm" />
  <NpmBadge type="source" />
</NpmBadgeGroup>

github starsnpm versionnpm downloadsgithub source

版权归属：洱海

许可证：署名 4.0 国际 (CC-BY-4.0)