为什么 Vue.js 在 Shopify 主题中不起作用？

Question

我想在我的 shopify 主题中使用 Vue.js。所以在主题中添加了这段代码。 但它不起作用。现在没有结果！我不确定是什么问题。有人可以帮我解决这个简单的问题吗？谢谢

注意：我已经创建了一个test.html 并复制粘贴以下代码。但它在简单的html 文件上正常工作。但为什么它在 shopify 上不起作用？

<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{ message }}
</div>

<script>
  console.log('run-vue');
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

Answer 1

TLDR：Vue 使用的模板语法与 Liquid 过于相似 - 您需要使用 {% raw %} 标签。

您绝对可以在 Shopify 商店中使用 Vue 或任何其他任意框架 - Shopify 所做的只是为您提供一种模板语言，您可以使用它来访问与商店相关的信息。您可以加载任意 JS（我已经看到很多任意 javascript 加载到各种商店中！）但诀窍是许多模板语言使用类似的分隔符，所以如果您使用也使用 {{}} 或 {%%} 的东西您需要告诉 Shopify 不要在服务器端解析这些部分的语法。

在您的情况下，只需将安装点更新为：

{% raw %}
  <div id="app">
    {{ message }}
  </div>
{% endraw %}