建站
咨詢
售后
建站咨詢
新聞中心
Vue的第三方組件庫(kù)非常多，最優(yōu)秀的就是Element-Plus和Ant Design，當(dāng)然還有其他大廠出品的KPI項(xiàng)目，我們打算使用大佬推薦過(guò)的一個(gè)UI庫(kù)-NaiveUI。這個(gè)庫(kù)的引入和安裝非常簡(jiǎn)單，官網(wǎng)上有詳細(xì)的說(shuō)明。
為德保等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及德保網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、德保網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
NaiveUI安裝與使用
pnpm install naive-ui很多組件庫(kù)都提供了全局引入和按需引入等配置方式，我們當(dāng)然都推薦使用按需引入，按需引入有兩種方式，一種是在頁(yè)面手動(dòng)引入需要使用的庫(kù)，另一種自動(dòng)按需引入，使用unplugin-auto-import和unplugin-vue-components庫(kù)，雖然這種方式使用起來(lái)方便，但是按需引入的時(shí)候加載會(huì)比較慢，所以我們推薦使用手動(dòng)引入的方式。
配置NaiveUI
安裝完NaiveUI我們需要進(jìn)行全局配置，這樣才能使用它的主題和通知類的組件。在官方文檔的全局化配置頁(yè)面查看：
NConfigProvider會(huì)配置主題、國(guó)際化等，我們一般把它配置的app.vue中，結(jié)果如下：
其中NGlobalStyle是為了把樣式添加到全局，也就是body上，這樣對(duì)于一些不包裹在NConfigProvider之內(nèi)組件也能響應(yīng)主題變化，例如使用Teleport把組件掛載在body上。
除了全局配置以外，還有message、dialog、notification、loadingBar需要配置，配置的方式有兩種，一種是在app.vue中像NConfigProvider一樣添加，然后在組件中使用useXxxx來(lái)使用，但是這種方式只能在組件內(nèi)使用，如果在非組件內(nèi)，例如store和router就會(huì)有問(wèn)題了。因此官方還提供了一個(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的用法太過(guò)單一，不夠靈活，因此衍生出很多第三方的css庫(kù)，最流行的就是less和sass，這里我們選擇less。
pnpm install -D lessless的使用非常簡(jiǎn)單，在.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/icunocss自身不帶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：可以讓我們通過(guò)css類名來(lái)使用各種圖標(biāo)，Iconify 作為圖標(biāo)的數(shù)據(jù)源，因此當(dāng)安裝了此庫(kù)后，還需要安裝對(duì)應(yīng)的圖集庫(kù)： @iconify-json/*，在對(duì)應(yīng)的Iconify官網(wǎng)可以看到所有支持的圖集。
- 我們可以選擇自己喜歡的圖標(biāo)去安裝，當(dāng)然也可以安裝所有的圖標(biāo)：@iconify/json，但是它有130M，我想應(yīng)該沒有人會(huì)這么使用它吧。在這里我們使用Google Material Icons。
- 打開上面頁(yè)面的時(shí)候，查看一下地址欄：https://icones.js.org/collection/ic，記住后面的ic，這個(gè)圖集的庫(kù)名稱為：@iconify-json/ic。圖標(biāo)的使用語(yǔ)法是：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中我們可以通過(guò)安裝插件：UnoCSS，來(lái)獲得智能提示，增強(qiáng)編程體驗(yàn)。
分享題目：手把手搭建Vue3中后臺(tái)框架-NaiveUI、Less、Unocss
網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/cdgeopj.html
