自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

【Nuxt3從入門到實(shí)戰(zhàn)】巧用Nuxt插件機(jī)制,擴(kuò)展強(qiáng)化Nuxt的利器!

開發(fā) 前端
本篇我們研究nuxt3的插件系統(tǒng)。通過(guò)插件系統(tǒng),我們可以獲取nuxt實(shí)例以及vue實(shí)例,這樣我們有機(jī)會(huì)擴(kuò)展nuxt或vue,比如引入一個(gè)UI庫(kù)。

[[438473]]

前言

大家好,我是村長(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è)插件:

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

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

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

  1. import { defineNuxtPlugin } from '#app' 
  2.  
  3. export default defineNuxtPlugin(() => { 
  4.   return { 
  5.     provide: { 
  6.       hello: () => 'world' 
  7.     } 
  8.   } 
  9. }) 

使用這個(gè)helper,index.vue:

  1. // 會(huì)自動(dòng)加上$前綴 
  2. const { $hello } = useNuxtApp(); 
  3. 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)入:

  1. npm i vue-devui 

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

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

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

  1. <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)格,僅供大家可以參考!
  1. import { NButton } from 'naive-ui' 
  1. <n-button>button</n-button> 
  • vant是可以的,不過(guò)暫時(shí)不知道樣式如何按需引入,編寫如下插件:可以看一下有贊官方有計(jì)劃做一個(gè)next3+vant的demo
  1. import { defineNuxtPlugin } from "#app"
  2. import { Button } from 'vant'
  3. import 'vant/lib/index.css' 
  4. // 這里如果引入 vant/lib/button/index.css是沒有效果的 
  5. export default defineNuxtPlugin((nuxtApp) => { 
  6.   nuxtApp.vueApp.use(Button) 
  7. }); 
  • 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

 

責(zé)任編輯:武曉燕 來(lái)源: 村長(zhǎng)學(xué)前端
相關(guān)推薦

2021-11-29 14:18:05

Nuxt3靜態(tài)Nuxt2

2023-06-14 20:58:05

2023-01-26 00:56:41

Nuxt.js存儲(chǔ)庫(kù)開發(fā)

2023-06-24 22:12:23

2021-08-31 15:53:48

Nuxt 開箱服務(wù)

2023-05-18 09:00:39

Nuxt類型Nuxt 2

2024-01-31 12:13:22

2019-05-06 14:51:46

Node框架前端

2023-08-27 09:08:45

CLI工具Web

2023-06-24 23:11:07

2011-06-09 17:26:17

Qt 插件 API

2023-05-12 07:31:58

NuxtVue.js

2019-01-22 15:28:04

Javascriptvue.jsnuxt.js

2023-07-26 10:21:26

服務(wù)端組件客戶端

2022-11-17 06:17:41

Nuxt 3.0.0Vue

2021-06-22 06:52:46

Vite 插件機(jī)制Rollup

2023-10-20 10:11:00

Nuxt 3.8前端

2009-12-11 10:29:03

PHP插件機(jī)制

2010-09-08 14:39:35

2022-09-30 15:46:26

Babel編譯器插件
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)