📢 大家好,我是 【战神刘玉栋】,有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
中的插件用法,进而带出模块化的一些知识点。
后续一些博文,也会针对专项的一些知识点进行扩展和专题补充。
💗 加油!程序猿!