前言
作为开发者，我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML（以及相关的样式和脚本），有时您不得不写代码来呈现自定义UI控件，并且如果您不小心的话，多次使用它们会使您的页面变得一团糟。
Web Components旨在解决这些问题 — 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。
Custom elements（自定义元素）：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
HTML templates（HTML模板）： 和 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
ivy-ui 组件库
文档地址：传送门
使用
script 标签使用
<!--最新版-->
<script type="module" src="//cdn.jsdelivr.net/npm/ivy-ui"></script>
<!--指定版本号-->
<script type="module" src="//cdn.jsdelivr.net/npm/ivy-ui@0.4.0"></script>
在vue中使用
安装
npm i ivy-ui
#or
yarn add ivy-ui
// 在main.js中引入
// vue2.x
import Vue from "vue";
import App from "./App.vue";
import 'ivy-ui'
Vue.config.ignoredElements = [
// 用一个 `RegExp` 忽略所有“ion-”开头的元素
// 仅在 2.5+ 支持
/^ivy-/
]
new Vue({render: h => h(App)}).mount('#app')
// vue3
import { createApp } from "vue";
import App from "./App.vue";
import 'ivy-ui'
const app = createApp(App);
// 任何 'ivy-' 开头的元素都会被识别为自定义元素
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ivy-');
app.mount("#app");