单个指令引入,在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文件,遍历装载指令。
posted on
浙公网安备 33010602011771号