vue利用自定义插件和组件实现一个商品列表页，包含商品图、商品名、价格

这里提供一种实现思路：

1. 创建一个Vue插件，包含一个商品列表组件和商品数据

// plugin.js
import ProductList from './ProductList.vue'

const products = [
  {
    id: 1,
    name: '商品1',
    price: 10,
    image: 'https://picsum.photos/200/200'
  },
  {
    id: 2,
    name: '商品2',
    price: 20,
    image: 'https://picsum.photos/200/200'
  },
  {
    id: 3,
    name: '商品3',
    price: 30,
    image: 'https://picsum.photos/200/200'
  },
]

export default {
  install(Vue) {
    Vue.component('ProductList', ProductList)
    Vue.prototype.$products = products
  }
}

2. 创建一个商品列表组件，使用Vue插槽和props渲染商品数据

<!-- ProductList.vue -->
<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id" class="product-item">
      <img :src="product.image" alt="" class="product-image">
      <div class="product-info">
        <h3 class="product-name">{{ product.name }}</h3>
        <p class="product-price">{{ product.price }} 元</p>
        <slot :product="product"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    products: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 200px;
  margin: 10px;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.product-name {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.product-price {
  margin: 0;
  font-size: 14px;
  color: #f00;
}
</style>

3. 在Vue项目中使用自定义插件和组件

import Vue from 'vue'
import App from './App.vue'
import ProductPlugin from './plugin'

Vue.use(ProductPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

4. 在商品列表页面使用ProductList组件渲染商品数据

<!-- ProductListPage.vue -->
<template>
  <div class="product-list-page">
    <h1>商品列表</h1>
    <ProductList :products="$products">
      <template v-slot:default="{ product }">
        <button @click="addToCart(product)">加入购物车</button>
      </template>
    </ProductList>
  </div>
</template>

<script>
export default {
  methods: {
    addToCart(product) {
      console.log('加入购物车', product)
    }
  }
}
</script>

<style>
.product-list-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>

这样就完成了一个简单的商品列表页，包含商品图、商品名、价格，并且实现了点击加入购物车的功能。