Nuxt - 将自己封装的函数方法、自定义指令、第三方库挂载到全局 Vue 实例上（后续通过 this 全局访问）

前言

在传统 Vue 开发中，我们自己定义好的函数方法或库都通过 main.js 入口文件，使用 vue.prototype.xx 进行挂载，然后便可所有页面全局 this.xx 进行使用。

但是在 Nuxt.js 中，没有 main.js ，很多朋友便不知道如何操作了，

其实，该框架提供了 plugins 属性，该配置项便可轻松的完成挂载。

---

本文将以挂载全局自定义指令为例，想挂载函数方法或库道理一样。

第一步

该步骤就是定义好您要挂载到全局 Vue 实例上的方法或指令。

首先，您需要在项目 plugins 文件夹下，新建一个 directives.js 文件（命名随意）。

// 注意: 必须通过 export 导出
import vue from 'vue'
export const preventReClick = vue.directive('preventReClick', {
  inserted: function (el) {
    el.addEventListener('click', () => {
      console.log('按钮被点击了！')
    })
  }
})
1
2
3
4
5
6
7
8
9

第二步

该步骤就是将自定义指令通过 Nuxt 提供的方法，进行全局挂载。

打开项目根目录 nuxt.config.js 配置文件，

在 plugins 配置项，加入以下代码：

'@/plugins/directives'
1

整体如下图所示：

测试

在任意页面，写入以下代码。

<button v-preventReClick>自定义指令</button>
1

写在后面

如果是第三方库或插件，一般都是通过 use 函数进行，

用 Ant Design Vue 组件库举例：

import Vue from 'vue'
import Antd from 'ant-design-vue/lib'
Vue.use(Antd)
1
2
3