美文网首页Vue.js专区Vue开发
vue 引入公共组件之 require.context

vue 引入公共组件之 require.context

作者: 码路芽子 | 来源:发表于2019-05-15 10:29 被阅读0次

    require.context是webpack中,用来创建自己的(模块)上下文

    webpack 会在打包构建代码中解析它

    require.context接收三个参数:

    1. 要搜索的文件夹目录
    2. 是否搜索它的子目录
    3. 以及一个匹配文件的正则表达式
    require.context('../views/components', true, /\.vue/)
    

    在我们项目中,有很多自定义的全局组件,使用这个将会非常方便,下面举例说明

    image

    我这里只写了两个,当我们有一百个的时候,如果手动全局引入。。。

    image

    这将是惨不忍睹的

    所以,投机取巧的我们,利用了 require.context

    import Vue from 'vue'
    // 自定义组件
    const requireComponents = require.context('../views/components', true, /\.vue/)
    // 打印结果
    // 遍历出每个组件的路径
    requireComponents.keys().forEach(fileName => {
      // 组件实例
      const reqCom = requireComponents(fileName)
      // 截取路径作为组件名
      const reqComName = fileName.split('/')[1]
      // 组件挂载
      Vue.component(reqComName, reqCom.default || reqCom)
    })
    
    

    一段话搞定一整个文件夹的组件,是否很方便

    相关文章

      网友评论

        本文标题:vue 引入公共组件之 require.context

        本文链接:https://www.haomeiwen.com/subject/dziuaqtx.html