📢 大家好，我是 【战神刘玉栋】，有10多年的研发经验，致力于前后端技术栈的知识沉淀和传播。 💗
🌻 CSDN入驻不久，希望大家多多支持，后续会继续提升文章质量，绝不滥竽充数，欢迎多多交流。👍
写在前面的话
前不久整理的博文《前端攻城狮 · 从 Nuxt 前端框架开篇》，大致介绍了Nuxt框架的用法，有点蜻蜓点水的意味，不会很详细。另一篇博文《程序猿学会 Vue · 基础与实战篇》中也提到了import、export的一些内容，这边针对插件和模块化做一个补充说明。
Nuxt 插件全局注册
定义插件
import Vue from 'vue'
/**
* 添加全局方法，页面或组件可以直接this调用该方法
*/
Vue.prototype.$myDemoHandle = function () {
console.log('全局方法，页面通过this调用~')
}
/**
* 添加全局组件，页面或组件可以直接使用
*/
Vue.component('MyDemoComponent', {
template: '<div>这是插件引入的全局组件~</div>'
})
注册插件
plugins: [
{ src: '~/plugins/demo', mode: 'client' }
],
使用插件
<template>
<div class="page">
<my-demo-component />
</div>
</template>
created() {
console.log(this.$myDemoHandle)
},
在 Nuxt.js 中，通过 nuxt.config.js 注册的插件会自动在应用启动时加载和初始化，使其在整个应用中可用。页面和组件中可以直接使用这些已注册的插件，而不需要再次导入和初始化。
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中的插件用法，进而带出模块化的一些知识点。
后续一些博文，也会针对专项的一些知识点进行扩展和专题补充。
💗 加油！程序猿！
