Javascript 将Vue.js混合到现有SSR网站中？

使用Vue创建组件是否可能/可行，这些组件可以实例化到PHP应用程序呈现的自定义标记上？某种“定制元素轻”

如果我将Vue实例装载到页面根元素上，它会“起作用”，但据我所知，在这种情况下，Vue将整个页面用作模板。我认为这可能是一个性能问题，如果其他javascript代码弄乱了DOM，就会造成麻烦

目标是逐步替换遗留jQuery代码。对于这个问题有一个共同的方法吗

编辑：嵌套这些组件也是一项要求。一个简单的例子是嵌套的可折叠文件

编辑2：一些小提琴来说明问题

基于riot.js的工作解决方案：

这是一个测试

riot.mount（“*”）

使用Vue.js的两种方法：

HTML:

这是一个测试

Javascript:

Vue.config.ignoreCustomElements = ['test'];

// This won't hit the nested <test> element.
new Vue({
    el:'test',
    template: '#test-template',
});

// This does, but takes over the whole page.
Vue.component('test', {
    template: '#test-template',
});

new Vue({
  el: '#page',
});

Vue.config.ignoreCustomElements=['test']；
//这不会影响嵌套元素。
新Vue({
el:“测试”，
模板：“#测试模板”，
});
//这是，但占据了整个页面。
Vue.组件（“测试”{
模板：“#测试模板”，
});
新Vue({
el:'第页'，
});

您不必将整个页面用作Vue实例范围。例如，可以使用

#comments container

作为comments组件的作用域，该组件将嵌套在页面的某个位置

---

您可以在一个页面上有多个VueJS实例。

Vue

实例是独立的，除非它们是组件，所以从具有本地化功能的独立的

Vue

开始，稍后完成后，将它们转换为组件并使用单个Vue应用程序。我忘了提到嵌套也是一项要求。相应地编辑了问题。没关系，您可以在每个Vue实例中使用组件。只是不要在这些独立项之间共享实例。始终创建自己的。。工作正常吗？我是说相互嵌套。不嵌套在页面上。我制作了一把小提琴来说明这个问题：

<div id="page">
  <!-- This is supposed to show "This is a test." twice. -->
  <test>
    <test></test>
  </test>
</div>
<script type="text/x-template" id="test-template">
  <p>This is a test.</p>
  <slot></slot>
</script>

Vue.config.ignoreCustomElements = ['test'];

// This won't hit the nested <test> element.
new Vue({
    el:'test',
    template: '#test-template',
});

// This does, but takes over the whole page.
Vue.component('test', {
    template: '#test-template',
});

new Vue({
  el: '#page',
});