在vue-cli3.0中利用webpack实现自动化注册组件

在vue-cli中使用自定义的组件时，每次都先import组件进来然后再注册一下才可以用。使用多个组件就要反复的import加注册，别的页面用到相同的组件同样也需要这样做。当然用Vue.component()在mian.js全局注册的话，是会少写一些import等代码。

但是用webpack提供的require.content()就可以不需要自己每次使用组件都要手动注册，因为webpack可以帮你自动的全局注册组件，调用时直接使用就行

步骤

首先在组件目录下新建一个js文件（global.js）

在vue-cli3.0中利用webpack实现自动化注册组件

在vue-cli里可以使用webpack提供的require.content()获取文件的上下文

const requireComponent = require.context('.',false,/\.vue$/)

用keys获取到保存文件名称的数组

requireComponent.keys() //输出 ["./Form.vue", "./kInput.vue", "./kItem.vue", "./test.vue"]

在vue-cli3.0中利用webpack实现自动化注册组件

requireComponent 这里面本身返回的是一个函数（上图），是通过keys()才能将文件名取出来

遍历数组并在全局注册组件

requireComponent(组件名) 传入组建名称就能获取到这个组件里面的配置，例如data，methos，computed等

requireComponent.keys().forEach(filename => {
    //获取组件配置
    const componentConfig = requireComponent(filename);
    //截取出组件名称
    filename = filename.replace(/^\.\//,'').replace(/.vue$/,'')
    //全局注册组件
    Vue.component(componentName,componentConfig.default || componentConfig)
});

最后在main.js中引入global.js即可

import Vue from 'vue'
import './components/global'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在vue-cli3.0中利用webpack实现自动化注册组件

步骤

相关推荐