如何使用来自 CMS 的服务器端渲染内容来补充 Vue.js？

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 挂接到预渲染的模板中？
• 如何在运行时更新/注入 Vue.js 变量（尤其是data）？
  • 这意味着：如何将 CMS 中的产品列表获取到组件中？
• 由于列表和模板的那部分已经渲染，Vue.js 是否必须在初始化后重新渲染它？
• Vue.js' Lifecycle 中如何表示？

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

---

_{^*代码只是为了说明问题的伪代码。}

Answer 1

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