require.context 教你告别屎山注册

长的还行

于 2021-12-28 14:35:52 发布

阅读量189

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45121138/article/details/122189981

版权

平时写项目如果对一个页面有很多种组件要进行引入，一般都是这样引入
在这里插入图片描述
这无异于造成一大堆屎山，（但是秉着我的代码别人改不了，老板只能加工资的原则），引入一种新型注册方式

require.context

详细的教程可以百度，这边教你怎么用
这是我的组件目录
在这里插入图片描述
require.context()主要是三个参数（文件夹路径，是否查询子目录，什么结尾的文件）
直接上代码

const components={}
console.log(component.keys())
component.keys().forEach(path => {
  const name = path.split('/')[2].replace(/\.vue$/,'')
  const componentConfig=component(path)
  components[name]=componentConfig.default||componentConfig
})
console.log(components)bash
在这里插入代码片

在这里插入图片描述
在layout的路径的文件每个文件名都要设置name

这样name就是子组件的名字了