Vue的第三方組件庫非常多，最優(yōu)秀的就是Element-Plus和Ant Design，當(dāng)然還有其他大廠出品的KPI項(xiàng)目，我們打算使用大佬推薦過的一個(gè)UI庫-NaiveUI。這個(gè)庫的引入和安裝非常簡單，官網(wǎng)上有詳細(xì)的說明。

NaiveUI安裝與使用

pnpm install naive-ui

很多組件庫都提供了全局引入和按需引入等配置方式，我們當(dāng)然都推薦使用按需引入，按需引入有兩種方式，一種是在頁面手動(dòng)引入需要使用的庫，另一種自動(dòng)按需引入，使用unplugin-auto-import和unplugin-vue-components庫，雖然這種方式使用起來方便，但是按需引入的時(shí)候加載會(huì)比較慢，所以我們推薦使用手動(dòng)引入的方式。

配置NaiveUI

安裝完NaiveUI我們需要進(jìn)行全局配置，這樣才能使用它的主題和通知類的組件。在官方文檔的全局化配置頁面查看：

<n-config-provider :theme="theme">
  <app />
</n-config-provider>

NConfigProvider會(huì)配置主題、國際化等，我們一般把它配置的app.vue中，結(jié)果如下：

<n-config-provider :theme="theme === 'dark' ? darkTheme : lightTheme" :locale="zhCN" :date-locale="dateZhCN">
  <n-global-style />
  <router-view></router-view>
</n-config-provider>

其中NGlobalStyle是為了把樣式添加到全局，也就是body上，這樣對(duì)于一些不包裹在NConfigProvider之內(nèi)組件也能響應(yīng)主題變化，例如使用Teleport把組件掛載在body上。

除了全局配置以外，還有message、dialog、notification、loadingBar需要配置，配置的方式有兩種，一種是在app.vue中像NConfigProvider一樣添加，然后在組件中使用useXxxx來使用，但是這種方式只能在組件內(nèi)使用，如果在非組件內(nèi)，例如store和router就會(huì)有問題了。因此官方還提供了一個(gè)全局使用的方式，使用全局API，這種方式就會(huì)脫離上下文，脫離上下文以后就不會(huì)受n-xxx-provider的限制了，但是同時(shí)也不能跟隨主題變化，需要我們自己去處理，使用方式如下：

import { createDiscreteApi } from 'naive-ui';

const { message, dialog, notification, loadingBar } = createDiscreteApi([
  'message',
  'dialog',
  'notification',
  'loadingBar'
]);
export { message, dialog, notification, loadingBar };

安裝Less

css是前端必須使用的，但是標(biāo)準(zhǔn)css的用法太過單一，不夠靈活，因此衍生出很多第三方的css庫，最流行的就是less和sass，這里我們選擇less。

pnpm install -D less

less的使用非常簡單，在.vue文件中style標(biāo)簽上加上lang="less"，就可以在style中使用less書寫css了。

安裝unocss

UnoCSS 是一個(gè)原子化 CSS 引擎，而不是一個(gè)框架，受 Windi CSS, Tailwind CSS, Twind 啟發(fā)，但是它更快、更小。

pnpm install -D unocss @unocss/preset-uno @unocss/preset-icons @unocss/preset-attributify @iconify-json/ic

unocss自身不帶css樣式，由你自己編寫規(guī)則，比如m-4，你可以指定它為margin: 4px也可以指定它為margin: 40px，但是我們當(dāng)然不會(huì)把所有的都自己寫一遍，那太麻煩了，因此unocss也提供了一些預(yù)設(shè)的css樣式模板。比較常用的就是上面安裝的三種：

• @unocss/preset-uno：它作為unocss的默認(rèn)預(yù)設(shè)，提供了流行的實(shí)用程序優(yōu)先框架 Tailwind CSS、Windi 的通用超集 CSS、Bootstrap、Tachyons 等。添加了這個(gè)預(yù)設(shè)，我們就可以像使用Tailwind CSS那樣去使用unocss了。
• @unocss/preset-attributify：對(duì)其它預(yù)設(shè)和規(guī)則提供 屬性模式，可以像使用屬性那樣在HTML中使用css。
• @unocss/preset-icons：可以讓我們通過css類名來使用各種圖標(biāo)，Iconify 作為圖標(biāo)的數(shù)據(jù)源，因此當(dāng)安裝了此庫后，還需要安裝對(duì)應(yīng)的圖集庫： @iconify-json/*，在對(duì)應(yīng)的Iconify官網(wǎng)可以看到所有支持的圖集。

• 我們可以選擇自己喜歡的圖標(biāo)去安裝，當(dāng)然也可以安裝所有的圖標(biāo)：@iconify/json，但是它有130M，我想應(yīng)該沒有人會(huì)這么使用它吧。在這里我們使用Google Material Icons。

• 打開上面頁面的時(shí)候，查看一下地址欄：https://icones.js.org/collection/ic，記住后面的ic，這個(gè)圖集的庫名稱為：@iconify-json/ic。圖標(biāo)的使用語法是：i+圖集縮寫+圖標(biāo)名，例如：i-ic-baseline-add-circle。

引入unocss

在vite.config.ts中引入

import Unocss from 'unocss/vite'
import { presetUno, presetAttributify, presetIcons } from 'unocss'

plugins: [
  vue(),
  Unocss({
    presets: [
        presetUno(), 
        presetAttributify(), 
        presetIcons({scale: 1.2, warn: true})],
  }),
]

在main.ts中引入uno.css。

import 'uno.css'

在VSCode中我們可以通過安裝插件：UnoCSS，來獲得智能提示，增強(qiáng)編程體驗(yàn)。