Vue-全局组件注册

亦凉 2023-07-21 05:25 36阅读 0赞

一般情况，需要使用组件的场景：

<template>
        <BaseInput  v-model="searchText"  @keydown.enter="search"/>
        <BaseButton @click="search">
            <BaseIcon name="search"/>
        </BaseButton>
    </template>
    
    <script>
        import BaseButton from './baseButton'
        import BaseIcon from './baseIcon'
        import BaseInput from './baseInput'
        export default {
          components: { BaseButton, BaseIcon, BaseInput }
        }
    </script>

我们写了一堆基础UI组件，然后每次我们需要使用这些组件的时候，都得先import，然后声明components，很繁琐，这里可以使用统一注册的形式

### **优化** ###

我们需要借助一下神器webpack，使用 require.context() 方法来创建自己的模块上下文，从而实现自动动态require组件。这个方法需要3个参数：要搜索的文件夹目录、是否还应该搜索它的子目录、以及一个匹配文件的正则表达式。 我们在components文件夹添加一个叫componentRegister.js的文件，在这个文件里借助webpack动态将需要的基础组件统统打包进来。

/src/components/componentRegister.js

import Vue from 'vue'
    /**
    * 首字母大写
    * @param str 字符串
    * @example heheHaha
    * <a href="http://www.jobbole.com/members/wx1409399284">@return</a> {string} HeheHaha
    */
    function capitalizeFirstLetter(str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
    
    /**
    * 对符合'xx/xx.vue'组件格式的组件取组件名
    * @param str fileName
    * @example abc/bcd/def/basicTable.vue
    * <a href="http://www.jobbole.com/members/wx1409399284">@return</a> {string} BasicTable
    */
    
    function validateFileName(str) {
      return /^S+.vue$/.test(str) &&
        str.replace(/^S+/(w+).vue$/, (rs, $1) => capitalizeFirstLetter($1))
    }
    
    const requireComponent = require.context('./', true, /.vue$/)
    // 找到组件文件夹下以.vue命名的文件，如果文件名为index，那么取组件中的name作为注册的组件名
    requireComponent.keys().forEach(filePath => {
      const componentConfig = requireComponent(filePath)
      const fileName = validateFileName(filePath)
      const componentName = fileName.toLowerCase() === 'index'
        ? capitalizeFirstLetter(componentConfig.default.name)
        : fileName
      Vue.component(componentName, componentConfig.default || componentConfig)
    })

这里文件夹结构：

> components
> 
> │ componentRegister.js
> 
> ├─BasicTable
> 
> │ BasicTable.vue
> 
> ├─MultiCondition
> 
> │ index.vue

这里对组件名做了判断，如果是index的话就取组件中的name属性处理后作为注册组件名，所以最后注册的组件为：multi-condition、basic-table 最后我们在main.js中import ‘components/componentRegister.js’，然后我们就可以随时随地使用这些基础组件，无需手动引入了~

--------------------

[juejin.im/post/5ae02f39518825672f198ac2][juejin.im_post_5ae02f39518825672f198ac2]

[juejin.im_post_5ae02f39518825672f198ac2]: http://juejin.im/post/5ae02f39518825672f198ac2