一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。

Nuxt3-学习之路 15，插件-defineNuxtPlugin

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的乱七八糟的 知识点。

要说插件这个词，我还是从 chrome 浏览器的各种插件，才知道插件是个什么东西。

之后的 vscode 插件，webpack 插件，都是对我们提供方便的。那么 Nuxt3 的插件又是什么呢？下面来学习下。

首先是目录，我们需要在与 app.vue 同级的目录下创建一个 plugins 的目录，在这个目录下面创建的文件，都会被注册成插件。

| plugins/
--| my-plugins.ts
| app.vue

my-plugins.ts 文件里面的内容是

export default defineNuxtPlugin((nuxtApp) => {
  console.log('nuxtApp', nuxtApp)
})

可以看到有一个 nuxtApp 的一个参数，这个参数里面放置的就是各种实例对象，这里简单截个图看一下

这里可以看到我们的 vueAPP，playload，provide 之类的实例

我们这里可以使用一下 provide。改造一下 my-plugins.ts 为一下内容

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: () => 'world'
    }
  }
})

在根路由中进行引入来使用。注意引入的时候，是需要在这个 hello 前面加上*$*符号，因为 hello 是一个函数名，所以我们使用的时候加上一个括号。

const { $hello } = useNuxtApp()

可以看到我们的结果是输出的，这个是简单的使用，后续我们可以借助 nuxtApp 里面的 vueApp 这个实例，进行扩展我们的 Nuxt3。

使用方法为 nuxtApp.vueApp.use(xxx)，可以进行 UI 框架的引入。

学习了 Nuxt3 的插件 defineNuxtPlugin，这个参数的简单使用，但是它的能力可以通过 vueApp，可以得到更强的扩展。