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

Question

<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：

我认为自 module you are trying to use as a Vue plugin do not follow the conventions especified on the Vue documentation 以来不会起作用。

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

Vue-CLI Webpack how do you import vue-shopify-products library?

vue.js

vue-cli