为什么Vue.js不能在Shopify主题中工作?

b4qexyjb  于 2023-01-27  发布在  Vue.js
关注(0)|答案(2)|浏览(301)

我想在我的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>
vuktfyat

vuktfyat1#

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

你完全可以在Shopify商店上使用Vue或者其他任何框架--Shopify所做的一切就是为你提供一种模板语言,你可以用它来访问商店相关的信息。(而且我已经看到很多任意的JavaScript加载到各种存储中!)尽管技巧是很多模板语言使用类似的分隔符,因此,如果您使用的东西也使用{{}}{%%}语法,您需要告诉Shopify不要在服务器端解析这些部分。
在您的情况下,只需将挂载点更新为:

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

of1yzvn42#

在Vue 3中,您可以使用自定义分隔符:

Vue.createApp({ delimiters: ["${", "}"] })

然后在模板中:

<div>${this.someVueData}</div>

相关问题