logo
导航

InstallTabs

简介

InstallTabs 组件用于展示常见包管理器(npm、pnpm、yarn等)的安装命令,支持标签切换和一键复制。只需传入包名即可自动生成各包管理器的安装命令,适合在文档、教程、组件库等场景下快速展示安装方式。

组件特性:

  • 支持 npm、pnpm、yarn 等主流包管理器
  • 一键复制命令
  • 支持开发依赖(-D)参数
  • 可自定义包管理器列表
  • 响应式设计,适配不同屏幕尺寸

基础用法

最简单的安装命令切换:

<InstallTabs packageName="react" />

渲染结果:

npm install react
pnpm add react
yarn add react

开发依赖用法

展示开发依赖安装命令:

<InstallTabs packageName="vite" dev />

渲染结果:

npm install -D vite
pnpm add -D vite
yarn add -D vite

自定义包管理器

只展示 npm 和 yarn:

<InstallTabs packageName="eslint" managers={["npm", "yarn"]} />

渲染结果:

npm install eslint
yarn add eslint

Props

属性说明类型默认值
packageName要安装的包名string-
managers支持的包管理器string[][‘npm’,‘pnpm’,‘yarn’]
dev是否为开发依赖booleanfalse