[[438473]]

前言

大家好，我是村長，歡迎關注我的公眾號村長學前端和B站Young村長

上一篇寫了Nuxt3狀態共享，本篇我們研究nuxt3的插件系統。通過插件系統，我們可以獲取nuxt實例以及vue實例，這樣我們有機會擴展nuxt或vue，比如引入一個UI庫。

plugins目錄

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

創建插件

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

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

插件用例：自動提供幫助方法

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

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

使用這個helper，index.vue：

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

插件用例：訪問Vue實例

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

我們引入vue-devui試一下，前面我們曾經試圖自動導入失敗了，這里我們手動導入：

npm i vue-devui 

創建一個插件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); 
}); 

使用組件測試一下：

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

擴展

引入其他組件庫嘗試結果：

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

import { NButton } from 'naive-ui' 

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

• vant是可以的，不過暫時不知道樣式如何按需引入，編寫如下插件：可以看一下有贊官方有計劃做一個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官方有個starter項目：

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

只可惜也是全量引入，按需引入沒交代，也明確了自動引入暫時支持不了。

配套視頻

我專門錄制了Nuxt3從入門到實戰系列視頻，愛看視頻學習的小伙伴不要錯過!

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

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