亮有特色的 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組件庫，期待一起分享交流哈！