webcomponents-test-yjj

一个基于 Vue 3 的最小组件库，同时提供 Web Components 版本。

已内置组件：

• MyButton（自定义元素名：wc-button）
• InfoBox（自定义元素名：wc-infobox）

安装

npm i webcomponents-test-yjj

快速开始

方式一：在任何项目中使用 Web Components（推荐最简）

无需依赖 Vue，在入口引入一次注册脚本后即可使用自定义元素。

<script type="module">
  import 'webcomponents-test-yjj/web-components'
</script>

<wc-button variant="primary">提交</wc-button>
<wc-infobox type="success" title="成功">操作成功</wc-infobox>

说明：模块导入后会在全局注册 wc-button 和 wc-infobox 两个自定义元素。

方式二：在 Vue 3 中作为组件库使用

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Components from 'webcomponents-test-yjj'

createApp(App).use(Components).mount('#app')

<template>
  <MyButton variant="primary">提交</MyButton>
  <InfoBox type="success" title="成功" message="已完成" />
</template>

方式三：本地构建产物直接引用（无 npm 环境时）

<script type="module" src="/dist/wc/web-components.js"></script>

<wc-button variant="secondary">按钮</wc-button>
<wc-infobox type="warning" title="注意">这是一个提示</wc-infobox>

方式四：CDN 引入（已发布到 npm 后）

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/webcomponents-test-yjj/dist/wc/web-components.js'
  // 或
  // import 'https://unpkg.com/webcomponents-test-yjj/dist/wc/web-components.js'
</script>

<wc-button>Hello</wc-button>

组件 API

wc-button /

• 属性（props）
  • variant: primary | secondary | danger（默认 primary）
  • block: boolean（块级展示）
  • disabled: boolean
• 事件
  • click
• 插槽
  • 默认插槽：按钮内容

示例：

<wc-button variant="danger" block>删除</wc-button>

wc-infobox /

• 属性（props）
  • title: string
  • message: string
  • type: info | success | warning | error（默认 info）
• 插槽
  • title：标题内容（可替代 title 属性）
  • 默认插槽：正文内容（可替代 message 属性）

示例：

<wc-infobox type="error">
  <span slot="title">出错了</span>
  服务器繁忙，请稍后再试
</wc-infobox>

提示：在 HTML 中使用属性时请使用 kebab-case（例如 variant="primary"、type="success"）。

开发与构建

# 安装依赖
npm i

# 类型检查
npm run typecheck

# 构建（库 + Web Components + 类型声明）
npm run build

构建产物：

• 库：dist/lib（ES + UMD）
• Web Components：dist/wc/web-components.js
• 类型声明：dist/types

库入口（Vue 插件）：src/index.ts 自定义元素注册入口：src/web-components.ts

发布到 npm（可选）

1. 确认 package.json 中的 name、version、description 已正确设置。
2. 登录 npm：npm login
3. 发布：npm publish --access public

许可

MIT