vue 指令批量引入

Question

像components那样，在项目目录中创建一个directives的文件夹，存放指令文件；
一个指令为一个文件，在main.js文件引入可以实现全局引入;
虽然很多情况是按需引入，但是想知道如何批量全局引入？

Answer 1

import Vue from 'vue'

// https://webpack.js.org/guides/dependency-management/#require-context
const requireDirective = require.context(
  // 指令目录
  './directives',
  // 不查找子目录
  false,
  // js文件
  /.+\.js$/
)

// 对每个配匹的文件
requireDirective.keys().forEach(fileName => {
  // 请求指令模块
  const directiveConfig = requireDirective(fileName)

  const directiveName = fileName
        // 移除开始的 './'
        .replace(/^\.\//, '')
        // 移除文件扩展
        .replace(/\.\w+$/, '');
 
  // 注册指令, 文件名作为指令名
  Vue.directive(directiveName, directiveConfig.default || directiveConfig)
})

Answer 2

批量全局引入指令，可以通过forEach遍历Vue.directive注册

import * as directives from './directives'
// 注册指令
Object.keys(directives).forEach(k => Vue.directive(k, directives[k]))

这篇文章可以帮助你了解全局指令封装
https://segmentfault.com/a/11...