@ice-breaking/ui
v0.0.5
Published
Ice Breaking UI component library based on Vue 2 and Element UI
Downloads
24
Readme
@ice-breaking/ui
Ice Breaking UI 组件库，基于 Vue 2 和 Element UI 构建。
安装
npm install @ice-breaking/ui
# or
pnpm add @ice-breaking/ui
# or
yarn add @ice-breaking/ui使用方式
方式一：浏览器直接引入（UMD）
通过 <script> 标签直接在 HTML 中使用：
注意：UMD 格式需要先加载 Vue 和 Element UI，确保它们作为全局变量可用。
<!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 链接：
<!-- 使用 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>使用本地文件：
<!-- 开发版本 -->
<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）
引入所有组件：
<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，减小打包体积：
<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+
开发
# 安装依赖
pnpm install
# 构建组件库
pnpm build
# 开发文档
pnpm dev发布
快速发布
# 使用发布脚本（推荐）
./scripts/publish.sh patch # Linux/macOS
# 或
scripts\publish.bat patch # Windows手动发布
# 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
团队发布
如果是团队协作，需要设置发布权限：
文档部署
文档已配置支持 GitHub Pages 部署。
自动部署（推荐）
项目已配置 GitHub Actions，推送到 main 或 master 分支后会自动部署。
步骤：
在 GitHub 仓库设置中启用 GitHub Pages：
- 进入仓库 Settings → Pages
- Source 选择 "GitHub Actions"
推送代码后，GitHub Actions 会自动构建并部署文档
访问地址：
- 用户名仓库：
https://your-username.github.io - 项目仓库：
https://your-username.github.io/仓库名/
手动部署
# 使用部署脚本
./scripts/deploy-docs.sh详细部署指南请查看 DEPLOY.md
License
MIT