Я пытаюсь загрузить отдельные автономные файлы HTML в мое приложение Vue.js в виде изолированных приложений в виде песочницы, которые затем я хочу преобразовать в изолированные компоненты, где ни один из кодов в загруженном файле не будет мешатькод приложения Vue и наоборот - что-то вроде стилей области действия Vue, но не только для стилизации, но также для разметки и функциональности.
Идея этих автономных HTML-файлов заключается в том, что кто-то должен иметь возможность написать одинФайл .html, содержащий все стили (в <head>) и функциональные возможности (в <script>) и загружающий его на сервер, с которого мое приложение Vue затем извлечет эти файлы и отобразит их как компоненты настраница, , но важная часть заключается в том, что у вас должна быть возможность писать файлы компонентов HTML так, как вы хотите. Например, я должен иметь возможность писать HTML / CSS / Vanilla.js или HTML / CSS /Jquery и т. Д. В основном это должно работать как iframes, но как компоненты Vue.js, если это имеет смысл?
Вот что яМы попробовали:
Автономный одностраничный HTML-файл
<!--
To get this code, my Vue app does an asynchronous GET call to localhost:3000/test,
which returns this file as a string. but in practice, it won't really matter where
the file comes from.
-->
<html>
<head>
<title></title>
<script src="url-to-jquery-cdn" crossorigin="anonymous"></script>
</head>
<body>
<p>External Component 1. Wooo!</p>
<button onclick="serverCall()">Server Call!</button>
<script>
function serverCall() {
console.log('Bam!');
$.ajax({
type: 'POST',
url: 'http://localhost:3000/test',
success: data => {
console.log('success!', data);
}
});
}
</script>
</body>
</html>
main.js
Эта часть, кажется, работает нормально (т. е. не выдается никаких ошибок).
// ...
Vue.component('external-component', function(resolve, reject) {
Vue.http.get('http://localhost:3000/test').then(data => {
const doc = new DOMParser().parseFromString(data.body, 'text/html');
resolve({
template: doc
});
}).catch(err => {
console.log('err:', err);
});
});
// ...
App.vue
Но здесь возникает проблема
<template>
<div class="home">
<external-component></external-component>
</div>
</template>
<script>
export default {}
</script>
Как только я добавляю тег компонента в файл .vue, он выдает следующие две ошибки:
[Vue warn]: Error in nextTick: "TypeError: vm.$options.template.charAt is not a function"
TypeError: vm.$options.template.charAt is not a function
at mountComponent (vue.runtime.esm.js?2b0e:4021)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5972)
at createElm (vue.runtime.esm.js?2b0e:5919)
at updateChildren (vue.runtime.esm.js?2b0e:6210)
at patchVnode (vue.runtime.esm.js?2b0e:6313)
at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6476)
at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3942)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
Если кто-нибудь может посоветовать мне, как я мог бы реализовать этот тип функциональности, я был бы очень признателен.Я также открыт для предложений, которые полностью меняют парадигму или даже не включают Vue.js.