一劳永逸的组件注册

最新推荐文章于 2024-04-08 14:13:27 发布

原创最新推荐文章于 2024-04-08 14:13:27 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

通过在Vue项目中利用Webpack的require.context()方法，可以创建一个动态加载组件的机制。在components文件夹的global.js中，批量引入并注册所有.vue组件，避免手动引入的繁琐。在main.js中引入global.js，即可全局使用这些高频组件，提高开发效率。

一劳永逸的组件注册

通常在组件使用前，需要引入后再注册，但如果高频组件多了，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？

其实，我们可以借助一下webpack的require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。

我们先在components文件夹（这里面都是些高频组件）添加一个叫global.js的文件，在这个文件里使用require.context 动态将需要的高频组件统统打包进来，然后在main.js文件中引入global.js的文件。

//  global.js文件
import Vue from 'vue'
function changeStr (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('./', false, /\.vue$/)
// 查找同级目录下以vue结尾的组件
const install = () => {
  requireComponent.keys().forEach(fileName => {
    let config = requireComponent(fileName)
    console.log(config) // ./child1.vue 然后用正则拿到child1
    let componentName = changeStr(
      fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    )
    Vue.component(componentName, config.default || config)
  })
}
export default {
  install // 对外暴露install方法
}

最后我们就可以随时随地在页面中使用这些高频组件，无需再手动一个个引入了。