当前位置: 首页 > Web前端 > vue.js

vue如何优雅的引入高频组件

时间:2023-04-01 12:54:19 vue.js

首先组件的目录如下:index.js:importVuefrom'vue'functionchangeStr(str){returnstr.charAt(0).toUpperCase()+str.slice(1);}functionparseVarNameByFilePath(path,ext='.vue'){path=path.split('/');path=path[path.length-1];//返回路径if(!path.endsWith(ext))returnnull;如果(!/[_$a-zA-Z]/.test(path[0]))返回null;returnpath.slice(0,-ext.length);}//通过webpackAPI获取vue文件constrequireComponent=require.context('./',true,/\.vue$/);console.log(requireComponent.keys())constinstall=(Vue)=>{requireComponent.keys().forEach(fileName=>{letconfig=requireComponent(fileName);console.log(config)console.log(requireComponent.default)//控制台.log(parseVarNameByFilePath(fileName))//letcomponentName=changeStr(parseVarNameByFilePath(fileName))letcomponentName=parseVarNameByFilePath(fileName)console.log(componentName)//letcomponentName=changeStr(//fileName.replace(/^\.\//,'')。关于place(/\.\w+$/,'')//)Vue.component(componentName,config.default||config);})}exportdefault{install}requireComponent.keys()outputs['./child1.vue','./child2.vue']main.js引入文件Vue.use(index);

最新推荐
猜你喜欢