為什么 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 %}

Answer 2

盡管您正在加載當前的 Vue 版本，但您的語法看起來像 Vue 2 語法。

相同的應用程序，但 Vue 3：

<script>
  console.log('run-vue');
  
  const app = {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }

  Vue.createApp(app).mount('#app');
</script>

Answer 3

在 Vue 3 中，您可以使用自定義分隔符：

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

然后在模板中：

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