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不是函数'。包含Vue-Shopify-Products和引用$ formatProducts函数的正确方法是什么？

Answer 1

由于它是作为依赖项安装的npm包，因此您应该以这种方式导入它，

import defaultExport from "module-name";

所以这应该有效：

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

之后，您可以删除模块的脚本引用。

修改1：

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

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

1 个答案: