Nuxt 插件使用与模块化

上面例子中，如果希望插件模块使用 export 方式导出函数，并且在 Nuxt.js 应用中使用它，你可以采取以下步骤。

定义插件

/**

* 插件模块使用 export 方式导出函数

*/

export function myPluginFunction() {

console.log('demoExport.js：This is a plugin function')

}

使用插件

//页面局部引入

import { myPluginFunction } from '~/plugins/demoExport'

//引入方式2

//const { myPluginFunction } = require('~/plugins/demoExport.js');

//页面调用方法

created() {

myPluginFunction()

},

关于 export 局部引入

这里使用了局部引入的方式，export 建议都使用局部引入。

如果继续用全局注册方式，那需要额外按如下方式配置：

// plugins/demo.js

export default ({ app }, inject) => {

// 定义你的方法

const myPluginFunction = () => {

console.log('This is a plugin function');

};

// 将方法注入到 Vue 实例中，作为 $myPluginFunction

inject('myPluginFunction', myPluginFunction);

// 也可以注入到 Vue 实例上

Vue.prototype.$myPluginFunction = myPluginFunction;

};

相反，示例一的Vue.prototype，使用全局和局部方式都可以，但建议前者，因为局部引入也是所有都生效。

Vue.prototype和 inject的区别，可以详见GPT。

区别与使用场景

使用范围：

Vue.prototype 直接修改 Vue 的原型链，所有 Vue 实例都可以访问这些方法或属性。这种方式适用于需要在整个应用中都可以访问的功能。

inject 是 Nuxt.js 提供的插件机制的一部分，适用于在 Nuxt.js 应用中注入全局方法或属性。它不仅限于 Vue 实例，还可以在服务器端和客户端共享数据或方法。

灵活性：

inject 更加灵活，可以根据不同的上下文注入不同的内容，比如基于请求的配置、服务端数据等。

Vue.prototype 更适用于简单的全局方法或属性，不需要根据上下文动态变化的场景。

Nuxt.js 兼容性：

inject 是 Nuxt.js 原生支持的功能，推荐在 Nuxt.js 应用中使用。

Vue.prototype 可以在任何 Vue 应用中使用，包括 Nuxt.js，但需要手动处理插件的加载顺序和作用范围。

总结

使用 Vue.prototype：当你需要在所有 Vue 实例中添加简单的全局方法或属性时。

使用 inject：当你在 Nuxt.js 应用中，需要根据不同的上下文注入方法或属性时。

关于 import 和 require

虽然可以使用 require，但在现代 JavaScript 和 Nuxt.js 项目中，推荐使用 ES6 的 import 语法。这是因为 import 语法是模块化标准的一部分，并且与 Vue 和 Nuxt 的生态系统更加兼容。

使用 import 比 require 更推荐，因为它是 ES6 标准的模块系统，并且更适合 Vue 和 Nuxt 的生态系统。

关于 Vue.prototype 与局部引入

如果你在插件中使用了 Vue.prototype 来定义全局方法，那么这个方法会对整个应用生效，即使你在页面中局部引入了插件。这样做会污染全局命名空间，可能会导致意想不到的结果。因此，尽量避免在插件中定义全局方法。

总结陈词

此篇博文补充了Nuxt中的插件用法，进而带出模块化的一些知识点。

后续一些博文，也会针对专项的一些知识点进行扩展和专题补充。

💗 加油！程序猿！