項目地址

Github 地址：https://github.com/cherryful/unocss-ui文章來源地址http://www.zghlxwxcb.cn/news/detail-494532.html

example 預(yù)覽地址：https://cherryful.github.io/unocss-ui/

基于 UnoCSS UI 的開源項目 ：

• vue3-template：一個輕量級的 Vue3 啟動模板，自帶 Unocss UI
• rabbit-admin：一個基于 Golang 和 Vue3 的輕量級全棧后臺管理模板

前言

UnocssUI 是一個基于 UnoCSS 帶有原子化思想的現(xiàn)代化 Vue3 組件庫，它的特點是簡單，每個組件的實現(xiàn)之間沒有任何依賴（只在 一個 .vue 文件實現(xiàn)），非常適合用來學(xué)習(xí)組件庫的封裝，同時它也在快速的迭代與建設(shè)中。

從該項目中你或許可以學(xué)習(xí)到：

• 基于 PNPM 的 Monorepo 項目架構(gòu)：如何組織組件庫的目錄結(jié)構(gòu)
• 基于原子化 CSS 的組件封裝方式：原子化 CSS 極大的簡化了組件的封裝
• 一種傾向于簡潔的編碼思想：可以減少編碼的心智負擔(dān)
• 開發(fā)帶有動態(tài)調(diào)試功能的文檔：這是一種非常靈活的文檔展現(xiàn)形式
• …

很多思想與方式都是個人參考很多開源項目 + 自己的理解所得到的，如果有問題或者更好的方案，歡迎交流

在開始前，先簡單看一下組件庫的使用方式：

需要安裝三個依賴：unocss，unocss-ui，@unocss/reset

pnpm add unocss unocss-ui @unocss/reset

使用方式一：在 main.ts 進行全局注冊，后續(xù)在 .vue 中使用無需引入

// 注意順序
import '@unocss/reset/tailwind.css'
import 'unocss-ui/style.css' // 目前，無論使用哪種方式都必須引入組件庫的 CSS 文件
import 'uno.css'

import unocssui from 'unocss-ui'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(unocssui).mount('#app')

使用方式二：不進行全局注冊，需要在 .vue 頁面文件中單獨引入：

// App.vue
<script setup>
import { UButton } from 'unocss-ui'
</script>

<template>
	<UButton> Hello </UButton>
</template>

方式二 TODO：后續(xù)實現(xiàn)按需引入并打包的功能（非常重要）

這里提供一個集成了 UnoCSS UI 的 Vue 啟動模板：vue3-template

Monorepo 項目架構(gòu)

Monorepo 是現(xiàn)在比較流行的一種前端項目架構(gòu)，簡單來說就是：一個倉庫內(nèi)包含多個開發(fā)項目（模塊）。

• 整個項目的根目錄下有一個 package.json
• 子目錄下可能還會有 package.json 即子模塊
• 基于 PNPM 的 Monorepo 由 pnpm-workspace.yaml 文件來指定哪些目錄可能為子模塊

參考文檔：https://www.pnpm.cn/pnpm-workspace_yaml

本項目的 pnpm-workspace.yaml 內(nèi)容如下：

# pnpm-workspace.yaml
packages:
  - 'packages/*'
  - example
  - demo

其含義是指 packages 目錄下的所有目錄，及根目錄下的 example 和 demo 可以為子模塊。

即該項目總共有 5 個子模塊，加上根模塊，共計 6 個模塊，在拉取本項目并執(zhí)行 pnpm install 時也會提示。

UnoCSS UI 的模塊設(shè)計

在 UnoCSS UI 項目中，最外層的根模塊是 unocss-ui-monorepo，其中包含了以下子模塊：

• example：用于開發(fā)組件時進行實時預(yù)覽，以及作為一個示例項目展示
• demo：用于測試打包后的組件包是否正常（不能用來做開發(fā)時預(yù)覽，因為導(dǎo)入的是打包后的 package）
• @unocss-ui/components：組件的源碼
• @unocss-ui/preset：根據(jù)組件庫自身需求抽取出來的 UnoCSS 的預(yù)設(shè)
• unocss-ui：項目的入口文件，在這里引用 @unocss-ui/components 和 @unocss-ui/preset

這里解釋一下 @unocss-ui/components、@unocss-ui/preset、unocss-ui 三個模塊的關(guān)系

• @unocss-ui/components 是組件庫的源碼，包含 Button.vue、Tag.vue 等文件，可以直接從該模塊中引入組件：

// App.vue
import { UButton } from '@unocss-ui/components'

• @unocss-ui/preset 是封裝的 UnoCSS 預(yù)設(shè)文件，需要搭配其實現(xiàn)組件庫的某些功能，引用方式：

// uno.config.ts
import { presetUnocssUI } from '@unocss-ui/preset' 

• unocss-ui 這個模塊相當(dāng)于是上面兩個模塊的匯總，使得用戶只需要安裝 unocss-ui 模塊即可使用其中的子模塊：

// App.vue
import { UButton } from 'unocss-ui'

// uno.config.ts
import { presetUnocssUI } from 'unocss-ui'

如果你愿意，也可以分別安裝 @unocss-ui/components 和 @unocss-ui/preset 模塊。

順帶一提，子模塊的命名往往都是 @組織名/模塊名，UnoCSS UI 也采用這種設(shè)計。

PNPM Monorepo 常用操作: --filter, -w

PNPM 多模塊下常用的命令：

• --filter 或 -F 后跟模塊名，表示后面的操作是在該模塊進行
• -w 表示在根模塊下進行操作

根模塊下安裝的依賴，子模塊是可以直接使用的，而子模塊之間互相不共享依賴。

請熟悉以下幾個例子：若不清楚 -D、add 等指令含義，先查詢資料補一些 NPM / PNPM 基礎(chǔ)

# 給 example 模塊添加 Vue 依賴
pnpm --filter example add vue

# 給根模塊添加 eslint 開發(fā)依賴
pnpm add -wD eslint

# 在 @unocss-ui/components 模塊下執(zhí)行 pnpm build 操作
# 需要在 @unocss-ui/components 模塊下的 scripts 中配置 build 腳本
pnpm --filter @unocss-ui/components build

# 在 example 模塊下執(zhí)行 pnpm dev 操作
# 需要在 example 模塊下的 scripts 中配置 dev 腳本
pnpm --filter example dev

在根模塊的 package.json 中，配置了一些執(zhí)行腳本：根據(jù)上面的介紹能理解，就是對子模塊的操作在根目錄下進行了匯總。

"scripts": {
	// 在 @unocss-ui/components 下執(zhí)行 pnpm build
    "build:components": "pnpm --filter @unocss-ui/components build",
    "build:preset": "pnpm --filter @unocss-ui/preset build",
    "build:unocss-ui": "pnpm --filter unocss-ui build",
    // 同時執(zhí)行上面 3 個構(gòu)建操作
    "build:all": "pnpm build:preset && pnpm build:components && pnpm build:unocss-ui",

	// 在 example 下執(zhí)行 pnpm dev
    "dev:example": "pnpm --filter example dev",
    "build:example": "pnpm --filter example build",
    "preview:example": "pnpm --filter example preview",
    "dev:demo": "pnpm --filter demo dev",
    "build:demo": "pnpm --filter demo build",
    "preview:demo": "pnpm --filter demo preview",
    "lint": "eslint .",
 	"lint:fix": "eslint --fix ."
}

這樣的好處是每次要操作子模塊，只需要在根目錄下進行操作，而無需不停的 cd 切換到子目錄去執(zhí)行操作。（當(dāng)然進入子模塊后再執(zhí)行該模塊對應(yīng)操作也是可以的）

Monorepo 中的依賴管理

最偷懶的做法是將所有需要的依賴安裝到根模塊中，子模塊中都可以直接使用。

但是我認為還是需要做一些區(qū)分的：

• 在根模塊中安裝一些所有子項目通用的開發(fā)時依賴，如：eslint，typescript，lint-staged 等。
• 在各個子模塊安裝其需要的依賴，例如 demo 和 example 都是 Vue 項目，可以分別安裝 vue、vite 等依賴，而 @unocss-ui/preset 只是個標(biāo)準(zhǔn)的 TypeScript 項目，無需安裝 vue 等依賴。

這樣的好處是你把子模塊視作單獨的項目時也可以清楚的知道它必須有哪些依賴。

當(dāng)然這些并不是強制性的，如果嫌麻煩，全部使用 pnpm -w add xxx 安裝在根模塊就可以了。

項目整體結(jié)構(gòu)

經(jīng)過上面的介紹，其實項目整體結(jié)構(gòu)很簡單，再梳理一下核心內(nèi)容如下：

.
├── demo 			// 子項目 demo: 用于測試組件庫打包的 Vue 項目
├── example 		// 子模塊 example: 用于開發(fā)組件時進行實時預(yù)覽，以及作為一個示例項目展示的 Vue 項目
├── LICENSE
├── package.json 	// 根模塊 unocss-ui-monorepo
├── packages
│   ├── components 	// 子模塊 @unocss-ui/components: 組件庫源碼
│   ├── preset 		// 子模塊 @unocss-ui/preset: 組件庫的 UnoCSS 預(yù)設(shè)
│   └── unocss-ui	// 子模塊 unocss-ui: 組件庫的匯總
├── pnpm-workspace.yaml // 設(shè)置 pnpm monorepo 的子模塊
├── README.md 
├── tsconfig.json
└── // 省略一些配置文件如 .npmrc .eslintrc .gitignore 等

以上是這個項目的整體架構(gòu)，知道了這些可以讓你熟悉項目的結(jié)構(gòu)，從而減少對其的恐懼。但是不可能項目每個文件都由我來介紹的清清楚楚，下面聊聊我認為比較合理的源碼學(xué)習(xí)與查看方式。

對該項目的學(xué)習(xí)應(yīng)該基于以下的原則：

1、從整體到局部，從根模塊到子模塊。首先應(yīng)當(dāng)看項目根目錄下有哪些文件，例如本項目根目錄下有一些我沒有介紹到的文件：.eslintrc，.npmrc，tsconfig.json 等，因為這些并不影響你對項目的整體理解。但是我建議遇到?jīng)]見過的后綴名就百度查詢一下相關(guān)資料，至少需要對其有簡單的概念（是怎么產(chǎn)生的，是否是某個開發(fā)依賴的配置文件，用來做什么的），久而久之的積累下來會發(fā)現(xiàn)：前端其實就那么些個配置文件！

對于每個子模塊中的內(nèi)容，可以不用一開始全部看完，但是需要知道這個模塊是用來干嘛的（這個我已經(jīng)在上面介紹過了）。

2、先從項目的依賴開始看起。package.json 中有非常多的配置項，其中大部分與打包與發(fā)布有關(guān)，初次學(xué)習(xí)應(yīng)該將重點放在 dependencis 和 devDependencies 這兩個配置上，看看是否所有的依賴項都認識，如果遇到不認識的依賴還是需要自行百度。

3、熟悉了整體結(jié)構(gòu)，可以開始看細節(jié)。

基于上面的介紹，項目的整體結(jié)構(gòu)應(yīng)當(dāng)是非常清晰的。

基于原子化 CSS 的組件封裝方式

原子化 CSS 基礎(chǔ)

如果你對原子化 CSS 沒有任何概念，建議先從 TailwindCSS 開始了解并查詢相關(guān)資料，理解它是什么，如何使用的。但是很多人哪怕接觸過原子化 CSS，可能也無法理解它的好處。

在我看來，原子化 CSS 最大的好處其實是 減少人的編碼心智負擔(dān)。

或許你會感到奇怪，一大堆的類似內(nèi)聯(lián)樣式的書寫方式，把代碼寫在 HTML 標(biāo)簽里，怎么會減少人的心智負擔(dān)呢，應(yīng)該是加大了心智負擔(dān)才對呀！如果這樣能減少心智負擔(dān)，那遠古時期就應(yīng)該流行內(nèi)聯(lián)樣式才對！

原子化 VS 內(nèi)聯(lián)樣式

首先原子化 CSS 和內(nèi)聯(lián)樣式是不一樣的，主要體現(xiàn)在它非常的簡短，例如實現(xiàn)這么一個簡單圓圈效果：

<!-- 使用內(nèi)聯(lián)樣式 -->
<div style="width: 1.25rem; height: 1.25rem; background-color: white; border: 2px solid red; border-radius: 100%;" />

<!-- 使用原子化 CSS -->
<div class="m-15 h-15 w-15 border-5 border-red-500 rounded-full bg-white" />

從這個角度來看原子化 CSS 可以認為是內(nèi)聯(lián)樣式的簡寫，毫無疑問比它短很多，樣式越多越明顯。

如果要再給這個圓圈添加一個鼠標(biāo)懸浮效果呢？常規(guī)的內(nèi)聯(lián)樣式無法實現(xiàn)，需要借助選擇器。而在原子化 CSS 中只需要這樣添加以下屬性：hover:bg-gray-100

<div class="m-15 h-15 w-15 border-5 border-red-500 rounded-full bg-white hover:bg-gray-100" />

再比如要給所有子標(biāo)簽添加邊距這么一個簡單的功能：

 <div>
   <span> A </span>
   <span style="margin-left: 16px;"> B </span>
   <span style="margin-left: 16px;"> C </span>
 </div>

使用原子化 CSS 非常簡單：

<div class="space-x-4">
  <span> A </span>
  <span> B </span>
  <span> C </span>
</div>

原子化 CSS 包含了很多功能性極強的 class，因此它其實是內(nèi)聯(lián)樣式的全方面升級。

原子化 VS class

這點我認為沒有太大比較的必要，class 的本質(zhì)是將相同屬性的標(biāo)簽抽象出一份來維護。原子化也可以通過 @apply 實現(xiàn)類似的效果，而且更加靈活：

<div class="flex gap-2">
	<div class="circle border-red-500 ">
	<div class="circle border-blue-500">
	<div class="circle border-green-500">
</div>

.circle {
	@apply m-15 h-15 w-15 border-5 rounded-full bg-white hover:bg-gray-100;
}

毫無疑問相比原生 css 它依舊突出一個簡潔。

在原子化中，@apply 這種用法只是用來輔助，大部分情況下都我都更愿意直接用原子化寫，如果實在是重復(fù)的太多了，就用它。

因為使用 class 很大程度上會有一個困擾，也就是起名問題，原子化可以避免這個問題。

原子化對組件封裝的影響

使用原子化 CSS 可以減少心智負擔(dān)主要體現(xiàn)在以下幾個方面：

• 不用非常頻繁的起類名，只會偶爾需要用到 class
• 雖然類似內(nèi)聯(lián)樣式，但是從寫法上來說比它簡潔太多，視覺效果很好
• 寫某個模塊時不需要額外考慮對其他模塊的影響，只需要注重當(dāng)前內(nèi)容

傳統(tǒng)組件封裝中由于 style 中的內(nèi)容過多，我們一般會抽取出一個單獨的 .css 文件，并且還要盡量想辦法去進行各種抽取有共同點的 class 等操作，這些都是對 “心智負擔(dān)” 的壓力的體現(xiàn)。

使用了原子化的思路減少了巨量的 css，完全可以不考慮以上的操作。并且可以實現(xiàn)一個組件文件盡量減少其外部依賴，即我認為基于原子化 CSS 的組件文件完全可以只由一個 .vue 文件實現(xiàn)其全部內(nèi)容，而不是在設(shè)計層面抽象出各種依賴再引入，這一點也實在是令人有巨大的心智負擔(dān)。

尤其是在看別人的項目的時候，我經(jīng)常會想著看看它的組件中的某一個很小的功能是如何實現(xiàn)的，奈何有些項目實在是將一個模塊拆分的七零八碎，各種引入，令人眼花繚亂，更有甚者會濫用 “自動引入依賴” 這種功能，導(dǎo)致有時候在網(wǎng)頁上看看代碼根本無法理解一些邏輯的源自哪里。

UnoCSS UI 從開發(fā)之初的設(shè)計理念就是：簡單就是最好的，因此：

• 項目中沒有使用那些看起來甜甜的插件（自動導(dǎo)入等）
• 每個組件不過多的依賴于其他東西，所有組件只依靠一個 .vue 便實現(xiàn)其所有功能，如果你只想看某個組件的具體實現(xiàn)，只需要沒有任何壓力的看這個組件的 .vue 就可以了。

例如你可以查看這個 Button.vue 查看一下封裝一個 Button 代碼量其實非常的少 。

因此我認為在理解了整個項目的設(shè)計結(jié)構(gòu)后，剩下的事情就非常簡單了：挑選你感興趣并想學(xué)習(xí)的組件源碼去查看學(xué)習(xí)。

如果是萌新，盡量從比較簡單的組件開始學(xué)習(xí)：Button，Tag，Alert 等。

@unocss-ui/components

基于以上思想來看，其實 @unocss-ui/components 這個子項目的源碼結(jié)構(gòu)非常簡單：

.
├── package.json
├── README.md
├── src
│   ├── components // 組件源碼盡量簡單獨立、無依賴，一個 .vue 實現(xiàn)所有功能
│   │   ├── Alert.vue
│   │   ├── Badge.vue
│   │   ├── Button.vue
│   │   ├── Checkbox.vue
│   │   ├── ...
│   ├── composables // 一些可復(fù)用的函數(shù)
│   └── index.ts // 組件庫入口文件，用于導(dǎo)出所有組件
├── tsconfig.json
├── tsconfig.node.json
├── uno.config.ts
└── vite.config.ts

@unocss-ui/preset

該 preset 沒有做太復(fù)雜的事情，核心就是定義了 safelist 和 theme 兩個屬性。

safelist

就像之前所說的，該組件庫中的組件都是不依賴于外部文件的，其實 preset 的主要意義是設(shè)置一些 safelist。

簡單來說 safelist 解決的問題就是動態(tài)拼接 CSS 失效的問題，例如現(xiàn)在需要封裝一個可以傳入顏色的圓圈組件：

<script setup>
defineProps({
  color: { type: String, default: 'red' },
})
</script>

<template>
  <div
    class="h-15 w-15 border-5 rounded-full bg-white hover:bg-gray-100"
    :class="`border-${color}-500 `"
  />
</template>

<div class="m-15 flex gap-2">
	<Circle color="red" />
	<Circle color="blue" />
	<Circle color="green" />
</div>

以上代碼非常合理，但卻不一定會生效，因為 其中包含字符串拼接的 class，如果想要確保它一定會生效，可以配置 safelist：

// uno.config.ts
safelist: ['bg-red-500', 'bg-blue-500', 'bg-green-500']

因此 @unocss-ui/preset 大部分的配置其實就是針對 safelist，來保證我在代碼中使用動態(tài)拼接 class 是正常的。

theme

參考：https://unocss.dev/config/theme#theme

在項目中，往往都是有 “主題色” 的概念的，UnoCSS UI 預(yù)設(shè)中約定了主題色為以下：

• primary - indigo
• secondary - teal
• accent - pink
• success - green
• info - blue
• warning - yellow
• error - red

import { colors } from 'unocss/preset-mini'

// ...
theme: {
  colors: {
    primary: colors.indigo, // 簡單的使用調(diào)色板顏色，否則需要自行書寫 50, 100, 200, 300 這些數(shù)字對應(yīng)的具體顏色
    secondary: colors.teal,
    accent: colors.pink,
    success: colors.green,
    info: colors.blue,
    warning: colors.yellow,
    error: colors.red,
  },
},
// ...

使用 bg-primary-500 等價于 bg-indigo-500，這樣的好處是當(dāng)你想一鍵切換主題只需要改一行配置即可。

同時，為了讓代碼中使用的更隨心所欲，我們將其與 safelist 結(jié)合，來實現(xiàn)代碼中可以使用動態(tài)拼接成主題色的 class

const types = ['primary', 'secondary', 'accent', 'success', 'info', 'warning', 'error']

// ...
safelist: [
  ...types.map(t => nums.map(n => `bg-${t}-${n}`)).flat(),
  ...types.map(t => nums.map(n => `text-${t}-${n}`)).flat(),
  // ...
],

對于大部分組件來說，完全可以接受一個類型固定的 type，然后動態(tài)的拼接到 bg，text 等 class 中

defineProps<{
  type?: 'success' | 'info' | 'warning' | 'error' | 'primary' | 'secondary' | 'accent'
}()

// ...
<div
	// ....
	:class="text-${type}-700 bg-${type}-500"
>
// ...
</div>

目前的 preset 源碼 也比較簡單，只是遇到了需要動態(tài)拼接的 class 情況才放到這里，后面會按需增加：

import type { Preset } from 'unocss'
import { colors } from 'unocss/preset-mini'

const types = ['primary', 'secondary', 'accent', 'success', 'info', 'warning', 'error']
const nums = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950']
const sizes = ['sm', 'md', 'lg', 'full']

export function presetUnocssUI(): Preset {
  return {
    name: '@unocss-ui/preset',
    safelist: [
      ...types.map(t => nums.map(n => `bg-${t}-${n}`)).flat(),
      ...types.map(t => nums.map(n => `border-${t}-${n}`)).flat(),
      ...types.map(t => nums.map(n => `text-${t}-${n}`)).flat(),
      ...types.map(t => nums.map(n => `focus:ring-${t}-${n}`)).flat(),
      ...types.map(t => nums.map(n => `focus:border-${t}-${n}`)).flat(),
      ...types.map(t => `border-r-${t}-500`),
      ...sizes.map(s => `rounded-${s}`),
    ],
    theme: {
      colors: {
        primary: colors.indigo,
        secondary: colors.teal,
        accent: colors.pink,
        success: colors.green,
        info: colors.blue,
        warning: colors.yellow,
        error: colors.red,
      },
    },
  }
}

順帶一提，@unocss-ui/preset 不僅用于該組件庫，也可以單獨使用。

只要在你的項目中引用了該 preset，即可以使用 bg-primary-500 這種帶有主題風(fēng)格的顏色 class。

當(dāng)你想覆蓋 UnoCSS UI 默認的主題配置時，也需要引入其并重新覆蓋 theme 即可：

import { defineConfig, presetUno } from 'unocss'
import { colors } from 'unocss/preset-mini'
import { presetUnocssUI } from 'unocss-ui'

export default defineConfig({
  theme: {
    colors: {
      primary: colors.red, // 覆蓋 primary
      secondary: colors.blue, // 覆蓋 secondary
      accent: colors.green, // 覆蓋 accent
    },
  },
  presets: [
    presetUno(),
    presetUnocssUI(), // 引入該 preset
  ],
})

組件庫的開發(fā)與測試

example

example 預(yù)覽地址：https://cherryful.github.io/unocss-ui/

example 這個子項目目前的意義主要在于開發(fā)時的調(diào)試，以及本身作為一個示例項目來展示組件。

只需要通過以下指令運行起來，然后就可以直接修改 @unocss-ui/components 中的源碼，就能進行實時的開發(fā)調(diào)試。

git clone https://github.com/cherryful/unocss-ui
cd unocss-ui
pnpm install

pnpm dev:example

demo

demo 這個子項目是用來測試組件庫打包效果的，當(dāng)你開發(fā)完 @unocss-ui/components 或 @unocss-ui/preset 后可以看看打包后的效果是否正常：

pnpm build:all

pnpm dev:demo

基于 Github Actions 的自動部署

基于 Github Acions 的自動部署非常簡單，主要是參考根目錄下 .github/workflows/deploy.yml 文件。

只需要在 .github/workflows 下建立配置文件，則推送到 Github 會自動觸發(fā)其中的行為。

該組件庫項目比較龐大，如果需要一個簡單點的 Github Actions 示例，可以參考 vue3-template 這個項目。

大部分時候，看懂該項目中的 deploy.yml，其他項目基本復(fù)制過去改改就可以了。

具體知識可參考 Github Actions 官方文檔，或查詢其他博客。

推送 npm 包

由于該項目的推送者是我，因此其他人執(zhí)行推送操作是沒有用的，這里簡單介紹推送 npm 包相關(guān)知識。

1、需要去 https://www.npmjs.com/ 注冊一個 npm 賬號。

2、正常的推送流程就是在某個模塊的根目錄下執(zhí)行以下指令：

• 項目推送的名稱、版本號、搜索關(guān)鍵字、主頁等信息，都在 package.json 中配置

npm login

# 常規(guī)方法
npm publish 

# pnpm 項目盡量使用 
pnpm publish

因為我們使用了 PNPM 的工作區(qū)的相關(guān)概念，

• 比如在 package.json 中出現(xiàn) "@unocss-ui/preset": "workspace:*"
• 需要使用 pnpm publish 在推送時自動更新工作區(qū)的版本號為線上最新版
• 即在線上會變成 "@unocss-ui/preset": "0.0.1-alpha.3" vevs

詳情參考 PNPM Workspace 文檔

其他生態(tài)

基于 UnoCSS UI 的開源項目

由于目前 unocss-ui 才剛剛起步，因此目前生態(tài)全靠作者及其團隊維護：

unocssui-example：UnoCSS UI 項目中的 example 子項目，動態(tài)調(diào)試 + 文檔

預(yù)覽地址：https://cherryful.github.io/unocss-ui/#/general/getting-started

vue3-template：一個輕量級的 Vue3 啟動模板，自帶 Unocss UI

預(yù)覽地址：https://cherryful.github.io/vue3-template/

rabbit-admin：一個基于 Golang 和 Vue3 的輕量級全棧后臺管理模板

預(yù)覽：

TODO

• 考慮一種發(fā)展方向：將組件的 JS 部分抽取成 Hook 的模式，可以寫不同的 HTML 適配相同功能的組件庫。
• 基于 VitePress 生成靜態(tài)的文檔（雖然目前有動態(tài)調(diào)試文檔，當(dāng)時還是需要一個靜態(tài)文檔的）
• 考慮基于 UnoCSS UI 產(chǎn)出更多開源項目，同時維護升級組件本身

這篇文章想講的東西還有很多（后面還會更新），并且組件庫本身也在快速開發(fā)與迭代中，非常歡迎各位同學(xué)參與建設(shè)，學(xué)習(xí)源碼，對我提出意見。

如果覺得本文能幫上你，或者認為這個項目還不錯，歡迎給個 Star。

Github 地址：https://github.com/cherryful/unocss-ui

到了這里，關(guān)于基于原子化思想的 Vue3 組件庫 UnoCSS UI的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！