vue引入多个指令文件

单个指令引入，在main.js（入口JS文件）中引入你已经写好的指令文件，可以省略文件后缀：

// main.js

import focus from 'xxx/directive'

多个指令引入

Vue.use((Vue) => {

  ((requireContext) => {

    const arr = requireContext.keys().map(requireContext);

    (arr || []).forEach((directive) => {

      directive = directive.__esModule && directive.default ? directive.default : directive;

      Object.keys(directive).forEach((key) => {

        Vue.directive(key, directive[key]);

      });

    });

  })(require.context('../directives', false, /^\.\/.*\.js$/));

});

这里用到了require.context函数，require.context是webpack中，用来创建自己的（模块）上下文。 require.context函数接收三个参数：

1、要搜索的文件夹目录

2、是否还应该搜索它的子目录

3、以及一个匹配文件的正则表达式

我们搜索directives目录下的所有js文件，遍历装载指令。

巴特西

vue引入多个指令文件

最新文章

热门文章