Использование VueJS в многостраничном проекте WebForms

Question

У меня есть проект webforms, в котором я хотел бы использовать VueJS, но у меня проблемы с настройкой корневого элемента.

Если я заверну свое содержимое в элемент <div id="app"></div> и передам его экземпляру Vue:

 new Vue({
    el: '#app',
    components: {
        foo
    },
    data: {
    },
    methods: {
    }
});

С тестовым компонентом, таким как:

var foo = Vue.component('foobar', {
    props: [
        'title'
    ],
    data: function () {
        return {
        };
    }
});

И пример встроенного шаблона компонента:

<foobar inline-template title="Hello world">
    <div>
        <h1>{{title}}</h1>
    </div>
</foobar>

Я получаю сообщение об ошибке консоли Vue, потому что оно пытается проанализировать все содержимое страницы как шаблон Vue и в некоторых сценариях диспетчера сценариев происходит сбой с ошибкой [Vue warn]: Error compiling template::

<div id="app">
    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$manScript', 'aspnetForm', 
['tctl00$ctxM','','tctl00$pnlMessagePlaceholder$pMP',''], [], [], 90, 
'ctl00');
//]]>
</script>

Как я могу включить VueJS в проект веб-форм и избежать этих ошибок синтаксического анализа шаблона?

Answer 1

Не уверен, есть ли официально предложенное решение для этого. Наверное, просто плохая практика, чтобы использовать его так. Один из хакерских способов избавиться от предупреждения - переместить теги сценария с помощью javascript внизу тела документа, прежде чем ваш код Vue будет выполнен:

const scripts = document.querySelector('#app').querySelectorAll('script');
for (let i = 0; i < scripts.length; i++) {
   document.body.appendChild(scripts[i]);
}

Answer 2

Что касается Vue.js, то предоставленный вами код работает так:

HTML-файл

<div id="app">
<foo-component title="Hello world">   
</foo-component>
</div>

файл javascript

var foo = Vue.component('foo-component', {
    props: [
        'title'
    ],
    data: function () {
        return {
        };
    },
  template:` <div>
        <h1>{{title}}</h1>
    </div>`
    });

new Vue({
    el: '#app'
});

Вы зарегистрировали компонент как foo-component, но затем назвали 'foobar'. Кроме того, ваш экземпляр Vue должен быть размещен после создания компонента, чтобы он его распознал.