javascript - 如何将 Vue.js 与来自 CMS 的服务器端渲染内容结合起来？

Question

比方说，情况是这样的:

• 内容通过 WordPress 或 TYPO3 等“经典”CMS 管理
• 内容由 CMS 作为完全呈现的 HTML 和 CSS 交付

在前端 Vue.js 应该用于与 UI 的所有交互。

---

尽管我阅读了大部分 vue 文档以及页面 Vue.js Server-Side Rendering Guide以及Usage in non-Node.js Environments ，我仍然不确定如何进行这项工作。

---

一个例子^*

该页面有一个组件，它基本上是一个产品列表。对于使用 JavaScript 的每个人来说，此列表顶部都有一个过滤器。

现在，我从 CMS 获得了完整的呈现列表，例如:

<div class="product-component">
    <ul class="products">
        <li data-id="1">Product 1</li>
        <li data-id="2">Product 2</li>
        <li data-id="3">Product 3</li>
    </ul>
</div>

JavaScript 运行后，它应该是这样的:

<div id="product-component">
    <form>
        <select>
            <option value="1">Show Product 1 only</option>
        </select>
    </form>
    
    <ul class="products"></ul>
</div>

---

Vue.js 中的组件可能是这样的:

<div id="product-component">
    <form>
        <!-- Vue.js logic for the filter -->
    </form>

    <ul class="products">
        <li v-for="product in products">
            {{ product.name }}
        </li>
    </ul>
</div>


var vm = new Vue({
  el: '#product-component',
  data: {
    products: [
        {id: 1, name: 'Product 1'},
        {id: 2, name: 'Product 2'},
        {id: 3, name: 'Product 3'},
    ],
    filterCurrent: null,
  }
});

---

现在我的问题是:

• 如何将 Vue.js 挂接到预渲染模板中？
• 如何在运行时更新/注入(inject) Vue.js 变量(尤其是 data)？
  • 这意味着:如何将 CMS 中的产品列表导入到组件中？
• 由于列表和模板的那部分已经呈现，Vue.js 是否必须在初始化后重新呈现它？
• 这在 Vue.js' Lifecycle 中是如何表示的？ ？

最后但同样重要的是:这样的设置是否可行？

---

_{^* 该代码只是用来说明问题的伪代码。}

Answer 1

只要在自己的扩展中，通过JSON渲染数据是没有问题的。 Vue.js 可以获取它们并接管前端渲染。