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

Question

比方说，情况是这样的：

• 内容通过“经典”CMS（例如 WordPress 或 TYPO3）进行管理
• 内容由 CMS 以完全呈现​​的 HTML 和 CSS 形式提供

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

---

尽管我阅读了 vue 的大部分文档以及Vue.js 服务器端渲染指南以及非 Node.js 环境中的使用页面，但我仍然不确定如何进行这项工作。

---

一个例子^*

该页面有一个组件，基本上是产品列表。对于每个使用 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 挂接到预渲染模板中？
• 如何data在运行时更新/注入 Vue.js 变量（尤其是）？
  • 这意味着：如何将 CMS 中的产品列表获取到组件中？
• 由于列表和模板的该部分已经渲染，Vue.js 必须在初始化后重新渲染它吗？
• 这是如何在Vue.js 的生命周期中表示的？

最后但并非最不重要的一点是：设置是否可能？

---

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

Answer 1

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