广州 营销型网站建设,临邑网站开发,圣都家装公司简介,怎样做网贷网站自定义插件 方式一#xff1a;
app.vue
// 创建插件(在app.vue中创建全局可以使用 而在某个页面中创建只有该页面可以使用)
// 方式一#xff1a;
const nuxtApp useNuxtApp();
nuxtApp.provide(formDate, () {return 2023-12-12;
})
nuxtAp…自定义插件 方式一
app.vue
// 创建插件(在app.vue中创建全局可以使用 而在某个页面中创建只有该页面可以使用)
// 方式一
const nuxtApp useNuxtApp();
nuxtApp.provide(formDate, () {return 2023-12-12;
})
nuxtApp.provide(version, 1.0.0);
console.log(nuxtApp.$formDate(), nuxtApp.$version, nuxtApp.$formatPrice(100.1234))方式二
~/plugins/price.ts
// vue 实例创建的时候 插件会被注册
export default defineNuxtPlugin((nuxtApp) {return {provide: {formatPrice: (price: number) {return price.toFixed(2)}}}
})如果只是允许客户端使用则需要命名为 prive.client.ts 然后使用 if (process.client) {console.log(nuxtApp.$formatPrice(100.1234))
}插件注册顺序文件加数字来确定比如1.prive.ts 。 生命周期
App 生命周期 hooks ~/plugins/lifecycle.ts
export default defineNuxtPlugin((nuxtApp) {// 生命周期nuxtApp.hook(app:rendered, () {console.log(app:rendered)})nuxtApp.hook(app:created, () {console.log(app:created)})nuxtApp.hook(app:mounted, () {console.log(app:mounted)})nuxtApp.hook(app:error, () {console.log(app:error)})
})或者在 app.vue 中使用也是同样的道理。
const nuxtApp useNuxtApp();
nuxtApp.hook(app:rendered, () {console.log(app:rendered)
})
nuxtApp.hook(app:created, () {console.log(app:created)
})
nuxtApp.hook(app:mounted, () {console.log(app:mounted)
})
nuxtApp.hook(app:error, () {console.log(app:error)
})这里会有一个问题在 vue 文件中 setup 语法糖下 只能执行 setup 之后的钩子所以建议将生命写到 plugins 中。 组件生命周期
用法和上述一样。 由于服务端只会执行 beforeCreate created setup 钩子所以需要注意不要在他们里面使用副作用函数比如定时器否则难以清除所以需要将含有副作用的函数放在 mounted 中。
