[[438473]]

前言

大家好，我是村長，歡迎關(guān)注我的公眾號(hào)村長學(xué)前端和B站Young村長

上一篇寫了Nuxt3狀態(tài)共享，本篇我們研究nuxt3的插件系統(tǒng)。通過插件系統(tǒng)，我們可以獲取nuxt實(shí)例以及vue實(shí)例，這樣我們有機(jī)會(huì)擴(kuò)展nuxt或vue，比如引入一個(gè)UI庫。

plugins目錄

Nuxt3會(huì)自動(dòng)讀取plugins目錄下的文件并加載它們。我們可以在文件名上使用.server或者.client前綴使他們僅作用于服務(wù)端或者客戶端。

創(chuàng)建插件

使用defineNuxtPlugin()注冊(cè)一個(gè)插件：

import { defineNuxtPlugin } from '#app' 
// 唯一的參數(shù)是nuxt實(shí)例 
export default defineNuxtPlugin(nuxtApp => { 
  // Doing something with nuxtApp 
}) 

插件用例：自動(dòng)提供幫助方法

一個(gè)常見應(yīng)用是給NuxtApp實(shí)例提供一些額外的幫助方法，我們可以通過編寫一個(gè)插件，返回一個(gè)對(duì)象，在里面設(shè)置providekey，比如：

import { defineNuxtPlugin } from '#app' 
 
export default defineNuxtPlugin(() => { 
  return { 
    provide: { 
      hello: () => 'world' 
    } 
  } 
}) 

使用這個(gè)helper，index.vue：

// 會(huì)自動(dòng)加上$前綴 
const { $hello } = useNuxtApp(); 
console.log($hello()) 

插件用例：訪問Vue實(shí)例

如果想要擴(kuò)展Vue，我們通常要訪問Vue實(shí)例，引入Vue插件。在nuxt3中可以通過插件訪問nuxtApp.vueApp.use(xxx)做到。

我們引入vue-devui試一下，前面我們?cè)?jīng)試圖自動(dòng)導(dǎo)入失敗了，這里我們手動(dòng)導(dǎo)入：

npm i vue-devui 

創(chuàng)建一個(gè)插件vue-devui-plugin.ts：

import { defineNuxtPlugin } from "#app"; 
import { Button } from "vue-devui"; 
import 'vue-devui/button/style.css' 
 
export default defineNuxtPlugin((nuxtApp) => { 
  nuxtApp.vueApp.use(Button); 
}); 

使用組件測(cè)試一下：

<d-button>按鈕</d-button> 

擴(kuò)展

引入其他組件庫嘗試結(jié)果：

• naive-ui按官方方式在SFC中直接使用組件 引入就報(bào)錯(cuò)，參見：https://github.com/TuSimple/naive-ui/issues/1427又找到了這個(gè)回答：https://github.com/TuSimple/naive-ui/issues/636#issuecomment-945990935不過這個(gè)解決方案關(guān)閉了vite，不是我喜歡的風(fēng)格，僅供大家可以參考!

import { NButton } from 'naive-ui' 

<n-button>button</n-button> 

• vant是可以的，不過暫時(shí)不知道樣式如何按需引入，編寫如下插件：可以看一下有贊官方有計(jì)劃做一個(gè)next3+vant的demo

import { defineNuxtPlugin } from "#app"; 
import { Button } from 'vant'; 
import 'vant/lib/index.css' 
// 這里如果引入 vant/lib/button/index.css是沒有效果的 
export default defineNuxtPlugin((nuxtApp) => { 
  nuxtApp.vueApp.use(Button) 
}); 

• element-plus官方有個(gè)starter項(xiàng)目：

https://github.com/element-plus/element-plus-nuxt-starter

只可惜也是全量引入，按需引入沒交代，也明確了自動(dòng)引入暫時(shí)支持不了。

配套視頻

我專門錄制了Nuxt3從入門到實(shí)戰(zhàn)系列視頻，愛看視頻學(xué)習(xí)的小伙伴不要錯(cuò)過!

https://space.bilibili.com/480140591/channel/seriesdetail?sid=456250

Young村長的個(gè)人空間-嗶哩嗶哩：https://b23.tv/rfg5t64