为什么 Vue.js 在 Shopify 主题中不起作用？
Why does Vue.js not work in Shopify theme?
我想在我的 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>
TLDR：Vue 使用的模板语法与 Liquid 过于相似 - 您需要使用 {% raw %} 标签。
您绝对可以在 Shopify 商店上使用 Vue 或任何其他任意框架 - Shopify 所做的只是为您提供一种模板语言，您可以使用它来访问与商店相关的信息。您可以加载任意 JS（我已经看到很多任意 javascript 被加载到各种商店中！）但诀窍在于许多模板语言使用类似的分隔符，所以如果您使用的东西也使用 {{}} 或 {%%} 语法，您需要告诉 Shopify 不要在服务器端解析这些部分。
在您的情况下，安装点只需要更新为：
{% raw %}
<div id="app">
{{ message }}
</div>
{% endraw %}
我想在我的 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>
TLDR：Vue 使用的模板语法与 Liquid 过于相似 - 您需要使用 {% raw %} 标签。
您绝对可以在 Shopify 商店上使用 Vue 或任何其他任意框架 - Shopify 所做的只是为您提供一种模板语言，您可以使用它来访问与商店相关的信息。您可以加载任意 JS（我已经看到很多任意 javascript 被加载到各种商店中！）但诀窍在于许多模板语言使用类似的分隔符，所以如果您使用的东西也使用 {{}} 或 {%%} 语法，您需要告诉 Shopify 不要在服务器端解析这些部分。
在您的情况下，安装点只需要更新为：
{% raw %}
<div id="app">
{{ message }}
</div>
{% endraw %}