从文件夹中自动全局注册 vue 单个文件组件
Posted
技术标签:
【中文标题】从文件夹中自动全局注册 vue 单个文件组件【英文标题】：Automatic global register vue single file components from folder 【发布时间】：2020-01-03 00:04:48 【问题描述】：我在 ./components/basic 文件夹中收集了所有简单的全局组件，我想在全局范围内自动注册它。
代码如下：
import Vue from "vue";
import upperFirst from 'lodash/upperFirst';
import camelCase from 'lodash/camelCase';
const requireComponent = require.context('./components/basic/', true, /[A-Z]\w+\.(vue|js)$/);
requireComponent.keys().forEach(fileName =>
const componentConfig = requireComponent(fileName)
const componentName = upperFirst(camelCase(fileName.split('/').pop().replace(/\.\w+$/, '')));
Vue.component(componentName, componentConfig.default || componentConfig);
);
new Vue(
el: "#app"
);
index.html 片段：
<body>
<div id="app">
<MyBasic></MyBasic>
</div>
<script src="./dist/main.js"></script>
</body>
最后是一个组件 MyBasic.vue：
<template>
<h1>My basic component</h1>
</template>
<script>
export default
name: 'MyBasic',
data()
return
header: "Hi!"
</script>
<style></style>
Evething 似乎是正确的，但实际上它会向控制台发出警告，并且我的组件不起作用：
[Vue warn]: Unknown custom element:
- 你注册了 组件正确吗？对于递归组件，请确保提供 “名称”选项。 （在根目录中找到）
注册脚本出了什么问题？
【问题讨论】：
您是否尝试过将控制台日志记录放在forEach 中以尝试找出问题所在？
@skirtle nope，但我已经对其进行了调试，发现一切正常：Vue 组件位于文件夹中，Vue 对象已创建并将其放入注册函数。
【参考方案1】：
问题是您直接在 DOM 中使用 PascalCase：
https://vuejs.org/v2/guide/components-registration.html#Name-Casing
但是请注意，只有 kebab-case 名称在 DOM 中直接有效（即非字符串模板）。
浏览器会将<MyBasic> 转换为<mybasic>，如错误消息所示。您需要在index.html 中使用<my-basic>。
另见https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended
【讨论】：
哦，出于某种原因，我认为 DOM 中的组件应该与其名称相同。我的不好:(非常感谢您的全面回答以上是关于从文件夹中自动全局注册 vue 单个文件组件的主要内容，如果未能解决你的问题，请参考以下文章