社畜自救指南02：自动化引入公共组件

前言

当项目里面公共组件很多的时候，我们需要把项目一个个import进来，然后手动注册，略显麻烦。

// 举个🌰
import {App} from 'vue'
import ElContainer from './Container.vue'
import ElHeader from './Header.vue'
import ElFooter from './Footer.vue'
import ElAside from './Aside.vue'
import ElMain from './Main.vue'

export default {
  install(app:App){
    app.component(ElContainer.name,ElContainer)
    app.component(ElHeader.name,ElHeader)
    app.component(ElFooter.name,ElFooter)
    app.component(ElAside.name,ElAside)
    app.component(ElMain.name,ElMain)
  }
}

自动化注册

解决方案：新建一个专门放置公共组件的文件夹，然后通过脚本自动导入。

API介绍

require.context(directory,useSubdirectories,regExp)

directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名

编写脚本

在component文件夹中新建element-component文件夹。存放自定义组件。注意组件的文件名需要和以下代码的正则匹配。例如el-aside 在创建一个components-loader.js文件

const requireComponent = require.context(
  // 其组件目录的相对路径.element-component为存放公共组件的文件夹。
  './element-component',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /el-(.*?)\.(vue|js)$/
)

export default {
  install(Vue: VueConstructor) {
    requireComponent.keys().forEach(fileName => {
      const componentConfig = requireComponent(fileName)
      const componentName = upperFirst(
        // 获取和目录深度无关的文件名
        camelCase(
          fileName
            ?.split('/')
            ?.pop()
            ?.replace(/\.\w+$/, '')
        )
      )
      // 全局注册组件
      Vue.component(
        componentName,
        // 如果这个组件选项是通过 `export default` 导出的，
        // 那么就会优先使用 `.default`，
        // 否则回退到使用模块的根。
        componentConfig.default || componentConfig
      )
    })
  }
}

使用

• 首先需要在main.js文件里面引入components-loader.js文件
• 在使用的时候无需注册，可以直接使用如

// 这边取决于组件的命名和上面代码的正则
<el-aside></aside>