手把手搭建Vue3中后臺框架-NaiveUI、Less、Unocss
Vue的第三方組件庫非常多，最優秀的就是Element-Plus和Ant Design，當然還有其他大廠出品的KPI項目，我們打算使用大佬推薦過的一個UI庫-NaiveUI。這個庫的引入和安裝非常簡單，官網上有詳細的說明。
NaiveUI安裝與使用
pnpm install naive-ui很多組件庫都提供了全局引入和按需引入等配置方式，我們當然都推薦使用按需引入，按需引入有兩種方式，一種是在頁面手動引入需要使用的庫，另一種自動按需引入，使用unplugin-auto-import和unplugin-vue-components庫，雖然這種方式使用起來方便，但是按需引入的時候加載會比較慢，所以我們推薦使用手動引入的方式。
配置NaiveUI
安裝完NaiveUI我們需要進行全局配置，這樣才能使用它的主題和通知類的組件。在官方文檔的全局化配置頁面查看：
<n-config-provider :theme="theme">
<app />
</n-config-provider>NConfigProvider會配置主題、國際化等，我們一般把它配置的app.vue中，結果如下：
<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上，這樣對于一些不包裹在NConfigProvider之內組件也能響應主題變化，例如使用Teleport把組件掛載在body上。
除了全局配置以外，還有message、dialog、notification、loadingBar需要配置，配置的方式有兩種，一種是在app.vue中像NConfigProvider一樣添加，然后在組件中使用useXxxx來使用，但是這種方式只能在組件內使用，如果在非組件內，例如store和router就會有問題了。因此官方還提供了一個全局使用的方式，使用全局API，這種方式就會脫離上下文，脫離上下文以后就不會受n-xxx-provider的限制了，但是同時也不能跟隨主題變化，需要我們自己去處理，使用方式如下：
import { createDiscreteApi } from 'naive-ui';
const { message, dialog, notification, loadingBar } = createDiscreteApi([
'message',
'dialog',
'notification',
'loadingBar'
]);
export { message, dialog, notification, loadingBar };安裝Less
css是前端必須使用的，但是標準css的用法太過單一，不夠靈活，因此衍生出很多第三方的css庫，最流行的就是less和sass，這里我們選擇less。
pnpm install -D lessless的使用非常簡單，在.vue文件中style標簽上加上lang="less"，就可以在style中使用less書寫css了。
安裝unocss
UnoCSS 是一個原子化 CSS 引擎，而不是一個框架，受 Windi CSS, Tailwind CSS, Twind 啟發，但是它更快、更小。
pnpm install -D unocss @unocss/preset-uno @unocss/preset-icons @unocss/preset-attributify @iconify-json/icunocss自身不帶css樣式，由你自己編寫規則，比如m-4，你可以指定它為margin: 4px也可以指定它為margin: 40px，但是我們當然不會把所有的都自己寫一遍，那太麻煩了，因此unocss也提供了一些預設的css樣式模板。比較常用的就是上面安裝的三種：
- @unocss/preset-uno：它作為unocss的默認預設，提供了流行的實用程序優先框架 Tailwind CSS、Windi 的通用超集 CSS、Bootstrap、Tachyons 等。添加了這個預設，我們就可以像使用Tailwind CSS那樣去使用unocss了。
- @unocss/preset-attributify：對其它預設和規則提供 屬性模式，可以像使用屬性那樣在HTML中使用css。
- @unocss/preset-icons：可以讓我們通過css類名來使用各種圖標，Iconify 作為圖標的數據源，因此當安裝了此庫后，還需要安裝對應的圖集庫： @iconify-json/*，在對應的Iconify官網可以看到所有支持的圖集。
- 我們可以選擇自己喜歡的圖標去安裝，當然也可以安裝所有的圖標：@iconify/json，但是它有130M，我想應該沒有人會這么使用它吧。在這里我們使用Google Material Icons。
- 打開上面頁面的時候，查看一下地址欄：https://icones.js.org/collection/ic，記住后面的ic，這個圖集的庫名稱為：@iconify-json/ic。圖標的使用語法是：i+圖集縮寫+圖標名，例如：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，來獲得智能提示，增強編程體驗。
