Vue-CLI Webpack 如何导入 vue-shopify-products 库？

Question

documentation 是这样说的：

<script type="text/javascript" src="assets/js/vue-shopify-products.js"></script>

然后在你初始化 vue 之前，你这样做：

 Vue.use(ShopifyProducts);

如果你使用vue-cli webpack template?，你会怎么做

我的 main.js 文件如下所示

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import * as d3 from 'd3'
import * as shopifyProducts from 'vue-shopify-products'

Vue.config.productionTip = false

Vue.use(shopifyProducts)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',

  created: function () {
    d3.csv('/static/data/csv-files/bicycles.csv', (data) => {
      let products = this.$formatProducts(data)
      console.log(products)
    })
  }
})

这不起作用，因为我收到错误“Uncaught (in promise) TypeError: _this.$formatProducts is not a function”。包含 Vue-Shopify-Products 和引用 $formatProducts 函数的正确方法是什么？

Answer 1

因为它是作为依赖安装的npm包，所以你应该这样导入，

import defaultExport from "module-name";

所以这应该可以工作：

import ShopifyProducts from "vue-shopify-products";
Vue.use(ShopifyProducts);

之后就可以去掉模块的脚本引用了。

编辑 1：

我认为这不会起作用，因为您尝试用作 Vue 插件的 module 不遵循 Vue documentation 上指定的约定。