亮有特色的 CSS 组件库，组件代码非常简洁，也支持深度定制主题、定制组件，可以搭配 Vue / React 等框架使用。

关于 daisyUI

daisyUI 是一款极为流行的 CSS UI 组件库，作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架构建的组件库。截止发文日期，已经在 Github 得到 11,200 Star， 944,600 次 NPM 安装。

Tailwind CSS 是一个功能类优先的 CSS 框架，通过类似于 .flex、.pt-4、.text-center、.rotate-90 这种原子类组合的 class 名快速构建网站，在 HTML 代码上就能完成开发，不需要再自己想各种 CSS 命名。

daisyUI 作为 Tailwind CSS 的组件库，不仅继承了它的优点，而且代码更简洁，主题非常漂亮有特点，打开官网就喜欢上它了。

daisyUI 的技术特性

• 提供 45 个常用组件，多达 29 款主题，款款都是精品
• 相比 Tailwind CSS 的原子类，daisyUI 采用语义化的 class 名，写出更纯净的 HTML
• 支持深度自定义、可定制主题
• 是一个纯净 CSS 组件，所以支持和任意 Vue / React 这样的框架一起使用

开发上手体验和使用感受

首先说说我最喜欢的主题，daisyUI 提供了 29 款主题，配色很舒服，各有特色，我首先想到用来做个人网站的主题，一定会很酷。

主题风格预览

安装和使用

需要注意的是，使用 daisyUI 前，需要和 Tailwind CSS 一起安装，最简单的方式是 cdn 引入：

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.2/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

生产环境更推荐用 npm 的方式，这样打包出来的项目会小很多：

安装 daisyUI

npm i daisyui

然后，在你的tailwind.config.js文件里追加 daisyUI 的设置

module.exports = {
  //...
  plugins: [require("daisyui")],
}

“反” Tailwind CSS

使用过 Tailwind CSS 的开发者一定对这种写一堆 class 名来构建组件的方式印象很深刻，我一直没有推荐 Tailwind CSS，就是因为个人实在不喜欢零零碎碎的 CSS 类名，我更倾向于写语义清晰的类名来开发组件。我们来看看实现一个常规的按钮，两种写法的区别：

<!-- Tailwind CSS 的写法 -->
<a class="inline-block px-4 py-3 text-sm font-semibold 
    text-cente text-white uppercase transition
    duration-200 ease-in-out bg-indigo-600 
    rounded-md cursor-pointer
    hover:bg-indigo-700">Button</a>

<!-- daisyUI 的写法 -->
<a class="btn btn-primary">Button</a>

daisyUI 的写法实在太简洁了，所以说 daisyUI 简直是“反” Tailwind CSS 思路一点也不为过，不过 Tailwind CSS 的作者认为语义化的 CSS 并不好维护，因为随着项目的迭代，很多 class 名早已失去了原有的意义了。各位前端小伙伴，你们觉得呢？

45 个组件如果没法满足，官方还提供了自定义组件的工具类，开发者可以快速构建自定义组件。官网提供了详尽的中文文档，纯 CSS 本身也易懂，对应的组件也有 HTML 代码例子，上手使用完全不是问题。

总的来说，这是一款漂亮、流行，代码简洁的 web UI 组件库，熟悉以后能提高开发效率，不妨写个快速 demo 尝试一下。

免费开源说明

daisyUI 是基于 Tailwind CSS 构建的 CSS 组件库，源码基于 MIT 开源协议托管在 Github 上，任何个人和公司都可以免费下载使用，也可以用于商业项目。

和 daisyUI 类似的框架还有之前推荐过的 Bootstrap 和 Pico.css，感兴趣的开发者也可以前往了解。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

亮的 Vue 3 组件库，风格大气国际化，自带 admin 框架，开箱即用，要是有中文文档就更好了。

关于 Vuestic UI

Vuestic UI 是一套由 Epicmax 团队开发的一套基于 Vue.js 的 web 开发组件库，最近更新发布了 Vue3 版本，希望用 Vue .js 的专业知识以最佳方式构建一个可用性强且全面的开源工具。Vuestic UI 在发布后不久，便成为使用 Vue 构建的最受欢迎的组件库之一。

Vuestic UI 的团队 Epicmax 是全球排名前15位的 Vue.js 开发团队，响应式的设计使这些组件不仅能用在 web PC 项目上，而且几乎适用于任何屏幕大小的分辨率。 键盘可用性是 Vuestic 的特色功能，在整个框架中提供无缝键盘操作支持。

Vuestic UI 的技术特性

• 兼容 Vue3，内置 52 个漂亮的响应式组件，功能丰富
• 支持键盘导航，体验流畅，这在流行的组件库中不多见
• 支持通过配置文件和 CSS 变量全局配置组件
• 内置 2 套颜色主题方案
• 支持树摇优化，减少打包体积
• 支持 i18n 国际化
• 兼容非 IE 浏览器

开发上手体验

Vuestic 上手使用很简单，也比较常规，支持 Vue CLI 脚手架、npm 安装和直接引入的方式来使用，官网提供了详细的技术文档和充足的代码例子，文档目前只有英文 / 俄文两种，看技术文档如果英语不好，就算借助翻译工具，理解起来可能会有点吃力。

Vuestic UI 组件风格大气，具有国际化，配色非常漂亮，和国内常见的组件库差别很大，可以根据项目实际的需要来考虑选型。目前 Vuestic 团队还在开发更多优质的组件，这个项目也在不断维护，国外的公司或团队对开源项目的重视程度很高，极少沦为 kpi 项目而无人过问。

PC 端组件库一个很常用的用途是做 admin 中后台管理系统，Vuestic 官方也发布了一个漂亮后台管理模板 Vuestic Admin UI ，这个管理后台也是 Vuestic UI 的最佳实践，颜值在众多基于 Vue 的 admin 中，个人认为排名可以很靠前了，有很多像富文本编辑器、列表、数据表格、登录、表单、树形结构等现成的页面，拿来就可以使用，节省了大量的开发时间。

免费开源说明

Vuestic UI 的开发团队是 Epicmax 公司，源代码基于 MIT 开源协议托管在 Github 上，任何个人和公司都可以免费用在自己的项目上，包括商业项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

Vuestic UI - 免费开源的高质量 Vue3 UI 组件库，还内置了漂亮的 Vuestic Admin 后台框架｜那些免费的砖

段时间对于前端人来说，最大的惊喜莫过于期盼已久的Vue.js 3.0正式发布了。

之前就有很多小伙伴询问vue3组件库相关的问题。趁着vue.js 3.0发布的热潮，就给大家推荐几个Vue3 Beta组件库。

性能方面优化

• 路由/图片懒加载
• v-show复用dom
• 长列表性能优化
• 事件销毁
• 插件按需引入
• 无状态组件标记为函数式组件
• 变量本地化
• 更好的TypeScript集成
• SSR
• ...

# vue3.0中文官网
https://v3.cn.vuejs.org/

# 仓库地址
https://github.com/vuejs/vue-next

下面进入今天的正文。有哪些互联网大厂率先推出自己的Vue3组件库呢？

1、Vant 3.0

Vant有赞团队推出的Vue移动端组件库，已经完成并发布Vue3.0 beta版本。

安装

# 通过 npm 安装
$ npm i vant@next -S

# 通过 yarn 安装
$ yarn add vant@next

快速引入

// 全局引入
import { createApp } from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

const app = createApp()
app.use(Vant)

// 按需引入
import { createApp } from 'vue'
import { Button } from 'vant'

const app = createApp()
app.use(Button)

组件的使用和Vant 2.x没多大区别，直接引入使用即可。

# 文档地址
https://vant-contrib.gitee.io/vant/next/#/zh-CN/

# 仓库地址
https://github.com/youzan/vant

2、Ant-Design-Vue

一款AntD设计风格的Vue实现。目前已经发布Vue 3.0 的 2.0.0 测试版。

安装

$ npm i ant-design-vue@next -S

快速引入

# 完整引入
import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp()
app.use(Antd)

# 按需局部引入
import { createApp } from 'vue'
import { Button, message } from 'ant-design-vue'

const app = createApp()
app.use(Button)
app.config.globalProperties.$message = message

组件使用方式也和之前一样。大家如果有开发Vue3项目计划，可以去了解下。

# 文档地址
https://2x.antdv.com/docs/vue/introduce-cn/

# 仓库地址
https://github.com/vueComponent/ant-design-vue/

3、Element-Plus

element-ui风格的Vue3重构组件库。目前还在紧急研发中，大家可以去了解下最新动态。

# 文档地址
https://element-plus.org/#/zh-CN

好了，就分享到这里。如果大家有其它最新Vue3.0 UI组件库，期待一起分享交流哈！