npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

done-coding-component

v0.4.9

Published

组件命令行工具

Readme

@done-coding/cli-component

组件生成命令行工具 - 快速创建和管理项目组件

npm version License: MIT

安装

独立安装

npm install @done-coding/cli-component
# 或
pnpm add @done-coding/cli-component

作为 done-coding CLI 的一部分

npm install -g @done-coding/cli
# 然后使用
DC component [command]

快速开始

# 独立使用
dc-component [command]

# 作为主 CLI 的子命令
DC component [command]

# 查看帮助
dc-component --help

功能特性

  • 组件创建: 使用 add 命令创建新组件
  • 🗂️ 组件管理: 使用 list 命令查看已创建的组件
  • 🗑️ 组件删除: 使用 remove 命令删除不需要的组件
  • 🔧 智能命名: 自动处理组件名称的格式转换

API 文档

基础命令

dc-component add <name>

新增一个组件

# 创建一个名为 Button 的组件
dc-component add Button

# 创建一个名为 UserCard 的组件
dc-component add UserCard

参数说明:

  • name: 组件名称(必需)

dc-component remove [name]

删除一个组件

# 删除指定组件
dc-component remove Button

# 不指定名称时可能提供交互式选择
dc-component remove

参数说明:

  • name: 组件名称(可选)

dc-component list

展示组件列表

# 显示所有已创建的组件
dc-component list

使用示例

基础使用场景

# 1. 查看当前组件列表
dc-component list

# 2. 创建新组件
dc-component add MyButton

# 3. 再次查看组件列表确认创建
dc-component list

# 4. 删除不需要的组件
dc-component remove MyButton

作为主 CLI 的一部分

# 使用主 CLI 命令
DC component add Button
DC component list
DC component remove Button

# 使用替代命令
dc-cli component add Button
done-coding component list

故障排除

常见问题

Q: 组件创建失败

# 检查当前目录
pwd

# 查看详细错误信息
dc-component add MyButton

Q: 组件列表为空

# 确认是否在正确的项目目录
ls -la

# 检查是否已创建过组件
dc-component list

Q: 删除组件失败

# 确认组件名称正确
dc-component list

# 检查文件权限
ls -la src/components/

贡献指南

我们欢迎贡献!请遵循以下步骤:

  1. Fork 本仓库
  2. 创建功能分支:git checkout -b feature/amazing-feature
  3. 提交更改:git commit -m "feat: add amazing feature"
  4. 推送分支:git push origin feature/amazing-feature
  5. 创建 Pull Request

开发环境设置

# 克隆仓库
git clone https://gitee.com/done-coding/done-coding-cli.git
cd done-coding-cli/packages/component

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 本地开发测试
node es/cli.mjs --help

# 注意:本地使用 node + 入口文件,发布后使用 bin 命令名
# 功能完全一致,只是调用方式不同

许可证

MIT © JustSoSu

相关链接