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

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

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

关于 Vexip UI

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

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

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

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

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

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

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

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

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

vexip ui 表单组件

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

vexip ui 开发文档

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

免费开源商用说明

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

原文链接:https://www.thosefree.com/vexip-ui

猜你喜欢

转载自blog.csdn.net/weixin_45583710/article/details/125991891