xc-computent

xc-computent 是一个专为现代化工作台（Workbench）和任务管理系统打造的优质、响应式且高性能的 Vue 3 组件库。项目基于 Vite、TypeScript 和 WindiCSS 进行构建，提供高开箱即用性与高度可定制的 UI 组件。

🎨 项目特点

• ⚡ Vite 驱动：极速的热更新开发体验，基于 Rollup 进行高效打包。
• 📦 支持按需引入：天然支持 Tree-shaking，仅打包你所使用的组件。
• 🏷️ 类型安全：原生支持 TypeScript，自动生成完整的类型声明文件 (.d.ts)。
• 🧩 样式隔离：组件样式局部作用域隔离，防止全局样式污染。
• 🛠️ 预置组件：首期包含精心设计的任务卡片组件 ToDoCard，专为待办、日程等工作流场景优化。

🔐 NPM 账号信息

本项目已与以下 NPM 账号关联，以便于版本的发布与维护：

• NPM 账号: xiao_ka
• 身份验证: 根目录下的 .npmrc 文件已预配置了专属的安全发布 Token (authToken)。
  • 在本项目的根目录下执行 npm 相关操作时，会自动加载此 Token，无需手动执行 npm login。

🚀 发布到 npm 的完整流程

当你修改了组件代码并准备发布新版本到 npm 时，请遵循以下流程：

1. 确认/更新版本号

在发布之前，必须更新 package.json 中的 "version" 字段。

• 例如，从 0.3.1 升级到 0.3.2：

  {
    "name": "xc-computent",
    "version": "0.3.2",
    ...
  }

• 也可以直接在控制台运行以下命令自动升级版本：

  # 升级修订号 (e.g., 0.3.1 -> 0.3.2)
  npm version patch
  # 升级次版本号 (e.g., 0.3.1 -> 0.4.0)
  npm version minor
  # 升级主版本号 (e.g., 0.3.1 -> 1.0.0)
  npm version major

2. 构建打包

发布前必须先编译生成最新的生产包：

pnpm build

编译成功后，将在 dist/ 目录下生成打包好的 ESM、UMD 格式文件以及 TypeScript 声明文件。

3. 执行发布

直接在项目根目录下运行发布命令：

npm publish

💡 提示：因为 .npmrc 中已配置了发布 Token，此命令会直接将包推送到官方 NPM 镜像源中。

🛠️ 本地开发与预览

如果你需要在本地对组件进行开发或调试：

1. 安装依赖

pnpm install

2. 运行本地开发服务器 (Playground)

启动 Vite 开发服务器以调试组件：

pnpm dev

3. 本地预览打包产物

pnpm preview

📦 如何在其他项目中使用

1. 安装组件库

npm install xc-computent
# 或
pnpm add xc-computent

2. 全局完整引入

在 main.ts 或 main.js 中引入组件库及其样式：

import { createApp } from 'vue'
import App from './App.vue'

// 引入组件库与样式
import XcComputent from 'xc-computent'
import 'xc-computent/dist/style.css'

const app = createApp(App)
app.use(XcComputent) // 注册全局组件，如 <CToDoCard>
app.mount('#app')

3. 按需引入 (推荐)

直接在 Vue 组件中引入你需要用到的特定组件：

<template>
  <div class="workbench">
    <ToDoCard :data="todoData" @action="handleAction" />
  </div>
</template>

<script setup lang="ts">
import { ToDoCard } from 'xc-computent'
import 'xc-computent/dist/style.css' // 引入组件库样式
</script>