自动注册组件

自动注册组件

• 传统模式

我们平时可能这样引入注册组件。每次都得需要在头部引入，然后注册，最后在模板上使用。

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

• 优化快捷后

创建一个名为globalRC.js文件，假设我们这里与组件平级，即存放在组件文件夹中。

目录结构如：

-src
--components
---component1.vue
---globalRC.js

globalRC.js:

import Vue from 'vue'

function changeStr (str){
    return str.charAt(0).toUpperCase() + str.slice(1);
}

const requireComponent = require.context('./',false,/\.vue$/); // './'操作对象为当前目录

requireComponent.keys().forEach(element => {
    const config = requireComponent(element);

    const componentName = changeStr(
        element.replace(/^\.\//,'').replace(/\.\w+$/,'')
    )
    
    Vue.component(componentName, config.default || config)
});

然后，我们需要在main.js文件中引入。

import './components/globalRC.js'

最后，我们只需要在模板直接使用就可以了。

<template>
  <div id="app">
    <Component1 />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

注意，require.context是webpack的一个API，所以，需要基于webpack环境才可以使用。