Vexip UI - 新轮子推荐!由个人开发者打造的 Vue3 UI 组件库,免费开源、开箱即用

一款个人开发者业余时间打造的前端UI组件库,基于 Vue3 和 Vite,看起来相当不错,值得关注和了解一下。

关于 Vexip UI

Vexip UI 是一款新鲜出炉的前端 UI 组件库,基于最新的 Vue3 开发,主要用于web 项目 UI 界面开发。作者是来自广州的开发者qmhc,没有大厂背景,在工作之余开发了这套组件库。

vexip ui 官网
vexip ui 官网

Vexip UI 提供了一系列开箱即用的组件,并且使用全新的 Vue3.0 组合式 Api 编写,开发脚手架为最新的 Vite 2.0,发布不久就得到了阮一峰博客的推荐,是一款值得关注的 Vue 3 UI 组件库。

Vexip UI 的技术特性

  • 70+常用的组件和功能,为开发节省大量的时间
  • 基于 Vue3 + Vite2 + 全量 TypeScript 开发
  • 支持树摇优化,减少打包大小,提高加载性能
  • 提供高度可定制化的属性值
  • 完全使用组合式 Api 编写,性能与拓展性不错

开发上手体验

Vexip UI 上手使用很简单,官网也有详尽的使用指南,通俗易懂的语言,浏览体验优秀的文档排版和基于 Playground 的代码示例,从官网的访问体验上,完全不输像 elementantDesign 等大厂出品的组件库

vexip ui 按钮组件
vexip ui 按钮组件

Vexip UI 使用 monorepo 的管理思想,使得可以为每个组件启动独立的开发服务与建立单独的开发文件,是新一代 vue 组件库项目的一次尝试,使用起来相当有意思。

安装使用

官方推荐使用 pnpm 来安装,但用 npm 或者 cnpm 也可以:

# 使用 yarn
yarn add vexip-ui

# 使用 pnpm
pnpm install vexip-ui

需要注意的是,Vexip UI 完全使用最新的 Vue 3 、Vite 2 来开发,使用前需要有这些技术基础。

直接引入使用

Vexip UI 本身已具备树摇优化(tree-shaking)的能力,我们可以在需要使用组件的地方直接引入,这样只有用到的组件才会被打包。

<template>
  <Button>Get Stared</Button>
</template>

<script setup lang="ts">
import 'vexip-ui/css/preset.css'
import 'vexip-ui/css/button.css'
import { Button } from 'vexip-ui'
</script>

不过这种方式你需要为每个组件单独引入样式文件,比较麻烦。由于样式的压缩率本身就比较高,考虑到开发的便利性,可以在顶层直接引入全部样式:

import 'vexip-ui/css/index.css'

当然了,如果完全不在意 js 的打包大小,或者说几乎使用了所有的组件,那你可以选择全局引入整个组件库:

import 'vexip-ui/css/index.css'

import { createApp } from 'vue'
import { install } from 'vexip-ui'
import App from './app.vue'

createApp(App).use(install)

我们还可以通过 Vite 或者 Webpack 来自动引入,这里不一一列出,可查阅官网详细的配置方法。

超过70个常用组件

Vexip UI 提供了70多个组件,常见的组件几乎都有,组件的使用方法也很简单,文档查阅也很方便。

vexip ui 表单组件
vexip ui 表单组件

一般我们在应用中使用了非常多的某个组件,比如 Button,一般情况下它的 size 默认为 'default',但你需要的都是 'large' 的,这时你会需要为每个组件都添加一个 size="large",Vexip UI 提供了组件注册时通过配置直接修改某个组件的某个属性,这很方便。不过由于精力所限,目前组件库都没有单元测试,不过作者表示单元测试的编写已经在开发计划中了,对稳定性要求高的项目要考虑这一点。

vexip ui 开发文档
vexip ui 开发文档

目前作者更新频率很高,能看出想要打造一款新一代的优质前端组件库的决心,值得关注。

免费开源商用说明

Vexip UI 是一款免费开源的前端 UI 组件库,作者是来自广州的开发者qmhc,整个项目基于 MIT 开源协议开放了源码,任何个人和公司都可以免费下载使用,包括用在商业项目上。