白票vue高级组件注册技巧--前端工程自动化

279 阅读1分钟

当一个项目出现重复多次是用的组件时,每个页面都要用improt来引入 会显得很繁琐。这个时候可以在components文件夹下面创建一个index.js文件 通过使用require.context()来获取到文件 并通过vue.component()来全局注册

值得一提的是 require.context()接受三个参数 第一个:读取文件的路径,第二个:是否遍历子目录,第三个则为匹配的规则ps:匹配.vue文件 /.vue$/ 通过keys()来遍历 require.context()读取到的文件,因为require.context()获取到的是./xxx.vue 格式的,所以我们还需定义一个方法,将头部的./ 和尾部的.vue 去除,获取到中间部分。由于编码习惯 注册的组件开头是要大写的,所以还要定义一个方法让首字母大写。

需要注意的是在注册完成后需要在main.js里面引入 并且use一下的

上图有一个小问题 正则错了应该是 replace(/.\w+$/,'')

main.js

完成之后在页面上用的时候就可以不用improt了,可以直接拿来用。