# 组件库模板

**Repository Path**: Cchen_yl/component-library-template

## Basic Information

- **Project Name**: 组件库模板
- **Description**: 组件库搭建模板-内含一个按钮
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-20
- **Last Updated**: 2026-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# IMX-Plus

Vue 3 组件库最小模板：源码在 `packages/`，用 Vite 多入口打 es/cjs，用 VitePress 做文档与本地预览，支持子路径按需引入（如 `imx-plus/button`）。

## 本地开发（推荐入口）

本仓库**没有单独的业务 Demo App**。日常改组件、看效果，直接开文档站：

```bash
npm install
npm run dev:docs
```

- 改 `packages/` 里的组件 → 文档示例会热更新  
- 详细流程（目录说明 + 新增组件清单）见文档站：[组件开发全流程](./docs/guide/start-dev.md)

| 命令 | 说明 |
| --- | --- |
| `npm run dev:docs` | 启动 VitePress，边写组件边预览 |
| `npm run build` | 生成类型 + 打包 `dist/`（发布前必跑） |
| `npm run build:docs` | 构建静态文档站 |
| `npm run release:private` | 构建并发布到私有 npm |

## 目录与关键文件

```
im-plus/
├── packages/                      # 组件库源码（改这里）
│   ├── index.ts                   # 全量入口：app.use() 批量注册 + 命名导出
│   ├── vue-shim.d.ts              # *.vue 模块类型声明
│   └── components/
│       ├── index.ts               # 聚合 re-export 所有组件
│       ├── button/                # 单组件目录（示例）
│       │   ├── index.ts           # 挂 install，支持 app.use(ImButton)
│       │   └── src/ImButton.vue   # 组件 SFC
│       └── barchart/              # 另一个示例组件
├── docs/                          # VitePress 文档
│   ├── .vitepress/config.ts       # 导航 / 侧栏
│   ├── components/*.md            # 组件说明与可交互示例
│   └── guide/                     # 安装、开发、发布等指南
├── vite.config.ts                 # 库构建：每个组件一条 lib.entry
├── package.json                   # scripts、exports 子路径映射
├── tsconfig.json                  # TS 配置（含声明生成）
└── .npmrc.example                 # 私有仓库配置模板，复制为 .npmrc 后填写
```

| 路径 | 作用 |
| --- | --- |
| `packages/components/<name>/` | 单个组件目录；**目录名小写**，对应子路径 `imx-plus/<name>` |
| `packages/components/<name>/src/ImXxx.vue` | 组件实现；必须 `defineOptions({ name: "ImXxx" })` |
| `packages/components/<name>/index.ts` | 组件入口：挂 `install` + 导出 |
| `packages/components/index.ts` | 集中导出，供根入口引用 |
| `packages/index.ts` | 全量安装与 `import { ImButton } from "imx-plus"` |
| `vite.config.ts` → `build.lib.entry` | 多入口打包，缺了则打不出 `dist/<name>.js` |
| `package.json` → `exports` | npm 对外子路径；业务才能 `import from "imx-plus/<name>"` |
| `docs/components/<name>.md` | 文档示例（开发期从源码路径 import） |
| `docs/.vitepress/config.ts` | 文档站侧栏要加新组件链接 |

## 新增一个组件（摘要）

完整步骤与代码模板见 [docs/guide/start-dev.md](./docs/guide/start-dev.md)。最少要动这些地方：

1. 新建 `packages/components/<name>/`（`src/ImXxx.vue` + `index.ts`）
2. `packages/components/index.ts` 增加 re-export
3. `packages/index.ts`：import、放进 `components` 数组、再 export
4. `vite.config.ts` 增加对应 `entry`
5. `package.json` 的 `exports` 增加 `"./<name>"`
6. 写 `docs/components/<name>.md`，并在 VitePress 侧栏登记

可直接对照现有 `button` / `barchart`。

## 业务项目怎么用

```bash
npm i imx-plus --registry=http://your-private-registry/
```

```ts
// 全量
import ImComponents from "imx-plus";
import "imx-plus/style.css";
app.use(ImComponents);

// 子路径按需
import { ImButton } from "imx-plus/button";
import "imx-plus/style.css";
```

更多用法：[安装与使用](./docs/guide/getting-started.md) · [自动按需](./docs/guide/auto-import.md)

## 私有仓库发布

1. 复制 `.npmrc.example` 为 `.npmrc`，填入私有仓库地址与 token  
2. `npm run release:private`  
3. 详见 [私有仓库发布](./docs/guide/private-publish.md)

## 自动按需 Resolver（业务项目）

```bash
npm i -D unplugin-vue-components
```

在业务项目 `vite.config.ts` 中配置（完整说明见 [auto-import](./docs/guide/auto-import.md)）：

```ts
function ImComponentsResolver() {
  return (name: string) => {
    if (!name.startsWith("Im")) return;
    const comp = name.slice(2);
    const kebab = comp.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
    return {
      name,
      from: `imx-plus/${kebab}`,
      sideEffects: "imx-plus/style.css"
    };
  };
}
```

规则约定：组件名 `ImBarChart` → 子路径 `imx-plus/barchart`（去掉 `Im` 后转 kebab）。新增组件时目录名需与此一致。