vue 动态注册组件,vue全局注册
本文主要介绍了Vue自动注册全局组件脚本，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
全局组件自动注册代码vue组件注册全局注册使用require.context实现前端工程自动化(js脚本实现全局组件自动注册)基本思路和使用场景
自动化注册全局组件
今天有一个想法，vue的一些组件，可能是全球通用的。我觉得应该用main.js写
Vue.component(名称，实例)
然后是势在必行，写出来也不好看。我认为，可以有一个功能，例如，可以指定组件下文件的加载，并自动完成全局注册。想起来很帅。
放代码
导出函数autoLoadingGlobalComponent() {
const require component=require . context(
//其组件目录的相对路径
./组件，
//查询其子目录？
假的，
//与vue后缀文件名匹配的文件
/\.vue$/
)
//遍历得到的文件名，依次全局注册。
requireComponent.keys()。forEach(文件名={
//获取组件配置(实例)
const component config=require component(文件名)
//获取组件的PascalCase名称(例如：MYHeader)
const componentName=_。上层优先(
//获取驼峰命名
_.茶包(
//剥掉`。/`开头和扩展名例如：文件名末尾的/food-header.vue-foodheader。
fileName.replace(/^\.\/(.*)\.\w $/， $1 )
)
)
//全局注册组件
组件(
组件名，
//如果此组件选项通过导出默认值导出，
//然后`。将首先使用默认值，
//否则退回到用法模块的根。
componentConfig.default 组件配置
)
})
}
vue组件注册全局注册
使用require.context实现前端工程自动化(实现全局组件自动化注册的js脚本)
vue的组件注册分为全局注册和局部注册，使用上的基本区分如下：
本脚本参考了vue官网文档，并在js脚本代码和注释上做了一些调整，便于阅读理解和使用。因为官网文档总是很珍贵，有些地方不那么好理解和使用，所以这篇文章可以算是官网的进化版。
全局注册:注册后全球通用。您可以直接使用它，而无需导入组件和向component注册组件。如果注册的全局组件未被使用，webpack在打包时仍会打包组件的内容。(个人在这里，如果不使用组件，为什么要注册呢？所以很多时候，这个装箱单是可以忽略的。当然，如果保留组件以备后用，也可以在本地注册)。
局部注册:编写vue文件中需要使用的组件。需要使用时，导入文件。Component注册组件，并在使用时命名组件，然后就可以像使用标签一样使用组件了。(本地注册和全局注册的区别在于，如果您没有使用本地注册的组件，则在打包webpack时，文件不会被打包。如果项目中还有组件，但以后可能会用到，那么可以使用本地注册。)
事不宜迟，开始代码；前面一段是对这个脚本使用的基本介绍，实用方可以跳过(建议大家都了解一下)。
基本思路
一个webpack api，通过执行require.context函数获得特定的上下文，主要用于实现模块的自动导入。在前端项目中，如果从一个文件夹中导入很多模块，可以使用这个api，它会遍历文件夹中的指定文件，然后自动导入，这样就不需要每次都显式调用导入模块。
使用场景
以前需要全局导入注册组件时，使用require.context函数进行批量注册，使得组件注册自动化。也就是说，新的组件需要全局注册，只有在自定义文件夹中创建它们才能全局使用。但是，在创建它们时，您应该注意自己的自动化文件中搜索文件的匹配规则，否则，如果它们不符合自定义的搜索规则，则无法自动注册为全局组件。
注意：* *所有需要全局注册的组件都必须在指定的文件夹中，否则脚本无法遍历你的组件，所以无法自动注册使用。
当项目为webpack打包时，使用自动全局注册会更友好：
基本代码如下：
从“vue”导入vue
constraquirecomponent=require . context(//Web Pack的api，函数方法，匹配文件。//查看当前目录下的文件(找到所需文件的相对路径)
False，//不查看子文件
/.vue$///匹配正则表达式的方式，只查看带后缀的文件。vue。
)
console.log(必需组件)
//循环获取的文件，循环过程中可以处理文件名。
requireComponent.keys()。forEach((文件名)={
console.log(1)
//获取组件配置(组件模板)
const component config=require component(文件名)
//要注册的组件的名称，获取的组件文件名将被处理。
const componentName=文件名。replace(/^\.\/_/, )。替换(/\。\w $/，)。拆分(。/)。联接(“”)
Console.log(componentName，“基本组件文件获取测试”)
//将组件注册到循环中的全局，
Vue.component(componentName，//根据文件名处理后将注册到全球的组件名。
component config . default component config
})
当文件正确打印出处理后的组件名时，意味着自动组件注册基本完成，然后将自动组件注册的js文件引入main.js
从“vue”导入Vue
从导入应用程序。/App.vue
从导入路由器。/路由器
从导入存储。/商店
从“element-ui”导入ElementUI
导入 element-ui/lib/theme-chalk/index . CSS
“导入”。/components/component/_ globals //通过直接向全球引入共享，可以实现组件的自动注册。
Vue.config.productionTip=false
Vue.use(ElementUI)
新Vue({
路由器，
店，
render: h=h(App)
}).$ mount(“# app”)
注意：在团队中工作时，您应该注意自动化文件中指定的组件文件夹以及匹配文件名的规则。
以下是具体文件位置和使用效果截图：
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。