vue、利用自定义插件和组件实现一个商品列表页

首先，我们需要安装 Vue：

npm install vue

然后，我们可以创建一个 Vue 实例，并在其中引入我们的自定义插件和组件：

import Vue from 'vue'
import ProductList from './components/ProductList.vue'
import MyPlugin from './plugins/MyPlugin.js'

Vue.use(MyPlugin)

new Vue({
  el: '#app',
  components: {
    'product-list': ProductList
  }
})

在上面的代码中，我们首先引入了 `ProductList` 组件和 `MyPlugin` 插件。然后，我们使用 `Vue.use` 方法注册了该插件。最后，我们创建了一个 Vue 实例，并在其中注册了 `ProductList` 组件。

接下来，我们可以在 `ProductList` 组件中使用我们的插件：

export default {
  data () {
    return {
      products: []
    }
  },
  mounted () {
    this.$myPlugin.fetchProducts()
      .then(products => {
        this.products = products
      })
  }
}

在上面的代码中，我们使用 `$myPlugin` 属性访问了我们的插件，并调用了其中的 `fetchProducts` 方法来获取商品列表，并将其保存在组件的 `products` 数据属性中。

最后，我们可以在模板中使用我们的组件：

<div id="app">
  <product-list></product-list>
</div>

在上面的代码中，我们使用了 `product-list` 组件，并将其作为根元素放在了 `#app` 容器中。当 Vue 实例挂载时，该组件将会被渲染，并且自动调用其 `mounted` 钩子函数中的代码，从而获取商品列表并显示在页面上。