前端攻城狮 · Nuxt 插件与模块化

📢 大家好，我是 【战神刘玉栋】，有10多年的R&D经验，致力于前后端技术栈的知识沉淀和传播。 💗
🌻 CSDN入驻不久，希望大家多支持󿀌后续会继续提高文章质量󿀌永远不要弥补这个数字，欢迎多交流。👍

文章目录。

• • 写在前面的话。
  • Nuxt 全局注册插件。
  • Nuxt 使用和模块化插件。
  • 总结陈词。

写在前面的话。

前不久整理的博文《前端攻城狮子》 · 从 Nuxt 前端框架开始，大致介绍了Nuxt框架的用法，有点蜻蜓点水的意思，不会很详细。另一篇博文《程序猿学会》 Vue · import还在基础和实战篇中提到、export的一些内容，对插件和模块化进行补充说明。

Nuxt 全局注册插件。

定义插件。

import。Vue。 from。'vue'/** * 添加全局方法󿀌页面或组件可以直接调用此方法 */。Vue。.。prototype。.。$myDemoHandle。=function。(。)。{ 。myPluginFunction。(。)。}。,

关于 export 局部引入。
本文采用局部引入࿰的方式c;export 建议使用局部介绍。
如果继续使用全局注册方式，需要按以下方式额外配置：

// plugins/demo.jsexport 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和pe inject的区别，可详见GPT。

Vue.prototype和pe inject的区别，GPT详见

区分和使用场景使用范围：Vue.prototype 直接修改 Vue 原型链，所有 Vue 实例可以访问这些方法或属性。该方法适用于需要在整个应用程序中访问的功能。inject 是 Nuxt.js 部分提供的插件机制，适用于在 Nuxt.js 全局方法或属性注入到应用中。它不仅限于 Vue 实例，数据或方法也可以在服务器端与客户端共享。灵活性：inject #xfff0更灵活c;不同的内容࿰可以根据不同的上下文注入c;例如，基于请求的配置、服务端数据等。Vue.prototype 更适合简单的全局方法或属性，场景不需要根据上下文进行动态变化。Nuxt.js 兼容性：inject 是 Nuxt.js 本地支持的功能，推荐在 Nuxt.js 在应用中使用。Vue.prototype 可以在任何 Vue 在应用中使用󿀌包括 Nuxt.js，但是插件的加载顺序和作用范围需要手动处理。总结使用 Vue.prototype：当你需要一切的时候 Vue 在实例中添加简单的全局方法或属性。使用 inject：当你在 Nuxt.js ࿰在应用中c;根据不同的上下文注入方法或属性。
关于 import 和 require。
虽然可以使用 require，但在现代 JavaScript 和 Nuxt.js 项目中，推荐使用 ES6 的 import 语法。这是因为 import 语法是模块化标准的一部分，并且与 Vue 和 Nuxt 生态系统更加兼容。

使用 import 比 require 更推荐，因为它是 ES6 标准模块系统，并且更适合 Vue 和 Nuxt 生态系统。
关于 Vue.prototype 局部介绍。

如果你在插件中使用它 Vue.prototype 定义全局方法，这种方法将对整个应用程序有效󿀌即使在页面中局部引入插件。这将污染全球命名空间，可能会导致意想不到的结果。所以，尽量避免在插件中定义整体方法。

总结陈词。补充了这篇博文。Nuxt。
插件用法，然后带出一些模块化的知识点。
后续的一些博文󿀌还将扩展和补充一些专项知识点。