swc-ui （全称Stencil Web Component）， 是基于 stencil.js 框架开发的符合 Web Components 规范的 UI 组件库，不受框架限制，运行在 JS/Vue/React/Angular 项目
# npm
npm i @swc-ui/components -S
# yarn
yarn add @swc-ui/components -S
# pnpm
pnpm add @swc-ui/components1、全局批量注册组件
import { createApp } from 'vue'
import App from './App.vue';
import { applyPolyfills, defineCustomElements } from "@swc-ui/components/loader";
// 引入样式
import "@swc-ui/components/dist/swc-ui/swc-ui.css";
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements();
});
createApp(App).mount('#app')修改 vite.config.js，vue 编译兼容自定义元素
import { defineConfig } from 'vite';
export default defineConfig({
// Vue compiler options
vue: {
template: {
compilerOptions: {
// Ignore custom elements to avoid rendering errors
isCustomElement: tag => tag.startsWith('swc-')
},
},
},
});import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// test-component is the name of our made up Web Component that we have
// published to npm:
import { applyPolyfills, defineCustomElements } from 'test-components/loader';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
applyPolyfills().then(() => {
defineCustomElements();
});还未来得及处理 CDN，后续添加到 jsdelivrCDN，使用方法如下
<html>
<head>
<script src="'https://cdn.jsdelivr.net/npm/swc-ui@0.0.1/dist/components/index.min.js'">
</script>
</head>
<body>
<swc-button>按钮</swc-button>
</body>
</html>1、克隆源码
git clone https://github.com/WebJeffery/stencil-component-ui.git
2、安装依赖
pnpm install3、启动项目
npm run start使用 git cz 代替 git commit
feat - 新功能 feature
fix - 修复 bug
docs - 文档注释
style - 代码格式(不影响代码运行的变动)
refactor - 重构、优化(既不增加新功能，也不是修复bug)
perf - 性能优化
test - 增加测试
chore - 构建过程或辅助工具的变动
revert - 回退
build - 打包
| 组件名称 | 搭配组件 | 组件描述 |
|---|---|---|
| button | button-group | 按钮组件 |
| icon | - | 图标组件 |
| aspect-ratio | - | 宽高保持固定比例的容器 |
| Badge | - | 徽章组件 |
| breadcrumb | breadcrumb-item | 面包屑导航组件 |
| breadcrumb-item | - | 面包屑导航子组件，不可单独使用 |
| card | - | 卡片组件 |
| checkbox | - | 多选框 |
| checkbox-group | checkbox | 多选框组 |
| col | - | row的子组件，不可单独使用 |
| contextmenu | contextmenu-item | 右键菜单组件 |
| contextmenu-item | - | 右键菜单子组件，不可单独使用 |
| collapse | Collapse-item | 折叠面板 |
| collapse-item | - | 折叠面板子组件，不可单独使用 |
| dialog | - | 弹窗组件 |
| divider | - | 分割线，常用于分割内容 |
| drawer | - | 抽屉组件 |
| dropdown | dropdown-item | 下拉菜单组件 |
| dropdown-item | - | 下拉菜单子组件，不可单独使用 |
| empty | - | 空组件，常用于内容为空的场合 |
| grid | grid-item | 宫格组件-常用于九宫格 |
| image | - | 图片组件 |
| input | - | 输入组件 |
| Loading | - | 加载 |
| message | - | 顶部弹层提示组件 |
| option | - | 下拉选择子组件，不可单独使用 |
| process | - | 进度条组件 |
| radio | - | 单选框 |
| radio-group | radio | 单选框组 |
| row | col | 行组件，子组件必须是col组件 |
| select | option | 下拉选择组件 |
| switch | - | 开关组件 |
| step | - | 步骤条子组件，不可单独使用 |
| steps | step | 步骤条组件 |
| tabs | tab-pane | tab组件 |
| tab-pane | - | tab子组件，不可单独使用 |
| tag | - | 标签组件 |
| timeline | timeline-item | 时间线组件 |
| timeline-item | - | 时间线子组件，不可单独使用 |
| tip | - | 直接显示在界面上提示组件，等同于elementPlus的alert组件 |
| tooltip | - | 提示组件 |
| Link | - | 链接 |
| Text | - | 文字 |