在 Shopify 商店中嵌入 Vue 组件

Question

在产品页面中，我试图显示自定义 Vue 组件。为简洁起见，该组件根据给定的产品 ID 显示来自 Firebase 数据库的一些信息。

我最初试图将其制作成一个 Shopify 应用程序，这样我就可以访问他们的 API。我实施了 OAuth 并且可以检索所需的信息。但是，实际上将该组件包含在商店中却没有成功。

在 Shopify 中包含 Vue 的最佳方式是什么？

我试过将脚本文件直接包含在模板文件、代码片段中，并将它们包含在全局脚本标签中。但是我尝试过的任何东西都无法渲染一个简单的组件。

里面product.liquid:


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

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

<script>
  var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

在 Vue 开发人员工具中，组件出现在 DOM 中，但 "Hello Vue!" 消息没有按应有的方式出现。

控制台中没有其他错误。哪个最令人费解。

如能深入了解将 Vue 纳入 Shopify 的正确方法，我们将不胜感激。

Answer 1

Liquid 文件默认解析 {{ }} 标签。所以你需要改变你的模板机制。以下是适用于 Shopify Liquid 文件的更新代码 -

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

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    delimiters: ['${', '}']
  })
</script>

基本上，我添加了分隔符，vue 将检查这些分隔符以查找模板，它们与 Shopify 解析不同，后者将导致 shopify 不解析那些持有者。您可以在此处阅读有关 vue 分隔符的更多信息 - Link

在 Shopify 商店中嵌入 Vue 组件

Embed Vue component within Shopify store

javascript

shopify

vuejs2

shopify-app