Как я могу импортировать компонент Vue из пакета NPM в Codepen?
Я столкнулся с проблемой с созданной мной библиотекой, которую я пытаюсь воспроизвести / исправить, создав простой Codepen, который ее использует. Однако я раньше не использовал Codepen, и у меня возникли проблемы с началом работы, так как я привык просто ссылаться на вещи через систему импорта / экспорта ES6, а webpack все сворачивает.
Библиотека, которую я пытаюсь отлаживать, распространяется через NPM, и я попытался импортировать ее через URL-адрес unpkg. В настройках пера я также настраиваю импорт Vue непосредственно перед ним, так как он требует, чтобы он был доступен глобально. Библиотека предоставляет компонент Vue, который я пытаюсь использовать в качестве экспорта по умолчанию, но я получаю ReferenceError: ExpandableGrid is not defined, когда пытаюсь его использовать.
Вот моя ручка. Для удобства я воспроизвел его как фрагмент ниже:
new Vue({
el: "#app",
components: {
ExpandableGrid
}
});#app {
width: 100vw;
height: 100vh;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/vue-expandable-grid.umd.min.js"></script>
<div id = "app">
<ExpandableGrid />
</div>@ippi, ха, вы разместили именно то, что я пробовал, и получили именно ту проблему, которую вы описали. Да, я не знаком с тем, как работал UMD (мой процесс сборки по умолчанию генерировал распространяемые umd и commonjs) - судя по тому, на что я взглянул, кажется, что UMD более современен, чем commonjs, и это то, на что я должен ссылаться, но До сих пор я не понимал, как это работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
- в шаблонах DOM имена компонентов должны быть написаны кебаб-регистром.
- Самозакрывающиеся теги недопустимы в шаблонах DOM, за исключением пустых элементов.
- используйте window ['vue-expandable-grid']. по умолчанию
<div id = "app">
<expandable-grid></expandable-grid>
</div>
new Vue({
el: "#app",
components: {
ExpandableGrid: window['vue-expandable-grid'].default
}
});
const ExpandableGrid = window["vue-expandable-grid"];(из-за модуля umd в браузере (здесь)). тогда я считать ваша следующая проблема заключается в том, что ваш модуль не имеет свойства имени (или так говорит журнал консоли).