Автоматический глобальный регистр компонентов одного файла vue из папки

Я собираю все свои простые глобальные компоненты в папку ./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>

Все кажется правильным, но на самом деле это выдает предупреждение на консоль, и мой компонент не работает:

[Предупреждение Vue]: Неизвестный пользовательский элемент: ‹mybasic› - вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «имя». (находится в корне)

Что не так со скриптом регистрации?


vuejs2 webpack-4
person Yes Man    schedule 29.08.2019    source источник
comment
Вы пробовали поместить ведение журнала консоли внутрь forEach, чтобы попытаться определить, где возникает проблема?   -  person skirtle    schedule 29.08.2019
comment
@skirtle нет, но я его отладил и выяснил, что все в порядке: компонент Vue находится в папке, создается объект Vue, и он запускается для функции регистрации.   -  person Yes Man    schedule 30.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что вы используете PascalCase непосредственно в DOM:

https://vuejs.org/v2/guide/components-registration.html#Name-Casing

Обратите внимание, однако, что только имена kebab-case действительны непосредственно в DOM (т. Е. Нестроковые шаблоны).

Браузер преобразует <MyBasic> в <mybasic>, как показано в сообщении об ошибке. Вам нужно использовать <my-basic> вместо index.html.

См. Также https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended

person skirtle    schedule 30.08.2019
comment
О, почему-то я подумал, что компоненты в DOM должны иметь одинаковые имена. Моя проблема :( Большое спасибо за исчерпывающий ответ - person Yes Man; 02.09.2019