Skip to content

docs: update readme #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vaebe merged 1 commit into from
Nov 14, 2025
Merged

docs: update readme #11

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 95 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,35 @@
# 简介
# Vue3-CCUI

## 快速开始
[![npm version](https://img.shields.io/npm/v/vue3-ccui.svg)](https://www.npmjs.com/package/vue3-ccui)
[![license](https://img.shields.io/npm/l/vue3-ccui.svg)](https://github.com/vaebe/ccui/blob/main/LICENSE)
[![downloads](https://img.shields.io/npm/dt/vue3-ccui.svg)](https://www.npmjs.com/package/vue3-ccui)
Comment on lines +3 to +5
Copy link

@coderabbitai coderabbitai bot Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify badge URLs and online documentation link.

The README includes NPM package badges and references an online documentation site. Ensure all external URLs are accessible and valid.

🏁 Script executed:

#!/bin/bash
# Description: Verify external links in the README are accessible

# Test badge URLs
echo "Testing badge URLs..."
curl -s -o /dev/null -w "npm version badge: %{http_code}\n" "https://img.shields.io/npm/v/vue3-ccui.svg"
curl -s -o /dev/null -w "license badge: %{http_code}\n" "https://img.shields.io/npm/l/vue3-ccui.svg"
curl -s -o /dev/null -w "downloads badge: %{http_code}\n" "https://img.shields.io/npm/dt/vue3-ccui.svg"

# Test NPM package
echo -e "\nTesting NPM package..."
curl -s -o /dev/null -w "NPM package: %{http_code}\n" "https://www.npmjs.com/package/vue3-ccui"

# Test GitHub repository
echo -e "\nTesting GitHub repository..."
curl -s -o /dev/null -w "GitHub repo: %{http_code}\n" "https://github.com/vaebe/ccui"

# Test online documentation
echo -e "\nTesting online documentation..."
curl -s -o /dev/null -w "Online docs: %{http_code}\n" "https://vaebe.github.io/ccui/"

Length of output: 222

The NPM package link returned 403 (Forbidden), which is unusual. I need to verify the actual package name from the repository's package.json to determine if there's a mismatch.


---

🏁 Script executed:

```shell
#!/bin/bash
# Verify the actual package name from package.json
cat package.json | grep -A2 '"name"'

Length of output: 73

🏁 Script executed:

#!/bin/bash
# List component definitions in the codebase to verify the component list in README
fd -e 'vue' -e 'ts' -e 'js' 'src/components' -t f 2>/dev/null | head -20

Length of output: 0

🏁 Script executed:

#!/bin/bash
# Check if there's a dist or build output that matches package name
ls -la | grep -E 'dist|build'
fd 'package' -type f | head -10

Length of output: 170

A critical issue found: the package name mismatch. The README references "vue3-ccui" but the actual package.json shows "vue-ccui". Let me explore the repository structure further and verify all occurrences.


---

🏁 Script executed:

```shell
#!/bin/bash
# Explore repository structure
ls -la

Length of output: 1160

🏁 Script executed:

#!/bin/bash
# Count all occurrences of the package names in README
echo "=== Occurrences of 'vue3-ccui' in README ==="
grep -n 'vue3-ccui' README.md | wc -l
echo "=== Occurrences of 'vue-ccui' in README ==="
grep -n 'vue-ccui' README.md | wc -l
echo ""
echo "=== All lines with package names ==="
grep -n 'vue3-ccui\|vue-ccui' README.md

Length of output: 752

🏁 Script executed:

#!/bin/bash
# Find component files in the repository
find . -name '*.vue' -o -name '*component*' -type f 2>/dev/null | grep -v node_modules | head -20

Length of output: 75

🏁 Script executed:

#!/bin/bash
# Check package.json for any additional metadata about the actual package name
cat package.json | jq '.name, .version, .description' 2>/dev/null || cat package.json | head -15

Length of output: 20

Fix all package name references: change "vue3-ccui" to "vue-ccui" throughout README.

The README contains 12 incorrect package name references. The actual package in package.json is named "vue-ccui", but the README consistently references "vue3-ccui". This breaks:

  • All badge URLs (lines 3–5) — shields.io returns 200 but for the wrong package
  • NPM links (lines 3–5, 118) — 403 Forbidden because package doesn't exist with that name
  • Installation commands (lines 22, 25, 28) — package won't install
  • Import statements (lines 37, 41, 50, 53) — imports will fail
  • Test command (line 101)

Correct all 12 occurrences to use the actual package name "vue-ccui".


### 安装
一个基于 Vue 3 + TypeScript + Vite 构建的现代化 UI 组件库。

```shell
## ✨ 特性

- 🚀 基于 Vue 3 Composition API
- 💪 使用 TypeScript 开发，提供完整的类型定义
- ⚡ 使用 Vite 构建，快速的开发体验
- 📦 支持按需引入，减小包体积
- 🎨 现代化的设计风格
- 🔧 完善的开发工具链

## 📦 安装

```bash
# NPM
$ npm install vue3-ccui --save
npm install vue3-ccui --save

# Yarn
$ yarn add vue3-ccui
yarn add vue3-ccui

# pnpm
$ pnpm install vue3-ccui
pnpm install vue3-ccui
```

## 🚀 快速开始

### 完整引入

```ts
Expand All @@ -28,6 +43,77 @@ import 'vue3-ccui/style.css'
createApp(App).use(ccui).mount('#app')
```

## todo
### 按需引入

```ts
import { createApp } from 'vue'
import { Button, Card } from 'vue3-ccui'
import App from './App.vue'

import 'vue3-ccui/style.css'

const app = createApp(App)
app.use(Button)
app.use(Card)
app.mount('#app')
```

## 📚 组件

目前包含以下组件：

- **Avatar** - 头像
- **Button** - 按钮
- **Button3D** - 3D 按钮
- **Calendar** - 日历
- **Card** - 卡片
- **CheckBox** - 复选框
- **Divider** - 分割线
- **Popover** - 气泡卡片
- **Radio** - 单选框
- **Rate** - 评分
- **Status** - 状态
- **Tabs** - 标签页
- **Timeline** - 时间线
- **Tooltip** - 文字提示
- **Tree** - 树形控件

## 📖 文档

访问 [在线文档](https://vaebe.github.io/ccui/) 查看详细的组件使用说明和示例。

## 🛠️ 开发

```bash
# 克隆项目
git clone https://github.com/vaebe/ccui.git

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建文档
pnpm docs:build

# 运行测试
pnpm --filter vue3-ccui test

# 代码检查
pnpm lint
```

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

[Apache-2.0](./LICENSE)

## 🔗 相关链接

- 迁移组件 测试用例 更新为 vitest
- [GitHub](https://github.com/vaebe/ccui)
- [NPM](https://www.npmjs.com/package/vue3-ccui)
- [在线文档](https://vaebe.github.io/ccui/)