Javascript Vue.js-将自定义指令作为ES6模块导入

我有一个相当具体的问题

我通过rails webpacker在我的rails应用程序中使用vue，要使用vue组件，我必须在布局中放置一个javascript包标记，该标记引用一个javascript文件，该文件反过来呈现vue组件，您可以想象，总的来说，这种方法让我做了很多变通，但我还剩下一个vue自定义指令

单击外部

，我必须将它添加到我的每个vue组件生成器中，例如，在

filter products.js中

从“Vue”导入Vue；
从“../../views/filter products”导入过滤器产品；
var element=document.getElementById（“过滤器产品”）；
const props=JSON.parse（element.getAttribute（“props”）；
Vue.指令（'点击外部'{
绑定：函数（el、绑定、vNode）{
//绑定逻辑
},
解除绑定：函数（el，绑定）{
//解绑逻辑
}
});
if（元素！=null）{
新Vue({
render：（h）=>h（filterProducts，{props}），
}).$mount（元素）；
}

自定义指令代码实际上很大，因此我想做但不确定如何做的是以下两件事之一：


在ES6模块中拥有该自定义指令的批量，并在此处导入该指令，然后直接使用它
创建包含此自定义指令的Vue原型，并将其导入，而不是从“Vue”

导入

Vue

这两种方法中有哪一种更好？我将如何实现这些目标？谢谢
 创建一个名为
directives
的文件夹，并为每个指令创建一个文件，使您的代码更具组织性和可维护性，尤其是在团队中：

import Vue from 'vue';

const directiveName = {
    inserted: function(el, binding) {},
    update: function(el, binding) {},
};

export default directiveName;
Vue.directive('directiveName', directiveName);//optional


然后将其导入任何组件，如：

import directiveName from 'path-to-directives-folder/directives/directiveName'

然后按如下方式使用：

data(){
  ...
},
directives:{directiveName}

非常感谢。但是，我想在我做新Vue（）的部分使用它，就像我的问题一样，这可能吗？工作正常，只是将用法改为
Vue.directive（“单击外部”，单击外部）
其中
ClickOut
是导入的文件名directiveName只是一个示例，该指令可以导入vue应用程序中的任何位置（main.js和组件