Я пытаюсь достичь чего-то, что, как я считаю, должно быть возможным, однако в настоящее время я не смог ни достичь этого, ни найти какой-либо материал, указывающий в правильном направлении!
В идеале я хотел бы собрать набор компонентов с помощью SFC (.vue-файлов) и скомпилировать их.С точки зрения использования этих компонентов они должны быть в состоянии быть размещенными на существующей HTML-странице, и дополнительный HTML-код передается в компонент посредством использования slot.У меня уже есть последняя теория, работающая через скомпилированный SFC и компонент App для Vue-CLI.Это, очевидно, работает, рисуя весь контент в <div id="app">..., в идеале мне нужно уйти от этого и получить следующее:
<body>
<div id="app">
<div class="row">
<div class="col-xs-4">
<filters></filters> <!-- "Filter" component -->
</div>
<div class="col-xs-8">
<result-list>
<div>I'm a result template!</div>
</result-list>
</div>
</div>
</div>
</body>
На всей странице будет использоваться Vuex для обработки состояния между двумя модулями.,В настоящее время, если я пытаюсь изменить main.js (входит в состав vue-cli create .) с:
new Vue({
store,
render: h => h(App)
}).$mount("#app");
на:
new Vue({
store,
components: {
ResultList
},
el: "#app"
});
Это приводит к ошибке консоли:
Неизвестный пользовательский элементВы правильно зарегистрировали компонент?
Мое первоначальное чтение предполагает, что это потому, что все скомпилировано, и поэтому Vue не может распознать элемент, но я изменил файл vue.config.js, чтобы обеспечить runtimeCompiler установлен на true, к сожалению, это не поможет ни в малейшей степени.
Кто-нибудь может указать мне правильное направление, возможно, примеры того, где этот подход, возможно, был сделан в прошлом, или если я схожу с ума, и это на самом деле невозможно?
Спасибо,
Крис.