整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
亮有特色的 CSS 組件庫(kù)，組件代碼非常簡(jiǎn)潔，也支持深度定制主題、定制組件，可以搭配 Vue / React 等框架使用。
daisyUI 是一款極為流行的 CSS UI 組件庫(kù)，作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架構(gòu)建的組件庫(kù)。截止發(fā)文日期，已經(jīng)在 Github 得到 11,200 Star， 944,600 次 NPM 安裝。
daisyui 官網(wǎng)
Tailwind CSS 是一個(gè)功能類優(yōu)先的 CSS 框架，通過(guò)類似于 .flex、.pt-4、.text-center、.rotate-90 這種原子類組合的 class 名快速構(gòu)建網(wǎng)站，在 HTML 代碼上就能完成開(kāi)發(fā)，不需要再自己想各種 CSS 命名。
daisyUI 作為 Tailwind CSS 的組件庫(kù)，不僅繼承了它的優(yōu)點(diǎn)，而且代碼更簡(jiǎn)潔，主題非常漂亮有特點(diǎn)，打開(kāi)官網(wǎng)就喜歡上它了。
daisyui 組件
支持搭配使用的框架
首先說(shuō)說(shuō)我最喜歡的主題，daisyUI 提供了 29 款主題，配色很舒服，各有特色，我首先想到用來(lái)做個(gè)人網(wǎng)站的主題，一定會(huì)很酷。
daisyui 默認(rèn)主題
daisyui 暗主題
需要注意的是，使用 daisyUI 前，需要和 Tailwind CSS 一起安裝，最簡(jiǎn)單的方式是 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>生產(chǎn)環(huán)境更推薦用 npm 的方式，這樣打包出來(lái)的項(xiàng)目會(huì)小很多：
安裝 daisyUI
npm i daisyui然后，在你的tailwind.config.js文件里追加 daisyUI 的設(shè)置
module.exports = {
//...
plugins: [require("daisyui")],
}使用過(guò) Tailwind CSS 的開(kāi)發(fā)者一定對(duì)這種寫一堆 class 名來(lái)構(gòu)建組件的方式印象很深刻，我一直沒(méi)有推薦 Tailwind CSS，就是因?yàn)閭€(gè)人實(shí)在不喜歡零零碎碎的 CSS 類名，我更傾向于寫語(yǔ)義清晰的類名來(lái)開(kāi)發(fā)組件。我們來(lái)看看實(shí)現(xiàn)一個(gè)常規(guī)的按鈕，兩種寫法的區(qū)別：
<!-- 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 的寫法實(shí)在太簡(jiǎn)潔了，所以說(shuō) daisyUI 簡(jiǎn)直是“反” Tailwind CSS 思路一點(diǎn)也不為過(guò)，不過(guò) Tailwind CSS 的作者認(rèn)為語(yǔ)義化的 CSS 并不好維護(hù)，因?yàn)殡S著項(xiàng)目的迭代，很多 class 名早已失去了原有的意義了。各位前端小伙伴，你們覺(jué)得呢？
45 個(gè)組件如果沒(méi)法滿足，官方還提供了自定義組件的工具類，開(kāi)發(fā)者可以快速構(gòu)建自定義組件。官網(wǎng)提供了詳盡的中文文檔，純 CSS 本身也易懂，對(duì)應(yīng)的組件也有 HTML 代碼例子，上手使用完全不是問(wèn)題。
daisyui 開(kāi)發(fā)文檔
總的來(lái)說(shuō)，這是一款漂亮、流行，代碼簡(jiǎn)潔的 web UI 組件庫(kù)，熟悉以后能提高開(kāi)發(fā)效率，不妨寫個(gè)快速 demo 嘗試一下。
daisyUI 是基于 Tailwind CSS 構(gòu)建的 CSS 組件庫(kù)，源碼基于 MIT 開(kāi)源協(xié)議托管在 Github 上，任何個(gè)人和公司都可以免費(fèi)下載使用，也可以用于商業(yè)項(xiàng)目。
和 daisyUI 類似的框架還有之前推薦過(guò)的 Bootstrap 和 Pico.css，感興趣的開(kāi)發(fā)者也可以前往了解。
關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開(kāi)源、免費(fèi)商用的資源。
↓↓點(diǎn)【了解更多】查看本次分享的網(wǎng)址。
亮的 Vue 3 組件庫(kù)，風(fēng)格大氣國(guó)際化，自帶 admin 框架，開(kāi)箱即用，要是有中文文檔就更好了。
Vuestic UI 是一套由 Epicmax 團(tuán)隊(duì)開(kāi)發(fā)的一套基于 Vue.js 的 web 開(kāi)發(fā)組件庫(kù)，最近更新發(fā)布了 Vue3 版本，希望用 Vue .js 的專業(yè)知識(shí)以最佳方式構(gòu)建一個(gè)可用性強(qiáng)且全面的開(kāi)源工具。Vuestic UI 在發(fā)布后不久，便成為使用 Vue 構(gòu)建的最受歡迎的組件庫(kù)之一。
vuestic ui 官網(wǎng)
Vuestic UI 的團(tuán)隊(duì) Epicmax 是全球排名前15位的 Vue.js 開(kāi)發(fā)團(tuán)隊(duì)，響應(yīng)式的設(shè)計(jì)使這些組件不僅能用在 web PC 項(xiàng)目上，而且?guī)缀踹m用于任何屏幕大小的分辨率。 鍵盤可用性是 Vuestic 的特色功能，在整個(gè)框架中提供無(wú)縫鍵盤操作支持。
vuestic ui 組件預(yù)覽
Vuestic 上手使用很簡(jiǎn)單，也比較常規(guī)，支持 Vue CLI 腳手架、npm 安裝和直接引入的方式來(lái)使用，官網(wǎng)提供了詳細(xì)的技術(shù)文檔和充足的代碼例子，文檔目前只有英文 / 俄文兩種，看技術(shù)文檔如果英語(yǔ)不好，就算借助翻譯工具，理解起來(lái)可能會(huì)有點(diǎn)吃力。
vuestic ui 組件預(yù)覽
Vuestic UI 組件風(fēng)格大氣，具有國(guó)際化，配色非常漂亮，和國(guó)內(nèi)常見(jiàn)的組件庫(kù)差別很大，可以根據(jù)項(xiàng)目實(shí)際的需要來(lái)考慮選型。目前 Vuestic 團(tuán)隊(duì)還在開(kāi)發(fā)更多優(yōu)質(zhì)的組件，這個(gè)項(xiàng)目也在不斷維護(hù)，國(guó)外的公司或團(tuán)隊(duì)對(duì)開(kāi)源項(xiàng)目的重視程度很高，極少淪為 kpi 項(xiàng)目而無(wú)人過(guò)問(wèn)。
PC 端組件庫(kù)一個(gè)很常用的用途是做 admin 中后臺(tái)管理系統(tǒng)，Vuestic 官方也發(fā)布了一個(gè)漂亮后臺(tái)管理模板 Vuestic Admin UI ，這個(gè)管理后臺(tái)也是 Vuestic UI 的最佳實(shí)踐，顏值在眾多基于 Vue 的 admin 中，個(gè)人認(rèn)為排名可以很靠前了，有很多像富文本編輯器、列表、數(shù)據(jù)表格、登錄、表單、樹形結(jié)構(gòu)等現(xiàn)成的頁(yè)面，拿來(lái)就可以使用，節(jié)省了大量的開(kāi)發(fā)時(shí)間。
vuestic admin 控制臺(tái)
Vuestic UI 的開(kāi)發(fā)團(tuán)隊(duì)是 Epicmax 公司，源代碼基于 MIT 開(kāi)源協(xié)議托管在 Github 上，任何個(gè)人和公司都可以免費(fèi)用在自己的項(xiàng)目上，包括商業(yè)項(xiàng)目。
關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開(kāi)源、免費(fèi)商用的資源。
↓↓點(diǎn)【了解更多】查看本次分享的網(wǎng)址。
Vuestic UI - 免費(fèi)開(kāi)源的高質(zhì)量 Vue3 UI 組件庫(kù)，還內(nèi)置了漂亮的 Vuestic Admin 后臺(tái)框架｜那些免費(fèi)的磚
段時(shí)間對(duì)于前端人來(lái)說(shuō)，最大的驚喜莫過(guò)于期盼已久的Vue.js 3.0正式發(fā)布了。
之前就有很多小伙伴詢問(wèn)vue3組件庫(kù)相關(guān)的問(wèn)題。趁著vue.js 3.0發(fā)布的熱潮，就給大家推薦幾個(gè)Vue3 Beta組件庫(kù)。
性能方面優(yōu)化
# vue3.0中文官網(wǎng)
https://v3.cn.vuejs.org/
# 倉(cāng)庫(kù)地址
https://github.com/vuejs/vue-next下面進(jìn)入今天的正文。有哪些互聯(lián)網(wǎng)大廠率先推出自己的Vue3組件庫(kù)呢？
Vant有贊團(tuán)隊(duì)推出的Vue移動(dòng)端組件庫(kù)，已經(jīng)完成并發(fā)布Vue3.0 beta版本。
安裝
# 通過(guò) npm 安裝
$ npm i vant@next -S
# 通過(guò) 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沒(méi)多大區(qū)別，直接引入使用即可。
# 文檔地址
https://vant-contrib.gitee.io/vant/next/#/zh-CN/
# 倉(cāng)庫(kù)地址
https://github.com/youzan/vant一款AntD設(shè)計(jì)風(fēng)格的Vue實(shí)現(xiàn)。目前已經(jīng)發(fā)布Vue 3.0 的 2.0.0 測(cè)試版。
安裝
$ 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組件使用方式也和之前一樣。大家如果有開(kāi)發(fā)Vue3項(xiàng)目計(jì)劃，可以去了解下。
# 文檔地址
https://2x.antdv.com/docs/vue/introduce-cn/
# 倉(cāng)庫(kù)地址
https://github.com/vueComponent/ant-design-vue/element-ui風(fēng)格的Vue3重構(gòu)組件庫(kù)。目前還在緊急研發(fā)中，大家可以去了解下最新動(dòng)態(tài)。
# 文檔地址
https://element-plus.org/#/zh-CN好了，就分享到這里。如果大家有其它最新Vue3.0 UI組件庫(kù)，期待一起分享交流哈！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
