标签：Vue const 注册 vue components 组件 import string

一劳永逸的组件注册
场景还原：

import BaseButton from ./baseButton
import BaseIcon from ./baseIcon
import BaseInput from ./baseInput

export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}
<BaseInput
v-model=“searchText”
@keydown.enter=“search”
/>
<BaseButton @click=“search”>

我们写了一堆基础UI组件，然后每次我们需要使用这些组件的时候，都得先import，然后声明components，很繁琐！秉持能偷懒就偷懒的原则，我们要想办法优化！

招式解析：
我们需要借助一下神器webpack，使用 require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。这个方法需要3个参数：要搜索的文件夹目录，是否还应该搜索它的子目录，以及一个匹配文件的正则表达式。
我们在components文件夹添加一个叫global.js的文件，在这个文件里借助webpack动态将需要的基础组件统统打包进来。

import Vue from vue

function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
. , false, /.vue$/
//找到components文件夹下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)

const componentName = capitalizeFirstLetter(
fileName.replace(/^.//, ).replace(/.w+$/, )
//因为得到的filename格式是: ./baseButton.vue , 所以这里我们去掉头和尾，只保留真正的文件名
)

Vue.component(componentName, componentConfig.default || componentConfig)
})
最后我们在main.js中import components/global.js ，然后我们就可以随时随地使用这些基础组件，无需手动引入了。

标签：Vue,const,注册,vue,components,组件,import,string
来源： https://blog.csdn.net/CarrreyYan_979292/article/details/111604831

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。