前言
在传统
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('按钮被点击了!')
})
}
})
第二步
该步骤就是将自定义指令通过
Nuxt
提供的方法,进行全局挂载。
打开项目根目录 nuxt.config.js
配置文件,
在 plugins
配置项,加入以下代码:
'@/plugins/directives'
整体如下图所示:
测试
在任意页面,写入以下代码。
<button v-preventReClick>自定义指令</button>
写在后面
如果是第三方库或插件,一般都是通过 use
函数进行,
用 Ant Design Vue
组件库举例:
import Vue from 'vue'
import Antd from 'ant-design-vue/lib'
Vue.use(Antd)