@iamyjy/y-ui README.md

@iamyjy/y-ui

A Vue3 Component Library based on Monorepo + TypeScript

🌟 项目介绍

@iamyjy/y-ui 是一款基于 Vue3 + TypeScript + Monorepo 架构开发的轻量UI组件库，核心特性如下：

• 🎨 基于 CSS 变量实现主题定制，灵活适配不同项目风格
• 📦 支持 ES Module / CJS / UMD 三格式输出，适配多场景使用
• 🔧 多入口独立打包，支持按需引入，减少项目体积
• ✅ 完整 TypeScript 类型支持，开发更高效、更安全
• 🖥️ 兼容浏览器 CDN 直接引入、Node 环境及现代工程化项目

📦 安装

使用 npm 或 pnpm 安装（推荐 pnpm）：

# npm
npm install @iamyjy/y-ui --save

# pnpm（推荐）
pnpm add @iamyjy/y-ui

🚀 快速使用

1. 全量引入（适用于小型项目）

在 Vue 入口文件（如 main.ts）中引入：

import { createApp } from 'vue'
import App from './App.vue'
// 引入组件库及样式
import YUI from '@iamyjy/y-ui'
import '@iamyjy/y-ui/dist/style.css'

const app = createApp(App)
app.use(YUI)
app.mount('#app')

2. 按需引入（推荐，减小打包体积）

无需额外配置，直接引入所需组件：

// 引入按钮组件
import Button from '@iamyjy/y-ui/button'
// 引入消息组件
import Message from '@iamyjy/y-ui/message'

// 在组件中使用
export default {
  components: { Button },
  methods: {
    showMessage() {
      Message.success('操作成功！')
    }
  }
}

3. 浏览器直接引入（UMD格式）

适用于非工程化项目，直接通过script标签引入：

<!-- 先引入Vue -->
<!-- 引入@iamyjy/y-ui UMD包 -->
<!-- 引入样式 -->

🎨 主题定制

基于 CSS 变量实现主题定制，可直接在项目中覆盖以下变量（示例）：

/* 在项目全局样式中覆盖 */
:root {
  /* 主色调 */
  --y-ui-primary: #409eff;
  /* 成功色 */
  --y-ui-success: #67c23a;
  /* 警告色 */
  --y-ui-warning: #e6a600;
  /* 危险色 */
  --y-ui-danger: #f56c6c;
  /* 文本色 */
  --y-ui-text-primary: #303133;
}

📌 打包产物说明

打包后输出至 dist 目录，包含三种格式，适配不同使用场景：

• ES Module（多入口）：dist/[组件名]/index.es.js → 现代工程化项目（Vite、Webpack 5+）
• CJS（多入口）：dist/[组件名]/index.cjs.js → Node.js 环境或旧版构建工具
• UMD（单文件）：dist/y-ui.umd.js → 浏览器直接引入、CDN 部署

🛠️ 开发与构建命令

# 安装依赖
pnpm install

# 打包全格式产物（ES + CJS + UMD）
pnpm build

# 启动演示项目（调试组件）
pnpm play

# 启动文档服务
pnpm docs:dev

# 运行组件测试
pnpm test

# 代码校验与修复
pnpm lint

📄 发布说明

本组件库已配置完整的 NPM 发布能力，打包完成后执行以下命令即可发布：

# 登录NPM（需提前注册NPM账号并开启验证）
npm login

# 发布（公开包，必须加--access=public）
npm publish --access=public

👤 作者

易晶莹

📜 许可证

ISC

⚠️ 注意事项

1. 组件库基于 Vue3 开发，不兼容 Vue2 版本，请确保项目 Vue 版本 ≥ 3.0.0
2. 按需引入时，无需额外安装插件，Vite/Webpack 可自动识别
3. 主题定制需在全局样式中覆盖 CSS 变量，确保样式加载顺序正确