【开源自荐】Vexip UI - 一个 Vue3 组件库，高可定制化的属性值，全量的 TypeScript，性能应该还不错

[qmhc]

Vexip UI

高可定制化的属性值，全量的 TypeScript，性能应该还不错

如果你用 Vexip UI 写了一些很酷的东西，你都可以告诉我！如果你可以并愿意贡献代码，非常欢迎！

项目文档地址：https://www.vexipui.com/

项目仓库地址：https://github.com/qmhc/vexip-ui

Vexip UI 是一款个人从零开始打造的（草根）组件库，没有大厂背景，砥砺前行~

Vexip UI 提供了一系类开箱即用的组件，并且支持 暗黑模式、CSS 变量、国际化、按需引入 等等，SSR 也在来的路上。

该组件库使用全新的 组合式 Api 编写，并尽可能采用 Vue 传统的方式设计和编写组件，全量的 TypeScript。

每个组件几乎所有的 属性默认值 均可以通过注入配置快速修改（除了值和选项属性），轻松实现定制初始化。

目前有 70 多个组件，一些你几乎看烂了的组件这里大多都有，或许也有一些与众不同的组件。

目前组件库以及文档和配套设施都在仍在持续建设中，非常欢迎和希望有志同道合的小伙伴一起加入~

如果觉得还 OK，能用 Vexip UI 来写点东西就是对我最大的鼓励和支持了，再能顺手点个 Star 🌟 就更好了~

如何修改属性默认值

如果你在应用中使用了非常多的某个组件，比如 Select，一般情况下它的 size 默认为 'default'，但你需要的都是 'large' 的，这时你会需要为每个 Select 组件都添加一个 size="large"：

<template>
  <Select size="large"></Select>
  <Select size="large"></Select>
  <Select size="large"></Select>
  <Select size="large"></Select>
</template>

Vexip UI 提供了在注册时通过配置直接修改某个组件的某个属性的能力：

import { createApp } from 'vue'
import { install } from 'vexip-ui'

createApp(App)
  .use(install, {
    prop: {
      // 通过 default 还可以为所有具有 size 属性的组件的默认值都修改了
      // defalut: {
      //   size: 'large'
      // },
      select: {
        size: 'large'
      }
    }
  })
  .mount('#app')

这样，在直接使用 Select 组件时 size 的默认值就变成了 'large' 了。

如果不希望全局修改，还可以借助 ConfigProvider 实现局部修改:

<template>
  <ConfigProvider :props="{ select: { size: 'large' } }">
    <Select></Select>
  </ConfigProvider>
</template>