npm package: @ice-breaking/ui
Description: Ice Breaking UI component library based on Vue 2 and Element UI
Author: yuwangi
Latest version: 0.0.5

# @ice-breaking/ui

Ice Breaking UI 组件库，基于 Vue 2 和 Element UI 构建。

## 安装

```bash
npm install @ice-breaking/ui
# or
pnpm add @ice-breaking/ui
# or
yarn add @ice-breaking/ui
```

## 使用方式

### 方式一：浏览器直接引入（UMD）

通过 `<script>` 标签直接在 HTML 中使用：

> **注意**：UMD 格式需要先加载 Vue 和 Element UI，确保它们作为全局变量可用。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Ice Breaking UI Demo</title>
    <!-- 1. 先引入 Vue（必须） -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 2. 引入 Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 3. 引入 Element UI JS（必须） -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 4. 最后引入 Ice Breaking UI -->
    <script src="https://unpkg.com/@ice-breaking/ui/dist/umd/index.umd.min.js"></script>
  </head>
  <body>
    <div id="app">
      <v-img src="https://fpoimg.com/300x200" width="300" height="200" />
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          // 组件会自动注册为全局组件
        },
      });

      // 组件已自动注册为全局组件
    </script>
  </body>
</html>
```

**CDN 链接：**

```html
<!-- 使用 unpkg -->
<script src="https://unpkg.com/@ice-breaking/ui@latest/dist/umd/index.umd.min.js"></script>

<!-- 使用 jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@ice-breaking/ui@latest/dist/umd/index.umd.min.js"></script>
```

**使用本地文件：**

```html
<!-- 开发版本 -->
<script src="./node_modules/@ice-breaking/ui/dist/umd/index.umd.js"></script>

<!-- 生产版本（压缩） -->
<script src="./node_modules/@ice-breaking/ui/dist/umd/index.umd.min.js"></script>
```

### 方式二：全部引入（ESM/CJS）

引入所有组件：

```vue
<template>
  <div>
    <v-img src="https://fpoimg.com/300x200" width="300" height="200" />
  </div>
</template>

<script>
import { VImg } from "@ice-breaking/ui";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

export default {
  components: {
    VImg,
  },
};
</script>
```

### 方式三：按需引入（推荐）✨

只引入需要的组件，支持 tree-shaking，减小打包体积：

```vue
<template>
  <div>
    <v-img src="https://fpoimg.com/300x200" width="300" height="200" />
  </div>
</template>

<script>
// 只引入需要的组件
import { VImg } from "@ice-breaking/ui";
// 或者使用子路径导入
// import VImg from "@ice-breaking/ui/v-img";

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

export default {
  components: {
    VImg,
  },
};
</script>
```

## 组件列表

- **🖼️ VImg** - 图片组件（支持懒加载、自动裁剪、WebP 转换等）

## 依赖要求

- Vue 2.6.0+
- Element UI 2.15.14+

## 开发

```bash
# 安装依赖
pnpm install

# 构建组件库
pnpm build

# 开发文档
pnpm dev
```

## 发布

### 快速发布

```bash
# 使用发布脚本（推荐）
./scripts/publish.sh patch  # Linux/macOS
# 或
scripts\publish.bat patch   # Windows
```

### 手动发布

```bash
# 1. 构建
pnpm build

# 2. 更新版本号
npm version patch  # 或 minor, major

# 3. 发布到 npm（scoped package 需要 --access public）
npm publish --access public

# 4. 推送标签
git push origin main --tags
```

详细发布指南请查看 [PUBLISH.md](./PUBLISH.md)

### 团队发布

如果是团队协作，需要设置发布权限：

- 📖 [团队发布管理指南](./TEAM_PUBLISH.md) - 如何设置团队发布权限
- 📦 [包配置示例](./PACKAGE_CONFIG_EXAMPLE.md) - Scoped Package 配置示例

## 文档部署

文档已配置支持 GitHub Pages 部署。

### 自动部署（推荐）

项目已配置 GitHub Actions，推送到 `main` 或 `master` 分支后会自动部署。

**步骤：**

1. 在 GitHub 仓库设置中启用 GitHub Pages：

   - 进入仓库 Settings → Pages
   - Source 选择 "GitHub Actions"

2. 推送代码后，GitHub Actions 会自动构建并部署文档

**访问地址：**

- **用户名仓库**：`https://your-username.github.io`
- **项目仓库**：`https://your-username.github.io/仓库名/`

### 手动部署

```bash
# 使用部署脚本
./scripts/deploy-docs.sh
```

详细部署指南请查看 [DEPLOY.md](./DEPLOY.md)

## License

MIT