Vue-CLI Webpack环境下正确引入vue-shopify-products及调用$formatProducts方法

这个报错的核心原因是你在webpack环境下的插件导入方式不正确，导致Vue没有正确注册vue-shopify-products插件的全局方法。下面是修正后的完整步骤：

1. 确认依赖安装（如果还没装） #

首先确保你已经通过npm安装了这个库：

npm install vue-shopify-products --save

2. 修正main.js中的导入与注册代码 #

你之前用import * as shopifyProducts from 'vue-shopify-products'导入的是整个模块的命名空间对象，但Vue插件通常是以默认导出的方式提供的，所以需要改成默认导入：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import * as d3 from 'd3'
// 改为默认导入插件对象
import 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() {
    d3.csv('/static/data/csv-files/bicycles.csv', (data) => {
      // 现在可以正常调用原型上的$formatProducts方法
      let products = this.$formatProducts(data)
      console.log(products)
    })
  }
})

为什么这样能解决问题？ #

当你使用Vue.use()时，它需要接收一个符合Vue插件规范的对象（包含install方法）。vue-shopify-products库的npm包是把插件对象作为默认导出的，而import * as...会把所有导出内容打包成一个对象，导致Vue无法识别正确的插件结构，自然也就不会把$formatProducts挂载到Vue原型上。

改成默认导入后，Vue就能正确执行插件的install方法，将$formatProducts添加到Vue的原型链中，这样你的组件和实例就能通过this.$formatProducts正常调用了。

内容的提问来源于stack exchange，提问作者Dave Green