【Nuxt3從入門到實(shí)戰(zhàn)】巧用Nuxt插件機(jī)制,擴(kuò)展強(qiáng)化Nuxt的利器!
前言
大家好,我是村長(zhǎng),歡迎關(guān)注我的公眾號(hào)村長(zhǎng)學(xué)前端和B站Young村長(zhǎng)
上一篇寫了Nuxt3狀態(tài)共享,本篇我們研究nuxt3的插件系統(tǒng)。通過(guò)插件系統(tǒng),我們可以獲取nuxt實(shí)例以及vue實(shí)例,這樣我們有機(jī)會(huì)擴(kuò)展nuxt或vue,比如引入一個(gè)UI庫(kù)。
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í)例提供一些額外的幫助方法,我們可以通過(guò)編寫一個(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中可以通過(guò)插件訪問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ò)展
引入其他組件庫(kù)嘗試結(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不過(guò)這個(gè)解決方案關(guān)閉了vite,不是我喜歡的風(fēng)格,僅供大家可以參考!
- import { NButton } from 'naive-ui'
- <n-button>button</n-button>
- vant是可以的,不過(guò)暫時(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ò)過(guò)!
https://space.bilibili.com/480140591/channel/seriesdetail?sid=456250
Young村長(zhǎng)的個(gè)人空間-嗶哩嗶哩:https://b23.tv/rfg5t64