【Nuxt3】plugins目录介绍和nuxt3插件的用法

您所在的位置：网站首页 › vue滤镜推荐 › 【Nuxt3】plugins目录介绍和nuxt3插件的用法

【Nuxt3】plugins目录介绍和nuxt3插件的用法

2024-07-11 17:02| 来源: 网络整理| 查看: 265

简言

记录下nuxt3plugins的使用方法。

plugins

在创建 Vue 应用程序时，Nuxt 会自动读取 plugins/ 目录中的文件并加载它们。一个文件就相当于一个插件。

plugin 注册

plugins/ 目录里面的所有插件都是自动注册的，无需单独添加到 nuxt.config 中。可以在文件名中使用 .server 或 .client 后缀，以便只在服务器或客户端加载插件。

只有目录顶层的文件（或任何子目录中的索引文件）才会自动注册为插件。

-| plugins/ ---| foo.ts // ok ---| bar/ -----| baz.ts // no -----| foz.vue // no -----| index.ts // ok

只有 foo.ts 和 bar/index.ts 会被注册。要在子目录中添加插件，可以使用 nuxt.config.ts 配置文件中的插件选项：

export default defineNuxtConfig({ plugins: [ '~/plugins/bar/baz', '~/plugins/bar/foz' ] }) 注册顺序

您可以通过在文件名前加上 "按字母顺序 "编号来控制插件的注册顺序。

plugins/ | - 01.myPlugin.ts | - 02.myOtherPlugin.ts

在本例中，02.myOtherPlugin.ts 将能够访问 01.myPlugin.ts 注入的任何内容。

以字符串形式排序的，

创建一个plugin

需要借助defineNuxtPlugin创建一个插件，它接收一个返回插件对象的函数或这个插件配置对象：

export default defineNuxtPlugin(nuxtApp => { // Doing something with nuxtApp })

或者：

export default defineNuxtPlugin({ name: 'my-plugin', enforce: 'pre', // or 'post' 运行时机 async setup (nuxtApp) { // this is the equivalent of a normal functional plugin }, hooks: { // You can directly register Nuxt app runtime hooks here 'app:created'() { const nuxtApp = useNuxtApp() // do something in the hook } }, env: { // Set this value to `false` if you don't want the plugin to run when rendering server-only or island components. islands: true } }) plugin配置对象 name — 插件名称。parallel — 是否为并行插件，为true后，下一个的插件不会等当前插件执行结束再加载。dependsOn — 依赖插件数组，如果一个插件在运行前需要等待一个其他插件执行，可以将该插件的名称添加到 dependsOn 数组中。setup（） — 插件内容函数，nuxtApp为参数，可以使用 nuxtApp 做一些事情，还可以返回一个可合并nuxtApp的对象。hooks — 可以在此处直接注册 Nuxt 应用程序运行时钩子函数。env — 插件环境设置对象。插件类型

在导入插件时，如果插件有类型，会自动键入到模板和useNuxtApp中，如果有其他自定义的，可以在声明文件上合并混入：例如，index.d.ts中：

declare module '#app' { interface NuxtApp { $hello (msg: string): string } } declare module 'vue' { interface ComponentCustomProperties { $hello (msg: string): string } } export {} vue插件

如果你想使用 Vue 插件，可以在nuxt插件中导入，使用nuxtApp.vueApp.use()导入。 nuxtApp.vueApp是一个vue应用实例对象，可以使用use、provide、directive、component等方法。

示例使用mavonEditor插件， import mavonEditor from 'mavon-editor' import "mavon-editor/dist/css/index.css" /** * vue 使用mavon-editor */ export default defineNuxtPlugin({ name: 'my-markdown', enforce: 'pre', // or 'post' async setup(nuxtApp) { // this is the equivalent of a normal functional plugin nuxtApp.vueApp.use(mavonEditor) }, hooks: { // You can directly register Nuxt app runtime hooks here 'app:created'() { const nuxtApp = useNuxtApp() // do something in the hook } }, env: { // Set this value to `false` if you don't want the plugin to run when rendering server-only or island components. islands: false } }) 创建一个自定义插件 /* * @Date: 2024-03-18 13:59:01 * @LastEditors: zhangsk * @LastEditTime: 2024-03-18 14:36:35 * @FilePath: \my-blog-nuxt\plugins\aa.ts * @Label: Do not edit */ export default defineNuxtPlugin((nuxtApp) => { // nuxtApp.vueApp.use({ install(app) { app.config.globalProperties.$mouse = { open: () => { console.log('open') }, close: () => { console.log('close') }, } }, }) return { provide: { /** * 这个一个函数 */ mouse: () => { console.log('这是mouse事件'); }, }, } })

添加声明：

declare module '#app' { interface NuxtApp { $mouse(): void } } declare module "vue" { interface ComponentCustomProperties { $mouse: () => void } }

使用：

const nuxtApp = useNuxtApp(); nuxtApp.$mouse(); 结语

普通的vue3项目依赖都是在createApp返回的实例中调用use()函数加载。而在nuxt3中则需要借用nuxt插件对象中的nuxtApp.vueApp.use()加载。结束了。

【本文地址】

【Nuxt3】plugins目录介绍和nuxt3插件的用法

【Nuxt3】plugins目录介绍和nuxt3插件的用法

今日新闻

推荐新闻