自定义组件 vs 第三方组件库

在代码库生命周期的初期，创建一个集中的通用组件库变得理所当然。这使得整个应用的外观和行为保持一致，同时大大减少了样板代码。

我们有三个选择来做这件事。

有很多第三方库可以选择。它们提供了现成的、可重复使用的组件，可以加快开发进度。这些库通常有详细的文档，并由一个庞大的贡献者社区进行维护。

根据你选择的框架体系，选择最受欢迎的选项之一被认为是一种安全的选择。

• Material-UI (MUI) (材料UI)
• Ant Design 设计
• React Bootstrap 组件库
• Chakra UI (组件库)

• Vuetify
• Element UI/Plus
• BootstrapVue
• PrimeVue

一些常用的Angular组件库有:

• Angular物料 - 一个基于Angular的UI组件库

• NG引导 - 一个基于Angular的Bootstrap组件库

• PrimeNG

• Svelte材料UI (SMUI - Svelte Material UI)
• SvelteStrap (Svelte组件库)
• Carbon Components Svelte (Carbon Svelte组件)

不幸的是，到目前为止，我使用现成组件库的经验并不理想。常遇到的破坏性改动、迁移麻烦和内存泄漏往往非常耗时，它们大多数时候都能正常工作，直到它们失效。另外，构建一个自定义解决方案是另一种选择。

自己构建组件库听起来挺难的，但实际上更难。为了正确地构建它，你需要考虑到不同的屏幕尺寸、移动端的特有问题、无障碍访问、组件交互等诸多方面。然而，如果你在一个大公司工作，花时间构建符合需求的组件可能会很有价值。可以参考关于如何在Vue中创建可重用模态组件的示例的文章，或关于如何在React中构建组件库的文章。

还有一个第三选择，介于两者之间。这就是创建一个基于无头组件库的自定义组件。无头库是一组具备功能但未附带样式的组件。在实际使用前，你需要配置并根据自己品牌的风格进行样式调整。

两个最流行的无头组件库框架是：

• 无头UI（一种无头UI框架）
• Radix UI（一种UI组件库）

比如说，像下面这样我们可以使用 Radix UI 使用以下代码创建一个模态：

    <script setup>  
    import { ref } from "vue";  
    import { DialogRoot, DialogTrigger, DialogContent, DialogOverlay, DialogPortal, DialogTitle, DialogDescription, DialogClose } from "radix-vue";  

    const open = ref(false);  
    </script>  

    <template>  
     <DialogRoot v-model:open="open">  
      <DialogTrigger>开启</DialogTrigger>  
      <DialogPortal>  
       <DialogOverlay />  
       <DialogContent>  
        <DialogTitle>标题：</DialogTitle>  
        <DialogDescription>描述：</DialogDescription>  
        <DialogClose>关闭：</DialogClose>  
       </DialogContent>  
      </DialogPortal>  
     </DialogRoot>  
    </template>

结果是这样的：

接下来的步骤是添加一些类，这些类将被应用样式，让它们看起来更漂亮。你可以查看下面的文章，了解逐步指南。

Radix-vue 是 Radix UI 在 Vue 生态系统中的社区驱动的版本。它优先考虑可访问性和自定义。

在灵活性和快速开发之间找到平衡是一项挑战。第三方解决方案非常适合原型制作，但在代码库变大时可能会出现问题，这可能会带来麻烦。另一方面，自定义实现会消耗大量宝贵的时间资源。如今，利用无头组件库是最有意义的。它们提供了一套经过实战考验的解决方案，专注于灵活性、可维护性以及可访问性。