建站
咨詢
售后
建站咨詢
新聞中心
Vue的第三方組件庫非常多，最優(yōu)秀的就是Element-Plus和Ant Design，當然還有其他大廠出品的KPI項目，我們打算使用大佬推薦過的一個UI庫-NaiveUI。這個庫的引入和安裝非常簡單，官網(wǎng)上有詳細的說明。
為德保等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及德保網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、德保網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
NaiveUI安裝與使用
pnpm install naive-ui很多組件庫都提供了全局引入和按需引入等配置方式，我們當然都推薦使用按需引入，按需引入有兩種方式，一種是在頁面手動引入需要使用的庫，另一種自動按需引入，使用unplugin-auto-import和unplugin-vue-components庫，雖然這種方式使用起來方便，但是按需引入的時候加載會比較慢，所以我們推薦使用手動引入的方式。
配置NaiveUI
安裝完NaiveUI我們需要進行全局配置，這樣才能使用它的主題和通知類的組件。在官方文檔的全局化配置頁面查看：
NConfigProvider會配置主題、國際化等，我們一般把它配置的app.vue中，結(jié)果如下：
其中NGlobalStyle是為了把樣式添加到全局，也就是body上，這樣對于一些不包裹在NConfigProvider之內(nèi)組件也能響應(yīng)主題變化，例如使用Teleport把組件掛載在body上。
除了全局配置以外，還有message、dialog、notification、loadingBar需要配置，配置的方式有兩種，一種是在app.vue中像NConfigProvider一樣添加，然后在組件中使用useXxxx來使用，但是這種方式只能在組件內(nèi)使用，如果在非組件內(nèi)，例如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 啟發(fā)，但是它更快、更小。
pnpm install -D unocss @unocss/preset-uno @unocss/preset-icons @unocss/preset-attributify @iconify-json/icunocss自身不帶css樣式，由你自己編寫規(guī)則，比如m-4，你可以指定它為margin: 4px也可以指定它為margin: 40px，但是我們當然不會把所有的都自己寫一遍，那太麻煩了，因此unocss也提供了一些預(yù)設(shè)的css樣式模板。比較常用的就是上面安裝的三種：
- @unocss/preset-uno：它作為unocss的默認預(yù)設(shè)，提供了流行的實用程序優(yōu)先框架 Tailwind CSS、Windi 的通用超集 CSS、Bootstrap、Tachyons 等。添加了這個預(yù)設(shè)，我們就可以像使用Tailwind CSS那樣去使用unocss了。
- @unocss/preset-attributify：對其它預(yù)設(shè)和規(guī)則提供 屬性模式，可以像使用屬性那樣在HTML中使用css。
- @unocss/preset-icons：可以讓我們通過css類名來使用各種圖標，Iconify 作為圖標的數(shù)據(jù)源，因此當安裝了此庫后，還需要安裝對應(yīng)的圖集庫： @iconify-json/*，在對應(yīng)的Iconify官網(wǎng)可以看到所有支持的圖集。
- 我們可以選擇自己喜歡的圖標去安裝，當然也可以安裝所有的圖標：@iconify/json，但是它有130M，我想應(yīng)該沒有人會這么使用它吧。在這里我們使用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，來獲得智能提示，增強編程體驗。
當前題目：手把手搭建Vue3中后臺框架-NaiveUI、Less、Unocss
轉(zhuǎn)載來于：http://www.5511xx.com/article/cdgeopj.html
